save

src/assets/less/index.less

@@ -11,7 +11,7 @@
   --color-me: rgb(21, 23, 35);
   --color-user: rgb(22, 24, 36);
   --color-message: rgb(21, 21, 21);
-  --home-header-height: 40rem;
+  --home-header-height: 44rem;
   --footer-height: 56rem;
   --common-header-height: 50rem;
   --indicator-height: 43rem;

src/mock/index.js

@@ -78,7 +78,7 @@ async function fetchData() {
 export async function startMock() {
   mock.onGet(/video\/recommended/).reply(async (config) => {
     let page = getPage2(config.params)
-    // console.log('allRecommendVideos', cloneDeep(allRecommendVideos),page)
+    console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length),page)
     return [200, {
       data: {
         total: 844,

src/pages/home/index.vue

@@ -105,13 +105,13 @@
                          name="main"
                          :change-active-index-use-anim="false"
                          v-model:index="state.navIndex">
-          <SlideItem></SlideItem>
-<!--          <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>-->
+          <!--          <SlideItem></SlideItem>-->
+          <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>
           <SlideItem>
             <LongVideo :active="state.navIndex === 1 && state.baseIndex === 1"/>
           </SlideItem>
-          <SlideItem></SlideItem>
-<!--          <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>-->
+          <!--          <SlideItem></SlideItem>-->
+          <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
           <SlideItem>
             <Community :active="state.navIndex === 3 && state.baseIndex === 1"/>
           </SlideItem>

src/pages/home/slide/Community.vue

@@ -195,11 +195,11 @@ function test(e, item) {
 #Community {
   font-size: 14rem;
   color: white;
-  padding-top: var(--common-header-height);
+  padding-top: var(--home-header-height);
   background: rgb(21, 23, 36);
 
   .Scroll {
-    height: calc(var(--vh, 1vh) * 100 - var(--common-header-height) - var(--footer-height)) !important;
+    height: calc(var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)) !important;
   }
 
   @p: 1rem;
@@ -298,6 +298,7 @@ function test(e, item) {
   width: 100vw;
   transition: all .3s;
   overflow: hidden;
+  z-index: -100;
 
   .wrap {
     position: absolute;

src/pages/home/slide/LongVideo.vue

@@ -1,9 +1,10 @@
 <script setup>
 
-import {onMounted, onUnmounted, reactive, watch} from "vue";
+import {reactive, watch} from "vue";
 import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
 import {recommendedVideo} from "@/api/videos";
 import {useBaseStore} from "@/store/pinia";
+import ScrollList from "@/components/ScrollList.vue";
 
 const baseStore = useBaseStore()
 
@@ -18,94 +19,77 @@ const p = {
 }
 
 const state = reactive({
-  index: 0,
-  list: [],
-  totalSize: 0,
-  pageSize: 10,
-  pageNo: 0,
+  show:false
 })
 
-function loadMore() {
-  if (!baseStore.loading) {
-    state.pageNo++
-    getData()
-  }
-}
-
-async function getData(refresh = false) {
-  if (baseStore.loading) return
-  baseStore.loading = true
-  let res = await recommendedVideo({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
-  console.log('getSlide4Data-', 'refresh', refresh, res)
-  baseStore.loading = false
-  if (res.code === 200) {
-    state.totalSize = res.data.total
-    if (refresh) {
-      state.list = []
-    }
-    state.list = state.list.concat(res.data.list)
-  } else {
-    state.pageNo--
-  }
-}
-
 watch(() => props.active, n => {
-  if (!state.list.length && n) {
-    baseStore.loading = false
-    getData()
+  if (n && !state.show) {
+    state.show = true
   }
-})
+}, {immediate: true})
 
-onMounted(() => {
-})
-onUnmounted(() => {
-})
 </script>
 
 
 <template>
-  <div class="page">
-    <div class="item"
-         :class="[
+  <div class="long-video">
+    <ScrollList class="Scroll"
+                v-if="state.show"
+                :api="recommendedVideo"
+    >
+      <template v-slot="{list}">
+        <div class="page">
+          <div class="item"
+               :class="[
              i % 5 === 0 && 'big',
               i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
               i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
          ]"
-         v-for="(item,i) in state.list">
-      <video
-          controls
-          :poster="_checkImgUrl(item.video.cover.url_list[0])"
-          :src="item.video.play_addr.url_list[0]"
-      ></video>
-      <img v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
-      <div class="duration">{{ _duration(item.duration / 1000) }}</div>
-      <div class="title">
-        {{ item.desc }}
-      </div>
-      <div class="bottom">
-        <div class="l">
-          <img v-lazy="_checkImgUrl(item.author.avatar_168x168.url_list[0])" alt="" class="avatar">
-          <div class="name">{{ item.author.nickname }}</div>
+               v-for="(item,i) in list">
+            <video
+                controls
+                :poster="_checkImgUrl(item.video.cover.url_list[0])"
+                :src="item.video.play_addr.url_list[0]"
+            ></video>
+            <img v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
+            <div class="duration">{{ _duration(item.duration / 1000) }}</div>
+            <div class="title">
+              {{ item.desc }}
+            </div>
+            <div class="bottom">
+              <div class="l">
+                <img v-lazy="_checkImgUrl(item.author.avatar_168x168.url_list[0])" alt="" class="avatar">
+                <div class="name">{{ item.author.nickname }}</div>
+              </div>
+              <div class="r">
+                <Icon icon="icon-park-outline:like"/>
+                <div class="num">{{ _formatNumber(item.statistics.digg_count) }}</div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="r">
-          <Icon icon="icon-park-outline:like"/>
-          <div class="num">{{ _formatNumber(item.statistics.digg_count) }}</div>
-        </div>
-      </div>
-    </div>
+      </template>
+    </ScrollList>
   </div>
 </template>
 
 <style scoped lang="less">
 
+.long-video {
+  font-size: 14rem;
+  color: white;
+  padding-top: var(--home-header-height);
+  background: rgb(21, 23, 36);
+
+  .Scroll {
+    height: calc(var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)) !important;
+  }
+}
 
 .page {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 15rem;
-  height: calc(var(--vh, 1vh) * 100 - var(--common-header-height) - var(--footer-height));
-  margin-top: var(--common-header-height);
-  overflow: auto;
   box-sizing: border-box;
 
   .item {
@@ -160,8 +144,16 @@ onUnmounted(() => {
       font-size: 13rem;
 
       .l {
-
         .f;
+        justify-content: flex-start;
+
+        .name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box; //作为弹性伸缩盒子模型显示。
+          -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+          -webkit-line-clamp: 1; //显示的行
+        }
 
         .avatar {
           @w: 20rem;
@@ -173,6 +165,7 @@ onUnmounted(() => {
       }
 
       .r {
+        word-break: keep-all;
         .f;
 
         svg {

src/pages/home/slide/LongVideo2.vue

@@ -0,0 +1,228 @@
+<script setup>
+
+import {onMounted, onUnmounted, reactive, watch} from "vue";
+import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
+import {recommendedVideo} from "@/api/videos";
+import {useBaseStore} from "@/store/pinia";
+
+const baseStore = useBaseStore()
+
+const props = defineProps({
+  active: Boolean
+})
+
+const p = {
+  onShowComments() {
+    console.log('onShowComments')
+  }
+}
+
+const state = reactive({
+  index: 0,
+  list: [],
+  totalSize: 0,
+  pageSize: 10,
+  pageNo: 0,
+})
+
+function loadMore() {
+  if (!baseStore.loading) {
+    state.pageNo++
+    getData()
+  }
+}
+
+async function getData(refresh = false) {
+  if (baseStore.loading) return
+  baseStore.loading = true
+  let res = await recommendedVideo({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
+  console.log('getSlide4Data-', 'refresh', refresh, res)
+  baseStore.loading = false
+  if (res.code === 200) {
+    state.totalSize = res.data.total
+    if (refresh) {
+      state.list = []
+    }
+    state.list = state.list.concat(res.data.list)
+  } else {
+    state.pageNo--
+  }
+}
+
+watch(() => props.active, n => {
+  if (!state.list.length && n) {
+    baseStore.loading = false
+    getData()
+  }
+})
+
+onMounted(() => {
+})
+onUnmounted(() => {
+})
+</script>
+
+
+<template>
+  <div class="page">
+    <div class="item"
+         :class="[
+             i % 5 === 0 && 'big',
+              i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
+              i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
+         ]"
+         v-for="(item,i) in state.list">
+      <video
+          controls
+          :poster="_checkImgUrl(item.video.cover.url_list[0])"
+          :src="item.video.play_addr.url_list[0]"
+      ></video>
+      <img v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
+      <div class="duration">{{ _duration(item.duration / 1000) }}</div>
+      <div class="title">
+        {{ item.desc }}
+      </div>
+      <div class="bottom">
+        <div class="l">
+          <img v-lazy="_checkImgUrl(item.author.avatar_168x168.url_list[0])" alt="" class="avatar">
+          <div class="name">{{ item.author.nickname }}</div>
+        </div>
+        <div class="r">
+          <Icon icon="icon-park-outline:like"/>
+          <div class="num">{{ _formatNumber(item.statistics.digg_count) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.page {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 15rem;
+  height: calc(var(--vh, 1vh) * 100 - var(--common-header-height) - var(--footer-height));
+  margin-top: var(--common-header-height);
+  overflow: auto;
+  box-sizing: border-box;
+
+  .item {
+    margin: 0 10rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8rem;
+    position: relative;
+
+    .poster {
+      border-radius: 12rem;
+      width: 100%;
+      height: 140rem;
+      object-fit: cover;
+    }
+
+    video {
+      display: none;
+      height: 220rem;
+      object-fit: cover;
+    }
+
+    .title {
+      height: 36rem;
+      color: white;
+      font-size: 14rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
+    }
+
+    .f {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 5rem;
+    }
+
+    .duration {
+      color: white;
+      position: absolute;
+      bottom: 80rem;
+      right: 10rem;
+      font-size: 13rem;
+    }
+
+    .bottom {
+      color: gray;
+      .f;
+      font-size: 13rem;
+
+      .l {
+        .f;
+        justify-content: flex-start;
+
+        .name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box; //作为弹性伸缩盒子模型显示。
+          -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+          -webkit-line-clamp: 1; //显示的行
+        }
+
+        .avatar {
+          @w: 20rem;
+          width: @w;
+          height: @w;
+          object-fit: cover;
+          border-radius: 50%;
+        }
+      }
+
+      .r {
+        word-break: keep-all;
+        .f;
+
+        svg {
+          font-size: 16rem;
+        }
+
+      }
+    }
+
+    &.big {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      margin: 0;
+
+      .duration {
+        display: none;
+      }
+
+      .poster {
+        display: none;
+      }
+
+      video {
+        display: block;
+      }
+
+      .title {
+        height: unset;
+        -webkit-line-clamp: 1;
+      }
+
+      .title, .bottom {
+        padding: 0 10rem;
+      }
+    }
+
+    &.l {
+      margin-right: 5rem;
+    }
+
+    &.r {
+      margin-left: 5rem;
+    }
+  }
+}
+</style>