first2

pages/first2/index.vue

@@ -1,14 +1,25 @@
 <template style="background-color: red">
-  <div style="height: 100vh; background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%); box-sizing: border-box">
+  <div
+    style="
+      height: 100vh;
+
+      background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
+      box-sizing: border-box;
+      overflow: scroll;
+    "
+  >
     <div
       class="first2"
       :style="{
         background: 'url(https://file.rongcyl.cn/festatic/bkm/first2/bg.png)',
-        height: '100vh',
+        height: 'calc(100vh - 160rpx)',
         'background-repeat': 'no-repeat',
         'background-position': 'center center',
         'background-size': 'contain',
         'padding-top': safeAreaTop,
+        'box-sizing': 'border-box',
+        overflow: 'scroll',
+        'padding-bottom': '160rpx',
       }"
     >
       <div class="text-white bold text-center mt-2">FIRST赏详情</div>
@@ -106,7 +117,6 @@
             class="absolute top-1 mx-auto"
             style="
               left: 10rpx;
-
               right: 10rpx;
               width: 670rpx;
               height: 890rpx;
@@ -116,11 +126,23 @@
             "
           >
             <div class="flex justify-around mt-4">
-              <img src="https://file.rongcyl.cn/festatic/bkm/first2/t1.png" style="width: 126rpx; height: 32rpx" />
-              <img src="https://file.rongcyl.cn/festatic/bkm/first2/t2.png" style="width: 126rpx; height: 32rpx" />
-              <img src="https://file.rongcyl.cn/festatic/bkm/first2/t3.png" style="width: 126rpx; height: 32rpx" />
+              <img
+                src="https://file.rongcyl.cn/festatic/bkm/first2/t1.png"
+                @click="tabIndex = 1"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                src="https://file.rongcyl.cn/festatic/bkm/first2/t2.png"
+                @click="tabIndex = 2"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                src="https://file.rongcyl.cn/festatic/bkm/first2/t3.png"
+                @click="tabIndex = 3"
+                style="width: 126rpx; height: 32rpx"
+              />
             </div>
-            <div class="flex flex-wrap justify-between" style="padding: 20rpx 16rpx">
+            <div class="flex flex-wrap justify-between" style="padding: 20rpx 16rpx" v-if="tabIndex == 1">
               <div class="flex items-center justify-center c1">
                 <img src="https://file.rongcyl.cn/festatic/bkm/first2/0.png" style="width: 24rpx; height: 24rpx" />
               </div>
@@ -216,6 +238,46 @@
                 <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
               </div>
             </div>
+            <div class="pt-4" v-if="tabIndex == 2">
+              <Title title="LAST赏" />
+              <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
+                <div
+                  v-for="item in 3"
+                  class="mr-2"
+                  style="width: 168rpx; background-color: #f9f6f2; border-radius: 4px; margin-bottom: 10px"
+                >
+                  <img
+                    src="https://file.rongcyl.cn/festatic/bkm/card.png"
+                    style="width: 144rpx; height: 144rpx; border-radius: 5px; margin: auto"
+                  />
+                  <div class="fs13 pl-2">冲四层闯…</div>
+                  <div style="color: #ea6636" class="pl-2">
+                    <span class="fs11">参考价</span>
+                    <span class="fs14 bold">990.5</span>
+                  </div>
+                </div>
+              </div>
+              <Title title="FIRST赏" />
+              <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
+                <div
+                  v-for="item in 3"
+                  class="mr-2"
+                  style="width: 168rpx; background-color: #f9f6f2; border-radius: 4px; margin-bottom: 10px"
+                >
+                  <img
+                    src="https://file.rongcyl.cn/festatic/bkm/card.png"
+                    style="width: 144rpx; height: 144rpx; border-radius: 5px; margin: auto"
+                  />
+                  <div class="fs13 pl-2">冲四层闯…</div>
+                  <div style="color: #ea6636" class="pl-2">
+                    <span class="fs11">参考价</span>
+                    <span class="fs14 bold">990.5</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap justify-between" style="padding: 20rpx 16rpx" v-if="tabIndex == 3">3</div>
             <img
               src="https://file.rongcyl.cn/festatic/bkm/first2/dots.png"
               class="absolute mx-auto inline-block left-0 right-0"
