Skip to content

Commit

Permalink
fix: style adaptate
Browse files Browse the repository at this point in the history
  • Loading branch information
hello-astar committed Mar 28, 2021
1 parent f520743 commit fcb87b4
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 38 deletions.
4 changes: 2 additions & 2 deletions src/utils/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Description:
* @Author: astar
* @Date: 2021-02-10 14:50:36
* @LastEditTime: 2021-03-28 01:02:03
* @LastEditTime: 2021-03-28 01:04:09
* @LastEditors: astar
*/
import { getToken } from '@/utils/token'
Expand Down Expand Up @@ -46,6 +46,6 @@ export const loadScript = (url, cb) => {
elem.addEventListener('load', function () { cb(true) }, false);
elem.addEventListener('error', function () { cb(false) }, false);
elem.src = url;
// elem.crossOrigin = 'anonymous';
elem.crossorigin = 'anonymous';
window.document.body.appendChild(elem);
}
20 changes: 12 additions & 8 deletions src/utils/setRem.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,29 @@
* @Description:
* @Author: astar
* @Date: 2020-09-16 20:07:43
* @LastEditTime: 2020-09-17 18:32:02
* @LastEditTime: 2021-03-28 20:13:26
* @LastEditors: astar
*/
import { os } from '@/utils/browser';
export default function (doc, win) {
let docEl = win.document.documentElement;
let metaEl = doc.querySelector('meta[name="viewport"]');
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
export const getDpr = function () {
let dpr = 0;
let scale = 0;
// 对iOS设备进行dpr的判断,对于Android系列,始终认为其dpr为1
let devicePixelRatio = win.devicePixelRatio;
let devicePixelRatio = window.devicePixelRatio;

if(os.ios || os.android) {
dpr = devicePixelRatio;
} else {
dpr = 1;
}
scale = 1 / dpr;
return dpr;
}

export default function (doc, win) {
let docEl = win.document.documentElement;
let metaEl = doc.querySelector('meta[name="viewport"]');
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let dpr = getDpr();
let scale = 1 / dpr;
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
Expand Down
69 changes: 41 additions & 28 deletions src/views/chat/index.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="vue-chat">
<div :class="getClass">
<div class="content">
<aside class="sidebar">
<div class="userinfo">
Expand Down Expand Up @@ -48,6 +48,7 @@ import expressions from './components/expression/config';
import expressionItem from './components/expression/expressionItem';
import { removeToken } from '@/utils/token';
import { getHistoryChatByCount } from '@/request';
import { getDpr } from '@/utils/setRem';
export default {
name: "chat",
Expand Down Expand Up @@ -164,7 +165,24 @@ export default {
}
},
computed: {
...mapGetters(['userInfo'])
...mapGetters(['userInfo']),
getClass () {
// $dprs: 1, 2, 3, 4;
// @each $dpr in $dprs {
// @media screen and (max-width:#{$dpr * 768}px) and (min-resolution:#{$dpr}dppx) {
// }
// }
let dpr = getDpr();
if (window.innerWidth < dpr * 768) {
return [
'vue-chat',
'vue-chat-small-device'
]
}
return [
'vue-chat'
]
}
},
components: {
inputBox,
Expand Down Expand Up @@ -299,33 +317,28 @@ export default {
}
}
// 兼容屏幕小于ipad的设备
$dprs: 1, 2, 3, 4;
@each $dpr in $dprs {
@media screen and (max-width:#{$dpr * 768}px) and (min-resolution:#{$dpr}dppx) {
.vue-chat {
min-width: auto;
min-height: auto;
.content {
.vue-chat-small-device {
min-width: auto;
min-height: auto;
.content {
width: 100%;
height: 100%;
.sidebar {
display: none; // 小屏上不展示sidebar
}
.main-content {
.input-box {
flex: 0 0 50px;
width: 100%;
height: 100%;
.sidebar {
display: none; // 小屏上不展示sidebar
}
.main-content {
.input-box {
flex: 0 0 50px;
width: 100%;
background: #fff;
textarea {
display: block;
width: 100%;
height: 100%;
padding: 10px;
border: none;
outline: none;
resize: none;
}
}
background: #fff;
textarea {
display: block;
width: 100%;
height: 100%;
padding: 10px;
border: none;
outline: none;
resize: none;
}
}
}
Expand Down

0 comments on commit fcb87b4

Please sign in to comment.