index2

pages/index/index.vue

@@ -22,7 +22,7 @@
         <image :src="$fileUrl() + '/Frame2.png'" alt="" />
         <span>拍卖专区</span>
       </view>
-      <view class="tab">
+      <view class="tab" @click="$navigateTo('/pages/index2/index')">
         <image :src="$fileUrl() + '/Frame1.png'" alt="" />
         <span>VIP福利</span>
       </view>

pages/index2/index.vue

@@ -1,6 +1,11 @@
 <template>
-  <div style="background-image: url(https://file.rongcyl.cn/festatic/bkm/task.png)">
-    <img src="https://mall.rongtongh.cn/storage/imgv2/raffle/1.jpg" class="w-full" />
+  <div
+    style="
+      background: url(https://file.rongcyl.cn/festatic/bkm/bg_i.png) no-repeat center center;
+      background-size: contain;
+    "
+  >
+    <img src="https://file.rongcyl.cn/festatic/bkm/banner.png" class="w-full" />
     <div
       style="
         background: rgba(0, 0, 0, 0.85);
@@ -16,11 +21,15 @@
 
       <div class="flex justify-between m-2 co">
         <img src="https://file.rongcyl.cn/festatic/bkm/center.png" class="center" />
-        <div class="clicks flex-1">
+        <div class="clicks flex-1 overflow-scroll">
           <div>
-            <img src="https://file.rongcyl.cn/festatic/bkm/click.png" class="m-2 inline-block" />
-            <img src="https://file.rongcyl.cn/festatic/bkm/click.png" class="m-2 inline-block" />
-            <img src="https://file.rongcyl.cn/festatic/bkm/click.png" class="m-2 inline-block" />
+            <div class="m-2 inline-block relative" v-for="c in click">
+              <img src="https://file.rongcyl.cn/festatic/bkm/click.png" />
+              <div class="absolute top-4 left-0 text-center right-0">
+                <div class="bold fs12">闯关9-2</div>
+                <div class="fs11 text-zinc-600">闯关9-2</div>
+              </div>
+            </div>
           </div>
         </div>
         <img src="https://file.rongcyl.cn/festatic/bkm/more.png" class="more" />
@@ -72,7 +81,10 @@
           <div style="color: #fc5b20; margin-top: 10px; font-size: 20px" class="fontPFSCS">￥990</div>
         </div>
       </div>
-      <img src="https://file.rongcyl.cn/festatic/bkm/p.png" class="p" />
+      <div class="p">
+        <img src="https://file.rongcyl.cn/festatic/bkm/p.png" />
+        <div class="absolute text-white bottom-2 fs11 text-center left-0 right-0">3333</div>
+      </div>
     </div>
   </div>
 </template>
@@ -82,6 +94,7 @@ export default {
   data() {
     return {
       arr: 4,
+      click: 3,
     }
   },
 
@@ -115,11 +128,13 @@ export default {
   height: 98px;
 }
 .p {
-  width: 50px;
-  height: 50px;
   position: fixed;
   bottom: 120px;
   right: 20px;
+  img {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .tabs {

static/style.scss

@@ -55,3 +55,16 @@ image {
 .grey {
   filter: grayscale(100%);
 }
+
+.fs11 {
+  font-size: 11px;
+}
+.fs12 {
+  font-size: 12px;
+}
+.fs13 {
+  font-size: 13px;
+}
+.fs14 {
+  font-size: 14px;
+}