hcj
/
keysass_portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

众包任务工具服务tab优化

Browse Source
main
lijingyu007 11 months ago
parent ee75909171
commit 812f83bde9
4 changed files with 525 additions and 344 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 6
      src/page/common/checkbox.vue
  3. 195
      src/page/homepage/crowdsourcing/crowd.vue
  4. 284
      src/page/homepage/tool/toolmarker.vue

2
.env.development
Unescape View File

@ -5,7 +5,7 @@ ENV = 'development'
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_TARGET = 'http://192.168.0.229:9999' VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999'
# VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999' # VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999'
# VUE_APP_BASE_TARGET = 'http://172.16.36.180:9999' # VUE_APP_BASE_TARGET = 'http://172.16.36.180:9999'
# VUE_APP_BASE_TARGET = 'http://172.16.36.176:9998' # VUE_APP_BASE_TARGET = 'http://172.16.36.176:9998'

6
src/page/common/checkbox.vue
Unescape View File

@ -82,24 +82,22 @@ export default {
display: none; display: none;
} }
.checkbox >>> .el-checkbox { .checkbox >>> .el-checkbox {
width: 110px; padding: 8px 10px !important;
height: 34px !important; height: 34px !important;
background: #ffffff; background: #ffffff;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
margin-right: 20px; margin-right: 20px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0px !important; margin-left: 0px !important;
line-height: 34px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
.checkbox >>> .is-checked { .checkbox >>> .is-checked {
background: #ecf3fd; background: #ecf3fd;
border: none; border: 1px solid #ecf3fd !important;
} }
.checkbox >>> .el-checkbox.is-bordered.el-checkbox--medium { .checkbox >>> .el-checkbox.is-bordered.el-checkbox--medium {
border-radius: 2px; border-radius: 2px;
padding: 0;
} }
.checkbox >>> .el-checkbox__label { .checkbox >>> .el-checkbox__label {
padding: unset; padding: unset;

195
src/page/homepage/crowdsourcing/crowd.vue
Unescape View File

@ -10,73 +10,84 @@
src="/assets/home/zhbao1.png" src="/assets/home/zhbao1.png"
alt="" alt=""
/> />
<div class="topnavbar"> <div class="topnavbar">
<div class="topnavbarcon" style="display: flex; justify-content: space-between; align-items: end"> <div class="topnavbarcon">
<div style="width: 100%"> <div class="topnavbarconit">
<div style="display: flex; padding-top: 7px"> <div class="topnavbarconitL">任务类型：</div>
<div class="typetext">任务类型:</div> <div class="topnavbarconitR">
<el-tabs v-model="typeName" @tab-click="showDataTypeChage"> <div
<el-tab-pane label="全部" name="q"></el-tab-pane> class="topnavbarconitRit"
<el-tab-pane :class="{ topnavbarconitRitActive: typeName == 'q' }"
@click="taskClick('q')"
>
全部
</div>
<div
class="topnavbarconitRit"
:class="{ topnavbarconitRitActive: typeName == item.dictValue }"
v-for="(item, key) of tasktypelist" v-for="(item, key) of tasktypelist"
:key="key" :key="key"
:label="item.dictLabel" @click="taskClick(item.dictValue)"
:name="item.dictValue"
> >
</el-tab-pane> {{ item.dictLabel }}
</el-tabs>
</div> </div>
<el-divider></el-divider> </div>
<div style="display: flex; padding-top: 7px"> </div>
<div class="typetext">金额范围:</div> <div class="topnavbarconit">
<el-tabs v-model="amountrange" @tab-click="showDataTypeChage"> <div class="topnavbarconitL">金额范围：</div>
<el-tab-pane label="全部" name="q"></el-tab-pane> <div class="topnavbarconitR">
<el-tab-pane <div
class="topnavbarconitRit"
:class="{ topnavbarconitRitActive: amountrange == 'q' }"
@click="amoutClick('q')"
>
全部
</div>
<div
class="topnavbarconitRit"
:class="{ topnavbarconitRitActive: amountrange == item.id }"
v-for="(item, key) of paytypelist" v-for="(item, key) of paytypelist"
:key="key" :key="key"
:label="item.name" @click="amoutClick(item.id)"
:name="item.id"
> >
</el-tab-pane> {{ item.name }}
</el-tabs>
</div> </div>
<el-divider></el-divider> </div>
<div style="display: flex; padding-top: 7px"> </div>
<div class="typetext">项目周期:</div> <div class="topnavbarconit">
<el-tabs v-model="period" @tab-click="showDataTypeChage"> <div class="topnavbarconitL">项目周期：</div>
<el-tab-pane label="全部" name="q"></el-tab-pane> <div class="topnavbarconitR">
<el-tab-pane <div
class="topnavbarconitRit"
:class="{ topnavbarconitRitActive: period == 'q' }"
@click="periodClick('q')"
>
全部
</div>
<div
class="topnavbarconitRit"
v-for="(item, key) of periodlist" v-for="(item, key) of periodlist"
:key="key" :key="key"
:label="item.name" :class="{ topnavbarconitRitActive: period == item.id }"
:name="item.id" @click="periodClick(item.id)"
> >
</el-tab-pane> {{ item.name }}
</el-tabs>
</div>
<!-- <div v-if="userinform.companyStatus == 2"> -->
<!-- <el-divider></el-divider> -->
<!-- <div class="release" v-if="userinform.companyStatus == 2" @click="publish">我要发布任务</div> -->
<!-- </div> -->
<!-- <div v-else class="piliccomp"> -->
<el-divider></el-divider>
<!-- </div> -->
<div style="display: flex; padding-top: 7px">
<div class="typetext">驻场需求:</div>
<el-tabs v-model="onsiteType" @tab-click="showDataTypeChage">
<el-tab-pane label="全部" name="q"></el-tab-pane>
<el-tab-pane
v-for="(item, key) of residentlist"
:key="key"
:label="item.name"
:name="item.id"
></el-tab-pane>
</el-tabs>
</div> </div>
<el-divider></el-divider> </div>
<div style="display: flex; padding-top: 7px"> </div>
<div class="typetext">地域要求:</div> <div class="topnavbarconit">
<el-tabs style="margin-top: -15px" v-model="diyuChose" @tab-click="showDataTypeChage"> <div class="topnavbarconitL">驻场要求：</div>
<div class="topnavbarconitR">
<div class="topnavbarconitRit topnavbarconitRitActive">全部</div>
<div class="topnavbarconitRit" v-for="(item, key) of residentlist" :key="key">
{{ item.name }}
</div>
</div>
</div>
<div class="topnavbarconit topnavbarconitno">
<div class="topnavbarconitL">地域要求：</div>
<div class="topnavbarconitR">
<v-distpicker <v-distpicker
@province="onChangeProvince" @province="onChangeProvince"
@city="onChangeCity" @city="onChangeCity"
@ -85,17 +96,18 @@
:city="city" :city="city"
hide-area hide-area
></v-distpicker> ></v-distpicker>
</el-tabs>
</div> </div>
</div> </div>
<!-- <div>
</div> -->
</div> </div>
</div> </div>
<div class="decsbtn"> <div class="decsbtn">
<div class="descbtnitem" style="margin-right: 13px" @click="fabuTimeEsc">发布时间<img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div> <div class="descbtnitem" style="margin-right: 13px" @click="fabuTimeEsc">
<div class="descbtnitem" @click="proMoneyEsc">项目金额 <img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div> 发布时间<img src="/assets/home/esc.png" style="width: 12px; height: 12px; margin-left: 5px" alt="" />
</div>
<div class="descbtnitem" @click="proMoneyEsc">
项目金额 <img src="/assets/home/esc.png" style="width: 12px; height: 12px; margin-left: 5px" alt="" />
</div>
</div> </div>
<div :class="officialwebsite ? 'tytool' : 'notytool'"> <div :class="officialwebsite ? 'tytool' : 'notytool'">
<div v-if="listcrowd.length > 0" v-loading="loading" style="width: 100%"> <div v-if="listcrowd.length > 0" v-loading="loading" style="width: 100%">
@ -320,6 +332,22 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
taskClick(q) {
this.typeName = q
this.getList()
},
amoutClick(q) {
this.amountrange = q
this.getList()
},
periodClick(q) {
this.period = q
this.getList()
},
onsiteTypeClick(q) {
this.onsiteType = q
this.getList()
},
// 发布时间和项目金额排序 // 发布时间和项目金额排序
fabuTimeEsc() { fabuTimeEsc() {
this.priceOrder = null this.priceOrder = null
@ -369,7 +397,6 @@ export default {
findByvalue, findByvalue,
findLabelValueByProp, findLabelValueByProp,
/** 查询列表 */ /** 查询列表 */
getList() { getList() {
this.loading = true this.loading = true
@ -494,6 +521,50 @@ export default {
width: 1200px; width: 1200px;
margin: auto; 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;
}
.ijaiorenwu { .ijaiorenwu {
position: fixed; position: fixed;
right: 0; right: 0;
@ -587,6 +658,8 @@ export default {
margin-right: 30px; margin-right: 30px;
font-size: 17px; font-size: 17px;
/* width: 90px !important; */ /* width: 90px !important; */
width: 90px;
min-width: 90px;
} }
.productbox >>> .el-divider--horizontal { .productbox >>> .el-divider--horizontal {
margin: 0px; margin: 0px;

284
src/page/homepage/tool/toolmarker.vue
Unescape View File

@ -1,54 +1,84 @@
<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>
<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 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>
</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>{{ 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 }}
</p>
<div class="cetype"> <div class="cetype">
<p>工具类型：{{ tool.toolTypeName }}</p> <p>工具类型：{{ tool.toolTypeName }}</p>
<p>交付方式：{{ tool.deliverType }}</p> <p>交付方式：{{ tool.deliverType }}</p>
@ -57,45 +87,48 @@
</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: '',
@ -103,8 +136,20 @@
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,41 +175,53 @@
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=>{ })
.catch((err) => {
console.log('异常', err) console.log('异常', err)
}) })
}, },
@ -194,20 +251,74 @@
//分页 //分页
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>
.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 { .tytool {
width: 1200px; width: 1200px;
margin: 30px auto; margin: 30px auto;
@ -226,13 +337,13 @@
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;
@ -244,7 +355,7 @@
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;
@ -253,10 +364,10 @@
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;
@ -264,35 +375,35 @@
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);
@ -301,8 +412,7 @@
@media screen and (max-width: 1500px) { @media screen and (max-width: 1500px) {
.productbox { .productbox {
width: 1100px; width: 1100px;
padding:25px 20px 10px 18px!important padding: 25px 20px 10px 18px !important;
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save