style ...

src/components/header.vue

@@ -23,25 +23,23 @@
         <li class="nav-item">
           <a href="#/fdj">非标刀具定制</a>
         </li>
-        <li class="nav-item dropdown" @mouseenter="show()" @mouseleave="hide()">
+        <li class="nav-item dropdown" :class="showMenu==true?'active':''" @mouseenter="show()" @mouseleave="hide()">
           <a
-            class="nav-link"
+            class="nav-link" :class="showMenu==true?'activea':''"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             >产品中心</a
           >
-          <div
+          <!-- <div
             class="dropdown-menu"
             aria-labelledby="dropdown01"
-            v-show="showMenu"
-          >
+            v-show="showMenu" > -->
+            <div class="boxitem" v-if="showMenu==true">
             <a class="dropdown-item" href="#/cplist">标准刀具分类</a>
-            <a class="dropdown-item" href="#/2pcindex"
-              >VariMillTM GP 整硬立铣刀</a
-            >
-            <a class="dropdown-item" href="#/csdat01">Victory硬质合金车刀</a>
-          </div>
+            <a class="dropdown-item" href="#/2pcindex" >VariMillTM GP 整硬立铣刀</a>
+            <a class="dropdown-item" href="#/csdat01">Victory硬质合金车刀</a></div>
+          <!-- </div> -->
         </li>
         <li class="nav-item">
           <a href="#/tejiaindex">特价产品</a>
@@ -56,7 +54,37 @@
     </nav>
   </div>
 </template>
+<style scoped>
 
