diff --git a/detail.html b/detail.html index 950a01b..0e5914a 100644 --- a/detail.html +++ b/detail.html @@ -26,6 +26,7 @@ + diff --git a/index-style.css b/index-style.css index 047729d..9b5f04e 100644 --- a/index-style.css +++ b/index-style.css @@ -7,7 +7,6 @@ #app { width: 100%; padding-bottom: 0.2rem; - background-color: #3387c2; position: relative; } @@ -132,6 +131,7 @@ top: 0; left: 0; z-index: 99; + display: none; } .pop-main { diff --git a/index.html b/index.html index 2761e45..5e8f80e 100644 --- a/index.html +++ b/index.html @@ -25,70 +25,118 @@ + +
- -
-
-
-

兑换商品列表

+
+ +
+
+
+

兑换商品列表

-
-
- -
-

腾讯视频VIP

-

会有月卡

-
+
+
+ +
+

腾讯视频VIP

+

会有月卡

+
-
- - - - - +
+ + + + + +
+ +
+ 立即兑换 +
+ +
+
+
+ +
+
+ + +
+

充值确认

+

即将充值到尾号0829的手机号

+

该权益只能充值到银联无界卡数字生活礼遇活动报名手机号

-
- 立即兑换 +
+ +
-
+
+
+
+
+
+
+
+
-
-
- - -
-

充值确认

-

即将充值到尾号0829的手机号

-

该权益只能充值到银联无界卡数字生活礼遇活动报名手机号

-
- -
- - -
+
+
+ {{ state.toastText }}
+
diff --git a/style.css b/style.css new file mode 100644 index 0000000..b529d60 --- /dev/null +++ b/style.css @@ -0,0 +1,42 @@ +.skeleton-box { + width: 100%; + height: 100vh; + background-color: #ffffff; + padding: 0.2rem 0.1rem; +} + +.skeleton-loader { + width: 100%; + height: 1rem; + border-radius: 0.04rem; + background: #f0f0f0; + position: relative; + overflow: hidden; + margin-bottom: 0.15rem; +} + +.skeleton-loader::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + to right, + transparent 0%, + #e3e3e3 50%, + transparent 100% + ); + animation: loading 1.5s infinite; +} + +@keyframes loading { + 0% { + left: -100%; + } + + 100% { + left: 100%; + } +}