feat: 优化

src/components/Slider/index.vue

@@ -7,6 +7,9 @@
       :style="{
         '--width': widthMap[index] / 2,
         '--speed': widthMap[index] / 2 / speed + 's',
+        width: widthMap[index] / 2 + 'px',
+        // background: 'red',
+        margin: '0 auto',
       }"
     >
       <div
@@ -17,6 +20,7 @@
           v-for="(slide, indey) in slider"
           :key="'slide-' + indey"
           class="slide"
+          :data-txt="slide.txt"
         >
           <div class="avatar">
             <div
@@ -60,7 +64,8 @@ const props = defineProps({
 
 const containerRef = ref<HTMLDivElement[]>([]);
 const sliderList = ref<any[]>([]);
-const widthMap = ref<any>({});
+const widthMap = ref<Record<number, number>>({});
+const min = ref(0);
 
 onMounted(() => {
   const res: any[] = [];
@@ -77,14 +82,26 @@ onMounted(() => {
         const slideList = container.children;
         for (let y = 0; y < slideList.length; y += 1) {
           const slide = slideList[y];
+          console.log(slide, 211);
           if (index === i) {
             res[index] = res[index] || 0;
             res[index] += slide.getBoundingClientRect().width;
           }
         }
+        console.log('endddd');
+      }
+    });
+
+    Object.keys(res).forEach((item) => {
+      if (min.value === 0) {
+        min.value = res[item];
+      }
+      if (res[item] < min.value) {
+        min.value = res[item];
       }
     });
     widthMap.value = res;
+    console.log(widthMap.value, res, min.value, 33333);
   });
 });
 </script>
