修改了商标注册路由

src/components/TM.vue

@@ -24,37 +24,96 @@
             <div class="right"></div>
           </div>
           <ul class="box1ul">
-            <li v-for="(item, index) in box1Data" :key="index">
-              <img :src="item.imgSrc" alt="">
+            <!-- <li>
+              <div class="tehui"></div>
+              <h5>智能申请注册</h5>
+              <div class="text">
+                <p>0服务费，针对有一定商标申请经验并能自主评估风险的用户</p>
+              </div>
+              <span>
+                <div class="left">性价比</div>
+                <div class="right">高</div>
+              </span>
+              <div class="content">
+                <div class="row">
+                  <i></i>
+                  <em>自助办理，性价比高</em>
+                </div>
+                <div class="row">
+                  <i></i>
+                  <em>自助办理，性价比高</em>
+                </div>
+                <div class="row">
+                  <i></i>
+                  <em>自助办理，性价比高</em>
+                </div>
+              </div>
+              <div class="special">
+                <p>新用户专享价限购1件</p>
+              </div>
+              <div class="price">
+                <div class="mod1">
+                  <p>
+                    ￥<em>270</em>起
+                  </p>
+                </div>
+                <div class="mod2">
+                  <p>原价：318元</p>
+                </div>
+              </div>
+              <div class="goBuy">
+                <a href="#" class="buy">立即购买</a>
+              </div>
+            </li> -->
+            <li v-for="(item, index) in box1Data" :key="index" :class="{'tehui-item': item.isSpecial}">
+              <div v-if="item.isSpecial" class="tehui"></div>
               <h5>{{ item.title }}</h5>
               <div class="text">
-                <p>{{ item.p1 }}</p>
-                <p>{{ item.p2 }}</p>
+                <p>{{ item.label }}</p>
+              </div>
+              <div v-if="item.tab" class="tab-container">
+                <div class="tab-header">
+                  <div class="left">{{ item.tab.tabTitle }}</div>
+                  <div class="right" @click="toggleDropdown(index)">
+                    {{ currentTypes[index] || item.tab.tabText[0].text }}
+                    <i class="arrow-icon" v-if="item.tab.tabText.length > 1"></i>
+                  </div>
+                </div>
+                <div v-if="showDropdowns[index] && item.tab.tabText.length > 1" class="tab-dropdown">
+                  <div 
+                    v-for="(option, optIndex) in item.tab.tabText" 
+                    :key="optIndex" 
+                    @click="selectOption(index, option.text)"
+                    :class="{ 'active': (currentTypes[index] || item.tab.tabText[0].text) === option.text }"
+                  >
+                    {{ option.text }}
+                  </div>
+                </div>
+              </div>
+              <div class="content">
+                <div class="row" v-for="(contentItem, contentIndex) in getCurrentContent(index)" :key="contentIndex">
+                  <i></i>
+                  <em>{{ contentItem.explain }}</em>
+                </div>
+              </div>
+              <div class="special">
+                <p v-if="item.specialText">{{ item.specialText }}</p>
+              </div>
+              <div class="price">
+                <div class="mod1">
+                  <p>
+                    ￥<em>{{ getCurrentPrice(index) }}</em><span v-if="item.showStarting">起</span>
+                  </p>
+                </div>
+                <div class="mod2" v-if="item.originalPrice">
+                  <p>原价：{{ item.originalPrice }}元</p>
+                </div>
+              </div>
+              <div class="goBuy">
+                <a v-if="item.showConsult" href="https://www.aimzhu.com/operator/" target="_blank" class="consult">专家咨询</a>
+                <a href="https://www.aimzhu.com/operator/" target="_blank" class="buy">立即购买</a>
               </div>
-              <span>￥<em>{{ item.price }}</em></span>
-              <a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank">{{ item.aTitle }}</a>
             </li>
-            <!-- <li>
-              <img src="/assets/img/tm-bottom-box1-icon2.png" alt="">
-              <h5>极速注册</h5>
-              <div class="text">
-                <p>注册不成功免费在注册一次！</p>
-                <p></p>
-              </div>
-              <span>￥<em>1680</em></span>
-              <a href="#">咨询顾问</a>
-            </li>
-            <li>
-              <img src="/assets/img/tm-bottom-box1-icon3.png" alt="">
-              <h5>极速注册</h5>
-              <div class="text">
-                <p>商标注册成功后再收费，</p>
-                <p>注册名称需要经过审核条件</p>
-              </div>
-              <span>￥<em>2500</em></span>
-              <a href="#">咨询顾问</a>
-            </li> -->
-            
           </ul>
           <div class="bottomtext">
             <p>先查询后注册，有效提高注册通过率</p>
