修改了子按钮的标签，添加了文章和问题的按钮

src/page/DetailPage.vue

@@ -60,20 +60,31 @@
           <!--</template>-->
         </div>
         <div class="info-left-select-param">
+          <!--          TODO 标签暂时还存在问题-->
           <template v-for="(item,index) in selectorDatas">
-            <div class="info-left-select-param-btn">
+            <div class="info-left-select-param-btn" @click="selectIndex = index">
               <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 class="ilspb-tag" :style="getTargetMarginLeft(item.tag)" v-if="item.tag">
+                {{ item.tag }}
+              </div>
             </div>
           </template>
-
         </div>
+
         <div class="info-left-des">
-          <div class="info-introduction"></div>
-          <div class="info-question"></div>
+          <div class="des-tags">
+            <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''" @click="selectArticleType=0">
+              商品介绍
+            </div>
+            <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">
+              常见问题
+            </div>
+          </div>
+          <div class="info-introduction" v-show="true"></div>
+          <div class="info-question" v-show="false"></div>
         </div>
 
       </div>
@@ -150,12 +161,16 @@ function purchaseQuantityMinus() {
   purchaseQuantity.value--;
 }
 
+//============文章类型选择================
+let selectArticleType = ref(0)
+
+
 //============简单的对象==============
 let selectIndex = ref(0)
 let selectorDatas = ref([
   {
     name: "苹果（中国香港）iTunes礼品卡-50港元",
-    tag: "新手体验"
+    tag: "新手体验11111111"
   },
   {
     name: "苹果（中国香港）iTunes礼品卡-50港元",
@@ -172,6 +187,20 @@ let selectorDatas = ref([
   }
 ])
 
+//计算字符串宽度
+function getTargetMarginLeft(tag: string) {
+  //计算字符串宽度
+  const dom = document.createElement('span');
+  dom.style.display = 'inline-block';
+  dom.style.fontSize = '12px';
+  dom.textContent = tag;
+  document.body.appendChild(dom);
+  const width = dom.clientWidth;
+  console.log(dom.clientWidth);
+  document.body.removeChild(dom);
+  return {marginLeft: (280 - width) + 'px'}
+}
+
 class SelectData {
   name: string
   tag: string
@@ -283,12 +312,17 @@ class SelectData {
       width: 760px;
 
       .info-left-select-btns {
-        width: 760px;
+        padding: 15px;
+        width: 730px;
+        border: #dddddd solid;
+        border-width: 1px 1px 0 1px;
+        border-radius: 5px 5px 0 0;
+
         display: flex;
         justify-content: left;
         flex-wrap: wrap;
-        border-bottom: #808080 1px solid;
-        margin-bottom: 30px;
+        //margin-bottom:  30px;
+        background: white;
 
         .info-left-select-btn {
           margin: 0 10px 20px 0;
@@ -316,13 +350,19 @@ class SelectData {
       }
 
       .info-left-select-param {
+        padding: 15px;
+        border-radius: 0 0 5px 5px;
+        border: #dddddd 1px solid;
+        background: white;
+
         margin-bottom: 20px;
-        width: 760px;
+        width: 730px;
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
 
         .info-left-select-param-btn {
+          user-select: none;
           width: 300px;
           height: 35px;
           line-height: 35px;
@@ -335,7 +375,7 @@ class SelectData {
           font-size: 12px;
           margin-bottom: 10px;
 
-          .ilspb-selector{
+          .ilspb-selector {
             display: inline-block;
             line-height: 35px;
             width: 20px;
@@ -343,32 +383,75 @@ class SelectData {
             background: #888888;
             border-radius: 50%;
             margin: 7px 0;
-            img{
-              width: 20px;
-              height: 20px;
+
+            img {
+              width: 15px;
+              height: 15px;
+              padding-bottom: 5px;
             }
           }
 
-          span{
+          span {
             margin-left: 10px;
           }
-          .ilspb-tag{
+
+          .ilspb-tag {
+            margin-top: -15px;
+            margin-left: 0;
+            padding: 0 10px;
+            background: #f8d9d1;
+            font-size: 12px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 5px;
             position: absolute;
-            right: 0;
+            color: rgba(223, 30, 28);
+            border: rgba(223, 30, 28) 1px solid;
+
+          }
+
+          .it {
+            margin: -15px 0 0 180px;
           }
 
           &:hover {
-            background: #888888;
+            background: #aaa;
             color: white;
           }
 
           &:active {
             background: #dddddd;
-            color: #888888;
+            color: #aaa;
           }
         }
       }
 
+      .info-left-des {
+        margin-top: 30px;
+        height: 600px;
+        border-radius: 5px;
+        border: #dddddd 1px solid;
+        background: white;
+
+        .des-tags {
+          display: flex;
+          flex-wrap: wrap;
+          font-size: 16px;
+          border-bottom: #dddddd 1px solid;
+
+          .des-tag {
+            padding: 15px 5px;
+            transition: font-size 0.2s ease;
+            line-height: 30px;
+            cursor: pointer;
+          }
+
+          .des-select-tag {
+            font-weight: bold;
+            font-size: 20px;
+          }
+        }
+      }
     }
 
     .info-right {
@@ -444,7 +527,7 @@ class SelectData {
           height: 160px;
           width: 318px;
           padding: 10px 30px 10px 30px;
-
+          background: white;
 
           .price-name {
             justify-content: left;
@@ -459,7 +542,7 @@ class SelectData {
             /*文本置底*/
             vertical-align: bottom;
             justify-content: space-between;
-            margin: 10px 5px 0px 5px;
+            margin: 10px 5px 0 5px;
 
             .price-number {
               display: flex;
@@ -486,6 +569,8 @@ class SelectData {
                 font-size: 26px;
                 color: #ff4d4f;
                 text-align: right;
+                /*字间距*/
+                letter-spacing: -1.5px;
 
                 &:before {
                   content: "￥";
@@ -516,8 +601,12 @@ class SelectData {
 
       .info-recommend {
         margin-top: 40px;
+        margin-bottom: 20px;
         width: 380px;
         background: #fff;
+        border-radius: 5px;
+        border: 1px solid #dddddd;
+
 
         .info-recommend-title {
           font-size: 24px;