+
@@ -142,7 +165,7 @@ export default {
awards: {},
userMin: 0,
userSec: 0,
- _interval: "",
+ intervalTimer: "",
toLiveBtn: "",
isHandImg: true,
};
@@ -153,7 +176,7 @@ export default {
},
beforeDestroy() {
- clearInterval(this._interval);
+ clearInterval(this.intervalTimer);
},
methods: {
clickTap() {
@@ -168,21 +191,22 @@ export default {
defaultSrc() {
this.isHandImg = false;
},
- yesPercent(left, right) {
+ calculatePercent(left, right) {
left = parseFloat(left);
right = parseFloat(right);
- if (isNaN(left) || isNaN(right)) {
- return "-";
+ const total = left + right;
+ if (isNaN(left) || isNaN(right) || total === 0) {
+ return { left: "0%", right: "0%" };
}
- return right + left == 0
- ? "0%"
- : Math.round((left / (right + left)) * 10000) / 100.0 + "%";
+ const leftPercent = Math.round((left / total) * 10000) / 100.0 + "%";
+ const rightPercent = Math.round((right / total) * 10000) / 100.0 + "%";
+ return { left: leftPercent, right: rightPercent };
},
// 倒计时事件
countdown() {
const that = this;
- that._interval = setInterval(() => {
+ that.intervalTimer = setInterval(() => {
let time = new Date(this.userInfo.registerTime).getTime() / 1000;
let time1 = new Date().getTime() / 1000;
let time2 = parseInt(time1 - time);
@@ -368,31 +392,56 @@ export default {
}
}
.user-cards-left {
- .schedule {
- // width: 149px;
+ .progress-bar-container {
flex: 1;
height: 16px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 10px 10px 10px 10px;
+ border-radius: 10px;
margin: 5px;
position: relative;
+ overflow: hidden; // Hide overflowing parts of bars
}
+
+ .progress-bar-container.no-value {
+ background: rgba(
+ 255,
+ 255,
+ 255,
+ 0.3
+ ); // Transparent background when no values
+ }
+
+ .progress-bar-container.has-value {
+ background: #fff; // White background when has values
+ }
+
+ .left-bar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ background: #fea43c; // Left bar color
+ border-radius: 10px 0 0 10px; // Rounded left corners
+ z-index: 1; // Below text
+ }
+
+ .right-bar {
+ position: absolute;
+ right: 0; // Align to the right
+ top: 0;
+ height: 100%;
+ background: #409eff; // Right bar color (changed to blue)
+ border-radius: 0 10px 10px 0; // Rounded right corners
+ z-index: 1; // Below text
+ }
+ // Remove old schedule styles if they exist
+ .schedule,
.schedule1 {
- // width: 149px;
- flex: 1;
- height: 16px;
- background: #fff;
- border-radius: 10px 10px 10px 10px;
- margin: 5px;
- position: relative;
+ display: none; // Hide old elements if necessary, or remove them fully
}
.current-schedule {
- position: absolute;
- width: 30%;
- background: #fea43c;
- height: 16px;
- border-radius: 10px 10px 10px 10px;
+ display: none; // Hide old elements if necessary, or remove them fully
}
+
.progress-wrapper {
display: flex;
align-items: center;
@@ -413,6 +462,8 @@ export default {
transform: translate(-50%, -50%);
font-size: 12px;
white-space: nowrap;
+ color: #fff; // Ensure text is readable (changed to white)
+ z-index: 2; // Above the bars
}
.state {
font-size: 10px;
diff --git a/src/views/vipCenter/index.vue b/src/views/vipCenter/index.vue
index 054fd2b..7bc1822 100644
--- a/src/views/vipCenter/index.vue
+++ b/src/views/vipCenter/index.vue
@@ -221,7 +221,7 @@ export default {
],
baseSelfServiceList: [
{ name: "修改地址", id: "1", ifshow: 0 },
- { name: "订单自提", id: "2", ifshow: 0 },
+ // { name: "订单自提", id: "2", ifshow: 0 },
{ name: "户籍变更", id: "3", ifshow: 0 },
// { name: "经销商认证", id: "4", ifshow: 0 },
{ name: "自助撤单", id: "8", ifshow: 0 },