优化首页页面

src/App.vue

@@ -4,9 +4,9 @@
         <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
       </transition>
       <transition :name="transitionName">
-        <keep-alive>
+<!--        <keep-alive>-->
           <component :is="Component"/>
-        </keep-alive>
+<!--        </keep-alive>-->
       </transition>
     </router-view>
 

src/api/videos.js

@@ -17,4 +17,7 @@ export default {
   collect(params, data) {
     return request({url: '/me/collect', method: 'get', params, data})
   },
+  recommended(params, data) {
+    return request({url: '/video/recommended', method: 'get', params, data})
+  },
 }

src/assets/scss/utils.less

@@ -53,6 +53,14 @@ margin
 */
 
 
+.m(5);
+.m(@n, @i: 1) when (@i =< @n) {
+  .m@{i}r {
+    margin: (1rem * @i) !important;
+  }
+  .m(@n, (@i + 1));
+}
+
 .ml(5);
 .ml(@n, @i: 1) when (@i =< @n) {
   .ml@{i}r {
@@ -64,7 +72,7 @@ margin
 .mr(5);
 .mr(@n, @i: 1) when (@i =< @n) {
   .mr@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-right: (1rem * @i) !important;
   }
   .mr(@n, (@i + 1));
 }
@@ -72,7 +80,7 @@ margin
 .mt(5);
 .mt(@n, @i: 1) when (@i =< @n) {
   .mt@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-top: (1rem * @i) !important;
   }
   .mt(@n, (@i + 1));
 }
@@ -80,7 +88,7 @@ margin
 .mb(5);
 .mb(@n, @i: 1) when (@i =< @n) {
   .mb@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-bottom: (1rem * @i) !important;
   }
   .mb(@n, (@i + 1));
 }
@@ -91,10 +99,18 @@ padding
 */
 
 
+.p(5);
+.p(@n, @i: 1) when (@i =< @n) {
+  .p@{i}r {
+    padding: (1rem * @i) !important;
+  }
+  .p(@n, (@i + 1));
+}
+
 .pb(5);
 .pb(@n, @i: 1) when (@i =< @n) {
   .pb@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-bottom: (1rem * @i) !important;
   }
   .pb(@n, (@i + 1));
 }
@@ -102,7 +118,7 @@ padding
 .pt(5);
 .pt(@n, @i: 1) when (@i =< @n) {
   .pt@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-top: (1rem * @i) !important;
   }
   .pt(@n, (@i + 1));
 }
@@ -110,7 +126,7 @@ padding
 .pl(5);
 .pl(@n, @i: 1) when (@i =< @n) {
   .pl@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-left: (1rem * @i) !important;
   }
   .pl(@n, (@i + 1));
 }
@@ -118,7 +134,7 @@ padding
 .pr(5);
 .pr(@n, @i: 1) when (@i =< @n) {
   .pr@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-right: (1rem * @i) !important;
   }
   .pr(@n, (@i + 1));
 }

src/components/Posters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list">
+    <div class="poster-item" v-for="i in list" @click="$nav('/video-detail')">
-      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+      <img class="poster" :src="$imgPreview(i.posterUrl)" alt="">
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
         <span>{{ $likeNum(i.likeNum) }}</span>

src/components/Search.vue

