|
@@ -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 {
|