caimei-applets-caimei/components/module/productDetails/supplierDetails.vue

<template name="supplier">
	<!-- 供应商信息 -->
	<view class="supplier clearfix">
		<view class="sup-header">
			<view class="header-img">
				<image :src="shop.logo" mode=""></image>
			</view>
			<view class="header-txt">
				<text>{{shop.name}}</text>
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">基本信息</text>
			</view>
			<view class="sup-title">
				<text class="tit-l">公司名称:</text>
				<text >{{shop.name}}</text>
			</view>
			<view class="sup-conte">
				<view class="conte-l">
					<text class="tit-l">经营品项:</text>
				</view>
				<view class="conte-r" v-if="shop.businessScopeArray.length>0">
					<text class="age" v-for="(item,idx) in shop.businessScopeArray" :key="idx">{{item}}</text>
				</view>
				<view class="conte-r" v-else>
					<text class="tit">暂无</text>
				</view>
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">公司介绍</text>
			</view>
			<view class="sup-p" :class="[shop.info == null ? 'center' : '']">
				{{shop.info == null ? '暂无内容' : shop.info}}
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">主打系列产品介绍</text>
			</view>
			<view class="sup-p" :class="[shop.productDesc == null ? 'center' : '']">
				{{shop.productDesc == null ? '暂无内容' : shop.productDesc}}
			</view>
		</view>
		<view class="sup-msg massage-t" v-if="shop.businessLicenseImage!=null">
			<view class="sup-h1">
				<text class="line">营业执照</text>
			</view>
			<view class="sup-img">
				<image :src="shop.businessLicenseImage" mode=""></image>
			</view>
		</view>
		<view class="sup-msg massage-t" v-if="shop.medicalPracticeLicenseImg1!=null">
			<view class="sup-h1">
				<text class="line">公司资质</text>
			</view>
			<view class="sup-imgList clearfix">
				<view class="img"><image :src="shop.medicalPracticeLicenseImg1" mode=""></image></view>
				<view class="img"><image :src="shop.medicalPracticeLicenseImg2" mode=""></image></view>
				<view class="img"><image :src="shop.medicalPracticeLicenseImg3" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'supplier',
		props:['shop'],
		data() {
			return{
				
			}
		},
		created() {

		},
		onLoad(){

		},
		methods:{
			
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">	
.supplier{
	background: #F7F7F7;
	width: 100%;
	.sup-msg{
		width: 100%;
		padding: 24rpx 0;				
		.sup-h1{
			height: 42rpx;
			line-height: 42rpx;
			font-size: $font-size-30;
			color: $text-color;
			text-align: center;
			font-weight: bold;
			.line{
				position: relative;
				&:after{
					content: '';
					width: 96rpx;
					height: 2rpx;
					background: #EAEAEA;
					position: absolute;
					left: -130rpx;
					top: 50%;
				}						
				&:before{
					content: '';
					width: 96rpx;
					height: 2rpx;
					background: #EAEAEA;
					position: absolute;
					right: -130rpx;
					top: 50%;
				}
			}
		}
	}
	.sup-header{
		height: 158rpx;
		width: 702rpx;
		padding: 28rpx 24rpx 24rpx 24rpx;
		display: flex;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		.header-img{
			width: 216rpx;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.header-txt{
			width:460rpx;
			text{
				display: inline-block;
				padding-top: 82rpx;
				height: 80rpx;
				margin-left: 26rpx;
				line-height: 40rpx;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-align: left;
				font-size: $font-size-30;
				color: $text-color;
				font-weight: bold;
			}
		}
	}
	.massage-t{
		width: 702rpx;
		padding:24rpx;
		height: auto;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		.sup-title{
			width: 100%;
			height: 40rpx;
			margin-top: 24rpx;
			text-align: left;
			display: inline-block;						
			line-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			.tit-l{
				width: 142rpx;
				margin-right:20rpx;
				display: inline-block;
			}
		}
		.sup-conte{
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			.conte-l{
				width: 142rpx;
				margin-right:20rpx;
				.tit-l{
					text-align: left;
					display: inline-block;						
					line-height: 40rpx;
					font-size: $font-size-28;
					color: $text-color;
				}
			}
			.conte-r{
				width: 540rpx;
				.age{
					display: inline-block;
					padding: 0 20rpx;
					background: #F8C499;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: $font-size-24;
					color: $text-color;
					border-radius: 20rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}
				.tit{
					font-size: $font-size-28;
					color: $text-color;
					line-height: 40rpx;
				}
			}
		}
		.sup-p{
			padding: 24rpx 0;
			line-height: 40rpx;
			text-align: left;
			font-size: $font-size-24;
			color: $text-color;
			text-indent: 20rpx;
			&.center{
				text-align: center;
			}
		}
		.sup-img{
			width: 100%;
			height: 542rpx;
			padding: 24rpx 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.sup-imgList{
			width: 100%;
			height: auto;
			padding: 24rpx 0;
			.img{
				width: 340rpx;
				height: 260rpx;
				float: left;
				margin-right:22rpx;
				margin-bottom: 22rpx;
				&:nth-child(even){
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>