parent
ee75909171
commit
812f83bde9
@ -1,308 +1,418 @@ |
|||||||
<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> |
<div class="topnavbarconit"> |
||||||
<el-divider></el-divider> |
<div class="topnavbarconitL">工具类型：</div> |
||||||
<div style="display:flex"> |
<div class="topnavbarconitR"> |
||||||
<div class="typetext">交付方式</div> |
<div |
||||||
<el-tabs v-if="paytypelist.length>0" v-model="deliverType" @tab-click="payTypeChage"> |
class="topnavbarconitRit" |
||||||
<el-tab-pane label="全部" name="''"></el-tab-pane> |
:class="{ topnavbarconitRitActive: !typeName }" |
||||||
<el-tab-pane v-for="(item,key) of paytypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"> </el-tab-pane> |
@click="toolTypeClick('')" |
||||||
</el-tabs> |
> |
||||||
|
全部 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
class="topnavbarconitRit" |
||||||
|
:class="{ topnavbarconitRitActive: typeName == item.dictValue }" |
||||||
|
v-for="(item, key) of tooltypelist" |
||||||
|
:key="key" |
||||||
|
@click="toolTypeClick(item.dictValue)" |
||||||
|
> |
||||||
|
{{ item.dictLabel }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="topnavbarconit topnavbarconitno"> |
||||||
|
<div class="topnavbarconitL">交付方式：</div> |
||||||
|
<div class="topnavbarconitR"> |
||||||
|
<div |
||||||
|
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 v-if='toolslist && toolslist.length>0' v-loading="loading"> |
</div> |
||||||
<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;"> |
<div :class="officialwebsite ? 'tytool' : 'notytool'"> |
||||||
<img :src="tool.img" style="width:119px;height:119px;" alt=""> |
<div v-if="toolslist && toolslist.length > 0" v-loading="loading"> |
||||||
<!-- <img v-if="tool.name=='代码静态分析工具'" src="/assets/toolmarket/EagleEye.png" style="width:119px;object-fit:contain" alt=""> |
<div |
||||||
<img v-if="tool.name=='源代码安全检测工具'" src="/assets/toolmarket/wukong.png" style="width:119px;object-fit:contain" alt=""> |
v-for="(tool, key) of toolslist" |
||||||
<img v-if="tool.name=='C/C++单元测试工具'" src="/assets/toolmarket/EagleWing-C.png" style="width:119px;object-fit:contain" alt=""> |
:key="key" |
||||||
<img v-if="tool.name=='接口测试工具'" src="/assets/toolmarket/Kinterface.png" style="width:119px;object-fit:contain" alt=""> |
class="productbox" |
||||||
<img v-if="tool.name=='JAVA单元测试工具'" src="/assets/toolmarket/EagleWing-Java.png" style="width:119px;object-fit:contain" alt=""> |
:style="{ padding: officialwebsite ? '' : '10px 0 5px 18px' }" |
||||||
<img v-if="tool.name=='功能测试工具AutoFun'" src="/assets/toolmarket/AutoFun.png" style="width:119px;object-fit:contain" alt=""> |
@click="toolsinform(tool.toolId)" |
||||||
<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=""> |
<div style="width: 150px; display: flex; align-items: center"> |
||||||
<img v-if="tool.name=='自鉴-交互式应用安全测试系统IAST'" src="/assets/toolmarket/自鉴交互式.png" style="width:119px;object-fit:contain" alt=""> |
<img :src="tool.img" style="width: 119px; height: 119px" 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 style="width: 100%; padding: 0 20px"> |
||||||
<div style="display:flex;justify-content:space-between;" class="raise"> |
<div style="display: flex; justify-content: space-between" class="raise"> |
||||||
<p>{{tool.name}}</p> |
<p>{{ tool.name }}</p> |
||||||
<p v-if="tool.price == 0" style="font-weight: bold; color:#E93A3A;"> |
<p v-if="tool.price == 0" style="font-weight: bold; color: #e93a3a">限时免费</p> |
||||||
限时免费 |
|
||||||
</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 }} |
||||||
<div class="cetype"> |
</p> |
||||||
<p>工具类型：{{tool.toolTypeName}} </p> |
<div class="cetype"> |
||||||
<p>交付方式：{{tool.deliverType}}</p> |
<p>工具类型：{{ tool.toolTypeName }}</p> |
||||||
<p>上架时间： {{tool.onlineTime}}</p> |
<p>交付方式：{{ tool.deliverType }}</p> |
||||||
<p>服务商：{{tool.providerName}}</p> |
<p>上架时间： {{ tool.onlineTime }}</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', |
||||||
img2: '/assets/toolmarket/EagleWing-C.png', |
img2: '/assets/toolmarket/EagleWing-C.png', |
||||||
img3: '/assets/toolmarket/Kinterface.png', |
img3: '/assets/toolmarket/Kinterface.png', |
||||||
img4: '/assets/toolmarket/EagleWing-Java.png', |
img4: '/assets/toolmarket/EagleWing-Java.png', |
||||||
img5: '/assets/toolmarket/AutoFun.png', |
img5: '/assets/toolmarket/AutoFun.png', |
||||||
img6: '/assets/toolmarket/KeySwan.png', |
img6: '/assets/toolmarket/KeySwan.png', |
||||||
img7: '/assets/toolmarket/KeySphere.png', |
img7: '/assets/toolmarket/KeySphere.png', |
||||||
img8: '/assets/toolmarket/自鉴交互式.png', |
img8: '/assets/toolmarket/自鉴交互式.png', |
||||||
img9: '/assets/toolmarket/web.png', |
img9: '/assets/toolmarket/web.png', |
||||||
img10: '/assets/toolmarket/资产识别.png', |
img10: '/assets/toolmarket/资产识别.png', |
||||||
img11: '/assets/toolmarket/AutoLoad.png', |
img11: '/assets/toolmarket/AutoLoad.png', |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapGetters(['paytypelist', 'tooltypelist']), |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
ellipsis(value) { |
||||||
|
if (!value) return '' |
||||||
|
if (value.length > 100) { |
||||||
|
return value.slice(0, 100) + '...' |
||||||
} |
} |
||||||
|
return value |
||||||
}, |
}, |
||||||
computed: { |
}, |
||||||
...mapGetters(['paytypelist','tooltypelist']) |
mounted() { |
||||||
|
// console.log('路由',this.$route.path); |
||||||
|
let currentrout = this.$route.path |
||||||
|
if (currentrout !== '/market') { |
||||||
|
this.officialwebsite = false |
||||||
|
this.pageSize = 3 |
||||||
|
} |
||||||
|
// console.log('toolType----',this.tooltypelist,this.deliverType) |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toolTypeClick(val) { |
||||||
|
this.typeName = val |
||||||
|
this.getList() |
||||||
}, |
}, |
||||||
filters: { |
payTypeClick(val) { |
||||||
ellipsis(value) { |
this.deliverType = val |
||||||
if (!value) return '' |
this.getList() |
||||||
if (value.length > 100) { |
|
||||||
return value.slice(0, 100) + '...' |
|
||||||
} |
|
||||||
return value |
|
||||||
} |
|
||||||
}, |
}, |
||||||
mounted(){ |
/** 查询列表 */ |
||||||
// console.log('路由',this.$route.path); |
getList() { |
||||||
let currentrout=this.$route.path; |
this.loading = true |
||||||
if(currentrout!=='/market'){ |
// console.log('toolType----'.this.toolType) |
||||||
this.officialwebsite=false; |
let data = { |
||||||
this.pageSize=3 |
toolType: this.toolType, |
||||||
|
deliverType: this.deliverType, |
||||||
|
pageNum: this.pageNum, |
||||||
|
pageSize: this.pageSize, |
||||||
|
status: 1, |
||||||
} |
} |
||||||
// console.log('toolType----',this.tooltypelist,this.deliverType) |
Object.keys(data).forEach((keyd) => { |
||||||
this.getList() |
if (!data[keyd] || data[keyd] == '' || data[keyd] == '0' || data[keyd] == "''") { |
||||||
}, |
delete data[keyd] |
||||||
methods:{ |
} |
||||||
/** 查询列表 */ |
// console.log('data处理后----',data) |
||||||
getList() { |
}) |
||||||
this.loading = true; |
// console.log('data----',data) |
||||||
// console.log('toolType----'.this.toolType) |
listTools(data) |
||||||
let data={ |
.then((response) => { |
||||||
toolType:this.toolType, |
|
||||||
deliverType:this.deliverType, |
|
||||||
pageNum:this.pageNum, |
|
||||||
pageSize:this.pageSize, |
|
||||||
status: 1 |
|
||||||
}; |
|
||||||
Object.keys(data).forEach(keyd=>{ |
|
||||||
if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; } |
|
||||||
// console.log('data处理后----',data) |
|
||||||
}) |
|
||||||
// console.log('data----',data) |
|
||||||
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(){ |
}) |
||||||
// console.log('工具',this.toolType,this.deliverType) |
}, |
||||||
this.getList() |
//工具方式 |
||||||
}, |
showDataTypeChage() { |
||||||
//支付方式 |
// console.log('工具',this.toolType,this.deliverType) |
||||||
payTypeChage(){ |
this.getList() |
||||||
// console.log('支付',this.toolType,this.deliverType) |
}, |
||||||
this.getList() |
//支付方式 |
||||||
}, |
payTypeChage() { |
||||||
//工具详情 |
// console.log('支付',this.toolType,this.deliverType) |
||||||
toolsinform(id){ |
this.getList() |
||||||
// this.$message({ |
}, |
||||||
// message: '即将上线，敬请期待', |
//工具详情 |
||||||
// type: 'info', |
toolsinform(id) { |
||||||
// duration: 1000, |
// this.$message({ |
||||||
// }) |
// message: '即将上线，敬请期待', |
||||||
if(this.officialwebsite){ |
// type: 'info', |
||||||
this.$router.push(`./market/tooldetails?id=${id}`) |
// duration: 1000, |
||||||
}else{ |
// }) |
||||||
this.$router.push(`/console/mytooldetails?id=${id}`) |
if (this.officialwebsite) { |
||||||
} |
this.$router.push(`./market/tooldetails?id=${id}`) |
||||||
}, |
} else { |
||||||
//分页 |
this.$router.push(`/console/mytooldetails?id=${id}`) |
||||||
handleSizeChange(val) { |
|
||||||
// console.log(`每页 ${val} 条`); |
|
||||||
this.pageSize=val; |
|
||||||
this.getList(); |
|
||||||
}, |
|
||||||
//当前页码 |
|
||||||
handleCurrentChange(val) { |
|
||||||
// console.log(`当前页: ${val}`); |
|
||||||
this.pageNum=val; |
|
||||||
this.getList(); |
|
||||||
} |
} |
||||||
}, |
}, |
||||||
|
//分页 |
||||||
} |
handleSizeChange(val) { |
||||||
|
// console.log(`每页 ${val} 条`); |
||||||
|
this.pageSize = val |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
//当前页码 |
||||||
|
handleCurrentChange(val) { |
||||||
|
// console.log(`当前页: ${val}`); |
||||||
|
this.pageNum = val |
||||||
|
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; |
||||||
/* width:1200px; */ |
margin-top: -3px; |
||||||
/* margin-left:30px; */ |
box-shadow: 0px 4px 11px 1px rgba(20, 77, 150, 0.1); |
||||||
} |
} |
||||||
.tytool>>>.el-tabs__item.is-top:last-child { |
.topnavbarcon { |
||||||
padding-right: 20px; |
width: 1200px; |
||||||
} |
margin: auto; |
||||||
.notytool>>>.el-tabs__item.is-top:last-child { |
} |
||||||
padding-right: 20px; |
.topnavbarconit { |
||||||
} |
display: flex; |
||||||
.el-tabs>>>.el-tabs__nav-wrap::after{ |
align-items: center; |
||||||
background-color:transparent; |
padding: 10px 0; |
||||||
} |
border-bottom: 1px solid #dcdfe6; |
||||||
.el-tabs>>>.el-tabs__item{ |
} |
||||||
color: #4D4D4D; |
.topnavbarconitno { |
||||||
} |
border-bottom: unset; |
||||||
.el-tabs>>>.el-tabs__active-bar{ |
} |
||||||
background-color:transparent; |
.topnavbarconitL { |
||||||
} |
width: 85px; |
||||||
.el-tabs>>>.el-tabs__item.is-active{ |
font-weight: bold; |
||||||
background:#0066EB; |
font-size: 17px; |
||||||
color:#fff; |
color: #4d4d4d; |
||||||
border:none; |
height: 40px; |
||||||
border-radius: 4px; |
line-height: 40px; |
||||||
} |
margin-right: 30px; |
||||||
.tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
min-width: 85px; |
||||||
padding-left:22px; |
} |
||||||
} |
.topnavbarconitR { |
||||||
.tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
flex: 1; |
||||||
padding-right:18px; |
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; */ |
||||||
|
/* margin-left:30px; */ |
||||||
|
} |
||||||
|
.tytool >>> .el-tabs__item.is-top:last-child { |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
.notytool >>> .el-tabs__item.is-top:last-child { |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
.el-tabs >>> .el-tabs__nav-wrap::after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.el-tabs >>> .el-tabs__item { |
||||||
|
color: #4d4d4d; |
||||||
|
} |
||||||
|
.el-tabs >>> .el-tabs__active-bar { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.el-tabs >>> .el-tabs__item.is-active { |
||||||
|
background: #0066eb; |
||||||
|
color: #fff; |
||||||
|
border: none; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
||||||
|
padding-left: 22px; |
||||||
|
} |
||||||
|
.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
||||||
|
padding-right: 18px; |
||||||
|
} |
||||||
|
.tytool >>> .el-divider--horizontal { |
||||||
|
margin: 5px 0 15px 0; |
||||||
|
} |
||||||
|
.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
||||||
|
padding-left: 22px; |
||||||
|
} |
||||||
|
.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
||||||
|
padding-right: 18px; |
||||||
|
} |
||||||
|
.notytool >>> .el-divider--horizontal { |
||||||
|
margin: -5px 0 5px 0; |
||||||
|
} |
||||||
|
.typetext { |
||||||
|
color: #4d4d4d; |
||||||
|
font-weight: bold; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
margin-right: 20px; |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
.productbox >>> .el-divider--horizontal { |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
.cetype { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.productbox { |
||||||
|
/* width: 1200px; */ |
||||||
|
/* height: 110px; */ |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1); |
||||||
|
border-radius: 4px; |
||||||
|
padding: 25px 0 10px 18px; |
||||||
|
display: flex; |
||||||
|
margin-bottom: 30px; |
||||||
|
cursor: pointer; |
||||||
|
transition: all 0.1s linear; |
||||||
|
} |
||||||
|
.cetype p { |
||||||
|
/* width:200px; */ |
||||||
|
font-size: 14px; |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
.raise :nth-child(1) { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.productbox:hover .raise p:nth-child(1) { |
||||||
|
color: #0066eb; |
||||||
|
} |
||||||
|
.productbox:hover { |
||||||
|
transform: scale(1.01); |
||||||
|
box-shadow: 0px 2px 8px 0px #87898d; |
||||||
|
} |
||||||
|
@media screen and (max-width: 1500px) { |
||||||
|
.productbox { |
||||||
|
width: 1100px; |
||||||
|
padding: 25px 20px 10px 18px !important; |
||||||
} |
} |
||||||
.tytool>>>.el-divider--horizontal{ |
} |
||||||
margin:5px 0 15px 0 |
|
||||||
} |
|
||||||
.notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
|
||||||
padding-left:22px; |
|
||||||
} |
|
||||||
.notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) { |
|
||||||
padding-right:18px; |
|
||||||
} |
|
||||||
.notytool>>>.el-divider--horizontal{ |
|
||||||
margin:-5px 0 5px 0 |
|
||||||
} |
|
||||||
.typetext{ |
|
||||||
color: #4D4D4D; |
|
||||||
font-weight: bold; |
|
||||||
height:40px; |
|
||||||
line-height:40px; |
|
||||||
margin-right:20px; |
|
||||||
font-size:17px; |
|
||||||
} |
|
||||||
.productbox>>>.el-divider--horizontal{ |
|
||||||
margin:0px |
|
||||||
} |
|
||||||
.cetype{ |
|
||||||
display:flex; |
|
||||||
justify-content:space-between; |
|
||||||
flex-wrap:wrap |
|
||||||
} |
|
||||||
.productbox{ |
|
||||||
/* width: 1200px; */ |
|
||||||
/* height: 110px; */ |
|
||||||
background: #FFFFFF; |
|
||||||
box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1); |
|
||||||
border-radius: 4px; |
|
||||||
padding:25px 0 10px 18px; |
|
||||||
display:flex; |
|
||||||
margin-bottom:30px; |
|
||||||
cursor:pointer; |
|
||||||
transition: all .1s linear; |
|
||||||
} |
|
||||||
.cetype p{ |
|
||||||
/* width:200px; */ |
|
||||||
font-size:14px; |
|
||||||
margin:10px 0 |
|
||||||
} |
|
||||||
.raise :nth-child(1){ |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.productbox:hover .raise p:nth-child(1){ |
|
||||||
color:#0066EB |
|
||||||
} |
|
||||||
.productbox:hover{ |
|
||||||
transform: scale(1.01); |
|
||||||
box-shadow: 0px 2px 8px 0px #87898d; |
|
||||||
} |
|
||||||
@media screen and (max-width: 1500px){ |
|
||||||
.productbox{ |
|
||||||
width:1100px; |
|
||||||
padding:25px 20px 10px 18px!important |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue