|
|
|
@ -1,110 +1,155 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div style="background: rgb(245, 246, 250);overflow:hidden"> |
|
|
|
<img v-if="officialwebsite" style="width:100%;height:450px; object-fit: cover;" src="/assets/home/2@2x.png" alt=""> |
|
|
|
<img |
|
|
|
<div :class="officialwebsite?'tytool':'notytool'"> |
|
|
|
v-if="officialwebsite" |
|
|
|
<div style="display:flex"> |
|
|
|
style="width: 100%; height: 450px; object-fit: cover" |
|
|
|
<div class="typetext">工具类型</div> |
|
|
|
src="/assets/home/2@2x.png" |
|
|
|
<el-tabs v-if="tooltypelist.length>0" v-model="toolType" @tab-click="showDataTypeChage"> |
|
|
|
alt="" |
|
|
|
<!-- dictValue dictLabel --> |
|
|
|
/> |
|
|
|
<el-tab-pane label="全部" name="''"></el-tab-pane> |
|
|
|
|
|
|
|
<el-tab-pane v-for="(item,key) of tooltypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane> |
|
|
|
<div class="topnavbar"> |
|
|
|
</el-tabs> |
|
|
|
<div class="topnavbarcon"> |
|
|
|
|
|
|
|
<div class="topnavbarconit"> |
|
|
|
|
|
|
|
<div class="topnavbarconitL">工具类型：</div> |
|
|
|
|
|
|
|
<div class="topnavbarconitR"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="topnavbarconitRit" |
|
|
|
|
|
|
|
:class="{ topnavbarconitRitActive: !typeName }" |
|
|
|
|
|
|
|
@click="toolTypeClick('')" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
全部 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-divider></el-divider> |
|
|
|
<div |
|
|
|
<div style="display:flex"> |
|
|
|
class="topnavbarconitRit" |
|
|
|
<div class="typetext">交付方式</div> |
|
|
|
:class="{ topnavbarconitRitActive: typeName == item.dictValue }" |
|
|
|
<el-tabs v-if="paytypelist.length>0" v-model="deliverType" @tab-click="payTypeChage"> |
|
|
|
v-for="(item, key) of tooltypelist" |
|
|
|
<el-tab-pane label="全部" name="''"></el-tab-pane> |
|
|
|
:key="key" |
|
|
|
<el-tab-pane v-for="(item,key) of paytypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"> </el-tab-pane> |
|
|
|
@click="toolTypeClick(item.dictValue)" |
|
|
|
</el-tabs> |
|
|
|
> |
|
|
|
|
|
|
|
{{ item.dictLabel }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if='toolslist && toolslist.length>0' v-loading="loading"> |
|
|
|
|
|
|
|
<div v-for='(tool,key) of toolslist' :key="key" class="productbox" :style="{padding:officialwebsite?'':'10px 0 5px 18px'}" @click="toolsinform(tool.toolId)"> |
|
|
|
|
|
|
|
<div style="width:150px;display:flex;align-items:center;"> |
|
|
|
|
|
|
|
<img :src="tool.img" style="width:119px;height:119px;" alt=""> |
|
|
|
|
|
|
|
<!-- <img v-if="tool.name=='代码静态分析工具'" src="/assets/toolmarket/EagleEye.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='源代码安全检测工具'" src="/assets/toolmarket/wukong.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='C/C++单元测试工具'" src="/assets/toolmarket/EagleWing-C.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='接口测试工具'" src="/assets/toolmarket/Kinterface.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='JAVA单元测试工具'" src="/assets/toolmarket/EagleWing-Java.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='功能测试工具AutoFun'" src="/assets/toolmarket/AutoFun.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='代码组成分析平台'" src="/assets/toolmarket/KeySwan.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='性能测试工具'" src="/assets/toolmarket/KeySphere.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='自鉴-交互式应用安全测试系统IAST'" src="/assets/toolmarket/自鉴交互式.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='Web应用安全测试工具'" src="/assets/toolmarket/web.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='资产识别及漏洞管理工具'" src="/assets/toolmarket/资产识别.png" style="width:119px;object-fit:contain" alt=""> |
|
|
|
|
|
|
|
<img v-if="tool.name=='性能测试工具KeyTurbo'" src="/assets/toolmarket/AutoLoad.jpg" style="width:119px;object-fit:contain" alt=""> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;padding: 0 20px;" > |
|
|
|
</div> |
|
|
|
<div style="display:flex;justify-content:space-between;" class="raise"> |
|
|
|
<div class="topnavbarconit topnavbarconitno"> |
|
|
|
<p>{{tool.name}}</p> |
|
|
|
<div class="topnavbarconitL">交付方式：</div> |
|
|
|
<p v-if="tool.price == 0" style="font-weight: bold; color:#E93A3A;"> |
|
|
|
<div class="topnavbarconitR"> |
|
|
|
限时免费 |
|
|
|
<div |
|
|
|
</p> |
|
|
|
class="topnavbarconitRit" |
|
|
|
|
|
|
|
:class="{ topnavbarconitRitActive: !deliverType }" |
|
|
|
|
|
|
|
@click="payTypeClick('')" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
全部 |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="topnavbarconitRit" |
|
|
|
|
|
|
|
:class="{ topnavbarconitRitActive: deliverType == item.dictValue }" |
|
|
|
|
|
|
|
v-for="(item, key) of paytypelist" |
|
|
|
|
|
|
|
:key="key" |
|
|
|
|
|
|
|
@click="payTypeClick(item.dictValue)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ item.dictLabel }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div :class="officialwebsite ? 'tytool' : 'notytool'"> |
|
|
|
|
|
|
|
<div v-if="toolslist && toolslist.length > 0" v-loading="loading"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
v-for="(tool, key) of toolslist" |
|
|
|
|
|
|
|
:key="key" |
|
|
|
|
|
|
|
class="productbox" |
|
|
|
|
|
|
|
:style="{ padding: officialwebsite ? '' : '10px 0 5px 18px' }" |
|
|
|
|
|
|
|
@click="toolsinform(tool.toolId)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div style="width: 150px; display: flex; align-items: center"> |
|
|
|
|
|
|
|
<img :src="tool.img" style="width: 119px; height: 119px" alt="" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="width: 100%; padding: 0 20px"> |
|
|
|
|
|
|
|
<div style="display: flex; justify-content: space-between" class="raise"> |
|
|
|
|
|
|
|
<p>{{ tool.name }}</p> |
|
|
|
|
|
|
|
<p v-if="tool.price == 0" style="font-weight: bold; color: #e93a3a">限时免费</p> |
|
|
|
<p v-else style="font-weight: bold"> |
|
|
|
<p v-else style="font-weight: bold"> |
|
|
|
<span style="color:#E93A3A;">￥ {{tool.price}} </span> |
|
|
|
<span style="color: #e93a3a">￥ {{ tool.price }} </span> |
|
|
|
<span>/月</span> |
|
|
|
<span>/月</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-divider></el-divider> |
|
|
|
<el-divider></el-divider> |
|
|
|
<p :title="tool.toolDesc" |
|
|
|
<p :title="tool.toolDesc" style="font-size: 14px; margin-bottom: 5px; line-height: 1.8"> |
|
|
|
style="font-size:14px;margin-bottom:5px;line-height:1.8">{{tool.toolDesc | ellipsis}}</p> |
|
|
|
{{ tool.toolDesc | ellipsis }} |
|
|
|
|
|
|
|
</p> |
|
|
|
<div class="cetype"> |
|
|
|
<div class="cetype"> |
|
|
|
<p>工具类型：{{tool.toolTypeName}} </p> |
|
|
|
<p>工具类型：{{ tool.toolTypeName }}</p> |
|
|
|
<p>交付方式：{{tool.deliverType}}</p> |
|
|
|
<p>交付方式：{{ tool.deliverType }}</p> |
|
|
|
<p>上架时间： {{tool.onlineTime}}</p> |
|
|
|
<p>上架时间： {{ tool.onlineTime }}</p> |
|
|
|
<p>服务商：{{tool.providerName}}</p> |
|
|
|
<p>服务商：{{ tool.providerName }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<div v-else> |
|
|
|
<el-empty ></el-empty> |
|
|
|
<el-empty></el-empty> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="officialwebsite && total>10" style='width:100%;margin-top:30px;text-align: center;'> |
|
|
|
<div v-if="officialwebsite && total > 10" style="width: 100%; margin-top: 30px; text-align: center"> |
|
|
|
<el-pagination background |
|
|
|
<el-pagination |
|
|
|
|
|
|
|
background |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
:current-page="currentPage" |
|
|
|
:current-page="currentPage" |
|
|
|
:page-sizes="[10, 20, 30]" |
|
|
|
:page-sizes="[10, 20, 30]" |
|
|
|
:page-size="pageSize" |
|
|
|
:page-size="pageSize" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total"> |
|
|
|
:total="total" |
|
|
|
|
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- :page-sizes="[3, 6, 30]" sizes,--> |
|
|
|
<!-- :page-sizes="[3, 6, 30]" sizes,--> |
|
|
|
<div v-if="!officialwebsite && total>3" style='width:100%;margin-top:30px;text-align: center;'> |
|
|
|
<div v-if="!officialwebsite && total > 3" style="width: 100%; margin-top: 30px; text-align: center"> |
|
|
|
<el-pagination background |
|
|
|
<el-pagination |
|
|
|
|
|
|
|
background |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
:current-page="currentPage" |
|
|
|
:current-page="currentPage" |
|
|
|
:page-size="pageSize" |
|
|
|
:page-size="pageSize" |
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
:total="total"> |
|
|
|
:total="total" |
|
|
|
|
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import {mapGetters} from "vuex"; |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import {listTools} from "@/api/toolInfo/market"; |
|
|
|
import { listTools } from '@/api/toolInfo/market' |
|
|
|
export default{ |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
data() { |
|
|
|
return{ |
|
|
|
return { |
|
|
|
loading:true, |
|
|
|
loading: true, |
|
|
|
toolType:null,//工具类型 |
|
|
|
toolType: '', //工具类型 |
|
|
|
deliverType:null,//支付方式 |
|
|
|
deliverType: '', //支付方式 |
|
|
|
toolslist:[],//工具数组 |
|
|
|
toolslist: [], //工具数组 |
|
|
|
currentPage:1, |
|
|
|
currentPage: 1, |
|
|
|
total:'', |
|
|
|
total: '', |
|
|
|
pageNum:1, |
|
|
|
pageNum: 1, |
|
|
|
pageSize:20, |
|
|
|
pageSize: 20, |
|
|
|
officialwebsite:true,//是否官网 |
|
|
|
officialwebsite: true, //是否官网 |
|
|
|
|
|
|
|
|
|
|
|
imageList: ['EagleEye.png', 'wukong.png', 'EagleWing-C.png', 'Kinterface.png', 'EagleWing-Java.png', 'AutoFun.png' |
|
|
|
imageList: [ |
|
|
|
, 'KeySwan.png', 'KeySphere.png', '自鉴交互式.png', 'web.png', '资产识别.png', 'AutoLoad.png'], |
|
|
|
'EagleEye.png', |
|
|
|
|
|
|
|
'wukong.png', |
|
|
|
|
|
|
|
'EagleWing-C.png', |
|
|
|
|
|
|
|
'Kinterface.png', |
|
|
|
|
|
|
|
'EagleWing-Java.png', |
|
|
|
|
|
|
|
'AutoFun.png', |
|
|
|
|
|
|
|
'KeySwan.png', |
|
|
|
|
|
|
|
'KeySphere.png', |
|
|
|
|
|
|
|
'自鉴交互式.png', |
|
|
|
|
|
|
|
'web.png', |
|
|
|
|
|
|
|
'资产识别.png', |
|
|
|
|
|
|
|
'AutoLoad.png', |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
img0: 'EagleEye.png', |
|
|
|
img0: 'EagleEye.png', |
|
|
|
img1: '/assets/toolmarket/wukong.png', |
|
|
|
img1: '/assets/toolmarket/wukong.png', |
|
|
|
@ -121,7 +166,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
computed: { |
|
|
|
...mapGetters(['paytypelist','tooltypelist']) |
|
|
|
...mapGetters(['paytypelist', 'tooltypelist']), |
|
|
|
}, |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
filters: { |
|
|
|
ellipsis(value) { |
|
|
|
ellipsis(value) { |
|
|
|
@ -130,179 +175,244 @@ |
|
|
|
return value.slice(0, 100) + '...' |
|
|
|
return value.slice(0, 100) + '...' |
|
|
|
} |
|
|
|
} |
|
|
|
return value |
|
|
|
return value |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
// console.log('路由',this.$route.path); |
|
|
|
// console.log('路由',this.$route.path); |
|
|
|
let currentrout=this.$route.path; |
|
|
|
let currentrout = this.$route.path |
|
|
|
if(currentrout!=='/market'){ |
|
|
|
if (currentrout !== '/market') { |
|
|
|
this.officialwebsite=false; |
|
|
|
this.officialwebsite = false |
|
|
|
this.pageSize=3 |
|
|
|
this.pageSize = 3 |
|
|
|
} |
|
|
|
} |
|
|
|
// console.log('toolType----',this.tooltypelist,this.deliverType) |
|
|
|
// console.log('toolType----',this.tooltypelist,this.deliverType) |
|
|
|
this.getList() |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
methods: { |
|
|
|
|
|
|
|
toolTypeClick(val) { |
|
|
|
|
|
|
|
this.typeName = val |
|
|
|
|
|
|
|
this.getList() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
payTypeClick(val) { |
|
|
|
|
|
|
|
this.deliverType = val |
|
|
|
|
|
|
|
this.getList() |
|
|
|
|
|
|
|
}, |
|
|
|
/** 查询列表 */ |
|
|
|
/** 查询列表 */ |
|
|
|
getList() { |
|
|
|
getList() { |
|
|
|
this.loading = true; |
|
|
|
this.loading = true |
|
|
|
// console.log('toolType----'.this.toolType) |
|
|
|
// console.log('toolType----'.this.toolType) |
|
|
|
let data={ |
|
|
|
let data = { |
|
|
|
toolType:this.toolType, |
|
|
|
toolType: this.toolType, |
|
|
|
deliverType:this.deliverType, |
|
|
|
deliverType: this.deliverType, |
|
|
|
pageNum:this.pageNum, |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize:this.pageSize, |
|
|
|
pageSize: this.pageSize, |
|
|
|
status: 1 |
|
|
|
status: 1, |
|
|
|
}; |
|
|
|
} |
|
|
|
Object.keys(data).forEach(keyd=>{ |
|
|
|
Object.keys(data).forEach((keyd) => { |
|
|
|
if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; } |
|
|
|
if (!data[keyd] || data[keyd] == '' || data[keyd] == '0' || data[keyd] == "''") { |
|
|
|
|
|
|
|
delete data[keyd] |
|
|
|
|
|
|
|
} |
|
|
|
// console.log('data处理后----',data) |
|
|
|
// console.log('data处理后----',data) |
|
|
|
}) |
|
|
|
}) |
|
|
|
// console.log('data----',data) |
|
|
|
// console.log('data----',data) |
|
|
|
listTools(data).then(response => { |
|
|
|
listTools(data) |
|
|
|
|
|
|
|
.then((response) => { |
|
|
|
// console.log('response----',response) |
|
|
|
// console.log('response----',response) |
|
|
|
this.toolslist = response.rows; |
|
|
|
this.toolslist = response.rows |
|
|
|
this.total = response.total; |
|
|
|
this.total = response.total |
|
|
|
this.loading = false; |
|
|
|
this.loading = false |
|
|
|
}).catch(err=>{ |
|
|
|
}) |
|
|
|
console.log('异常',err) |
|
|
|
.catch((err) => { |
|
|
|
|
|
|
|
console.log('异常', err) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
//工具方式 |
|
|
|
//工具方式 |
|
|
|
showDataTypeChage(){ |
|
|
|
showDataTypeChage() { |
|
|
|
// console.log('工具',this.toolType,this.deliverType) |
|
|
|
// console.log('工具',this.toolType,this.deliverType) |
|
|
|
this.getList() |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
}, |
|
|
|
//支付方式 |
|
|
|
//支付方式 |
|
|
|
payTypeChage(){ |
|
|
|
payTypeChage() { |
|
|
|
// console.log('支付',this.toolType,this.deliverType) |
|
|
|
// console.log('支付',this.toolType,this.deliverType) |
|
|
|
this.getList() |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
}, |
|
|
|
//工具详情 |
|
|
|
//工具详情 |
|
|
|
toolsinform(id){ |
|
|
|
toolsinform(id) { |
|
|
|
// this.$message({ |
|
|
|
// this.$message({ |
|
|
|
// message: '即将上线，敬请期待', |
|
|
|
// message: '即将上线，敬请期待', |
|
|
|
// type: 'info', |
|
|
|
// type: 'info', |
|
|
|
// duration: 1000, |
|
|
|
// duration: 1000, |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
if(this.officialwebsite){ |
|
|
|
if (this.officialwebsite) { |
|
|
|
this.$router.push(`./market/tooldetails?id=${id}`) |
|
|
|
this.$router.push(`./market/tooldetails?id=${id}`) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.$router.push(`/console/mytooldetails?id=${id}`) |
|
|
|
this.$router.push(`/console/mytooldetails?id=${id}`) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
//分页 |
|
|
|
//分页 |
|
|
|
handleSizeChange(val) { |
|
|
|
handleSizeChange(val) { |
|
|
|
// console.log(`每页 ${val} 条`); |
|
|
|
// console.log(`每页 ${val} 条`); |
|
|
|
this.pageSize=val; |
|
|
|
this.pageSize = val |
|
|
|
this.getList(); |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
}, |
|
|
|
//当前页码 |
|
|
|
//当前页码 |
|
|
|
handleCurrentChange(val) { |
|
|
|
handleCurrentChange(val) { |
|
|
|
// console.log(`当前页: ${val}`); |
|
|
|
// console.log(`当前页: ${val}`); |
|
|
|
this.pageNum=val; |
|
|
|
this.pageNum = val |
|
|
|
this.getList(); |
|
|
|
this.getList() |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.tytool{ |
|
|
|
.topnavbar { |
|
|
|
width:1200px; |
|
|
|
width: 100%; |
|
|
|
margin:30px auto; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
background: #fff; |
|
|
|
.notytool{ |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
margin-top: -3px; |
|
|
|
|
|
|
|
box-shadow: 0px 4px 11px 1px rgba(20, 77, 150, 0.1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarcon { |
|
|
|
|
|
|
|
width: 1200px; |
|
|
|
|
|
|
|
margin: auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconit { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
padding: 10px 0; |
|
|
|
|
|
|
|
border-bottom: 1px solid #dcdfe6; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconitno { |
|
|
|
|
|
|
|
border-bottom: unset; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconitL { |
|
|
|
|
|
|
|
width: 85px; |
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
font-size: 17px; |
|
|
|
|
|
|
|
color: #4d4d4d; |
|
|
|
|
|
|
|
height: 40px; |
|
|
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
|
|
min-width: 85px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconitR { |
|
|
|
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
font-size: 15px; |
|
|
|
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconitRit { |
|
|
|
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
height: 40px; |
|
|
|
|
|
|
|
padding: 0 22px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.topnavbarconitRitActive { |
|
|
|
|
|
|
|
background: #0066eb; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.tytool { |
|
|
|
|
|
|
|
width: 1200px; |
|
|
|
|
|
|
|
margin: 30px auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.notytool { |
|
|
|
/* width:1200px; */ |
|
|
|
/* width:1200px; */ |
|
|
|
/* margin-left:30px; */ |
|
|
|
/* margin-left:30px; */ |
|
|
|
} |
|
|
|
} |
|
|
|
.tytool>>>.el-tabs__item.is-top:last-child { |
|
|
|
.tytool >>> .el-tabs__item.is-top:last-child { |
|
|
|
padding-right: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.notytool>>>.el-tabs__item.is-top:last-child { |
|
|
|
.notytool >>> .el-tabs__item.is-top:last-child { |
|
|
|
padding-right: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-tabs>>>.el-tabs__nav-wrap::after{ |
|
|
|
.el-tabs >>> .el-tabs__nav-wrap::after { |
|
|
|
background-color:transparent; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-tabs>>>.el-tabs__item{ |
|
|
|
.el-tabs >>> .el-tabs__item { |
|
|
|
color: #4D4D4D; |
|
|
|
color: #4d4d4d; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-tabs>>>.el-tabs__active-bar{ |
|
|
|
.el-tabs >>> .el-tabs__active-bar { |
|
|
|
background-color:transparent; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-tabs>>>.el-tabs__item.is-active{ |
|
|
|
.el-tabs >>> .el-tabs__item.is-active { |
|
|
|
background:#0066EB; |
|
|
|
background: #0066eb; |
|
|
|
color:#fff; |
|
|
|
color: #fff; |
|
|
|
border:none; |
|
|
|
border: none; |
|
|
|
border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
|
|
|
.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
|
|
|
padding-left:22px; |
|
|
|
padding-left: 22px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
|
|
|
.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
|
|
|
padding-right:18px; |
|
|
|
padding-right: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tytool>>>.el-divider--horizontal{ |
|
|
|
.tytool >>> .el-divider--horizontal { |
|
|
|
margin:5px 0 15px 0 |
|
|
|
margin: 5px 0 15px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
|
|
|
.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
|
|
|
padding-left:22px; |
|
|
|
padding-left: 22px; |
|
|
|
} |
|
|
|
} |
|
|
|
.notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
|
|
|
.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
|
|
|
padding-right:18px; |
|
|
|
padding-right: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
.notytool>>>.el-divider--horizontal{ |
|
|
|
.notytool >>> .el-divider--horizontal { |
|
|
|
margin:-5px 0 5px 0 |
|
|
|
margin: -5px 0 5px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.typetext{ |
|
|
|
.typetext { |
|
|
|
color: #4D4D4D; |
|
|
|
color: #4d4d4d; |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
height:40px; |
|
|
|
height: 40px; |
|
|
|
line-height:40px; |
|
|
|
line-height: 40px; |
|
|
|
margin-right:20px; |
|
|
|
margin-right: 20px; |
|
|
|
font-size:17px; |
|
|
|
font-size: 17px; |
|
|
|
} |
|
|
|
} |
|
|
|
.productbox>>>.el-divider--horizontal{ |
|
|
|
.productbox >>> .el-divider--horizontal { |
|
|
|
margin:0px |
|
|
|
margin: 0px; |
|
|
|
} |
|
|
|
} |
|
|
|
.cetype{ |
|
|
|
.cetype { |
|
|
|
display:flex; |
|
|
|
display: flex; |
|
|
|
justify-content:space-between; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap:wrap |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
} |
|
|
|
.productbox{ |
|
|
|
.productbox { |
|
|
|
/* width: 1200px; */ |
|
|
|
/* width: 1200px; */ |
|
|
|
/* height: 110px; */ |
|
|
|
/* height: 110px; */ |
|
|
|
background: #FFFFFF; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1); |
|
|
|
box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1); |
|
|
|
border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
padding:25px 0 10px 18px; |
|
|
|
padding: 25px 0 10px 18px; |
|
|
|
display:flex; |
|
|
|
display: flex; |
|
|
|
margin-bottom:30px; |
|
|
|
margin-bottom: 30px; |
|
|
|
cursor:pointer; |
|
|
|
cursor: pointer; |
|
|
|
transition: all .1s linear; |
|
|
|
transition: all 0.1s linear; |
|
|
|
} |
|
|
|
} |
|
|
|
.cetype p{ |
|
|
|
.cetype p { |
|
|
|
/* width:200px; */ |
|
|
|
/* width:200px; */ |
|
|
|
font-size:14px; |
|
|
|
font-size: 14px; |
|
|
|
margin:10px 0 |
|
|
|
margin: 10px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.raise :nth-child(1){ |
|
|
|
.raise :nth-child(1) { |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.productbox:hover .raise p:nth-child(1){ |
|
|
|
.productbox:hover .raise p:nth-child(1) { |
|
|
|
color:#0066EB |
|
|
|
color: #0066eb; |
|
|
|
} |
|
|
|
} |
|
|
|
.productbox:hover{ |
|
|
|
.productbox:hover { |
|
|
|
transform: scale(1.01); |
|
|
|
transform: scale(1.01); |
|
|
|
box-shadow: 0px 2px 8px 0px #87898d; |
|
|
|
box-shadow: 0px 2px 8px 0px #87898d; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 1500px) { |
|
|
|
|
|
|
|
.productbox { |
|
|
|
|
|
|
|
width: 1100px; |
|
|
|
|
|
|
|
padding: 25px 20px 10px 18px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
@media screen and (max-width: 1500px){ |
|
|
|
} |
|
|
|
.productbox{ |
|
|
|
|
|
|
|
width:1100px; |
|
|
|
|
|
|
|
padding:25px 20px 10px 18px!important |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
