lizixuan/m2pool_web_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

修复主页图片显示bug

Browse Source
This commit is contained in:
yaoqin
2025-05-16 16:53:11 +08:00
parent a326f62f81
commit d3ac95af75
34 changed files with 47 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mining-pool/src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="app">
<router-view class="page" />
<ChatWidget v-if="!$route.path.includes('/customerService')" />
<!-- <ChatWidget v-if="!$route.path.includes('/customerService')" /> -->
</div>
</template>
<script >

2
mining-pool/src/main.js
View File

@@ -23,7 +23,7 @@ Vue.use(ElementUI, {
});
Vue.prototype.$axios = axios
// console.log = ()=>{} //全局关闭打印
console.log = ()=>{} //全局关闭打印
// 全局注册混入
Vue.mixin(loadingStateMixin);
Vue.mixin(networkRecoveryMixin);

82
mining-pool/src/views/home/index.js
View File

@@ -1440,67 +1440,37 @@ export default {
return width + marginLeft + marginRight;
},
// 左滑动逻辑
scrollLeft() {
const listEl = this.$refs.currencyList;
const listBox = this.$refs.listBox;
if (!listEl || !listBox) return;
const itemFullWidth = this.getItemFullWidth();
const step = 2 * itemFullWidth; // 每次滑动2个币种
const allLength = this.currencyList.length * itemFullWidth;
const boxLength = listBox.clientWidth;
if (allLength <= boxLength) return;
let currentLeft = Math.abs(parseInt(listEl.style.transform.replace('translateX(', '').replace('px)', '')) || 0);
let newLeft = currentLeft - step;
listEl.classList.add('scrolling');
if (newLeft <= 0) {
listEl.style.transform = 'translateX(0)';
const allLength = this.currencyList.length * 120
const boxLength = document.getElementById('list-box').clientWidth
if (allLength < boxLength) return
const listEl = document.getElementById('list')
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
if (leftMove + boxLength - 360 < boxLength) {
// 到最开始的时候
listEl.style.left = '0PX'
} else {
listEl.style.transform = `translateX(-${newLeft}px)`;
listEl.style.left = '-' + (leftMove - 360) + 'PX'
}
// 增加动画时间到 500ms
setTimeout(() => {
listEl.classList.remove('scrolling');
}, 500);
},
},
// 右滑动逻辑
scrollRight() {
const allLength = this.currencyList.length * 120
const boxLength = document.getElementById('list-box').clientWidth
if (allLength < boxLength) return
const listEl = document.getElementById('list')
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
if (leftMove + boxLength + 360 > allLength) {
listEl.style.left = '-' + (allLength - boxLength) + 'PX'
} else {
listEl.style.left = '-' + (leftMove + 360) + 'PX'
}
},
// 右滑动逻辑
scrollRight() {
const listEl = this.$refs.currencyList;
const listBox = this.$refs.listBox;
if (!listEl || !listBox) return;
const itemFullWidth = this.getItemFullWidth();
const step = 2 * itemFullWidth; // 每次滑动2个币种
const allLength = this.currencyList.length * itemFullWidth;
const boxLength = listBox.clientWidth;
if (allLength <= boxLength) return;
let currentLeft = Math.abs(parseInt(listEl.style.transform.replace('translateX(', '').replace('px)', '')) || 0);
let newLeft = currentLeft + step;
const maxLeft = allLength - boxLength;
listEl.classList.add('scrolling');
if (newLeft >= maxLeft) {
listEl.style.transform = `translateX(-${maxLeft}px)`;
} else {
listEl.style.transform = `translateX(-${newLeft}px)`;
}
// 增加动画时间到 500ms
setTimeout(() => {
listEl.classList.remove('scrolling');
}, 500);
},
// // 左滑动逻辑
// scrollLeft() {
// const allLength = this.currencyList.length * 120

85
mining-pool/src/views/home/index.vue
View File

@@ -340,29 +340,6 @@
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-card>
<div class="monitor-list">
<div class="btn left" @click="scrollLeft">
<i class="iconfont icon-icon-prev" />
</div>
<div ref="listBox" class="list-box">
<div ref="currencyList" class="list">
<div
v-for="item in currencyList"
:key="item.value"
@click="clickCurrency(item)"
class="list-item"
>
<img :src="item.img" alt="coin" />
<span :class="{ active: itemActive === item.value }">
{{ item.label }}
</span>
</div>
</div>
</div>
<div class="btn right" @click="scrollRight">
<i class="iconfont icon-zuoyoujiantou1" />
</div>
</div>
<!-- <div class="monitor-list">
<div class="btn left" @click="scrollLeft">
<i class="iconfont icon-icon-prev" />
</div>
@@ -384,10 +361,11 @@
<div class="btn right" @click="scrollRight">
<i class="iconfont icon-zuoyoujiantou1" />
</div>
</div> -->
</div>
</el-card>
</el-col>
</el-row>
<section class="describeBox">
<p> <i class="iconfont icon-tishishuoming "></i><span class="describeTitle">{{ $t(`home.describeTitle`) }}</span>{{ $t(`home.describe`) }} <span class="view" @click="handelJump(`/allocationExplanation`)"> {{ $t(`home.view`) }} </span> </p>
</section>
@@ -783,7 +761,7 @@ export default {
};
</script>
<style scoped lang="scss">
<style scoped lang="scss">
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 800px) {
.imgTop {
@@ -3141,63 +3119,6 @@ export default {
transition: left 1s;
}
}
.list-box {//加的
width: calc(100% - 100px);
overflow: hidden;
position: relative;
}
.list {
display: flex;
will-change: transform;
padding-left: 2%;
&.scrolling {
// 增加动画时长到 0.5s，使用更平滑的缓动函数
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list-item {
flex-shrink: 0;
width: 120px;
height: 95%;
margin-left: 18px;
// 增加过渡时间，使悬停效果更平滑
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
&:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(110, 62, 219, 0.2);
}
img {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
span {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
}
.btn {
// 增加按钮过渡时间
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
&:hover {
background-color: #6e3edb;
color: #fff;
transform: scale(1.05);
}
&:active {
transform: scale(0.95);
}
}
}
// -----------------------