From 733c41db7cbc611ac919a7140ecda724b66a84f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Tue, 22 Jul 2025 19:23:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=AF=BC=E5=85=A5tween?= =?UTF-8?q?=EF=BC=9B=E4=B8=80=E4=BF=AE=E6=94=B9=E4=B8=BA=E4=BA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/views/choujiang/hxl-cj/cj.vue | 137 +++++++++++++++++--------------------- src/views/zhongchou/index.vue | 2 +- 3 files changed, 62 insertions(+), 79 deletions(-) diff --git a/index.html b/index.html index 9996a66..7867639 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Vite + Vue - +
diff --git a/src/views/choujiang/hxl-cj/cj.vue b/src/views/choujiang/hxl-cj/cj.vue index 4d7cd9a..ab59683 100644 --- a/src/views/choujiang/hxl-cj/cj.vue +++ b/src/views/choujiang/hxl-cj/cj.vue @@ -11,17 +11,9 @@
    -
  • -
    +
  • +
    @@ -35,27 +27,17 @@
    -
    +
    -
    +
    {{ item.leftCount }}/{{ item.count }}
    - 待揭秘 + 待揭秘
@@ -68,12 +50,7 @@
- 展开 + 展开
HomilyID
奖项
@@ -374,7 +351,7 @@ const initAll = async () => { prizes.value = prizeList.data; // 用户列表 users.value = userList.data; - prizes.value.forEach((item, index) => { + prizes.value.forEach((item, index) => { item.type = index; item.count = item.amount; item.leftCount = item.remainNum; //剩余次数（用于计算奖品下方的进度条的百分比） @@ -1587,12 +1564,15 @@ a { overflow-y: auto; /* 隐藏滚动条 */ - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE */ + scrollbar-width: none; + /* Firefox */ + -ms-overflow-style: none; + /* IE */ } #prizeBar::-webkit-scrollbar { - display: none; /* Chrome, Safari */ + display: none; + /* Chrome, Safari */ } .prize-list { @@ -1668,20 +1648,24 @@ a { } @keyframes bounce1 { + 0%, 100% { transform: rotate(180deg) translateY(0); } + 50% { transform: rotate(180deg) translateY(-8px); } } @keyframes bounce2 { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } @@ -1702,6 +1686,7 @@ a { width: 50%; text-align: center; } + .tableHead2 { width: 50%; text-align: center; @@ -1711,13 +1696,11 @@ a { width: 90%; height: 3px; border-radius: 150%; - background: linear-gradient( - to right, - transparent 0%, - #d5291f 45%, - #d5291f 55%, - transparent 100% - ); + background: linear-gradient(to right, + transparent 0%, + #d5291f 45%, + #d5291f 55%, + transparent 100%); position: absolute; bottom: -10px; } @@ -1728,15 +1711,20 @@ a { width: 100%; height: 54vh; justify-content: center; - overflow-y: auto; /* 启用垂直滚动 */ - overflow-x: hidden; /* 启用垂直滚动 */ + overflow-y: auto; + /* 启用垂直滚动 */ + overflow-x: hidden; + /* 启用垂直滚动 */ /* 隐藏滚动条 */ - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE */ + scrollbar-width: none; + /* Firefox */ + -ms-overflow-style: none; + /* IE */ } .tableBody::-webkit-scrollbar { - display: none; /* Chrome, Safari */ + display: none; + /* Chrome, Safari */ } .tableItem { @@ -1807,6 +1795,7 @@ a { display: flex; align-items: center; } + .level { width: 38%; height: 100%; @@ -1849,36 +1838,30 @@ a { } .progress-bar-striped { - background-image: -webkit-linear-gradient( - 45deg, - rgba(255, 255, 255, 0.15) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.15) 50%, - rgba(255, 255, 255, 0.15) 75%, - transparent 75%, - transparent - ); - background-image: -o-linear-gradient( - 45deg, - rgba(255, 255, 255, 0.15) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.15) 50%, - rgba(255, 255, 255, 0.15) 75%, - transparent 75%, - transparent - ); - background-image: linear-gradient( - 45deg, - rgba(255, 255, 255, 0.15) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.15) 50%, - rgba(255, 255, 255, 0.15) 75%, - transparent 75%, - transparent - ); + background-image: -webkit-linear-gradient(45deg, + rgba(255, 255, 255, 0.15) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.15) 50%, + rgba(255, 255, 255, 0.15) 75%, + transparent 75%, + transparent); + background-image: -o-linear-gradient(45deg, + rgba(255, 255, 255, 0.15) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.15) 50%, + rgba(255, 255, 255, 0.15) 75%, + transparent 75%, + transparent); + background-image: linear-gradient(45deg, + rgba(255, 255, 255, 0.15) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.15) 50%, + rgba(255, 255, 255, 0.15) 75%, + transparent 75%, + transparent); -webkit-background-size: 8px 8px; background-size: 8px 8px; } diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 679a889..d3971c5 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -215,7 +215,7 @@ async function fetchActivity() { const numberToChinese = (num) => { - const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] + const chineseNumbers = ['零', '一', '两', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] return chineseNumbers[num] || num.toString() } // 进度条高度动态获取