una 3 mesiacov pred
rodič
commit
b901692662
1 zmenil súbory, kde vykonal 65 pridanie a 29 odobranie
  1. 65 29
      src/components/home.vue

+ 65 - 29
src/components/home.vue

@@ -199,28 +199,26 @@
         <div class="staff-title">鲸致荣誉</div>
          <!-- @scroll="honorScroll" -->
        
-            <!-- <vue-seamless-scroll :data="honorList" class="honer-scroll" 
+             <vue-seamless-scroll :data="honorList" class="honer-scroll" 
         :class-option="seamlessScrollOption"
        
-      > -->
-       <div class="honor-wrapper" id="honor-list" :style="{ 'transform': `translateX(${offset}px)` }">
-          <div v-for="(item,index) in honorList" :key="index" class="image-item">
-            <img  :src="item"  />
-          </div>
-            <!-- 复制的图片以保持无限滚动效果 -->
-      <div v-for="(img, index) in duplicateImages" :key="`dup-${index}`" class="image-item">
-        <img :src="img">
-      </div>
-        </div>
-         <!-- </vue-seamless-scroll> -->
+      >
+
+            <div class="img-wrapper" >
+            <img  :src="item"  v-for="(item,index) in honorList" :key="index"/>
+           </div>
+         
+        
+     
+          </vue-seamless-scroll> 
         <div class="progress-wrapper">
-          <el-progress
+          <!-- <el-progress
             :text-inside="true"
             :stroke-width="3"
             :percentage="honerPer"
             :show-text="false"
             color="#00bdff"
-          ></el-progress>
+          ></el-progress> -->
         </div>
       </div>
     </div>
@@ -555,8 +553,21 @@ export default {
       // 复制图片以实现无限滚动
       return [...this.honorList, ...this.honorList];
     },
- 
-        },
+   
+    seamlessScrollOption() {
+      return {
+        step: 1, // 数值越大速度滚动越快
+        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+   },
+      
   data() {
     return {
       offset: 0, // 用于控制滚动位置
@@ -711,7 +722,11 @@ export default {
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/10.png",
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/11.png",
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/12.png",
-        "https://mall.zhaijieshi.cc/file/jz-gw/honor/13.png"
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/13.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/14.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/15.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/16.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/17.png",
       ],
         dragging: false,
       offsetTop: 0,
@@ -729,15 +744,15 @@ export default {
     vueSeamlessScroll
   },
   mounted(){
-    this.startScroll();
+    // this.startScroll();
   },
    beforeDestroy() {
-   this.stopScroll();
+  //  this.stopScroll();
   },
   methods: {
       startScroll() {
       this.intervalId = setInterval(() => {
-        this.offset -= 10; // 每秒向左移动1像素
+        this.offset -= 1; // 每秒向左移动1像素
       }, 1000);
     },
     stopScroll() {
@@ -1377,12 +1392,31 @@ export default {
 }
 .honer-scroll{
  height: 160px;
-  overflow-x: scroll;
   margin-top: 20px;
+  /* width:1200px; */
     width: 100%;
-    min-width: 980px;
+     min-width: 1100px;
+  max-width: 1540px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.honer-scroll>div{
+  overflow: visible!important;
+}
+.honer-scroll .img-wrapper{
+  width:auto;
+ min-width:1100px;
+   /* height:auto;
+   white-space: nowrap; */
+  /* width:100%;
+ min-width: 980px;
+  max-width: 1540px; */
+}
+
+.honer-scroll ul{
+  width:100%;
+     min-width: 980px;
   max-width: 1540px;
-   position: relative;
 }
 .honor-wrapper {
 
@@ -1396,26 +1430,28 @@ export default {
   /* white-space: nowrap; */
   /* overflow-y: hidden; */
  
- animation: scroll 10s linear infinite; 
+ /* animation: scroll 20s linear infinite;  */
 }
-.honor-wrapper li{
+.scroll-item{
   display: inline-block;
 }
 /* .honor-wrapper::-webkit-scrollbar {
   display: none;
 } */
-
-.honor-wrapper img {
+.img-wrapper{
+  display: inline-block;
+  height:160px;
+}
+.honer-scroll img {
   height: 160px;
   margin-right: 20px;
-  display: block;
 }
 @keyframes scroll {
   0% {
     transform: translateX(0);
   }
   100% {
-    transform: translateX(-100%); /* 根据实际图片总宽度调整 */
+    transform: translateX(-300%); /* 根据实际图片总宽度调整 */
   }
 }
 .progress-wrapper {