2

src/assets/css/bootstrap.min.css

@@ -3420,7 +3420,6 @@ input[type=submit].btn-block {
 	top: 100%;
 	left: 0;
 	z-index: 1000;
-	display: none;
 	float: left;
 	min-width: 10rem;
 	padding: .5rem 0;

src/assets/css/hyweb.css

@@ -105,7 +105,7 @@ header nav,
 .von-nav .dropdown-menu {
 	background: #d4a85b;
 	border: 1px solid #c88f2d;
-	left: -235%;
+	left: -85%;
 	padding: 1.5rem;
 	margin: 0;
 	border-radius: initial;
@@ -383,7 +383,7 @@ header nav,
 	text-align: center;
 	background: #383838;
 	flex: 1;
-	margin-right: -1px
+	/**margin-right: -1px**/
 }
 
 .cplist-tab .nav li a:before {

src/components/header.vue

@@ -1,7 +1,18 @@
 <template>
-  <div class="header" style="height:90px">
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-white von-nav justify-content-between d-flex">
-      <a class="navbar-brand" href="#"><img src="../assets/img/logo.png" width=""></a>
+  <div class="header" style="height: 90px">
+    <nav
+      class="
+        navbar navbar-expand-md navbar-dark
+        fixed-top
+        bg-white
+        von-nav
+        justify-content-between
+        d-flex
+      "
+    >
+      <a class="navbar-brand" href="#"
+        ><img src="../assets/img/logo.png" width=""
+      /></a>
       <ul class="navbar-nav">
         <li class="nav-item">
           <a href="#/">首页</a>
@@ -12,11 +23,23 @@
         <li class="nav-item">
           <a href="#/fdj">非标刀具定制</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="changeShow">产品中心</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown01">
+        <li class="nav-item dropdown" @mouseenter="show()" @mouseleave="hide()">
+          <a
+            class="nav-link"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >产品中心</a
+          >
+          <div
+            class="dropdown-menu"
+            aria-labelledby="dropdown01"
+            v-show="showMenu"
+          >
             <a class="dropdown-item" href="#/cplist">标准刀具分类</a>
-            <a class="dropdown-item" href="#/2pcindex">VariMillTM GP 整硬立铣刀</a>
+            <a class="dropdown-item" href="#/2pcindex"
+              >VariMillTM GP 整硬立铣刀</a
+            >
             <a class="dropdown-item" href="#/csdat01">Victory硬质合金车刀</a>
           </div>
         </li>
@@ -38,17 +61,19 @@
 export default {
   data() {
     return {
-      
+      showMenu: false,
     };
   },
   methods: {
-    changeShow() {
-      var self = this;
+    show() {
+      this.showMenu = true;
+    },
+    hide() {
+      this.showMenu = false;
     },
   },
-}
+};
 </script>
 
 <style scoped>
-  
 </style>

src/views/2pcindex.vue

@@ -1,5 +1,89 @@
 <template>
 <div>
-    <div>2pcindex</div>
+    <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>
+                </li>
+                <li>
+                    <a href="#pc02" data-toggle="tab">3排屑槽</a>
+                </li>
+                <li>
+                    <a href="#pc03" data-toggle="tab">4排屑槽</a>
+                </li>
+            </ul>
+            <div id="myTabContent" class="tab-content von-tjcp">
+                <div 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>
+                <div class="tab-pane fade" id="pc03">
+                    <img src="../assets/img/2pc02.png" width="100%">
+                </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>
+            <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>
+        </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>
+                <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>
+                <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>
+                </div>
+                
+            </div>
+                            
+        </div>
+    </main>
 </div>
 </template>

src/views/cplist.vue

@@ -1,5 +1,104 @@
 <template>
 <div>
-    <div>cplist</div>
+    <main role="main" class="von-main">
+        <img src="../assets/img/cpbanner.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>
+                </li>
+                <li>
+                    <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>
+                    <a href="#cp04" data-toggle="tab"><i class="iconfont iconjiantou2"></i>螺纹加工</a>
+                </li>
+            </ul>
+            <div id="myTabContent" class="tab-content">
+                <div class="tab-pane fade in active show" id="cp01">
+                    <div class="cp-floor">
+                        <div class="row">
+                            <div class="col-3 themed-grid-col">
+                                <i class="iconfont iconziyuan2 yellow big"></i>
+                                <h5 class="mt-4 mb-4">专利的刀头端面设计</h5>
+                                <p class="mb-4 text-truncate-3">扭曲切削刃提高了刀尖稳定性，<br> 能够在最高的坡铣角度下
+                                    <br> 实现轻快切削。
+                                </p>
+                                <i class="iconfont iconyoujiantou yellow small"></i>
+                            </div>
+                            <div class="col-3 themed-grid-col">
+                                <i class="iconfont iconziyuan3 yellow big"></i>
+                                <h5 class="mt-4 mb-4">创新的刀头端面设计</h5>
+                                <p class="mb-4 text-truncate-3">不对称的分离刃<br> 以及多变的螺旋角
+                                    <br> 能够实现减振和提高进给率。
+                                </p>
+                                <i class="iconfont iconyoujiantou yellow small"></i>
+                            </div>
+                            <div class="col-3 themed-grid-col">
+                                <i class="iconfont iconziyuan4 yellow big"></i>
+                                <h5 class="mt-4 mb-4">专利的后刀面设计</h5>
+                                <p class="mb-4 text-truncate-3">精确的小平面偏心后角<br> 减少了震动和摩擦。
+                                    <br> 可在多种材料上进行出色的切削加工。
+                                </p>
+                                <i class="iconfont iconyoujiantou yellow small"></i>
+                            </div>
+                            <div class="col-3 themed-grid-col">
+                                <i class="iconfont iconziyuan5 yellow big"></i>
+                                <h5 class="mt-4 mb-4">专利的排屑槽设计</h5>
+                                <p class="mb-4 text-truncate-3">创新设计的排屑槽内切屑深痕，<br> 降低了切削力
+                                    <br> 并有效地排出切屑。
+                                </p>
+                                <i class="iconfont iconyoujiantou yellow small"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cp-floor clearfix">
+                        <h2 class="pb-5">通用型整体硬质合金立铣刀</h2>
+                        <div class="row mb-5">
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                        </div>
+                        <div class="von-call">
+                            <button onclick = "document.getElementById('centerblock').style.display='block'" type="button" class="call-btn btn btn-warning float-right"><i class="iconfont iconyoujiantou mr-2" aria-hidden="true"></i>联系我们了解详细参数</button>
+                            <div id="centerblock" class="center-block">
+                                <img src="../assets/img/call.png">
+                                <button onclick = "document.getElementById('centerblock').style.display='none'" type="button" class="close" aria-label="Close"><i aria-hidden="true" class="iconfont iconguanbi1"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cp-floor clearfix">
+                        <h2 class="pb-5">通用型整体硬质合金立铣刀</h2>
+                        <div class="row mb-5">
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                            <div class="col-2 themed-grid-col"><img src="../assets/img/cp.png" width="100%"></div>
+                        </div>
+                        <div class="von-call">
+                            <button onclick = "document.getElementById('centerblock').style.display='block'" type="button" class="call-btn btn btn-warning float-right"><i class="iconfont iconyoujiantou mr-2" aria-hidden="true"></i>联系我们了解详细参数</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-pane fade" id="cp02">
+                    2
+                </div>
+                <div class="tab-pane fade" id="cp03">
+                    3
+                </div>
+                <div class="tab-pane fade" id="cp04">
+                    4
+                </div>
+            </div>
+        </div>
+    </main>
 </div>
 </template>

src/views/csdat01.vue

@@ -1,5 +1,19 @@
 <template>
 <div>
-    <div>csdat01</div>
+    <main role="main" class="von-main pb-5">
+        <img src="../assets/img/csdat01.png" width="100%">
+        <div class="von-csdat-1 mb-5">
+            <button type="button" class="pos-btn btn btn-warning p-2 text-center"><i class="iconfont iconyoujiantou mr-2" aria-hidden="true"></i>点击查看Victory刀具的型号与可选材质</button>					
+            <img src="../assets/img/csdat02.png" width="100%">
+            <div class="von-call d-flex justify-content-center">
+                <button onclick="document.getElementById('centerblock').style.display='block'" type="button" class="call-btn btn btn-warning"><i class="iconfont icondianhua mr-2" aria-hidden="true"></i>联系我们</button>
+                <button type="button" class="btn btn-warning"><i class="iconfont iconziyuan92 mr-2" aria-hidden="true"></i>返回顶部</button>
+                <div id="centerblock" class="center-block">
+                    <img src="../assets/img/call.png">
+                    <button onclick="document.getElementById('centerblock').style.display='none'" type="button" class="close" aria-label="Close"><i aria-hidden="true" class="iconfont iconguanbi1"></i></button>
+                </div>
+            </div>
+        </div>
+    </main>
 </div>
 </template>