@@ -126,26 +185,6 @@
                 <p>{{ item3Top.p2 }}</p>
               </div>
             </li>
-            <!-- <li>
-              <em>48小时</em>
-              <p>系统智能查询人工专业查询</p>
-            </li>
-            <li>
-              <em>48小时</em>
-              <p>系统智能查询人工专业查询</p>
-            </li>
-            <li>
-              <em>48小时</em>
-              <p>系统智能查询人工专业查询</p>
-            </li>
-            <li>
-              <em>48小时</em>
-              <p>系统智能查询人工专业查询</p>
-            </li>
-            <li>
-              <em>48小时</em>
-              <p>系统智能查询人工专业查询</p>
-            </li> -->
           </ul>
           <ul class="box3ul2">
             <li v-for="(item3Bottom, index) in box3DataBottom" :key="index">
@@ -229,32 +268,87 @@
 export default {
   data() {
     return {
+      currentTypes: [], // 存储每个可切换项目的当前类型
+      showDropdowns: [], // 存储每个下拉菜单的显示状态
       box1Data: [
         { 
-          imgSrc: '/assets/img/tm-bottom-box1-icon1.png',
-          title: '极速注册',
-          p1: '一对一专属顾问，24小时专业解答',
-          p2: '',
-          price: '990',
-          aTitle: '咨询顾问'
+          title: '智能申请注册',
+          label: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
+          isSpecial: true,
+          specialText: '新用户专享价限购1件',
+          tab: {
+            tabTitle: '性价比',
+            tabText: [
+              {
+                text: '高',
+                content: [
+                  {explain: '自助办理，性价比高'},
+                  {explain: '自助查询，排查风险'},
+                  {explain: '人工严审，提升受理率'},
+                ]
+              }
+            ]
+          },
+          price: '270',
+          originalPrice: '318',
+          showConsult: false,
+          showStarting: true // 添加是否显示"起"字的标志
         },
         { 
-          imgSrc: '/assets/img/tm-bottom-box1-icon2.png',
-          title: '双享注册',
-          p1: '注册不成功免费在注册一次！',
-          p2: '',
-          price: '1680',
-          aTitle: '咨询顾问'
+          title: '专家辅助注册',
+          label: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
+          isSpecial: false,
+          tab: {
+            tabTitle: '成功率',
+            tabText: [
+              {
+                text: '高',
+                content: [
+                  {explain: '专家一对一，全流程代办'},
+                  {explain: '分析风险，优化注册方案'},
+                  {explain: '规避风险，提升注册成功率'},
+                ]
+              }
+            ]
+          },
+          price: '499',
+          showConsult: true,
+          showStarting: false // 添加是否显示"起"字的标志
         },
         { 
-          imgSrc: '/assets/img/tm-bottom-box1-icon3.png',
-          title: '极速注册',
-          p1: '商标注册成功后再收费，',
-          p2: '注册名称需要经过审核条件',
-          price: '2500',
-          aTitle: '咨询顾问'
-        },
+          title: '至尊无忧注册',
+          label: '专家评估提高通过率，注册失败，可赔付全款',
+          isSpecial: false,
+          tab: {
+            tabTitle: '类型',
+            tabText: [
+              {
+                text: '指定类目',
+                content: [
+                  {explain: '你注册，我投保'},
+                  {explain: '每件商标都有保单'},
+                  {explain: '指定类目驳回，赔付全款'},
+                ],
+                price: '599'
+              },
+              {
+                text: '全部小类',
+                content: [
+                  {explain: '无忧注册，驳回可退款'},
+                  {explain: '专家一对一，全流程代办'},
+                  {explain: '规避风险，提升注册成功率'},
+                ],
+                price: '1680'
+              },
+            ]
+          },
+          price: '599',
+          showConsult: true,
+          showStarting: false // 添加是否显示"起"字的标志
+        }
       ],
+
+  
       box2Data: [
         {
           imgSrc: '/assets/img/tm-bottom-box2-icon1.png',
@@ -363,7 +457,57 @@ export default {
         },
       ]
     }
+  },
+
+    created() {
+    // 初始化当前类型和下拉菜单状态
+    this.box1Data.forEach((item, index) => {
+      if (item.tab && item.tab.tabText && item.tab.tabText.length > 0) {
+        this.currentTypes[index] = item.tab.tabText[0].text;
+      }
+      this.showDropdowns[index] = false;
+    });
+  },
+  methods: {
+    // 切换下拉菜单显示状态
+    toggleDropdown(index) {
+      const item = this.box1Data[index];
+      if (!item || !item.tab || item.tab.tabText.length <= 1) return;
+      
+      this.showDropdowns[index] = !this.showDropdowns[index];
+    },
+    
+    // 选择选项
+    selectOption(index, text) {
+      this.currentTypes[index] = text;
+      this.showDropdowns[index] = false;
+    },
+    
+    // 获取当前选中的内容
+    getCurrentContent(index) {
+      const item = this.box1Data[index];
+      if (!item || !item.tab) return [];
+      
+      const selectedType = item.tab.tabText.find(t => t.text === this.currentTypes[index]);
+      if (selectedType) return selectedType.content;
+      
+      // 默认返回第一个
+      return item.tab.tabText[0].content;
+    },
+    
+    // 获取当前选中的价格
+    getCurrentPrice(index) {
+      const item = this.box1Data[index];
+      if (!item || !item.tab) return item.price;
+      
+      const selectedType = item.tab.tabText.find(t => t.text === this.currentTypes[index]);
+      if (selectedType && selectedType.price !== undefined) return selectedType.price;
+      
+      // 默认返回基础价格
+      return item.price;
+    }
   }
+
 }
 </script>
 
