dev/dcp-app-gate/pages/cooperationNetwork/components/unitIntroduction.vue

<template>
	<view class="unitIntroduction">
		<view class="unitImbBox">
			<view class="unitImg">
				<view class="hz-title">{{$t('common.TitleTop')}}</view>
				<view class="zj-title">{{$t('common.TitleBottom')}}</view>
			</view>
		</view>
		<view class="unit-explain">
			{{$t('common.CooperationUnitIntroduction')}}
		</view>
		<view class="unit-cooperation">
			<view class="unit-title">{{$t('common.AgreementMoUPartners')}}</view>
			<view class="unit-wrap">
				<u-row gutter="16">
					<u-col span="12" v-for="(item,index) in unitInitData" :key="index">
						<view class="unit-item" @click="toViewDetails(item)">
							<image v-if="memberUnits[item.unitId]" class="xin" src="../../../static/img/cooperationNetwork/xin.png" mode=""></image>
							<text>{{$i18n.locale === 'zh'?item.unitZhName : item.unitEnName}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailShow: false,
				params: {
					pageSize: '',
					language: '',
					unitZhName: '',
					unitEnName: ''
				},
				unitInitData: [],
				memberUnits: {},
			}
		},
		mounted() {
			this.get();
		},
		methods: {
			async get() {
				this.params.language = this.$i18n.locale.toUpperCase();
				const res = await this.$myRequest({
					url: '/project/baseCooperationUnits/',
					data: this.params
				});
				// console.log(res);
				if (res.data) {
					this.unitInitData = res.data.baseCooperationUnits;
					this.memberUnits = res.data.memberUnits;
				}
			},
			toViewDetails(data) {
				this.$emit('popup-event',data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unitIntroduction {
		.unitImbBox {
			padding: 20upx 30upx 0;
			background-color: #FFFFFF;
		}
		.unitImg {
			width: 100%;
			height: 340upx;
			background: url(../../../static/img/cooperationNetwork/unit.png) no-repeat;
			background-size: 100% 100%;
			color: #FFFFFF;
			text-align: center;
			padding-top: 100upx;
			.hz-title {
				font-size: 34upx;
				margin-bottom: 20upx;
			}
			.zj-title {
				font-size: 30upx;
			}
		}
		.unit-explain {
			padding: 20upx 30upx;
			background-color: #FFFFFF;
			font-size: 26upx;
			line-height: 46upx;
			color: #333333;
			text-indent: 2em;
		}
		.unit-cooperation {
			padding: 20upx 30upx;
			margin-top: 20upx;
			background-color: #FFFFFF;
			.unit-title {
				font-size: 30upx;
				color: #333333;
				margin-bottom: 20upx;
				font-weight: bold;
				position: relative;
				padding-left: 20upx;
			}
			.unit-title:before {
				width: 10upx;
				height: 32upx;
				content: '';
				position: absolute;
				left: 0;
				top: 6upx;
				background-color: #6DD400;
			}
			.unit-wrap {
				margin: -16upx -8upx 0;
				.unit-item {
					padding: 15upx 15upx 15upx 60upx;
					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
					font-size: 28upx;
					color: #333333;
					margin-top: 15upx;
					background-color: #FFFFFF;
					border-radius: 10upx;
					position: relative;
					.xin {
						width: 36upx;
						height: 30upx;
						position: absolute;
						left: 15upx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
</style>