+.dropdown{
+  position: relative;
+}
+.boxitem{
+  position: absolute;
+  width:818px;
+  height: 86px;
+  bottom:-86px;
+  right: -375px;
+}
+.boxitem {
+  display: flex;
+   background: #c9912d;
+}
+.boxitem a.dropdown-item{
+  font-size: 20px;
+  color: #ffffff;
+}
+.boxitem a.dropdown-item:hover{
+  background: #c9912d;
+  color: #ffffff;
+}
+.navbar-nav li.active1 a{
+  color: #ffffff;
+}
+.activea{
+  color: #ffffff !important;
+}
+</style>
 <script>
 export default {
   data() {

src/views/2pcindex.vue

@@ -3,79 +3,60 @@
     <main role="main" class="von-main">
         <img src="../assets/img/2pc01.png" width="100%">
         <div class="von-pcin cplist-tab von-arrow">
-            <ul id="myTab" class="nav nav-tabs justify-content-between plr-8">
-                <li class="active">
-                    <a href="#pc01" data-toggle="tab">2排屑槽</a>
+            <ul class="myTab">
+                <li @click="type='cp01'" :class="type=='cp01'?'active':''">
+                   2排屑槽
                 </li>
-                <li>
-                    <a href="#pc02" data-toggle="tab">3排屑槽</a>
+                <li @click="type='cp02'" :class="type=='cp02'?'active':''">
+                    3排屑槽
                 </li>
-                <li>
-                    <a href="#pc03" data-toggle="tab">4排屑槽</a>
+                <li  @click="type='cp03'" :class="type=='cp03'?'active':''">
+                    4排屑槽
                 </li>
             </ul>
-            <div id="myTabContent" class="tab-content von-tjcp">
-                <div class="tab-pane fade in active" id="pc01">
+            <div>
+                <img v-if="type=='cp01'" src="../assets/img/2pc02.png" width="100%">
+                <img v-if="type=='cp02'" src="../assets/img/2pc022.png" width="100%">
+                <img v-if="type=='cp03'" src="../assets/img/2pc023.png" width="100%">
+            </div>
+            <!-- <div id="myTabContent" class="tab-content von-tjcp">
+                <div v-if="type=='cp01'" class="tab-pane fade in active" id="pc01">
                     <img src="../assets/img/2pc02.png" width="100%">
                 </div>
-                <div class="tab-pane fade" id="pc02">
-                    <img src="../assets/img/2pc02.png" width="100%">
+                <div v-if="type=='cp02'" class="tab-pane fade" id="pc02">
+                    <img src="../assets/img/2pc022.png" width="100%">
                 </div>
-                <div class="tab-pane fade" id="pc03">
-                    <img src="../assets/img/2pc02.png" width="100%">
+                <div v-if="type=='cp03'" class="tab-pane fade" id="pc03">
+                    <img src="../assets/img/2pc023.png" width="100%">
                 </div>
-            </div>					
+            </div>					 -->
         </div>
         <img src="../assets/img/2pc03.png" width="100%">
         <div class="von-pcin cplist-tab pb-5 von-arrow">
-            <div id="myTabContent" class="tab-content von-tjcp">
-                <div class="tab-pane fade in active" id="pc04">
-                    <img src="../assets/img/2pc04.png" width="100%">
-                </div>
-                <div class="tab-pane fade" id="pc05">
-                    <img src="../assets/img/2pc04.png" width="100%">
-                </div>
-                <div class="tab-pane fade" id="pc06">
-                    <img src="../assets/img/2pc04.png" width="100%">
-                </div>
+            <div class="tab-content">
+                <img v-if="sty=='sty01'" src="../assets/img/2pc04.png" width="100%">
+                <img v-if="sty=='sty02'" src="../assets/img/2pc04.png" width="100%">
+                <img v-if="sty=='sty03'" src="../assets/img/2pc04.png" width="100%">
             </div>
-            <ul id="myTab2" class="nav nav-tabs justify-content-between plr-8">
-                <li class="active">
-                    <a href="#pc04" data-toggle="tab">2排屑槽</a>
-                </li>
-                <li>
-                    <a href="#pc05" data-toggle="tab">3排屑槽</a>
-                </li>
-                <li>
-                    <a href="#pc06" data-toggle="tab">4排屑槽</a>
-                </li>
+            <ul class="myTab">
+                <li :class="sty=='sty01'?'active':''" @click="sty='sty01'">2排屑槽</li>
+                <li :class="sty=='sty02'?'active':''" @click="sty='sty02'">3排屑槽</li>
+                <li :class="sty=='sty03'?'active':''" @click="sty='sty03'">4排屑槽</li>
             </ul>
         </div>
         <img src="../assets/img/2pc05.png" width="100%" class="mt-5">
         <div class="von-pcin cplist-tab von-arrow">
             <img src="../assets/img/2pc06.png" width="100%">
             <div class="pcin-bg">
-                <ul id="myTab3" class="nav nav-tabs justify-content-between plr-8">
-                    <li class="active">
-                        <a href="#pc07" data-toggle="tab">2排屑槽</a>
-                    </li>
-                    <li>
-                        <a href="#pc08" data-toggle="tab">3排屑槽</a>
-                    </li>
-                    <li>
-                        <a href="#pc09" data-toggle="tab">4排屑槽</a>
-                    </li>
+                <ul class="myTab">
+                    <li :class="model=='model01'?'active':''" @click="model='model01'">2排屑槽</li>
+                    <li :class="model=='model02'?'active':''" @click="model='model02'">3排屑槽</li>
+                    <li :class="model=='model03'?'active':''" @click="model='model03'">4排屑槽</li>
                 </ul>
-                <div id="myTabContent" class="tab-content von-tjcp">
-                    <div class="tab-pane fade in active" id="pc07">
-                        <img src="../assets/img/2pc08.png" width="100%">
-                    </div>
-                    <div class="tab-pane fade" id="pc08">
-                        <img src="../assets/img/2pc08.png" width="100%">
-                    </div>
-                    <div class="tab-pane fade" id="pc09">
-                        <img src="../assets/img/2pc08.png" width="100%">
-                    </div>
+                <div class="tab-content">
+                    <img v-if="model=='model01'" src="../assets/img/2pc08.png" width="100%">
+                    <img v-if="model=='model02'" src="../assets/img/2pc08.png" width="100%">
+                    <img v-if="model=='model03'" src="../assets/img/2pc08.png" width="100%">
                 </div>
                 <div class="pcin-bg-btn d-flex justify-content-end">
                     <button type="button" class="btn btn-primary p-3 text-center"><i class="iconfont iconyoujiantou mr-2" aria-hidden="true"></i>查看所有VariMillTM GP刀具详细参数</button>
@@ -86,4 +67,61 @@
         </div>
     </main>
 </div>
-</template>
+</template>
+
+<style scoped>
+.myTab{
+width: 1338px;
+margin: 0 auto;
+    clear: both;
+    overflow: hidden;
+
+}
+.myTab li{
+    float: left;
+    width: 33.3333%;
+    border: 2px solid #39484e;
+    height: 56px;
+    line-height: 56px;
+     text-align: center;
+    font-size: 22px;
+}
+.myTab li.active{
+    background: #39484e;
+     color: #fff;
+     position: relative;
+}
+.myTab li.active::after{
+    content: "\e66f";
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+    color: #39484e;
+    font-family: iconfont;
+    font-size:14px;
+    margin-left: -18px;
+}
+
+
+</style>
+
+
+
+<script>
+export default {
+    data(){
+    return {
+        type: 'cp01',
+        sty:'sty01',
+        model:'model01'
+    }
+        
+    },
+    methods: {
+            // login(){
+			// 	console.log('-------')
+			// }
+    }
+    
+}
+</script>

src/views/cplist.vue

@@ -1,21 +1,36 @@
 <template>
 <div>
     <main role="main" class="von-main">
-        <img src="../assets/img/cpbanner.png" width="100%">
+        <img v-if="type=='cp01'" src="../assets/img/cpbanner.png" width="100%">
+        <img v-if="type=='cp02'" src="../assets/img/cpbanner1.png" width="100%">
+        <img v-if="type=='cp03'" src="../assets/img/cpbanner3.png" width="100%">
+        <img v-if="type=='cp04'" src="../assets/img/cpbanner4.png" width="100%">
         <div class="cplist-tab">
-            <ul class="nav nav-tabs justify-content-between">
-                <li class="active">
-                    <a href="#cp01" data-toggle="tab"><i class="iconfont iconjiantou2"></i>铣削</a>
+            <ul class="navul">
+                <li :class="type=='cp01'?'active':''" @click="type='cp01'">
+                    <i class="iconfont iconjiantou2"></i>铣削
                 </li>
-                <li>
+                <li :class="type=='cp02'?'active':''" @click="type='cp02'">
+                    <i class="iconfont iconjiantou2"></i>车削
+                </li>
+                <li :class="type=='cp03'?'active':''" @click="type='cp03'">
+                    <i class="iconfont iconjiantou2"></i>孔加工
+                </li>
+                <li :class="type=='cp04'?'active':''"  @click="type='cp04'">
+                    <i class="iconfont iconjiantou2"></i>螺纹加工
+                </li>
+                <!-- <li class="active" @click="type=='cp01'">
+                    <a  data-toggle="tab"><i class="iconfont iconjiantou2"></i>铣削jjjjj</a>
+                </li>
+                <li @click="type=='cp02'">
                     <a href="#cp02" data-toggle="tab"><i class="iconfont iconjiantou2"></i>车削</a>
                 </li>
                 <li>
                     <a href="#cp03" data-toggle="tab"><i class="iconfont iconjiantou2"></i>孔加工</a>
                 </li>
-                <li>
+                <li @click="login()">
                     <a href="#cp04" data-toggle="tab"><i class="iconfont iconjiantou2"></i>螺纹加工</a>
-                </li>
+                </li> -->
             </ul>
             <div id="myTabContent" class="tab-content">
                 <div class="tab-pane fade in active show" id="cp01">
@@ -101,4 +116,68 @@
         </div>
     </main>
 </div>
-</template>
+</template>
+<style scoped>
+.navul{
+    padding: 0;
+    clear: both;
+    overflow: hidden;
+}
+.navul li{
+    width: 25%;
+    float: left;
+    text-align: center;
+    background: #383838;
+    color: #ffffff;
+    height: 56px;
+    line-height: 56px;
+    position: relative;
+    font-size: 20px;
+}
+.navul li i{
+    font-size: 4px;
+    position: absolute;
+    left: 50%;
+    top:50%;
+    margin-left: -50px;
+    margin-top:-28px
+}
+.navul li:nth-child(3) i{
+    margin-left: -60px;
+}
+.navul li:nth-child(4) i{
+    margin-left: -70px;
+}
+.navul li::after{
+    content: '|';
+    position:absolute;
+    right: 0;
+    top: 0;
+    color: #827f7f;
+
+}
+.navul li:last-child::after{
+    content: '';
+
+}
+.navul li.active{
+    background: #cf942a;
+
+}
+</style>
+<script>
+export default {
+    data(){
+    return {
+        type: 'cp01',
+    }
+        
+    },
+    methods: {
+            // login(){
+			// 	console.log('-------')
+			// }
+    }
+    
+}
+</script>