@@ -78,7 +78,7 @@ export default {
     flex: 1;
     position: relative;
     height: 3.6rem;
-    background: rgb(59, 59, 71);
+    background: @second-btn-color-tran;
     border-radius: 2px;
     display: flex;
     align-items: center;

src/components/Video.vue

@@ -5,13 +5,12 @@
 <!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-    <video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
+    <video :src="video.videoUrl"  ref="video" muted :autoplay="!disabled" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
     <div class="float-container" v-if="true" @click.stop="togglePlayVideo">
       <transition name="pause">
-        <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
+        <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying">
-        >
       </transition>
       <div class="float">
         <div :style="{opacity:isMove?0:1}" class="normal">

src/components/slide/SlideColumnList.vue

@@ -64,24 +64,33 @@ export default {
     watchList: {
       handler(newVal, oldVal) {
         if (!this.virtual) return
-        // console.log(this.currentSlideItemIndex)
+        if (oldVal.length === 0) {
-        let endLength = newVal.length
+          this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
-        if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
+            this.slideList.appendChild(this.getInsEl(item, index))
-          endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
-        }
-        let that = this
-        newVal.slice(oldVal.length, endLength).map((item, index) => {
-          this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
-          this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
-          // $("#base-slide-list .base-slide-item:first").remove()
-          $(".base-slide-item").each(function () {
-            $(this).css('top',
-                ((endLength - oldVal.length) > 1 ?
-                    (that.currentSlideItemIndex - 2) :
-                    (that.currentSlideItemIndex - 3)) *
-                that.wrapperHeight)
           })
-        })
+        } else {
+          // console.log(this.currentSlideItemIndex)
+          let endLength = newVal.length
+          if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
+            endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
+          }
+          let that = this
+          // newVal.slice(oldVal.length, endLength).map((item, index) => {
+          //   this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
+          //   let appIns = this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index'))
+          //   if (appIns) {
+          //     appIns.unmount()
+          //   }
+          //   // $("#base-slide-list .base-slide-item:first").remove()
+          //   $(".base-slide-item").each(function () {
+          //     $(this).css('top',
+          //         ((endLength - oldVal.length) > 1 ?
+          //             (that.currentSlideItemIndex - 2) :
+          //             (that.currentSlideItemIndex - 3)) *
+          //         that.wrapperHeight)
+          //   })
+          // })
+        }
       },
       deep: true
     }
