diff --git a/index.html b/index.html index 8001027..85f02c3 100644 --- a/index.html +++ b/index.html @@ -44,8 +44,10 @@ - - + + + +
diff --git a/src/App.vue b/src/App.vue index cd35370..4aa7918 100644 --- a/src/App.vue +++ b/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")//禁止选中文字 }, + } diff --git a/src/assets/less/color.less b/src/assets/less/color.less index 79697d3..85ec4ba 100644 --- a/src/assets/less/color.less +++ b/src/assets/less/color.less @@ -20,6 +20,5 @@ } //消息页面 -@msg-bg: rgb(22,22,22); @msg-subpage-card-bg: rgb(28, 30, 43); //二级页面，卡片背景 diff --git a/src/assets/less/index.less b/src/assets/less/index.less index 0b0ff68..5e0bcaf 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -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%; diff --git a/src/assets/less/variables.less b/src/assets/less/variables.less index f81506f..1b9db87 100644 --- a/src/assets/less/variables.less +++ b/src/assets/less/variables.less @@ -1,5 +1,5 @@ @footer-height: 56rem; -@header-height: 40rem; +@header-height: 50rem; @indicator-height: 43rem; @padding-page: 15rem; \ No newline at end of file diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue index db2c5bf..b5d4dde 100644 --- a/src/components/BaseHeader.vue +++ b/src/components/BaseHeader.vue @@ -78,7 +78,6 @@ export default { .left { position: absolute; left: 10rem; - top: 20rem; } & > :nth-last-child(1) { diff --git a/src/components/Call.vue b/src/components/Call.vue index dab397c..633dd1f 100644 --- a/src/components/Call.vue +++ b/src/components/Call.vue @@ -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; diff --git a/src/components/Comment.vue b/src/components/Comment.vue index ac0d4ec..3cfb5ae 100644 --- a/src/components/Comment.vue +++ b/src/components/Comment.vue @@ -152,7 +152,7 @@ export default { }, height: { type: String, - default: '70vh' + default: 'calc(var(--vh, 1vh) * 70)' }, }, computed: { diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 44f72eb..700f9d6 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -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; diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue index 6433ba9..5e08156 100644 --- a/src/components/UserPanel.vue +++ b/src/components/UserPanel.vue @@ -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; } diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue index 2663b51..9037410 100644 --- a/src/components/dialog/FromBottomDialog.vue +++ b/src/components/dialog/FromBottomDialog.vue @@ -49,7 +49,7 @@ export default { }, height: { type: String, - default: '70vh' + default: 'calc(var(--vh, 1vh) * 70)' }, showHengGang: { type: Boolean, diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue index b20c1d1..fc313c2 100644 --- a/src/components/slide/BVideo.vue +++ b/src/components/slide/BVideo.vue @@ -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" + >

您的浏览器不支持 video 标签。

@@ -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; diff --git a/src/config/index.js b/src/config/index.js index 930589f..3ccc474 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -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/' -} \ No newline at end of file +} + +// 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/' diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue index 6a5994f..e7b9713 100644 --- a/src/pages/home/Attention.vue +++ b/src/pages/home/Attention.vue @@ -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 { diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue index 229b5d8..e9add25 100644 --- a/src/pages/home/LivePage.vue +++ b/src/pages/home/LivePage.vue @@ -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); diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue index 2b41ade..753dcb0 100644 --- a/src/pages/home/Music.vue +++ b/src/pages/home/Music.vue @@ -279,7 +279,7 @@ export default { padding-top: 60rem; .Scroll { - height: calc(100vh - 60rem); + height: calc(var(--vh, 1vh) * 100 - 60rem); } .desc { diff --git a/src/pages/home/components/IndicatorHome.vue b/src/pages/home/components/IndicatorHome.vue index ebb9e59..507854f 100644 --- a/src/pages/home/components/IndicatorHome.vue +++ b/src/pages/home/components/IndicatorHome.vue @@ -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; } } diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue index 66b8a33..1649dc2 100644 --- a/src/pages/home/components/ShareToFriend.vue +++ b/src/pages/home/components/ShareToFriend.vue @@ -10,7 +10,7 @@
-
- - - - - - - - - - - -
+ + + + + + + + + + + +