@@ -131,7 +148,7 @@ onMounted(() => {
     }
 
     .container {
-      display: flex;
+      display: inline-flex;
 
       .slide {
         display: flex;
@@ -145,29 +162,24 @@ onMounted(() => {
           overflow: hidden;
           align-items: center;
           justify-content: center;
-          margin-right: 10px;
+          margin-right: 8px;
           width: 30px;
           height: 30px;
           border-radius: 50%;
           background-color: #fff;
 
           .img {
-            width: 30px;
-            height: 30px;
+            width: 25px;
+            height: 25px;
 
             @extend %containBg;
           }
         }
         .txt {
-          display: flex;
-          align-items: center;
+          max-width: 130px;
           font-size: 14px;
-          .msg {
-            display: inline-block;
-            max-width: 150px;
 
-            @extend %singleEllipsis;
-          }
+          @extend %singleEllipsis;
         }
       }
     }

src/constant.ts

@@ -42,30 +42,30 @@ export const sliderList = [
     txt: 'SRS',
     link: 'https://ossrs.net',
   },
+  {
+    img: 'https://resource.hsslive.cn/image/c3c342f6852706e0b70d011e8753d2d6.webp',
+    txt: 'FFmpeg',
+    link: 'https://ffmpeg.org',
+  },
+  {
+    img: 'https://resource.hsslive.cn/image/0214acde5f5f5e3caf278ce446cc4414.webp',
+    txt: 'WebRTC',
+    link: 'https://github.com/webrtc',
+  },
   {
     img: 'https://resource.hsslive.cn/billd-live/image/1277df4371045310acbc4bf2fc0811b8.webp',
     txt: 'Vue3',
     link: 'https://vuejs.org',
   },
-  {
-    img: 'https://resource.hsslive.cn/image/5ce36cab3d6b23974625900dc4cf39a3.webp',
-    txt: 'Node',
-    link: 'https://nodejs.org',
-  },
   {
     img: 'https://resource.hsslive.cn/image/dd907463af7fdec395e5f6d088b0308b.webp',
     txt: 'Pinia',
     link: 'https://pinia.vuejs.org',
   },
   {
-    img: 'https://resource.hsslive.cn/image/0214acde5f5f5e3caf278ce446cc4414.webp',
-    txt: 'WebRTC',
-    link: 'https://github.com/webrtc',
-  },
-  {
-    img: 'https://resource.hsslive.cn/image/d4417f70fa36edbc62b5aa3840cbf25f.webp',
-    txt: 'bilibili',
-    link: 'https://www.bilibili.com',
+    img: 'https://resource.hsslive.cn/image/9d54ed9673f2ca4ffc78fc6348f2b736.png',
+    txt: 'TypeScript',
+    link: 'https://www.typescriptlang.org',
   },
   {
     img: 'https://resource.hsslive.cn/image/a6473eed036e5d35ca2c9f7118c974cd.webp',
@@ -78,9 +78,24 @@ export const sliderList = [
     link: 'https://webpack.js.org',
   },
   {
-    img: 'https://resource.hsslive.cn/image/9d54ed9673f2ca4ffc78fc6348f2b736.png',
-    txt: 'TypeScript',
-    link: 'https://www.typescriptlang.org',
+    img: 'https://resource.hsslive.cn/image/dd8ffe33c22723381a3664684eaca237.png',
+    txt: 'esbuild',
+    link: 'https://esbuild.github.io',
+  },
+  {
+    img: 'https://resource.hsslive.cn/image/f6b9f5cfade1d96634dddb0b89b056be.png',
+    txt: 'Pnpm',
+    link: 'https://pnpm.io',
+  },
+  {
+    img: 'https://resource.hsslive.cn/image/89fadfed21f1dd6389dfeb227b3d1ca6.webp',
+    txt: 'naive-ui',
+    link: 'https://www.naiveui.com',
+  },
+  {
+    img: 'https://resource.hsslive.cn/image/5ce36cab3d6b23974625900dc4cf39a3.webp',
+    txt: 'Node',
+    link: 'https://nodejs.org',
   },
   {
     img: 'https://resource.hsslive.cn/image/0dcabc80c616240edc3111450fbf79aa.webp',
@@ -103,29 +118,19 @@ export const sliderList = [
     link: 'https://sequelize.org',
   },
   {
-    img: 'https://resource.hsslive.cn/image/d5eb237bd54bc4e729186115e89e5935.webp',
-    txt: 'Docker',
-    link: 'https://www.docker.com',
-  },
-  {
-    img: 'https://resource.hsslive.cn/image/c3c342f6852706e0b70d011e8753d2d6.webp',
-    txt: 'FFmpeg',
-    link: 'https://ffmpeg.org',
-  },
-  {
-    img: 'https://resource.hsslive.cn/image/dd8ffe33c22723381a3664684eaca237.png',
-    txt: 'esbuild',
-    link: 'https://esbuild.github.io',
+    img: 'https://resource.hsslive.cn/image/dce3470845321ce654d09ce811837749.webp',
+    txt: '腾讯云云直播 CSS',
+    link: 'https://cloud.tencent.com/product/css',
   },
   {
-    img: 'https://resource.hsslive.cn/image/92a6f3e295634ddd21b6b8034fa3b25f.webp',
-    txt: 'Jenkins',
-    link: 'https://www.jenkins.io',
+    img: 'https://resource.hsslive.cn/image/074835fbbaf976992e78bc6a585530e6.webp',
+    txt: '阿里云轻量服务器',
+    link: 'https://www.aliyun.com',
   },
   {
-    img: 'https://resource.hsslive.cn/image/dce3470845321ce654d09ce811837749.webp',
-    txt: '腾讯云云直播 CSS',
-    link: 'https://cloud.tencent.com/product/css',
+    img: 'https://resource.hsslive.cn/image/9a934ebf993f5d3b4146f050f7071518.webp',
+    txt: '七牛云对象存储',
+    link: 'https://www.qiniu.com',
   },
   {
     img: 'https://resource.hsslive.cn/image/e247f6fd39320051d236f3f844b9056f.webp',
@@ -133,18 +138,23 @@ export const sliderList = [
     link: 'https://opendocs.alipay.com/open/194',
   },
   {
-    img: 'https://resource.hsslive.cn/image/9a934ebf993f5d3b4146f050f7071518.webp',
-    txt: '七牛云对象存储',
-    link: 'https://www.qiniu.com',
+    img: 'https://resource.hsslive.cn/image/d5eb237bd54bc4e729186115e89e5935.webp',
+    txt: 'Docker',
+    link: 'https://www.docker.com',
   },
   {
-    img: 'https://resource.hsslive.cn/image/074835fbbaf976992e78bc6a585530e6.webp',
-    txt: '阿里云轻量服务器',
-    link: 'https://www.aliyun.com',
+    img: 'https://resource.hsslive.cn/image/92a6f3e295634ddd21b6b8034fa3b25f.webp',
+    txt: 'Jenkins',
+    link: 'https://www.jenkins.io',
   },
   {
     img: 'https://resource.hsslive.cn/image/354823b72eb805264c940f5232d824fe.webp',
     txt: 'PM2',
     link: 'https://github.com/Unitech/pm2',
   },
+  {
+    img: 'https://resource.hsslive.cn/image/d4417f70fa36edbc62b5aa3840cbf25f.webp',
+    txt: 'bilibili',
+    link: 'https://www.bilibili.com',
+  },
 ];

src/views/home/index.vue

@@ -6,7 +6,8 @@
         <Slider
           v-if="interactionList.length"
           :list="interactionList"
-          :row="2"
+          :row="3"
+          :speed="60"
         ></Slider>
       </div>
       <div class="container">
@@ -326,20 +327,22 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
       background-position: center;
       background-repeat: no-repeat;
     }
+    .slider-wrap {
+      padding: 2px 0 4px 0;
+    }
     .container {
       display: flex;
+      justify-content: center;
       box-sizing: border-box;
       margin: 0 auto;
-      padding: 15px 0;
-      justify-content: center;
       height: calc($w-1100 / $video-ratio);
 
       .left {
         position: relative;
         display: inline-block;
         overflow: hidden;
-        box-sizing: border-box;
         flex-shrink: 0;
+        box-sizing: border-box;
         margin-right: 20px;
         width: $w-1100;
         height: 100%;
@@ -439,9 +442,9 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
         }
       }
       .right {
-        flex-shrink: 0;
         display: inline-block;
         overflow: scroll;
+        flex-shrink: 0;
         box-sizing: border-box;
         padding: 12px 10px;
         height: 100%;
@@ -536,9 +539,9 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
     }
   }
   .area-container {
+    box-sizing: border-box;
     margin: 10px auto;
     width: $w-1350;
-    box-sizing: border-box;
 
     .area-item {
       .title {