<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="applicationInfo" placeholder="输入应用名称/服务商名称搜索">
|
<img src="../../assets/images/ic_clear@2x.png" v-if="applicationInfo" @click="clearText" />
|
</div>
|
<div class="box_head_search_btn" @click="search">查询</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_cate">
|
<div class="list" v-if="list.length > 0">
|
<div class="list_item" v-for="(item, index) in list" :key="index">
|
<div class="list_item_image">
|
<img :src="item.fullLog" alt="" />
|
</div>
|
<div class="list_item_title">{{item.name}}</div>
|
<div class="list_item_cate" v-if="item.lables">
|
<div class="list_item_cate_row" v-for="(child, i) in item.lablesList" :key="i">{{child}}</div>
|
</div>
|
<div class="list_item_company">服务商：{{item.serverName}}</div>
|
<div class="list_item_info">{{item.introduction}}</div>
|
<div class="list_item_btn" @click="$refs.operaDetailsBWindow.open('应用详情', item.id)">查看详情</div>
|
</div>
|
<div class="list_zw"></div>
|
<div class="list_zw"></div>
|
</div>
|
<div class="list" v-else>
|
<div class="list_wu">无数据</div>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
v-if="list.length > 0"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[12, 24, 36, 48]"
|
:page-size="12"
|
layout="total, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
<div class="pagination_info">Copyright © 2022 - 2023 智能制造诊断综合服务平台. All Rights Reserved. 版权所有</div>
|
</div>
|
</div>
|
<!-- 详情 -->
|
<OperaDetailsBWindow ref="operaDetailsBWindow" @success="" />
|
</div>
|
</template>
|
|
<script>
|
import OperaDetailsBWindow from '@/components/business/OperaDetailsBWindow'
|
import { fetchList } from '@/api/business/applicationInfo'
|
export default {
|
name: 'serviceProviderResources',
|
components: { OperaDetailsBWindow },
|
data() {
|
return {
|
applicationInfo: '',
|
value: 3,
|
page: 1,
|
total: 0,
|
list: []
|
}
|
},
|
created () {
|
this.getList()
|
},
|
methods: {
|
search() {
|
this.page = 1
|
this.getList()
|
},
|
handleCurrentChange(e) {
|
this.page = e
|
this.getList()
|
},
|
clearText() {
|
this.applicationInfo = ''
|
},
|
getList() {
|
fetchList({
|
capacity: 12,
|
page: this.page,
|
model: {
|
applicationInfo: this.applicationInfo,
|
status: 0
|
}
|
}).then(res => {
|
res.records.forEach((item) => {
|
item.lablesList = item.lables.split(',') || []
|
})
|
this.list = res.records
|
this.total = res.total
|
})
|
}
|
}
|
}
|
</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_yingyong.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
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;
|
}
|
}
|
}
|
}
|
.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_wu {
|
width: 100%;
|
text-align: center;
|
margin: 50px 0;
|
font-size: 14px;
|
color: #666666;
|
}
|
.list_zw {
|
width: 24%;
|
height: 0;
|
}
|
.list_item {
|
width: 24%;
|
height: 317px;
|
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_btn {
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
width: 96px;
|
height: 36px;
|
line-height: 36px;
|
text-align: center;
|
background: #216EEE;
|
border-radius: 2px;
|
cursor: pointer;
|
}
|
.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_cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.list_item_cate_row {
|
padding: 5px 8px;
|
box-sizing: border-box;
|
background: rgba(33,110,238,0.1);
|
border-radius: 2px;
|
font-weight: 400;
|
font-size: 12px;
|
color: #216EEE;
|
margin-right: 10px;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
.list_item_company {
|
width: 100%;
|
text-align: center;
|
font-weight: 400;
|
font-size: 12px;
|
color: #666666;
|
}
|
.list_item_info {
|
width: 100%;
|
text-align: center;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2; /* 限制文本为2行 */
|
overflow: hidden;
|
font-weight: 400;
|
font-size: 12px;
|
color: #999999;
|
}
|
}
|
}
|
.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>
|
