添加商品详情页的选择按钮

src/assets/svg/select.svg

@@ -0,0 +1,5 @@
+<svg t="1712740303544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6513"
+     width="200" height="200">
+    <path d="M892.064 261.888a31.936 31.936 0 0 0-45.216 1.472L421.664 717.248l-220.448-185.216a32 32 0 1 0-41.152 48.992l243.648 204.704a31.872 31.872 0 0 0 20.576 7.488 31.808 31.808 0 0 0 23.36-10.112L893.536 307.136a32 32 0 0 0-1.472-45.248z"
+          p-id="6514" fill="#ffffff"></path>
+</svg>

src/components/AdverisingRight.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="right-row">
     <template v-for="index in data.len">
-      <div class="right-item" @click="jump()"
-           style="background-image: url('https://files.kardz.cn/demon/img_v3_025g_430b8ed0-cb39-4904-9f75-9191a1ce914g-4d66d8c530814e8eac431720676a989d.png?x-oss-process=image/resize,m_fill,h_450,w_300/format,jpg')">
-        <!--        <img src="../assets/adver.jpg" alt=""/>-->
+      <div class="right-item" @click="jump()">
+<!--           :style="style">-->
+        <!--           style="background-image: url('https://files.kardz.cn/demon/img_v3_025g_430b8ed0-cb39-4904-9f75-9191a1ce914g-4d66d8c530814e8eac431720676a989d.png?x-oss-process=image/resize,m_fill,h_450,w_300/format,jpg')">-->
+        <img src="../assets/adver.jpg" :alt="index"/>
         <div class="item-btn"
         >点击购买
         </div>
@@ -23,7 +24,6 @@ const props = defineProps({
     default: () => []
   }
 })
-
 function jump() {
   router.push({name: "detail", params: {id: props.data.goodsId[0]}});
 }
