|
|
@@ -1,177 +1,208 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
- <div class="von-in">
|
|
|
- <img src="@/assets/img/cpdat01.png">
|
|
|
- </div>
|
|
|
- <div class="von-cpdat-qh">
|
|
|
- <div class="qh-tit d-flex">
|
|
|
- <a :class="type=='cp01'?'active':''" @click="type='cp01'">2排屑槽</a>
|
|
|
- <a :class="type=='cp02'?'active':''" @click="type='cp02'">3排屑槽</a>
|
|
|
- <a :class="type=='cp03'?'active':''" @click="type='cp03'">4排屑槽</a>
|
|
|
- </div>
|
|
|
- <div class="qh-cen">
|
|
|
- <div id="qhcenin01" class="qh-cen-in">
|
|
|
- <img src="@/assets/img/cpdat03.png">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="qh-btn">
|
|
|
- <a href="#/cpdat02">
|
|
|
- <button type="button" class="btn"><i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数</button>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <ul class="ulimg">
|
|
|
- <li>
|
|
|
- <img src="@/assets/img/cpdat04.png" width="100%">
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/assets/img/cpdat04.png" width="100%">
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/assets/img/cpdat04.png" width="100%">
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/assets/img/cpdat04.png" width="100%">
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="von-cpdat-hd bg-grew">
|
|
|
- <div class="hd-tit d-flex">
|
|
|
- <span></span>
|
|
|
- <p>2排屑槽</p>
|
|
|
- </div>
|
|
|
- <div class="hd-cen">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="von-cpdat-hd bg-grew">
|
|
|
- <div class="hd-tit d-flex">
|
|
|
- <span></span>
|
|
|
- <p>3排屑槽</p>
|
|
|
- </div>
|
|
|
- <div class="hd-cen">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="von-cpdat-hd bg-grew">
|
|
|
- <div class="hd-tit d-flex">
|
|
|
- <span></span>
|
|
|
- <p>4排屑槽</p>
|
|
|
- </div>
|
|
|
- <div class="hd-cen">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href=""><img src="@/assets/img/cpdat05.png" width="100%"> </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="qh-btn bg-grew"><a href="#/cpdat02">
|
|
|
- <button type="button" class="btn"><i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数</button></a>
|
|
|
- </div>
|
|
|
- <app-nav/>
|
|
|
- <app-footer/>
|
|
|
-
|
|
|
+ <div class="von-in">
|
|
|
+ <img src="@/assets/img/cpdat01.png" />
|
|
|
+ </div>
|
|
|
+ <div class="von-cpdat-qh">
|
|
|
+ <div class="qh-tit d-flex">
|
|
|
+ <a :class="type == 'cp01' ? 'active' : ''" @click="type = 'cp01'"
|
|
|
+ >2排屑槽</a
|
|
|
+ >
|
|
|
+ <a :class="type == 'cp02' ? 'active' : ''" @click="type = 'cp02'"
|
|
|
+ >3排屑槽</a
|
|
|
+ >
|
|
|
+ <a :class="type == 'cp03' ? 'active' : ''" @click="type = 'cp03'"
|
|
|
+ >4排屑槽</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="qh-cen">
|
|
|
+ <div id="qhcenin01" class="qh-cen-in">
|
|
|
+ <img src="@/assets/img/cpdat03.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="qh-btn">
|
|
|
+ <a href="#/cpdat02">
|
|
|
+ <button type="button" class="btn">
|
|
|
+ <i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数
|
|
|
+ </button>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="ulimg">
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/img/cpdat04.png" width="100%" />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/img/cpdat04.png" width="100%" />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/img/cpdat04.png" width="100%" />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/img/cpdat04.png" width="100%" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="von-cpdat-hd bg-grew">
|
|
|
+ <div class="hd-tit d-flex">
|
|
|
+ <span></span>
|
|
|
+ <p>2排屑槽</p>
|
|
|
+ </div>
|
|
|
+ <div class="hd-cen">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(key) in [1,2,3,4,1,2,3,4]">
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05new.jpg" width="100%" />
|
|
|
+ <dl class="hitem">
|
|
|
+ <dt class="tit">2819系列</dt>
|
|
|
+ <dd>
|
|
|
+ <pre>中心切削。<br>DIN 6528标准规格。<br>钢、不锈钢，以及铸铁。<br>刀尖倒角设计方案，延长刀具使用寿命。</pre>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="von-cpdat-hd bg-grew">
|
|
|
+ <div class="hd-tit d-flex">
|
|
|
+ <span></span>
|
|
|
+ <p>3排屑槽</p>
|
|
|
+ </div>
|
|
|
+ <div class="hd-cen">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="von-cpdat-hd bg-grew">
|
|
|
+ <div class="hd-tit d-flex">
|
|
|
+ <span></span>
|
|
|
+ <p>4排屑槽</p>
|
|
|
+ </div>
|
|
|
+ <div class="hd-cen">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href=""><img src="@/assets/img/cpdat05.png" width="100%" /> </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="qh-btn bg-grew">
|
|
|
+ <a href="#/cpdat02">
|
|
|
+ <button type="button" class="btn">
|
|
|
+ <i class="iconfont iconyoujiantou"></i>查看所有型号铣刀详细参数
|
|
|
+ </button></a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <app-nav />
|
|
|
+ <app-footer />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AppNav from '@/components/Nav.vue'
|
|
|
-import AppFooter from '@/components/footer.vue'
|
|
|
+import AppNav from "@/components/Nav.vue";
|
|
|
+import AppFooter from "@/components/footer.vue";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- AppFooter,
|
|
|
- AppNav
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- type:'cp01'
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
+ components: {
|
|
|
+ AppFooter,
|
|
|
+ AppNav,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: "cp01",
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.d-flex{
|
|
|
- display: flex;
|
|
|
+.d-flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.qh-btn .btn {
|
|
|
+ padding: 6px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+ul.ulimg {
|
|
|
+ padding: 10px 15px;
|
|
|
+ margin: 0;
|
|
|
+ background: #282828;
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+ul.ulimg li {
|
|
|
+ width: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+ul.ulimg li:nth-child(odd) {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+ul.ulimg li:nth-child(even) {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+.hitem {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 6px 12px 6px;
|
|
|
+}
|
|
|
+.hitem .tit {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+}
|
|
|
+.hitem dd{
|
|
|
+ min-height: 100px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.hitem dd::before{
|
|
|
+ content: "\e66f";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ right: -9px;
|
|
|
+ color: #c78c2a;
|
|
|
+ font-family: iconfont;
|
|
|
+ font-size: 10px;
|
|
|
+ transform:rotate(-90deg) scaleX(0.3) scaleY(0.6);
|
|
|
}
|
|
|
-.qh-btn .btn{
|
|
|
- padding: 6px 6px;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1.5;
|
|
|
- border-radius: 4px;
|
|
|
- border: none;
|
|
|
+.hitem dd pre {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- ul.ulimg {
|
|
|
- padding: 10px 15px;
|
|
|
- margin: 0;
|
|
|
- background: #282828;
|
|
|
- clear: both;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- ul.ulimg li {
|
|
|
- width: 50%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- ul.ulimg li:nth-child(odd){
|
|
|
- float: left;
|
|
|
- }
|
|
|
- ul.ulimg li:nth-child(even){
|
|
|
- float: right;
|
|
|
- }
|
|
|
</style>
|
