productDev/intelligent_manufacture_wuhu.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,307 @@
			<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>