<template>
|
<div class="box">
|
<div class="box_head">
|
<div class="box_head_title">服务商资源</div>
|
<div class="box_head_info">有需求、找资源、寻合作，平台致力于为供、需双方提供一个流畅、专业的需求对接交互平台</div>
|
<div class="box_head_search">
|
<div class="left">
|
<div class="box_head_search_input">
|
<input type="text" v-model="name" placeholder="输入服务商名称搜索">
|
<img src="../../assets/images/ic_clear@2x.png" v-if="name" @click="clearText" />
|
</div>
|
<div class="box_head_search_btn">查询</div>
|
</div>
|
<div class="right">
|
<img src="../../assets/images/ic_fuwushang@2x.png" alt="" />
|
<span class="right_name">服务商总数：</span>
|
<span class="right_num">220</span>
|
</div>
|
</div>
|
</div>
|
<div class="box_cate">
|
<div class="cate">
|
<div class="cate_label">行业分类：</div>
|
<div class="cate_val">
|
<div :class="index === 0 ? 'cate_val_row active' : 'cate_val_row'" v-for="(item, index) in cateList" :key="index">{{item}}</div>
|
</div>
|
<div class="cate_dwon">
|
<span>展开</span>
|
<i class="el-icon-arrow-down"></i>
|
</div>
|
</div>
|
<div class="list">
|
<div class="list_item" v-for="(item, index) in 6" :key="index" @click="$refs.operaDetailsAWindow.open('服务商详情')">
|
<div class="list_item_image">
|
<img src="../../assets/images/zhuce_ic_qiye@2x.png" alt="" />
|
</div>
|
<div class="list_item_title">安徽豆米科技有限公司</div>
|
<div class="list_item_info">安徽豆米科技有限公司以软件开发、人工智能应用开发为核心...</div>
|
<div class="list_item_divide">
|
<el-rate
|
v-model="value"
|
disabled
|
text-color="#ff9900">
|
</el-rate>
|
</div>
|
</div>
|
<div class="list_zw"></div>
|
<div class="list_zw"></div>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, prev, pager, next, jumper"
|
:total="50">
|
</el-pagination>
|
<div class="pagination_info">Copyright © 2022 - 2023 智能制造诊断综合服务平台. All Rights Reserved. 版权所有</div>
|
</div>
|
</div>
|
<!-- 详情 -->
|
<OperaDetailsAWindow ref="operaDetailsAWindow" @success="" />
|
</div>
|
</template>
|
|
<script>
|
import OperaDetailsAWindow from '@/components/business/OperaDetailsAWindow'
|
export default {
|
name: 'serviceProviderResources',
|
components: { OperaDetailsAWindow },
|
data() {
|
return {
|
name: '',
|
value: 5,
|
cateList: ['全部','新材料','其他','新型平板显示','生物医药','食品加工','冶金','汽车工业','轻工纺织','装备制造','化工','电子产品及软件','生产性服务业','节能环保','家具制造行业']
|
}
|
},
|
methods: {
|
handleCurrentChange(e) {
|
console.log(e)
|
},
|
currentPage(e) {
|
console.log(e)
|
},
|
clearText() {
|
this.name = ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_head {
|
width: 100%;
|
height: 264px;
|
padding: 36px 50px;
|
box-sizing: border-box;
|
background-image: url("../../assets/images/bg_fuwushang.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
.box_head_title {
|
font-weight: 600;
|
font-size: 40px;
|
color: #216EEE;
|
}
|
.box_head_info {
|
font-weight: 400;
|
font-size: 16px;
|
color: #333333;
|
margin-top: 14px;
|
}
|
.box_head_search {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 36px;
|
.left {
|
display: flex;
|
align-items: center;
|
.box_head_search_input {
|
width: 360px;
|
height: 48px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
background: rgba(255,255,255,0.72);
|
border-radius: 2px;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
img {
|
width: 20px;
|
height: 20px;
|
flex-shrink: 0;
|
cursor: pointer;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
margin-right: 15px;
|
font-weight: 400;
|
font-size: 14px;
|
color: #222222;
|
border: none;
|
outline: none;
|
background: rgba(0,0,0,0);
|
&::-webkit-input-placeholder {
|
color: #999999;
|
font-size: 14px;
|
font-weight: 400;
|
}
|
}
|
}
|
.box_head_search_btn {
|
width: 68px;
|
height: 48px;
|
line-height: 48px;
|
text-align: center;
|
background: #216EEE;
|
border-radius: 2px;
|
font-weight: 600;
|
font-size: 15px;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
}
|
.right {
|
width: 173px;
|
height: 48px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 2px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
img {
|
width: 16px;
|
height: 16px;
|
}
|
.right_name {
|
font-weight: 400;
|
font-size: 15px;
|
color: #333333;
|
}
|
.right_num {
|
font-weight: 600;
|
font-size: 17px;
|
color: #216EEE;
|
}
|
}
|
}
|
}
|
.box_cate {
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
position: relative;
|
top: -30px;
|
left: 0;
|
z-index: 9;
|
.list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.list_zw {
|
width: 24%;
|
height: 0;
|
}
|
.list_item {
|
width: 24%;
|
height: 208px;
|
padding: 20px 30px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFFFF;
|
border-radius: 8px;
|
margin-bottom: 1%;
|
.list_item_image {
|
width: 70px;
|
height: 70px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.list_item_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
}
|
.list_item_info {
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-weight: 400;
|
font-size: 12px;
|
color: #999999;
|
}
|
}
|
}
|
.cate {
|
width: 100%;
|
padding: 20px 30px;
|
margin-bottom: 20px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
justify-content: space-between;
|
.cate_label {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 14px;
|
color: #666666;
|
}
|
.cate_val {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.active {
|
background: #216EEE !important;
|
border-radius: 2px !important;
|
color: #FFFFFF !important;
|
}
|
.cate_val_row {
|
padding: 4px 12px;
|
box-sizing: border-box;
|
font-weight: 400;
|
font-size: 14px;
|
color: #666666;
|
margin-right: 18px;
|
cursor: pointer;
|
}
|
}
|
.cate_dwon {
|
display: flex;
|
flex-shrink: 0;
|
cursor: pointer;
|
span {
|
font-weight: 400;
|
font-size: 12px;
|
color: #216EEE;
|
}
|
.el-icon-arrow-down {
|
color: #216EEE;
|
}
|
}
|
}
|
.pagination {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
margin-top: 20px;
|
.pagination_info {
|
width: 100%;
|
text-align: center;
|
font-weight: 400;
|
font-size: 12px;
|
color: #828D9E;
|
margin-top: 30px;
|
}
|
}
|
}
|
}
|
</style>
|
