save

zyronon · Mar 28, 2024 · 7fc72c8 · 7fc72c8
1 parent 76a05a7
commit 7fc72c8
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 74 deletions.
diff --git a/src/assets/less/index.less b/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;

diff --git a/src/mock/index.js b/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,

diff --git a/src/pages/home/index.vue b/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>

diff --git a/src/pages/home/slide/Community.vue b/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;

diff --git a/src/pages/home/slide/LongVideo.vue b/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 {