@@ -185,13 +194,11 @@ export default {
         if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
         if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
         if (gapTime < 150) {
-
           if (this.isDrawDown) {
             this.currentSlideItemIndex += 1
           } else {
             this.currentSlideItemIndex -= 1
           }
-
           // console.log(this.slideItems.length)
           let that = this
           if (this.virtual) {
@@ -204,7 +211,7 @@ export default {
                   && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
                   && this.currentSlideItemIndex <= this.list.length - 3
               ) {
-                let videos = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
+                let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
                 // console.log(videos)
                 if (res.length === 0) {
                   this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))

src/main.js

@@ -10,6 +10,7 @@ import mixin from "./utils/mixin";
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
+// app.config.compilerOptions.isCustomElement = tag => tag.startsWith('video1')
 app.provide('mitt', mitt())
 
 app.mixin(mixin)

src/pages/home/Attention.vue

@@ -278,8 +278,6 @@ export default {
       }
       this.items.push(temp)
     }
-    // this.$console(this.items)
-
     setTimeout(() => {
       this.refs.scroller = this.$refs["scroller"]
       this.refs.wrapper = this.$refs["wrapper"]
@@ -288,9 +286,7 @@ export default {
   },
   methods: {
     scrollToTop(e) {
-      let current = e.currentTarget;
+      let current = e.currentTarget
-      console.log(current.getBoundingClientRect())
-      console.log(current.offsetTop)
       this.refs.scroller.scrollTop = current.offsetTop - this.headerHeight - 30
     },
     start(e) {

src/pages/home/Index2.vue

@@ -172,124 +172,15 @@ import Share from "../../components/Share";
 import SlideColumnList from "../../components/slide/SlideColumnList";
 import SlideRowList from "../../components/slide/SlideRowList";
 import Me from '../me/Me'
+
 export default {
   name: "HomeIndex",
-  components: {SlideColumnList, SlideRowList, Video1, Comment, Share,Me},
+  components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
   data() {
     return {
-      videos1: [
+      webVideos: [],
-        {
+      videos: [],
-          // videoUrl: mp40,
+      localVideos: [
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp41,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/1.mp4',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp42,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/2.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp43,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/3.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp44,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/4.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp45,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/5.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp46,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/6.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp47,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/7.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp48,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/8.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp49,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/9.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp410,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/10.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-      ],
-      videos: [
         {
           videoUrl: mp40,
           // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
@@ -406,6 +297,10 @@ export default {
       videoActiveIndex: 0,
       baseActiveIndex: 0,
       activeIndex: 1,
+      totalSize: 52,
+      pageSize: 10,
+      pageNo: 1,
+      loading: false,
       render: (item, itemIndex) => {
         return (
             <div className="base-slide-item video-slide-item" data-index={itemIndex}>
@@ -424,7 +319,7 @@ export default {
   },
   watch: {
     videoActiveIndex(newVal) {
-      // console.log(newVal)
+      console.log(newVal)
       $(".video-slide-item").each(function () {
         let video = $(this).find('video')
         if ($(this).data('index') === newVal) {
@@ -436,142 +331,39 @@ export default {
           }, 100)
         }
       })
-      // if (newVal >= this.videos.length - 3) {
+      if (newVal >= this.videos.length - 3 && newVal < this.totalSize) {
-      if (false) {
+        if (this.loading) return
-        [
+        this.pageNo++
-          {
+        this.getData()
-            videoUrl: mp40,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp41,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp42,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp43,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp44,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-        ].map(v => {
-          this.videos.push(v)
-        })
-
       }
     }
   },
   created() {
-    if (process.env.NODE_ENV !== 'development') {
+    this.getData()
-      this.videos = this.$clone(this.videos1)
-    }
   },
   mounted() {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
   methods: {
+    async getData() {
+      this.loading = true
+      let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
+      this.loading = false
+      if (res.code === this.SUCCESS_CODE) {
+        this.totalSize = res.data.count
+        this.videos = this.videos.concat(res.data.list)
+        // this.videos = this.$clone(this.localVideos)
+      } else {
+        this.pageNo--
+      }
+    },
     t(e) {
       console.log(e)
     },
     end() {
       console.log('end')
-      setTimeout(() => {
-        [
-          {
-            videoUrl: mp40,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          // {
-          //   videoUrl: mp41,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: true,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp42,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp43,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp44,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-        ].map(v => {
-          this.videos.push(v)
-        })
-        this.$refs.slideList.checkChildren()
-
-        console.log('ok')
-      }, 1000)
     }
-
   }
 }
 </script>

src/pages/home/Test.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="Test">
-    <SlideRowList>
-      <SlideItem style="min-width: 20vw;"> </SlideItem>
-      <SlideItem style="min-width: 20vw;"> </SlideItem>
-      <SlideItem style="min-width: 25vw;">分段拍</SlideItem>
-      <SlideItem style="min-width: 20vw;">快拍</SlideItem>
-      <SlideItem style="min-width: 20vw;">影集</SlideItem>
-      <SlideItem style="min-width: 20vw;">开直播</SlideItem>
-    </SlideRowList>
-  </div>
-</template>
-<script>
-export default {
-  name: "Test",
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/scss/index";
-
-.Test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  color: white;
-  font-size: 2rem;
-}
-</style>

src/pages/home/testt.vue

@@ -1,191 +0,0 @@
-<template lang="html">
-  <div class="yo-scroll"
-       :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
-       @touchstart="touchStart($event)"
-       @touchmove="touchMove($event)"
-       @touchend="touchEnd($event)"
-       @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
-    <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
-      <header class="pull-refresh">
-        <slot name="pull-refresh">
-          <span class="down-tip">下拉更新</span>
-          <span class="up-tip">松开更新</span>
-          <span class="refresh-tip">更新中</span>
-        </slot>
-      </header>
-      <slot></slot>
-      <footer class="load-more">
-        <slot name="load-more">
-          <span>加载中……</span>
-        </slot>
-      </footer>
-    </section>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    offset: {
-      type: Number,
-      default: 40
-    },
-    enableInfinite: {
-      type: Boolean,
-      default: true
-    },
-    enableRefresh: {
-      type: Boolean,
-      default: true
-    },
-    onRefresh: {
-      type: Function,
-      default: undefined,
-      required: false
-    },
-    onInfinite: {
-      type: Function,
-      default: undefined,
-      require: false
-    }
-  },
-  data() {
-    return {
-      top: 0,
-      state: 0,
-      startY: 0,
-      touching: false,
-      infiniteLoading: false
-    }
-  },
-  methods: {
-    touchStart(e) {
-      this.startY = e.targetTouches[0].pageY
-      this.startScroll = this.$el.scrollTop || 0
-      this.touching = true
-    },
-    touchMove(e) {
-      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
-        return
-      }
-      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
-      if (diff > 0) e.preventDefault()
-      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
-
-      if (this.state === 2) { // in refreshing
-        return
-      }
-      if (this.top >= this.offset) {
-        this.state = 1
-      } else {
-        this.state = 0
-      }
-    },
-    touchEnd(e) {
-      if (!this.enableRefresh) return
-      this.touching = false
-      if (this.state === 2) { // in refreshing
-        this.state = 2
-        this.top = this.offset
-        return
-      }
-      if (this.top >= this.offset) { // do refresh
-        this.refresh()
-      } else { // cancel refresh
-        this.state = 0
-        this.top = 0
-      }
-    },
-    refresh() {
-      this.state = 2
-      this.top = this.offset
-      this.onRefresh(this.refreshDone)
-    },
-    refreshDone() {
-      this.state = 0
-      this.top = 0
-    },
-
-    infinite() {
-      this.infiniteLoading = true
-      this.onInfinite(this.infiniteDone)
-    },
-
-    infiniteDone() {
-      this.infiniteLoading = false
-    },
-
-    onScroll(e) {
-      if (!this.enableInfinite || this.infiniteLoading) {
-        return
-      }
-      let outerHeight = this.$el.clientHeight
-      let innerHeight = this.$el.querySelector('.inner').clientHeight
-      let scrollTop = this.$el.scrollTop
-      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
-      let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
-      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
-      if (bottom < infiniteHeight) this.infinite()
-    }
-  }
-}
-</script>
-<style>
-.yo-scroll {
-  position: absolute;
-  top: 2.5rem;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  background-color: #ddd
-}
-
-.yo-scroll .inner {
-  position: absolute;
-  top: -2rem;
-  width: 100%;
-  transition-duration: 300ms;
-}
-
-.yo-scroll .pull-refresh {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.yo-scroll.touch .inner {
-  transition-duration: 0ms;
-}
-
-.yo-scroll.down .down-tip {
-  display: block;
-}
-
-.yo-scroll.up .up-tip {
-  display: block;
-}
-
-.yo-scroll.refresh .refresh-tip {
-  display: block;
-}
-
-.yo-scroll .down-tip,
-.yo-scroll .refresh-tip,
-.yo-scroll .up-tip {
-  display: none;
-}
-
-.yo-scroll .load-more {
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

src/pages/me/VideoDetail.vue

@@ -2,12 +2,12 @@
   <div id="video-detail">
     <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
       <SlideItem>
-        <div class="search-ctn">
+        <div class="search-wrapper">
-          <img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
+          <back class="back" @click="$back"/>
           <Search></Search>
         </div>
         <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
-          <SlideItem :style="itemTop" v-for="(item,index)  of videos">
+          <SlideItem :style="itemTop" v-for="(item,index)  of videos2">
             <Video1
                 :disabled="videoActiveIndex !== addCount + index"
                 v-model:video="videos[index]"
@@ -103,7 +103,6 @@
         </div>
       </div>
     </from-bottom-dialog>
-
     <from-bottom-dialog
         v-model="dialog.permissionDialog"
         height="40vh"
@@ -139,9 +138,7 @@
             <img src="../../assets/img/icon/head-image.jpeg" alt="">
           </div>
         </div>
-        <div class="space">
+        <div class="space"></div>
-
-        </div>
         <div class="setting pb4r">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
           <div class="right">
@@ -340,6 +337,7 @@ export default {
           duration: 99
         },
       ],
+      videos2: [],
       addCount: 0,
       total: 10,
       baseActiveIndex: 0,
@@ -358,15 +356,26 @@ export default {
       return {top: this.addCount * 812 + 'px'}
     },
   },
-  mounted() {
+  created() {
     // this.height = document.body.clientHeight
     // this.width = document.body.clientWidth
-  },
+    for (let i = 0; i < 53; i++) {
-  created() {
+      this.videos2.push(
-    if (process.env.NODE_ENV !== 'development') {
+          {
-      this.videos = this.$clone(this.videos1)
+            // videoUrl: mp40,
+            videoUrl: `http://douyin.ttentau.top/${i}.mp4`,
+            videoPoster: src1Bg,
+            isLoved: true,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          })
     }
-  },
+    // if (process.env.NODE_ENV !== 'development') {
+    //   this.videos = this.$clone(this.videos1)
+    // }
+  }
 }
 </script>
 
@@ -383,24 +392,23 @@ export default {
   height: 100%;
   width: 100%;
 
-  .search-ctn {
+  .search-wrapper {
     z-index: 9;
     position: fixed;
-    top: 10px;
+    top: 1rem;
-    left: 20px;
+    left: 1.5rem;
-    right: 20px;
+    right: 1.5rem;
     display: flex;
     align-items: center;
 
     .back {
-      width: 20px;
+      width: 2rem;
-      height: 20px;
+      height: 2rem;
-      margin-right: 20px;
+      margin-right: 1rem;
     }
 
-    .search {
+    .search-ctn {
       width: 100%;
-      background: rgba(50, 50, 50, .8);
     }
   }
 
@@ -460,7 +468,6 @@ export default {
 
   }
 
-
   .share-dialog {
     .collection {
       background: white;
@@ -527,7 +534,7 @@ export default {
 
   .permission-dialog {
     .space {
-      height: 10px;
+      height: 1rem;
       background: whitesmoke;
     }
 
@@ -543,12 +550,12 @@ export default {
 
       img {
         border-radius: 50%;
-        width: 30px;
+        width: 3rem;
-        height: 30px;
+        height: 3rem;
       }
 
       .right {
-        margin: 0 5px 0 15px;
+        margin: 0 .5rem 0 1.5rem;
         font-size: 1.4rem;
         width: 100%;
         display: flex;
@@ -558,9 +565,9 @@ export default {
         .share-btn {
           font-size: 1.4rem;
           color: white;
-          padding: 5px 20px;
+          padding: .5rem 2rem;
           background: @primary-btn-color;
-          border-radius: 2px;
+          border-radius: .2rem;
         }
       }
     }

src/pages/message/Message.vue

@@ -115,7 +115,7 @@
       </div>
       <div class="joined-chat-wrapper" v-show="showJoinedChat">
         <div class="nav">
-          <back @click="showJoinedChat = false" mode="white" scale="1.8"></back>
+          <back @click="showJoinedChat = false" mode="light" scale="1.8"></back>
           <span>已加入的群聊</span>
           <span>&nbsp;</span>
         </div>
@@ -229,7 +229,8 @@ export default {
       }
     }
   },
-  mounted() {
+  created() {
+    console.log(22)
   },
   methods: {
   }

src/router/index.js

@@ -18,7 +18,6 @@ import DeclareSchool from "../pages/me/userinfo/DeclareSchool";
 import ChooseDepartment from "../pages/me/userinfo/ChooseDepartment";
 import DisplayType from "../pages/me/userinfo/DisplayType";
 import Publish from "../pages/home/Publish";
-import Test from "../pages/home/Test";
 import ChooseLocation from "../pages/me/userinfo/ChooseLocation";
 import ChooseProvince from "../pages/me/userinfo/ChooseProvince";
 import ChooseCity from "../pages/me/userinfo/ChooseCity";
@@ -35,7 +34,6 @@ import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";
 import MinorProtectionDetailSetting from "../pages/me/rightMenu/MinorProtection/DetailSetting";
 import TriggerTime from "../pages/me/rightMenu/MinorProtection/TriggerTime";
 import Setting from "../pages/me/rightMenu/Setting";
-import Me2 from "../pages/me/Me2";
 import Login from "../pages/login/Login";
 import OtherLogin from "../pages/login/OtherLogin";
 import PasswordLogin from "../pages/login/PasswordLogin";
@@ -50,10 +48,8 @@ const routes = [
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
-  {path: '/test', component: Test},
   {path: '/message', component: Message},
-  // {path: '/me', component: Me},
+  {path: '/me', component: Me},
-  {path: '/me', component: Me2},
   {path: '/edit-userinfo', component: EditUserInfo},
   {path: '/edit-userinfo-item', component: EditUserInfoItem},
   {path: '/music', component: Music},

src/utils/global-methods.js

@@ -198,6 +198,7 @@ export default {
     }
   },
   $duration(v) {
+    if (!v) return
     let m = Math.floor(v / 60)
     // let s = v % 60
     let s = Math.round(v % 60)