添加特惠礼包

src/page/GiftPackDiscounts.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="gift-pack" style="margin-bottom: 100px">
+    <div class="gift-pack-title">特惠礼包</div>
+    <div class="gift-pack-content">
+      <template v-for="index in 3">
+        <div class="content-item">
+          <div class="content-item-img">
+            <img src="../assets/giftpack.jpg"/>
+          </div>
+          <div class="content-item-title">游戏点券美元充值</div>
+          <div class="content-item-remark">你看了一定想买</div>
+          <div class="content-item-price">
+            <del class="price-original">
+              <span>￥{{ (index + 9) * 3 }}</span></del>
+            <div class="price-target"><span>
+              省{{ (index + 9) * 2 }}
+            </span></div>
+            <div class="price-now">￥{{ (index + 9) }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.gift-pack {
+  width: 1170px;
+  text-align: left;
+  font-size: 12px;
+  margin: 30px auto 20px auto ;
+  line-height: 18px;
+  .gift-pack-title {
+    font-size: 24px;
+    margin-bottom: 15px;
+  }
+
+  .gift-pack-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+  }
+
+  .content-item-title {
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .content-item-remark {
+    color: #999;
+  }
+
+  .content-item-price {
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 0;
+
+    div {
+      margin-right: 10px;
+    }
+    .price-original {
+      text-decoration: line-through;
+      color: #888888;
+    }
+
+    .price-target {
+      vertical-align: middle;
+      padding: 0 3px;
+      margin: 0 0 0 4px;
+      background: red;
+      color: white;
+      font-weight: bolder;
+    }
+
+    .price-now {
+      font-family: BlinkMacSystemFont;
+      font-size: 16px;
+    }
+  }
+
+}
+</style>

src/page/index.vue

@@ -34,7 +34,7 @@
     <div class="main-content">
 
       <HomeConnect/>
-
+      <GiftPackDiscounts/>
 
     </div>
     <!--    底部内容-->
@@ -86,6 +86,7 @@
 </template>
 <script setup lang="ts">
 import HomeConnect from "./HomeConnent.vue";
+import GiftPackDiscounts from "./GiftPackDiscounts.vue";
 import {ref} from 'vue'
 
 let showLogin = ref(false)

src/style.css

@@ -4,7 +4,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  /*color: rgba(255, 255, 255, 0.87);*/
+  color: rgba(0, 0, 0, 0.87);
   /*background-color: #242424;*/
 
   font-synthesis: none;

text/MSG.json

@@ -0,0 +1,8 @@
+{
+  "code": "error",
+  "message": "The request is invalid",
+  "data": {
+    "id": 1,
+    "name": "John Doe"
+  }
+}

text/text.http

@@ -0,0 +1,14 @@
+GET http://localhost:80/api/item
+Accept: application/json
+Authorization: ***
+
+
+###
+POST http://localhost:80/api/item
+Content-Type: application/json
+
+{
+  
+}
+
+###