@@ -224,17 +286,53 @@
           </div>
         </div>
       </div>
+
+      <div class="fixed right-2 bottom-20" style="height: 460rpx">
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/fu.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/bag.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/refresh.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/share.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+      </div>
+
+      <div class="buy items-center">
+        <div class="pica ml-2" style="margin-top: -38rpx">
+          <img src="https://file.rongcyl.cn/festatic/bkm/first2/pica.png" class="w-full h-full" />
+        </div>
+        <div class="flex-1 text-white fs12 ml12 relative bottom-3 pl-3">
+          <span class="inline-block">已选99个 合计:</span>
+          <span class="inline-block" style="color: #ea6636">
+            <span class="bold">¥</span>
+            <span class="fs18 bold">999.5</span>
+          </span>
+        </div>
+        <img src="https://file.rongcyl.cn/festatic/bkm/first2/bug.png" class="b_btn relative bottom-3 right-2" />
+      </div>
     </div>
   </div>
 </template>
-'
+
 <script>
+import Title from './title.vue'
 export default {
   data() {
     return {
       safeAreaTop: '0px',
+      tabIndex: 2,
     }
   },
+  components: { Title },
   mounted() {
     this.getSafeAreaTop()
   },
@@ -262,6 +360,7 @@ export default {
     height: 400rpx;
     margin-top: 18px;
   }
+
   .c1 {
     background-image: url(https://file.rongcyl.cn/festatic/bkm/first2/ca.png);
     width: 96rpx;
@@ -280,5 +379,24 @@ export default {
     background-size: contain;
     margin-bottom: 14rpx;
   }
+  .buy {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 750rpx;
+    height: 160rpx;
+    background: #000000;
+    opacity: 1;
+    display: flex;
+    .pica {
+      width: 88rpx;
+      height: 88rpx;
+    }
+    .b_btn {
+      width: 232rpx;
+      height: 76rpx;
+    }
+  }
 }
 </style>

pages/first2/title.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative">
+    <div class="flex">
+      <div class="_1"></div>
+      <div class="_2"></div>
+      <div class="_3"></div>
+      <div class="_4"></div>
+    </div>
+    <div style="height: 44rpx; background: #fc5b20; position: relative; top: -1px"></div>
+    <div class="absolute left-2 top-2 bold italic text-white fs14">{{ title }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: '',
+  },
+}
+</script>
+<style>
+._1 {
+  width: 60rpx;
+  height: 24rpx;
+  background-color: #fc5b20;
+  border-top-left-radius: 18rpx;
+}
+._2 {
+  transform: skew(45deg, 0deg);
+  width: 140rpx;
+  height: 24rpx;
+  background-color: #fc5b20;
+  border-radius: 10rpx;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  position: relative;
+  left: -30rpx;
+}
+._3 {
+  transform: skew(45deg, 0deg);
+  width: 140rpx;
+  height: 24rpx;
+  background-color: #000;
+  border-radius: 10rpx;
+  position: relative;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  left: -30rpx;
+}
+._4 {
+  width: 60rpx;
+  height: 24rpx;
+  background-color: #000;
+  border-top-right-radius: 18rpx;
+  position: relative;
+  left: -60rpx;
+}
+</style>

static/style.scss

@@ -1,5 +1,5 @@
 .bold {
-  font-size: 600;
+  font-weight: 600;
 }
 
 page {
@@ -48,3 +48,11 @@ image {
 .fs14 {
   font-size: 14px;
 }
+
+.fs16 {
+  font-size: 16px;
+}
+
+.fs18 {
+  font-size: 18px;
+}