@@ -520,24 +664,38 @@ export default {
   justify-content: space-between;
   width: 100%;
   height: 7.5rem;
+  padding: .3rem .4rem 0 .4rem;
+  /* margin-top: .2rem; */
   background-color: #FFF;
 }
 .tm .box-bottom .box .box1 .box1ul li {
-  width: 4.5rem;
-  padding: .5rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 4.3rem;
+  height: 6rem;
+  /* margin: 0 .5rem; */
+  /* padding: .5rem; */
+  background: url(/assets/img/tm-box1ul-libj.png) no-repeat;
+  background-size: cover;
 }
-.tm .box-bottom .box .box1 .box1ul img {
-  width: 3rem;
-  height: 3rem;
-  margin: 0 .25rem;
+.tm .box-bottom .box .box1 .box1ul li .tehui {
+  position: absolute;
+  top: -0.1rem;
+  right: -0.1rem;
+  width: .8rem;
+  height: .8rem;
+  background: url(/assets/img/tm-box1ul-tehui.png) no-repeat;
+  background-size: cover;
+  text-align: center;
+  /* background: skyblue; */
 }
 .tm .box-bottom .box .box1 .box1ul h5 {
-  width: 3.5rem;
-  text-align: center;
   font-size: .25rem;
   font-weight: 700;
   color: #333;
-  margin-top: .2rem;
+  padding: 0 .4rem;
+  margin: .3rem 0 .1rem 0;
 }
 .tm .box-bottom .box .box1 .box1ul .text {
   display: flex;
@@ -545,34 +703,188 @@ export default {
   justify-content: center;
   align-content: center;
   margin-top: .2rem;
-  width: 3.5rem;
+  margin-bottom: .1rem;
+  width: 4.3rem;
   height: .7rem;
+  padding: 0 .4rem;
+  /* margin: 0 .5rem; */
   font-size: .1875rem;
-  color: #979797;
+  color: #6D6D6D ;
 }
-.tm .box-bottom .box .box1 .box1ul span {
-  display: block;
+/* .tm .box-bottom .box .box1 .box1ul span {
+  display: flex;
+  justify-content: space-between;
+  align-content: space-between;
+  width: 3.5rem;
   height: .5rem;
+  margin: 0 .4rem;
+  line-height: .5rem;
+  background: #FFF;
+  border-radius: .1rem;
+  padding: 0 .2rem;
   text-align: center;
-  color: #ed1c24;
+  color: #333;
   font-size: 0.1875rem;
   font-weight: 700;
+} */
+ .tm .box-bottom .box .box1 .box1ul .tab-container {
+  width: 3.5rem;
+  margin: 0 .4rem;
+  position: relative;
 }
-.tm .box-bottom .box .box1 .box1ul span em {
-  font-size: 0.250rem;
-}
-.tm .box-bottom .box .box1 .box1ul a {
+.tm .box-bottom .box .box1 .box1ul .tab-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  background-color: #42210b;
-  color: #FFF;
-  width: 1.5rem;
+  justify-content: space-between;
+  align-content: space-between;
+  width: 3.5rem;
   height: .5rem;
-  /* text-align: center; */
-  border-radius: .25rem;
-  margin: 0 auto;
+  line-height: .5rem;
+  background: #FFF;
+  border-radius: .1rem;
+  padding: 0 .2rem;
+  text-align: center;
+  color: #333;
+  font-size: 0.1875rem;
+  font-weight: 700;
+  border: 1px solid #eee;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-header .right {
+  display: flex;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-header .arrow-icon {
+  display: block;
+  width: .2rem;
+  height: .2rem;
+  margin: .15rem .1rem;
+  background: url(/assets/img/tm-box1ul-zk.png) no-repeat;
+  background-size: contain;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-dropdown {
+  position: absolute;
+  top: .55rem;
+  right: 0;
+  width: 1.5rem;
+  max-height: 3rem;
+  overflow-y: auto;
+  background-color: #FFF;
+  border: 1px solid #eee;
+  border-radius: .1rem;
+  z-index: 10;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-dropdown div {
+  padding: 0 .2rem;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-dropdown div:last-child {
+  border-bottom: none;
+}
+.tm .box-bottom .box .box1 .box1ul .tab-dropdown div:hover,
+.tm .box-bottom .box .box1 .box1ul .tab-dropdown div.active {
+  background-color: #f5f5f5;
+  color: #ff9115;
+}
+.tm .box-bottom .box .box1 .box1ul .content {
+  width: 3.5rem;
+  height: 1.5rem;
+  margin: 0 .4rem;
+}
+.tm .box-bottom .box .box1 .box1ul .content .row {
+  display: flex;
+  height: .5rem;
+  /* line-height: .5rem; */
+  font-size: .2rem;
+}
+.tm .box-bottom .box .box1 .box1ul .content .row i {
+  display: block;
+  width: .2rem;
+  height: .2rem;
+  margin: .15rem .1rem .15rem 0;
+  background: url(/assets/img/tm-box1ul-i.png) no-repeat;
+  background-size: contain;
+}
+.tm .box-bottom .box .box1 .box1ul .content .row em {
+  line-height: .5rem;
+}
+.tm .box-bottom .box .box1 .box1ul .special {
+  width: 3.5rem;
+  height: .4rem;
+  margin: 0 .4rem;
+}
+.tm .box-bottom .box .box1 .box1ul .special p {
+  width: 2.2rem;
+  height: .4rem;
+  line-height: .4rem;
+  background: linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%);
+  border-radius: 1px;
+  color: #FFF;
+  font-size: .2rem;
+  font-weight: 700;
+  text-align: center;
+}
+.tm .box-bottom .box .box1 .box1ul .price {
+  display: flex;
+  width: 3.5rem;
+  height: .7rem;
+  margin: 0 .4rem;
+}
+.tm .box-bottom .box .box1 .box1ul .price .mod1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 1.2rem;
+  height: .7rem;
+  font-size: .15rem;
+  color: #F32222;
+}
+.tm .box-bottom .box .box1 .box1ul .price .mod1 p {
+  display: block;
+  width: 1.2rem;
+  height: .5rem;
+}
+.tm .box-bottom .box .box1 .box1ul .price .mod1 p em {
+  font-size: .38rem;
+}
+.tm .box-bottom .box .box1 .box1ul .price .mod2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: .18rem;
+  color: #CBC1B0;
+}
+.tm .box-bottom .box .box1 .box1ul .price .mod2  p {
+  text-decoration: line-through;
+}
+.tm .box-bottom .box .box1 .box1ul .goBuy {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  width: 100%;
+  height: .8rem;
+  line-height: .8rem;
+  text-align: center;
+  font-size: .25rem;
+  font-weight: 700;
+  border-radius: 0px 0px .0125rem .0125rem;
+}
+
+.tm .box-bottom .box .box1 .box1ul .goBuy .consult {
+  display: inline-block;
+  width: 100%;
+  height: .8rem;
+  line-height: .8rem;
+  background: #FFF;
+  color: #FF9C00;
+  border: .0125rem solid #FF9C00;
+}
+.tm .box-bottom .box .box1 .box1ul .goBuy .buy {
+  display: inline-block;
+  width: 100%;
+  height: .8rem;
+  line-height: .8rem;
+  background: linear-gradient(90deg, #FF9F08 0%, #FF7331 100%);
+  color: #FFF;
 }
 .tm .box-bottom .box .box1 .bottomtext {
   display: block;