parent
ee75909171
commit
812f83bde9
@ -1,308 +1,418 @@ |
||||
<template> |
||||
<div> |
||||
<img v-if="officialwebsite" style="width:100%;height:450px; object-fit: cover;" src="/assets/home/2@2x.png" alt=""> |
||||
<div :class="officialwebsite?'tytool':'notytool'"> |
||||
<div style="display:flex"> |
||||
<div class="typetext">工具类型</div> |
||||
<el-tabs v-if="tooltypelist.length>0" v-model="toolType" @tab-click="showDataTypeChage"> |
||||
<!-- 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> |
||||
</el-tabs> |
||||
</div> |
||||
<el-divider></el-divider> |
||||
<div style="display:flex"> |
||||
<div class="typetext">交付方式</div> |
||||
<el-tabs v-if="paytypelist.length>0" v-model="deliverType" @tab-click="payTypeChage"> |
||||
<el-tab-pane label="全部" name="''"></el-tab-pane> |
||||
<el-tab-pane v-for="(item,key) of paytypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"> </el-tab-pane> |
||||
</el-tabs> |
||||
<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="" |
||||
/> |
||||
|
||||
<div class="topnavbar"> |
||||
<div class="topnavbarcon"> |
||||
<div class="topnavbarconit"> |
||||
<div class="topnavbarconitL">工具类型：</div> |
||||
<div class="topnavbarconitR"> |
||||
<div |
||||
class="topnavbarconitRit" |
||||
:class="{ topnavbarconitRitActive: !typeName }" |
||||
@click="toolTypeClick('')" |
||||
> |
||||
全部 |
||||
</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 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 :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> |
||||
<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"> |
||||
<span style="color:#E93A3A;">￥ {{tool.price}} </span> |
||||
<span style="color: #e93a3a">￥ {{ tool.price }} </span> |
||||
<span>/月</span> |
||||
</p> |
||||
</div> |
||||
<el-divider></el-divider> |
||||
<p :title="tool.toolDesc" |
||||
style="font-size:14px;margin-bottom:5px;line-height:1.8">{{tool.toolDesc | ellipsis}}</p> |
||||
<div class="cetype"> |
||||
<p>工具类型：{{tool.toolTypeName}} </p> |
||||
<p>交付方式：{{tool.deliverType}}</p> |
||||
<p>上架时间： {{tool.onlineTime}}</p> |
||||
<p>服务商：{{tool.providerName}}</p> |
||||
<p :title="tool.toolDesc" style="font-size: 14px; margin-bottom: 5px; line-height: 1.8"> |
||||
{{ tool.toolDesc | ellipsis }} |
||||
</p> |
||||
<div class="cetype"> |
||||
<p>工具类型：{{ tool.toolTypeName }}</p> |
||||
<p>交付方式：{{ tool.deliverType }}</p> |
||||
<p>上架时间： {{ tool.onlineTime }}</p> |
||||
<p>服务商：{{ tool.providerName }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div v-else> |
||||
<el-empty ></el-empty> |
||||
<div v-else> |
||||
<el-empty></el-empty> |
||||
</div> |
||||
<div v-if="officialwebsite && total>10" style='width:100%;margin-top:30px;text-align: center;'> |
||||
<el-pagination background |
||||
<div v-if="officialwebsite && total > 10" style="width: 100%; margin-top: 30px; text-align: center"> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="currentPage" |
||||
:page-sizes="[10, 20, 30]" |
||||
:page-size="pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="total"> |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
<!-- :page-sizes="[3, 6, 30]" sizes,--> |
||||
<div v-if="!officialwebsite && total>3" style='width:100%;margin-top:30px;text-align: center;'> |
||||
<el-pagination background |
||||
<div v-if="!officialwebsite && total > 3" style="width: 100%; margin-top: 30px; text-align: center"> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="currentPage" |
||||
:current-page="currentPage" |
||||
:page-size="pageSize" |
||||
layout="total, prev, pager, next, jumper" |
||||
:total="total"> |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import {mapGetters} from "vuex"; |
||||
import {listTools} from "@/api/toolInfo/market"; |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
loading:true, |
||||
toolType:null,//工具类型 |
||||
deliverType:null,//支付方式 |
||||
toolslist:[],//工具数组 |
||||
currentPage:1, |
||||
total:'', |
||||
pageNum:1, |
||||
pageSize:20, |
||||
officialwebsite:true,//是否官网 |
||||
import { mapGetters } from 'vuex' |
||||
import { listTools } from '@/api/toolInfo/market' |
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: true, |
||||
toolType: '', //工具类型 |
||||
deliverType: '', //支付方式 |
||||
toolslist: [], //工具数组 |
||||
currentPage: 1, |
||||
total: '', |
||||
pageNum: 1, |
||||
pageSize: 20, |
||||
officialwebsite: true, //是否官网 |
||||
|
||||
imageList: ['EagleEye.png', 'wukong.png', 'EagleWing-C.png', 'Kinterface.png', 'EagleWing-Java.png', 'AutoFun.png' |
||||
, 'KeySwan.png', 'KeySphere.png', '自鉴交互式.png', 'web.png', '资产识别.png', 'AutoLoad.png'], |
||||
imageList: [ |
||||
'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', |
||||
img1: '/assets/toolmarket/wukong.png', |
||||
img2: '/assets/toolmarket/EagleWing-C.png', |
||||
img3: '/assets/toolmarket/Kinterface.png', |
||||
img4: '/assets/toolmarket/EagleWing-Java.png', |
||||
img5: '/assets/toolmarket/AutoFun.png', |
||||
img6: '/assets/toolmarket/KeySwan.png', |
||||
img7: '/assets/toolmarket/KeySphere.png', |
||||
img8: '/assets/toolmarket/自鉴交互式.png', |
||||
img9: '/assets/toolmarket/web.png', |
||||
img10: '/assets/toolmarket/资产识别.png', |
||||
img11: '/assets/toolmarket/AutoLoad.png', |
||||
img0: 'EagleEye.png', |
||||
img1: '/assets/toolmarket/wukong.png', |
||||
img2: '/assets/toolmarket/EagleWing-C.png', |
||||
img3: '/assets/toolmarket/Kinterface.png', |
||||
img4: '/assets/toolmarket/EagleWing-Java.png', |
||||
img5: '/assets/toolmarket/AutoFun.png', |
||||
img6: '/assets/toolmarket/KeySwan.png', |
||||
img7: '/assets/toolmarket/KeySphere.png', |
||||
img8: '/assets/toolmarket/自鉴交互式.png', |
||||
img9: '/assets/toolmarket/web.png', |
||||
img10: '/assets/toolmarket/资产识别.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: { |
||||
ellipsis(value) { |
||||
if (!value) return '' |
||||
if (value.length > 100) { |
||||
return value.slice(0, 100) + '...' |
||||
} |
||||
return value |
||||
} |
||||
payTypeClick(val) { |
||||
this.deliverType = val |
||||
this.getList() |
||||
}, |
||||
mounted(){ |
||||
// console.log('路由',this.$route.path); |
||||
let currentrout=this.$route.path; |
||||
if(currentrout!=='/market'){ |
||||
this.officialwebsite=false; |
||||
this.pageSize=3 |
||||
/** 查询列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
// console.log('toolType----'.this.toolType) |
||||
let data = { |
||||
toolType: this.toolType, |
||||
deliverType: this.deliverType, |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pageSize, |
||||
status: 1, |
||||
} |
||||
// console.log('toolType----',this.tooltypelist,this.deliverType) |
||||
this.getList() |
||||
}, |
||||
methods:{ |
||||
/** 查询列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
// console.log('toolType----'.this.toolType) |
||||
let data={ |
||||
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 => { |
||||
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) |
||||
this.toolslist = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}).catch(err=>{ |
||||
console.log('异常',err) |
||||
this.toolslist = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
//工具方式 |
||||
showDataTypeChage(){ |
||||
// console.log('工具',this.toolType,this.deliverType) |
||||
this.getList() |
||||
}, |
||||
//支付方式 |
||||
payTypeChage(){ |
||||
// console.log('支付',this.toolType,this.deliverType) |
||||
this.getList() |
||||
}, |
||||
//工具详情 |
||||
toolsinform(id){ |
||||
// this.$message({ |
||||
// message: '即将上线，敬请期待', |
||||
// type: 'info', |
||||
// duration: 1000, |
||||
// }) |
||||
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(); |
||||
.catch((err) => { |
||||
console.log('异常', err) |
||||
}) |
||||
}, |
||||
//工具方式 |
||||
showDataTypeChage() { |
||||
// console.log('工具',this.toolType,this.deliverType) |
||||
this.getList() |
||||
}, |
||||
//支付方式 |
||||
payTypeChage() { |
||||
// console.log('支付',this.toolType,this.deliverType) |
||||
this.getList() |
||||
}, |
||||
//工具详情 |
||||
toolsinform(id) { |
||||
// this.$message({ |
||||
// message: '即将上线，敬请期待', |
||||
// type: 'info', |
||||
// duration: 1000, |
||||
// }) |
||||
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() |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
.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; |
||||
.topnavbar { |
||||
width: 100%; |
||||
padding: 10px 0; |
||||
background: #fff; |
||||
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; */ |
||||
/* 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> |
||||
Loading…
Reference in new issue