tjcptab

src/routers/index.js

@@ -27,7 +27,11 @@ export const constantRoutes = [
     {
       path: '/csdat01',
       component: () => import('@/views/csdat01')
-    },
+  },
+  {
+    path: '/csdat02',
+    component: () => import('@/views/csdat02')
+  },
     {
       path: '/tejiaindex',
       component: () => import('@/views/tejiaindex')

src/views/csdat02.vue

@@ -0,0 +1,52 @@
+<template>
+<div>
+    
+			<main role="main" class="von-main">
+				<img src="../assets/img/tejia01.png" width="100%" name='top'>
+				
+				<div class="von-csdat-1 pb-5">
+					<div class="von-about-center text-center pt-5 pb-5 bg-e9">
+						<h1 class="mt-4 mb-4">请点击想要查看的型号</h1>
+					</div>
+					<ul id="myTab" class="nav nav-tabs pb-5 border-0 bg-e9 plr-8">
+						<li class="col-4 mb-5">
+							<a href="#cp01" data-toggle="tab"><img src="../assets/img/csdat05.png" width="100%"></a>
+						</li>
+						<li class="col-4 mb-5">
+							<a href="#cp02" data-toggle="tab"><img src="../assets/img/csdat06.png" width="100%"></a>
+						</li>
+						<li class="col-4 mb-5">
+							<a href="#cp03" data-toggle="tab"><img src="../assets/img/csdat07.png" width="100%"></a>
+						</li>
+						<li class="col-4 mb-5">
+							<a href="#cp04" data-toggle="tab"><img src="../assets/img/csdat08.png" width="100%"></a>
+						</li>
+						<li class="col-4 mb-5">
+							<a href="#cp05" data-toggle="tab"><img src="../assets/img/csdat09.png" width="100%"></a>
+						</li>
+						<li class="col-4 mb-5">
+							<a href="#cp06" data-toggle="tab"><img src="../assets/img/csdat10.png" width="100%"></a>
+						</li>
+					</ul>
+                    <div><img src="../assets/img/csdat11.png" width="100%"></div>
+					
+					<div class="von-call d-flex justify-content-center pb-5">
+						<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>
+                    <a href="#top" class='toTop'>返回顶部</a></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>
+<style scoped>
+.toTop{
+    color: #ffffff;
+    text-decoration: none;
+}
+</style>

src/views/tjcptab.vue

@@ -1,46 +1,188 @@
 <template>
 <div>
     <main role="main" class="von-main">
-        <img src="../assets/img/tejia01.png" width="100%">
-
-
+		<div class="banner">
+			<img src="../assets/img/tejia01.png" width="100%" >
+		</div>
         
-				<div class="cplist-tab p-4 bg-e9 von-arrow">
-					<ul id="myTab" class="nav nav-tabs justify-content-between">
-						<li class="active">
+				<div class="cplist-tab">
+					<ul class="">
+						<li :class="type=='cp01'?'active':''" @click="type='cp01'">
 							<a href="#cp01" data-toggle="tab">铣削</a>
 						</li>
-						<li>
+						<li :class="type=='cp02'?'active':''" @click="type='cp02'">
 							<a href="#cp02" data-toggle="tab">车削</a>
 						</li>
-						<li>
-							<a href="#cp03" data-toggle="tab">孔加工</a>
+						<li :class="type=='cp03'?'active':''" @click="type='cp03'">
+							<a href="#cp03" data-toggle="tab">镗刀</a>
 						</li>
-						<li>
-							<a href="#cp04" data-toggle="tab">螺纹加工</a>
+						<li :class="type=='cp04'?'active':''" @click="type='cp04'">
+							<a href="#cp04" data-toggle="tab">铰刀</a>
 						</li>
-						<li>
-							<a href="#cp05" data-toggle="tab">车削</a>
+						<li :class="type=='cp05'?'active':''" @click="type='cp05'">
+							<a href="#cp05" data-toggle="tab">钻头</a>
 						</li>
-						<li>
-							<a href="#cp06" data-toggle="tab">孔加工</a>
+						<li :class="type=='cp06'?'active':''" @click="type='cp06'">
+							<a href="#cp06" data-toggle="tab">锪刀</a>
 						</li>
-						<li>
-							<a href="#cp07" data-toggle="tab">螺纹加工</a>
+						<li :class="type=='cp07'?'active':''" @click="type='cp07'">
+							<a href="#cp07" data-toggle="tab">其他</a>
 						</li>
 					</ul>
 					
-					<div id="myTabContent" class="tab-content von-tjcp">
-						<div class="tab-pane fade in active" id="cp01">
-							<h1 class="pb-4">镗刀</h1>
-							<div class="von-tjcp-idage mt-5 mb-2">
-									<span>阶梯钻</span>
+					<div class="con2" v-show="type=='cp01'">
+						<h1>铣削</h1>
+						<!-- <div class="btns">
+							<span>阶梯钻</span>
 									<span>阶梯直槽钻</span>
 									<span>阶梯麻花钻</span>
-								</div>
-							<div class="cp-floor">
-								<div class="row">
-								<!--有图纸按钮-->
+						</div> -->
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/atejia01.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铣刀盘&nbsp;DWG60509146</h4>
+													<p>整体铣刀,刀体总长55mm,采用BT40刀柄,柄部直径整体铣刀,刀体总长55mm,采用BT40刀柄,柄部直径44.45mm。安装EDPT180508PDSRGD刀片,刀片刃倾角为-30度,刀片刀尖处直径为63mm,刀片加工处整体直径为103mm,刀片可加工刃长7.7mm。角为-30度,刀片刀尖处直径为63mm,刀片加工处整体直径为103mm,刀片可加工刃长7.7mm。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铣刀盘&nbsp;DWG60509146</h4>
+													<p>整体铣刀,刀体总长55mm,采用BT40刀柄,柄部直径整体铣刀,刀体总长55mm,采用BT40刀柄,柄部直径44.45mm。安装EDPT180508PDSRGD刀片,刀片刃倾角为-30度,刀片刀尖处直径为63mm,刀片加工处整体直径为103mm,刀片可加工刃长7.7mm。角为-30度,刀片刀尖处直径为63mm,刀片加工处整体直径为103mm,刀片可加工刃长7.7mm。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：25
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/atejia02.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">槽铣刀杆&nbsp;DWG60426954</h4>
+													<p>槽铣刀杆,刀头直径33.00mm,安装刀片后直径39.25，安装6013130非标刀片,刀具总长100mm</p>
+													<p>无图纸，可联系我们咨询详细参数</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-dark"  disabled="disabled">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">槽铣刀片&nbsp;6013130&nbsp;KC725M</h4>
+													<p>TPXW325NGL118改的非标刀片，主要改动为刀尖槽型改动</p>
+													<p>无图纸,可联系我们咨询详细参数</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：35
+													<button type="button" class="btn btn-outline-dark"  disabled="disabled">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--无图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/atejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">立铣刀&nbsp;DWG60509152</h4>
+													<p>立铣刀,刀具总长104mm,刀具直径20mm,带45度倒角</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+						</div>
+
+						</div>
+						
+					</div>
+					<div class="con2" v-show="type=='cp02'">
+						<h1>车削</h1>
+						<!-- <div class="btns">
+							<span>阶梯钻</span>
+									<span>阶梯直槽钻</span>
+									<span>阶梯麻花钻</span>
+						</div> -->
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">仿型车刀&nbsp;DWG60252041KMF</h4>
+													<p>无图纸,可联系我们咨询详细参数</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：22
+													<button type="button" class="btn btn-outline-dark"  disabled="disabled">无图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--无图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">A4槽刀片&nbsp;6019426&nbsp; KCU10</h4>
+													<p>非标A4槽刀片,由NG2094RK改制而成，刀片加工处直径由2.39mm改为2.36mm</p>
+													<p>无图纸,可联系我们咨询详细参数</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：30
+													<button type="button" class="btn btn-outline-dark"  disabled="disabled">无图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+						</div>
+
+						</div>
+						
+					</div>
+					<div class="con2" v-show="type=='cp03'">
+						<h1>镗刀</h1>
+						<div class="btns">
+							<span>复合镗刀</span>
+									<span>可调式镗刀</span>
+									<span>内孔镗刀杆</span>
+						</div>
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
 									<div class="col-6 themed-grid-col">
 										<div class="von-tjcp-row">
 											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
@@ -51,7 +193,7 @@
 												</div>
 												<div class="red von-tjcp-btn">
 													库存：4
-													<button type="button" class="btn btn-outline-danger" onclick="displayDiv('aaaa')">查看图纸</button>
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
 												</div>
 											</div>
 										</div>	
@@ -72,27 +214,324 @@
 											</div>
 										</div>	
 									</div>
+						</div>
+
+						</div>
+						
+					</div>
+				
+					<div class="con2" v-show="type=='cp04'">
+						<h1>铰刀</h1>
+						<!-- <div class="btns">
+							<span>阶梯钻</span>
+									<span>阶梯直槽钻</span>
+									<span>阶梯麻花钻</span>
+						</div> -->
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铰刀&nbsp;DWG2766432</h4>
+													<p>非标铰刀,刀具总长180(-0.5, +0.5),第一节阶梯直径20(+0.22, +0.25),第-阶梯长度76(-0.1, +0.1).第二阶梯直径32 (+0.027, +0.03) ,第三阶梯直接53.4mm</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：3
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铰刀&nbsp;DWG60109028</h4>
+													<p>PCD铰刀,铰刀全长327mm,采用BT40刀柄，柄部直径44.45mm。8个PCD齿,一个用于降低粗燥度的硬质合金刀片SPHX060204R-22。第.-阶梯直径调整范围在46(+0.018,+0.021)至48(+0.028,+0.033)之间。第二-阶梯直径为52(0, +0.05)</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铰刀&nbsp;DWG60509498</h4>
+													<p>铰刀,铰刀总长122mm,夹持柄径为20mm,铰刀头部直径为17.05 (H7) ,铰刀头部长度38.5mm。铰刀头后部柄径18mm</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铰刀&nbsp;DWG60509452</h4>
+													<p>非标铰刀,刀具总长147mm,刀具夹持部位柄径20mm,非夹持部位柄径14mm。铰刀头直径12.56mm非标铰刀,刀具总长147mm,刀具夹持部位柄径20mm,非夹持部位柄径14mm。铰刀头直径12.56mm(H7) ,铰刀头长度24mm。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：42
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铰刀&nbsp;DWG60509171</h4>
+													<p>焊接整体铰刀,刀具总长125mm,接BT40柄。铰刀直径分两个阶梯,第一阶梯直径49.95(-0.02,+0.02),第-阶梯长度8.1mm,第一阶梯焊片宽度为9mm,第二阶梯直径56.967(-0.03,+0.02),第二阶梯含片长度14mm。焊片圆角为1.0</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
 									
-								</div>
-							</div>
 						</div>
-						<div class="tab-pane fade" id="cp02">
-							2
+
 						</div>
-						<div class="tab-pane fade" id="cp03">
-							3
+						
+					</div>
+					<div class="con2" v-show="type=='cp05'">
+						<h1>钻头</h1>
+						<div class="btns">
+							<span>阶梯钻</span>
+									<span>阶梯直槽钻</span>
+									<span>阶梯麻花钻</span>
 						</div>
-						<div class="tab-pane fade" id="cp04">
-							4
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯麻花钻&nbsp;DWG60487628&nbsp;KC7315</h4>
+													<p>刀具总长130.91mm,柄部直径20.00mm,第- -阶梯直径9.88mm,第-阶梯长度11.77mmo第二阶梯直径刀具总长130.91mm,柄部直径20.00mm,第- -阶梯直径9.88mm,第-阶梯长度11.77mmo第二阶梯直径20mm,第二阶梯长度21.31mm。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯钻&nbsp;DWG60463434</h4>
+													<p>刀具总长107mm,安装在BT40刀柄上,刀具阶梯分三段，第一段直径12.76mm (-0.05, +0.05),第- -段长度10.4mm,第二段直径11.1mm,第二段长度17mm,第三段直径14mm,第三段可加工长度不大于20mm</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：4
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯麻花钻  DWG2765260</h4>
+													<p>复合镗刀，刀体总长（不包括刀体部分）200mm（-0.2,+0.2）,刀柄采用BT40(D63)柄，第一阶梯直径29.1mm（-0.05，+0.05）,采用SPHX070304R22刀片，第一阶梯长度为19.7mm（-0.1，+0.1），第一阶梯倒角直径为31.1mm（-0.05，+0.05），倒角采用SPHX060204R22刀片。第二阶梯长度为118.4mm（-0.1，+0.1），采用SPHX070304R22刀片，第二阶梯直径为59.1mm（-0.05，+0.05），第二阶梯倒角直径为66.4mm（-0.15。+0.15）.倒角采用SPHX060204R22刀片。</p>											
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：4
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯麻花钻  DWG2765260</h4>
+													<p>复合镗刀，刀体总长（不包括刀体部分）200mm（-0.2,+0.2）,刀柄采用BT40(D63)柄，第一阶梯直径29.1mm（-0.05，+0.05）,采用SPHX070304R22刀片，第一阶梯长度为19.7mm（-0.1，+0.1），第一阶梯倒角直径为31.1mm（-0.05，+0.05），倒角采用SPHX060204R22刀片。第二阶梯长度为118.4mm（-0.1，+0.1），采用SPHX070304R22刀片，第二阶梯直径为59.1mm（-0.05，+0.05），第二阶梯倒角直径为66.4mm（-0.15。+0.15）.倒角采用SPHX060204R22刀片。</p>											
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：4
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯麻花钻  DWG2765260</h4>
+													<p>复合镗刀，刀体总长（不包括刀体部分）200mm（-0.2,+0.2）,刀柄采用BT40(D63)柄，第一阶梯直径29.1mm（-0.05，+0.05）,采用SPHX070304R22刀片，第一阶梯长度为19.7mm（-0.1，+0.1），第一阶梯倒角直径为31.1mm（-0.05，+0.05），倒角采用SPHX060204R22刀片。第二阶梯长度为118.4mm（-0.1，+0.1），采用SPHX070304R22刀片，第二阶梯直径为59.1mm（-0.05，+0.05），第二阶梯倒角直径为66.4mm（-0.15。+0.15）.倒角采用SPHX060204R22刀片。</p>											
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：4
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+									<!--无图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯麻花钻  DWG2765260</h4>
+													<p>4mm（-0.1，+0.1），采用SPHX070304R22刀片，第二阶梯直径为59.1mm（-0.05，+0.05），第二阶梯倒角直径为66.4mm（-0.15。+0.15）.倒角采用SPHX060204R22刀片。</p>											
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：4
+													<button type="button" class="btn btn-outline-dark"  disabled="disabled">无图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+						</div>
+
+						</div>
+						
+					</div>
+					<div class="con2" v-show="type=='cp06'">
+						<h1>锪刀</h1>
+						<!-- <div class="btns">
+							<span>阶梯钻</span>
+									<span>阶梯直槽钻</span>
+									<span>阶梯麻花钻</span>
+						</div> -->
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">带支撑锪刀&nbsp;DWG60488831</h4>
+													<p>非标锪刀,刀具总长177mm,刀具夹持柄径25mm,锪刀头连接处柄径12mm,锪刀头直径30mm,锪刀头长度22mm,锪刀头前部有- -个直径为12mm,长度为13mm的导向头。锪刀头安装SPPX120412FP刀片。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：2
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
 						</div>
+
+						</div>
+						
+					</div>
+					<div class="con2" v-show="type=='cp07'">
+						<h1>其他</h1>
+						<!-- <div class="btns">
+							<span>阶梯钻</span>
+									<span>阶梯直槽钻</span>
+									<span>阶梯麻花钻</span>
+						</div> -->
+						<div class="cp-floor">
+							<div class="row">
+						<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">阶梯镗刀&nbsp;刀体&nbsp;DWG2764369</h4>
+													<p>整体铣刀,刀体总长55mm,采用BT40刀柄,柄部直径44.45mm。安装EDPT180508PDSRGD刀片,刀片刃倾.角为-30度,刀片刀尖处直径为63mm,刀片加工处整体直径为103mm.刀片可加工刃长7.7mm。</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：1
+													<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+												</div>
+											</div>
+										</div>	
+									</div>
+								<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">铣刀杆&nbsp;DWG60324678</h4>
+													<p>TOP NOTCH铣刀杆,刀头直径54mm,安装刀片后到头直径为60mm，W5.75 。柄部直径为25mm,总长为86mm,刀头长度为17.62</p>
+													<p>无图纸,可联系我们咨询详细参数</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：2
+														<button type="button" class="btn btn-outline-dark"  disabled="disabled">无图纸</button>
+													</div>
+											</div>
+										</div>	
+									</div>
+								<!--有图纸按钮-->
+									<div class="col-6 themed-grid-col">
+										<div class="von-tjcp-row">
+											<div class="von-tjcp-img"><img src="../assets/img/tejia03.png"></div>
+											<div class="von-tjcp-text">
+												<div class="">
+													<h4 clss="text-truncate">倒角刀&nbsp;DWG60711816</h4>
+													<p>倒角刮面刀,总长123(-015, +0.15) ,柄部长度61 (-1,+1) .倒角处直径为37.33 (-0.13, +0.13),挂面处直径40(-0.91, +0.91)，采用TCGT110204刀片+1) .倒角处直径为37.33 (-0.13, +0.13),挂面处直径40(-0.91, +0.91)，采用TCGT110204刀片</p>
+												</div>
+												<div class="red von-tjcp-btn">
+													库存：3
+														<button type="button" class="btn btn-outline-danger" onclick="document.getElementById('aaaa').style.display = 'block'">查看图纸</button>
+													</div>
+											</div>
+										</div>	
+									</div>
+						</div>
+
+						</div>
+						
 					</div>
 					
 					
+					<div class="tanchuang_wrap" id="aaaa">
+				<div class="lightbox"></div>
+				<div class="tanchuang_neirong">
+					<img src="../assets/img/tuzhi.png">
+				</div>
+				<button type="button" onClick="document.getElementById('aaaa').style.display = 'none'"><i aria-hidden="true" class="iconfont iconguanbi1"></i></button>
+			</div>
 					
 					<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 mt-5 mb-5 text-center"><i class="iconfont iconyoujiantou mr-2" aria-hidden="true"></i>联系我们了解详细参数</button>
 						<div id="centerblock" class="center-block">
-							<img src="img/call.png">
+							<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>					
@@ -105,4 +544,124 @@
 
     </main>
 </div>
-</template>
+</template>
+<script>
+export default {
+	data(){
+		return{
+type: 'cp01',
+		}
+	},
+	methods:{
+
+	}
+
+}
+</script>
+<style scoped>
+.von-main{
+	background: #e9e9e9;
+}
+.banner{
+	width: 100%;
+	height: auto;
+margin: 0 !important;
+	padding: 0 !important;
+}
+.cplist-tab{
+	margin: 0 !important;
+	padding: 0 !important;
+
+	
+}
+
+.cplist-tab ul{
+	display: flex;
+	justify-content: space-around;
+	padding:0 20px;
+	margin: 0 !important;
+}
+.cplist-tab ul li{
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	background: #383838;
+	text-align: center;
+	position: relative;
+	margin-top: 1.5rem;
+	
+}
+.cplist-tab ul li a:hover{
+	text-decoration: none;
+}
+
+.cplist-tab ul li::after{
+	content: '|';
+	color: #ffffff;
+	position: absolute;
+	right: -2px;
+	top: 0;
+	opacity: .6;
+}
+.cplist-tab ul li:last-child::after{
+content: '';
+}
+.cplist-tab ul li a{
+	color: #ffffff;
+	font-size: 1.25rem;
+}
+.cplist-tab ul li.active{
+background: #cf942a;
+}
+.cplist-tab ul li.active::after{
+	opacity: 0;
+}
+.cplist-tab ul li.active::before{
+	content: "\e66f";
+    position: absolute;
+    bottom: -37px;
+    left: 50%;
+    color: #cf942a;
+    font-family: iconfont;
+    font-size: 1rem;
+    margin-left: -18px
+}
+.con2{
+	padding: 0 50px;
+	height: auto;
+}
+.con2 h1{
+	text-align: center;
+    border-bottom: 6px solid #c9912e;
+    margin-top: 5rem;
+	padding-bottom: 1.5rem!important;
+}
+.btns{
+	display: flex;
+	justify-content: center;
+	margin-top: 3rem;
+	margin-bottom: .5rem;
+}
+.btns span{
+	border: 1px solid #666666;
+    color: #666;
+    padding: 6px 20px;
+    margin: 0 10px;
+    border-radius: 10px;
+    display: block;
+    text-align: center;
+}
+.cp-floor{
+	padding-top: 16px !important;
+}
+.themed-grid-col{
+	margin-bottom: 30px;
+}
+.themed-grid-col:nth-child(odd){
+	padding-left: 0;
+}
+.themed-grid-col:nth-child(even){
+	padding-right: 0;
+}
+
+</style>