@@ -51,6 +51,10 @@ function jump() {
     img {
       margin: 0;
       width: 300px;
+      color: #000;
+      background: white;
+      position: absolute;
+      z-index: 1;
     }
 
     .item-btn {
@@ -67,7 +71,6 @@ function jump() {
 
     &:hover {
       &::after {
-
         display: block;
       }
     }

src/page/DetailPage.vue

@@ -45,7 +45,38 @@
       </div>
     </div>
     <div class="goods-info">
-      <div class="info-left"></div>
+      <div class="info-left">
+        <div class="info-left-select-btns">
+          <!--          <template v-for="index in 10">-->
+          <div class="info-left-select-btn"><span>美国</span></div>
+          <div class="info-left-select-btn"><span>美区（带账号）</span></div>
+          <div class="info-left-select-btn"><span>中国香港</span></div>
+          <div class="info-left-select-btn"><span>国区</span></div>
+          <div class="info-left-select-btn"><span>中国台湾</span></div>
+          <div class="info-left-select-btn"><span>日本</span></div>
+          <div class="info-left-select-btn"><span>澳洲</span></div>
+          <div class="info-left-select-btn"><span>德国</span></div>
+          <div class="info-left-select-btn"><span>阿联酋</span></div>
+          <!--</template>-->
+        </div>
+        <div class="info-left-select-param">
+          <template v-for="(item,index) in selectorDatas">
+            <div class="info-left-select-param-btn">
+              <div class="ilspb-selector">
+                <img src="../assets/svg/select.svg" v-if="index === selectIndex"/>
+              </div>
+              <span>{{ item.name }}</span>
+              <div class="ilspb-tag" v-if="item.tag">新手体验</div>
+            </div>
+          </template>
+
+        </div>
+        <div class="info-left-des">
+          <div class="info-introduction"></div>
+          <div class="info-question"></div>
+        </div>
+
+      </div>
       <div class="info-right">
         <div class="info-right-price-calc">
           <div class="info-right-purchase-count">
@@ -87,7 +118,7 @@
                   <img src="../assets/goods-img.jpg" alt="测试图片"/>
                 </div>
                 <div class="recommend-item-name">
-                  rot
+                  steam（美国）充值卡-20美金
                 </div>
               </div>
             </template>
@@ -119,6 +150,33 @@ function purchaseQuantityMinus() {
   purchaseQuantity.value--;
 }
 
+//============简单的对象==============
+let selectIndex = ref(0)
+let selectorDatas = ref([
+  {
+    name: "苹果（中国香港）iTunes礼品卡-50港元",
+    tag: "新手体验"
+  },
+  {
+    name: "苹果（中国香港）iTunes礼品卡-50港元",
+    tag: ""
+  },
+  {
+    name: "苹果（中国香港）iTunes礼品卡-150港元",
+    tag: "平台推荐"
+  },
+  {
+    name: "苹果（中国香港）iTunes礼品卡-200港元",
+    tag: ""
+
+  }
+])
+
+class SelectData {
+  name: string
+  tag: string
+}
+
 </script>
 <style scoped lang="scss">
 .detail {
@@ -223,7 +281,94 @@ function purchaseQuantityMinus() {
 
     .info-left {
       width: 760px;
-      background: #535bf2;
+
+      .info-left-select-btns {
+        width: 760px;
+        display: flex;
+        justify-content: left;
+        flex-wrap: wrap;
+        border-bottom: #808080 1px solid;
+        margin-bottom: 30px;
+
+        .info-left-select-btn {
+          margin: 0 10px 20px 0;
+          height: 35px;
+          line-height: 35px;
+          text-align: center;
+          border-radius: 15px;
+          border: #8b8b8b 1px solid;
+          padding: 5px 15px;
+          color: #8b8b8b;
+          cursor: pointer;
+          transition: background-color 0.2s ease;
+          user-select: none;
+
+          &:hover {
+            background: #888888;
+            color: white;
+          }
+
+          &:active {
+            background: #dddddd;
+            color: #888888;
+          }
+        }
+      }
+
+      .info-left-select-param {
+        margin-bottom: 20px;
+        width: 760px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .info-left-select-param-btn {
+          width: 300px;
+          height: 35px;
+          line-height: 35px;
+          padding: 5px 15px;
+          cursor: pointer;
+          border: #8b8b8b 1px solid;
+          border-radius: 15px;
+          transition: background-color 0.2s ease;
+          display: flex;
+          font-size: 12px;
+          margin-bottom: 10px;
+
+          .ilspb-selector{
+            display: inline-block;
+            line-height: 35px;
+            width: 20px;
+            height: 20px;
+            background: #888888;
+            border-radius: 50%;
+            margin: 7px 0;
+            img{
+              width: 20px;
+              height: 20px;
+            }
+          }
+
+          span{
+            margin-left: 10px;
+          }
+          .ilspb-tag{
+            position: absolute;
+            right: 0;
+          }
+
+          &:hover {
+            background: #888888;
+            color: white;
+          }
+
+          &:active {
+            background: #dddddd;
+            color: #888888;
+          }
+        }
+      }
+
     }
 
     .info-right {
@@ -372,11 +517,15 @@ function purchaseQuantityMinus() {
       .info-recommend {
         margin-top: 40px;
         width: 380px;
+        background: #fff;
 
         .info-recommend-title {
           font-size: 24px;
           font-weight: bold;
-          text-align: left;
+          text-align: center;
+          padding-bottom: 15px;
+          margin-bottom: 15px;
+          border-bottom: 1px solid #dddddd;;
         }
 
         .info-recommend-items {
@@ -388,26 +537,57 @@ function purchaseQuantityMinus() {
           display: flex;
 
           .info-recommend-item {
-            margin-right: 10px;
-            margin-bottom: 20px;
+            cursor: pointer;
+            margin: 0 10px 20px 10px;
+            max-width: 150px;
 
             .recommend-item-img {
-              width: 104px;
+              width: 110px;
               height: 143px;
+              margin-bottom: 12px;
 
               img {
                 border-radius: 15px;
-                width: 108px;
+                width: 110px;
                 height: 143px;
+                z-index: 1;
               }
+
+              &:after {
+                transition: all 5.3s ease;
+                margin: -148px 0 0 0;
+                position: absolute;
+                display: none;
+                z-index: 2;
+                content: "";
+                width: 110px;
+                height: 143px;
+                background-color: rgba(255, 255, 255, 0.1);
+                border-radius: 15px;
+              }
+
+              &:hover {
+                &:after {
+
+                  display: block;
+                }
+              }
+            }
+
+            &:hover .recommend-item-img img {
+              box-shadow: #333 0 0 8px;
             }
 
             .recommend-item-name {
-              font-size: 14px;
+              width: 110px;
+              height: 38px;
+
+              font-size: 12px;
               text-align: left;
             }
-          }
 
+
+          }
         }
       }
     }