优化
This commit is contained in:
parent
59fb656bd8
commit
1e4c4dc702
@ -44,8 +44,10 @@
|
||||
<script crossorigin="anonymous"
|
||||
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
||||
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
|
||||
<!-- <script>eruda.init();</script>-->
|
||||
<!-- <script crossorigin="anonymous"-->
|
||||
<!-- integrity="sha512-KkkY/3auRhaXDFzFMpwtZ+BrS8EBQ+GfiBxdJ9jGMi6Gg74/sYbq/IZpY593pkNjTmbeRfBwjpZo+7gcpH45Ww=="-->
|
||||
<!-- src="https://lib.baomitu.com/eruda/3.0.1/eruda.min.js"></script>-->
|
||||
<!-- <script>eruda.init();</script>-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
20
src/App.vue
20
src/App.vue
@ -30,15 +30,14 @@ export default {
|
||||
computed: {
|
||||
...mapState(['excludeRoutes']),
|
||||
},
|
||||
methods: {},
|
||||
// watch $route 决定使用哪种过渡
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
|
||||
|
||||
//footer下面的5个按钮,对跳不要用动画
|
||||
let noAnimation = ['/', '/home','/slide', '/me', '/attention', '/message', '/publish', '/home/live',
|
||||
'slide'
|
||||
let noAnimation = ['/', '/home', '/slide', '/me', '/attention', '/message', '/publish', '/home/live',
|
||||
'slide'
|
||||
]
|
||||
if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
|
||||
return this.transitionName = ''
|
||||
@ -49,9 +48,21 @@ export default {
|
||||
this.transitionName = toDepth > fromDepth ? 'go' : 'back'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setVh() {
|
||||
let vh = window.innerHeight * 0.01
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setVh()
|
||||
// 监听resize事件 视图大小发生变化就重新计算1vh的值
|
||||
window.addEventListener('resize', () => {
|
||||
// location.reload()
|
||||
this.setVh()
|
||||
})
|
||||
// window.onresize = () => {
|
||||
// location.reload()
|
||||
//
|
||||
// }
|
||||
// this.$store.dispatch('getFriends')
|
||||
try {
|
||||
@ -64,6 +75,7 @@ export default {
|
||||
}
|
||||
document.onselectstart = new Function("return false")//禁止选中文字
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -20,6 +20,5 @@
|
||||
}
|
||||
|
||||
//消息页面
|
||||
@msg-bg: rgb(22,22,22);
|
||||
@msg-subpage-card-bg: rgb(28, 30, 43); //二级页面,卡片背景
|
||||
|
||||
|
||||
@ -10,6 +10,12 @@
|
||||
//布局
|
||||
@import "anim";
|
||||
|
||||
:root {
|
||||
--color-me: rgb(21, 23, 35);
|
||||
--color-user: rgb(22, 24, 36);
|
||||
--color-message: rgb(21, 21, 21);
|
||||
--home-header-height: 40rem;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@footer-height: 56rem;
|
||||
@header-height: 40rem;
|
||||
@header-height: 50rem;
|
||||
@indicator-height: 43rem;
|
||||
|
||||
@padding-page: 15rem;
|
||||
@ -78,7 +78,6 @@ export default {
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 10rem;
|
||||
top: 20rem;
|
||||
}
|
||||
|
||||
& > :nth-last-child(1) {
|
||||
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: linear-gradient(to bottom, #262626, black);
|
||||
transition: all .3s;
|
||||
font-size: 12rem;
|
||||
|
||||
@ -152,7 +152,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '70vh'
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
z-index: 2;
|
||||
//不用bottom:0是因为,在进行页面切换的时候,vue的transition
|
||||
// 会使footer的bottom:0失效,不能准确定位
|
||||
top: calc(100vh - @footer-height);
|
||||
top: calc(var(--vh, 1vh) * 100 - @footer-height);
|
||||
//bottom: 0;
|
||||
background: @footer-color;
|
||||
color: white;
|
||||
|
||||
@ -186,6 +186,7 @@ import Posters from '@/components/Posters'
|
||||
import {merge} from 'lodash-es'
|
||||
import {DefaultUser} from "@/utils/const_var";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import {FILE_URL} from "@/config";
|
||||
|
||||
const $nav = useNav()
|
||||
const store = useStore()
|
||||
@ -288,7 +289,7 @@ watch(() => props.active,
|
||||
if (newVal && !props.currentItem.aweme_list.length) {
|
||||
// console.log('props.currentItem',props.currentItem)
|
||||
let id = _getUserDouyinId(props.currentItem)
|
||||
fetch(`/data/user-${id}.json`).then(r => {
|
||||
fetch(`${FILE_URL}user-${id}.json`).then(r => {
|
||||
r.json().then(l => {
|
||||
setTimeout(() => {
|
||||
emit('update:currentItem', merge(props.currentItem, {aweme_list: l}))
|
||||
@ -397,7 +398,7 @@ function touchEnd(e) {
|
||||
|
||||
#UserPanel {
|
||||
position: fixed;
|
||||
background: @main-bg;
|
||||
background: var(--color-user);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
@ -434,7 +435,7 @@ function touchEnd(e) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '70vh'
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
},
|
||||
showHengGang: {
|
||||
type: Boolean,
|
||||
|
||||
@ -8,8 +8,15 @@
|
||||
ref="video"
|
||||
muted
|
||||
preload
|
||||
loop
|
||||
x5-video-player-type="h5-page"
|
||||
:x5-video-player-fullscreen='false'
|
||||
:webkit-playsinline="true"
|
||||
:x5-playsinline="true"
|
||||
:playsinline="true"
|
||||
:autoplay="isPlay" loop>
|
||||
:fullscreen="false"
|
||||
:autoplay="isPlay"
|
||||
>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<Icon icon="fluent:play-28-filled" class="pause-icon" v-if="!isPlaying"/>
|
||||
@ -253,7 +260,7 @@ export default {
|
||||
onDialogMove({tag, e}) {
|
||||
if (this.commentVisible && tag === 'comment') {
|
||||
Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
|
||||
Utils.$setCss(this.$refs.video, 'height', `calc(30vh + ${e}px)`)
|
||||
Utils.$setCss(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
|
||||
}
|
||||
},
|
||||
onDialogEnd({tag, isClose}) {
|
||||
@ -264,14 +271,14 @@ export default {
|
||||
this.commentVisible = false
|
||||
Utils.$setCss(this.$refs.video, 'height', '100%')
|
||||
} else {
|
||||
Utils.$setCss(this.$refs.video, 'height', '30vh')
|
||||
Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
|
||||
}
|
||||
}
|
||||
},
|
||||
onOpenComments(id) {
|
||||
if (id === this.item.id) {
|
||||
Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
|
||||
Utils.$setCss(this.$refs.video, 'height', '30vh')
|
||||
Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
|
||||
this.commentVisible = true
|
||||
}
|
||||
},
|
||||
@ -369,6 +376,7 @@ export default {
|
||||
text-align: center;
|
||||
|
||||
video {
|
||||
max-width: 100vw;
|
||||
height: 100%;
|
||||
transition: height, margin-top .3s;
|
||||
//background: black;
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
export default {
|
||||
baseUrl: 'http://192.168.0.103/index.php/v1',
|
||||
filePreview:'http://192.168.0.103/static/uploads/',
|
||||
baseUrl: 'https://dy.ttentau.top/imgs/',
|
||||
imgPath: '/imgs/',
|
||||
filePreview: 'http://192.168.0.103/static/uploads/',
|
||||
|
||||
// baseUrl: 'http://192.168.10.164/index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
// baseUrl: 'http://localhost/index.php/v1',
|
||||
// filePreview:'http://localhost/static/uploads/'
|
||||
}
|
||||
}
|
||||
|
||||
// export const BASE_URL = 'https://dy.ttentau.top'
|
||||
export const BASE_URL = ''
|
||||
export const IMG_URL = BASE_URL + '/imgs/'
|
||||
export const FILE_URL = BASE_URL + '/data/'
|
||||
|
||||
@ -289,7 +289,7 @@ onMounted(() => {
|
||||
.Scroll {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: calc(100vh - @footer-height * 2) !important;
|
||||
height: calc(var(--vh, 1vh) * 100 - @footer-height * 2) !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
|
||||
@ -408,19 +408,19 @@ export default {
|
||||
|
||||
.LivePage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
position: relative;
|
||||
|
||||
.live-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: black;
|
||||
|
||||
img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
color: rgb(229, 229, 229);
|
||||
}
|
||||
}
|
||||
@ -429,7 +429,7 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
@tag-bg: rgba(58, 58, 70, 0.3);
|
||||
|
||||
|
||||
@ -279,7 +279,7 @@ export default {
|
||||
padding-top: 60rem;
|
||||
|
||||
.Scroll {
|
||||
height: calc(100vh - 60rem);
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
||||
@ -202,7 +202,7 @@ export default {
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: @header-height;
|
||||
height: var(--home-header-height);
|
||||
transition: all .3s;
|
||||
font-weight: bold;
|
||||
|
||||
@ -352,7 +352,7 @@ export default {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: #00000066;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="create-chat" v-show="!showJoinedChat">
|
||||
<Search
|
||||
:isShowRightText="isShowRightText"
|
||||
@click="isShowRightText = true;height = '100vh';"
|
||||
@click="isShowRightText = true;height = 'calc(var(--vh, 1vh) * 100)';"
|
||||
@notice="isShowRightText = false;searchKey = '';height = '70vh';"
|
||||
rightText="取消"
|
||||
rightTextColor="gray"
|
||||
|
||||
@ -101,22 +101,21 @@
|
||||
@showSlidebar="state.baseIndex = 0"
|
||||
v-model:index="state.navIndex"
|
||||
/>
|
||||
<div class="slide-content">
|
||||
<SlideHorizontal class="first-horizontal-item"
|
||||
name="main"
|
||||
:change-active-index-use-anim="false"
|
||||
v-model:index="state.navIndex">
|
||||
<Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>
|
||||
<SlideItem>
|
||||
<Community/>
|
||||
</SlideItem>
|
||||
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
|
||||
<SlideItem>
|
||||
<LongVideo :active="state.navIndex === 3 && state.baseIndex === 1"/>
|
||||
</SlideItem>
|
||||
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
|
||||
</SlideHorizontal>
|
||||
</div>
|
||||
<SlideHorizontal class="first-horizontal-item"
|
||||
name="main"
|
||||
:change-active-index-use-anim="false"
|
||||
v-model:index="state.navIndex">
|
||||
<Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>
|
||||
<SlideItem>
|
||||
<Community/>
|
||||
</SlideItem>
|
||||
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
|
||||
<SlideItem>
|
||||
<LongVideo :active="state.navIndex === 3 && state.baseIndex === 1"/>
|
||||
</SlideItem>
|
||||
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
|
||||
</SlideHorizontal>
|
||||
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
<Mask v-if="state.baseIndex === 0"
|
||||
@click="state.baseIndex = 1"
|
||||
@ -135,7 +134,6 @@
|
||||
</SlideItem>
|
||||
</SlideHorizontal>
|
||||
|
||||
|
||||
<Comment page-id="home-index" v-model="state.commentVisible"
|
||||
@close="closeComments"
|
||||
/>
|
||||
@ -315,11 +313,12 @@ function dislike() {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar {
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
overflow: auto;
|
||||
background: rgb(22, 22, 22);
|
||||
padding: 10rem;
|
||||
@ -422,9 +421,9 @@ function dislike() {
|
||||
//width: 90vw;
|
||||
//height: 80vh;
|
||||
width: 100vw;
|
||||
height: calc(100vh - @footer-height) !important;
|
||||
height: calc(var(--vh, 1vh) * 100 - @footer-height) !important;
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -107,7 +107,7 @@ onUnmounted(() => {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15rem;
|
||||
height: calc(100vh - @header-height - @footer-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height - @footer-height);
|
||||
margin-top: @header-height;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
|
||||
.content {
|
||||
margin-top: 60rem;
|
||||
height: calc(100vh - 60rem);
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
|
||||
iframe {
|
||||
padding: 0;
|
||||
|
||||
@ -2447,7 +2447,7 @@ export default {
|
||||
|
||||
.indicator-ctn {
|
||||
width: 25rem;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.Me {
|
||||
background: @main-bg;
|
||||
background: var(--color-me);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 14rem;
|
||||
@ -49,7 +49,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
|
||||
@ -438,7 +438,7 @@ export default {
|
||||
return this.$store.state.bodyWidth
|
||||
},
|
||||
videoSlideRowListStyle() {
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 146rem)'}
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(var(--vh, 1vh) * 100 - 146rem)'}
|
||||
},
|
||||
SlideItemStyle() {
|
||||
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
|
||||
|
||||
@ -431,7 +431,7 @@ export default {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
top: 0;
|
||||
background: rgb(136, 132, 133);
|
||||
|
||||
@ -463,7 +463,7 @@ export default {
|
||||
.my-collect-dialog-enter-from,
|
||||
.my-collect-dialog-leave-to {
|
||||
transition-duration: 300ms;
|
||||
transform: translateY(100vh);
|
||||
transform: translateY(calc(var(--vh, 1vh) * 100));
|
||||
}
|
||||
|
||||
.float-play-enter-active,
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
|
||||
@ -324,7 +324,7 @@ export default {
|
||||
return this.$store.state.bodyWidth
|
||||
},
|
||||
videoSlideRowListStyle() {
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 96rem)'}
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(var(--vh, 1vh) * 100 - 96rem)'}
|
||||
},
|
||||
SlideItemStyle() {
|
||||
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
|
||||
|
||||
@ -186,7 +186,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - @footer-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @footer-height);
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
padding-top: @header-height;
|
||||
|
||||
.Scroll {
|
||||
height: calc(100vh - @header-height)!important;
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
|
||||
#CollectMusic {
|
||||
//width: 100vw;
|
||||
//height: 100vh;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@ -143,7 +143,7 @@ export default {
|
||||
|
||||
#GuessMusic {
|
||||
//width: 100vw;
|
||||
//height: 100vh;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@ -148,7 +148,7 @@ export default {
|
||||
padding-top: 60rem;
|
||||
|
||||
.SlideRowList, .Scroll {
|
||||
height: calc(100vh - @indicator-height - @header-height) !important;
|
||||
height: calc(var(--vh, 1vh) * 100 - @indicator-height - @header-height) !important;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
||||
@ -249,7 +249,7 @@ export default {
|
||||
.type-dialog {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
margin-top: @header-height;
|
||||
|
||||
@ -264,7 +264,7 @@ export default {
|
||||
.mask {
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
background: @mask-dark;
|
||||
}
|
||||
@ -275,7 +275,7 @@ export default {
|
||||
padding-top: @header-height;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
}
|
||||
|
||||
.messages {
|
||||
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
padding-top: @header-height;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
}
|
||||
|
||||
.people-wrapper {
|
||||
|
||||
@ -502,11 +502,11 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 14rem;
|
||||
background: @msg-bg;
|
||||
background: var(--color-message);
|
||||
color: white;
|
||||
|
||||
.no-search {
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
> header {
|
||||
padding: 0 20rem;
|
||||
@ -515,10 +515,8 @@ export default {
|
||||
align-items: center;
|
||||
height: @header-height;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
position: relative;
|
||||
font-size: 24rem;
|
||||
|
||||
}
|
||||
|
||||
.create-chat-wrapper {
|
||||
@ -949,7 +947,7 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -392,7 +392,7 @@ export default {
|
||||
|
||||
.indicator-ctn {
|
||||
width: 25rem;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
@ -540,7 +540,7 @@ export default {
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
background: @msg-bg;
|
||||
background: var(--color-message);
|
||||
|
||||
.chat-content {
|
||||
> .header {
|
||||
@ -582,11 +582,11 @@ export default {
|
||||
}
|
||||
|
||||
.message-wrapper {
|
||||
height: calc(100vh - 125rem);
|
||||
height: calc(var(--vh, 1vh) * 100 - 125rem);
|
||||
overflow: auto;
|
||||
|
||||
&.expand {
|
||||
height: calc(100vh - (125rem + 30vh));
|
||||
height: calc(var(--vh, 1vh) * 100 - (125rem + var(--vh, 1vh) * 30));
|
||||
}
|
||||
}
|
||||
|
||||
@ -654,7 +654,7 @@ export default {
|
||||
font-size: 14rem;
|
||||
width: 100vw;
|
||||
padding: 15rem;
|
||||
height: 30vh;
|
||||
height: calc(var(--vh, 1vh) * 30);
|
||||
box-sizing: border-box;
|
||||
|
||||
.option-wrapper {
|
||||
@ -690,7 +690,7 @@ export default {
|
||||
top: 0;
|
||||
background: black;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
@ -758,7 +758,7 @@ export default {
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
font-size: 14rem;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@ -92,11 +92,11 @@ export default {
|
||||
font-size: 14rem;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
|
||||
.list {
|
||||
padding: @padding-page;
|
||||
|
||||
@ -138,11 +138,11 @@ export default {
|
||||
font-size: 14rem;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
|
||||
.list {
|
||||
padding: @padding-page;
|
||||
|
||||
@ -163,11 +163,11 @@ export default {
|
||||
font-size: 14rem;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height - @header-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
padding: @padding-page;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -145,11 +145,11 @@ export default {
|
||||
font-size: 14rem;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - @header-height - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height - @header-height);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - @header-height);
|
||||
height: calc(var(--vh, 1vh) * 100 - @header-height);
|
||||
|
||||
.list {
|
||||
padding: @padding-page;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
v-model:active-index="slideIndex">
|
||||
</Indicator>
|
||||
</div>
|
||||
<SlideHorizontal v-model:index="slideIndex" style="height: calc(100vh - 111rem)">
|
||||
<SlideHorizontal v-model:index="slideIndex" style="height: calc(var(--vh, 1vh) * 100 - 111rem)">
|
||||
<SlideItem class="tab1">
|
||||
<Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-right-text="false"/>
|
||||
<div class="is-search" v-if="searchKey">
|
||||
|
||||
@ -95,11 +95,11 @@ export default {
|
||||
}
|
||||
|
||||
.video-ctn {
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
|
||||
video {
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,7 +285,7 @@ onMounted(() => {
|
||||
.Scroll {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: calc(100vh - @footer-height * 2) !important;
|
||||
height: calc(var(--vh, 1vh) * 100 - @footer-height * 2) !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
|
||||
@ -3,7 +3,7 @@ import SelectDialog from "../components/dialog/SelectDialog";
|
||||
import SimpleConfirmDialog from "../components/dialog/SimpleConfirmDialog";
|
||||
import ConfirmDialog from "../components/dialog/ConfirmDialog";
|
||||
import Loading from "../components/Loading.vue";
|
||||
import Config from '../config'
|
||||
import Config, {IMG_URL} from '../config'
|
||||
import NoticeDialog from "../components/dialog/NoticeDialog";
|
||||
import dayjs from 'dayjs'
|
||||
import bus, {EVENT_KEY} from "./bus";
|
||||
@ -446,7 +446,7 @@ export function _checkImgUrl(url) {
|
||||
if (url.includes('http')) {
|
||||
return url
|
||||
} else {
|
||||
return '/imgs/' + url
|
||||
return IMG_URL + url
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user