null/pages/mang/shops.vue

<template>
	<view class="page">
		<view class="header-sec"></view>
		<view class="name-sec flex-col">
			<image src="/static/temp/pro.png" class="img" mode="aspectFill" />
			<view class="flex-row group_5">
				<view class="flex-row group_6">
					<text class="name clamp">幸福西饼万达店</text>
					<image src="/static/love.png" class="ic" mode="aspectFill" />
				</view>
				<text class="loc-txt">距您518m</text>
			</view>
			<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 3" :key="idx" /></view>
			<text class="group_5 text_4 clamp2">
				主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容
			</text>
			<view class="flex-row group_5 loc-wrap">
				<view class="flex-row group_7">
					<image src="/static/mangd-loc.png" class="image_7" mode="aspectFill" />
					<view class="group_8"><text class="text_5 clamp2">北京市朝阳街区朝阳社区朝阳小区朝阳路万达广场商场内负一楼B1008铺位</text></view>
				</view>
				<image src="/static/shop-dire.png" class="image_8" />
			</view>
		</view>
		<view class="pro-sec flex-col">
			<text class="title">盲盒</text>
			<view class="flex-col">
				<view class="flex-row items-start list-item" :key="i" v-for="(item, i) in 6">
					<image src="/static/temp/pro.png" class="image" mode="aspectFill" />
					<view class="flex-col group_10">
						<view class="flex-col items-start group_11 view_7">
							<text class="name clamp">幸福西饼Rice盲盒</text>
							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 3" :key="idx" /></view>
							<text class="text_10">随机搭配</text>
						</view>
						<view class="flex-row group_12">
							<view class="group_13">
								<text class="text_11">￥</text>
								<text class="text_12">18.8</text>
							</view>
							<text class="text_13">￥24~33</text>
						</view>
					</view>
					<view class="flex-col items-center btn-wrap"><text class="txt">立即下单</text></view>
				</view>
			</view>
		</view>
		<view class="tab-sec flex-col">
			<view class="flex-row tab-wrap">
				<text class="tab active">用户评价</text>
				<text class="tab">商家故事</text>
			</view>
		</view>
		<view class="eva-sec" v-if="false">
			<view class="e-top justify-between">
				<view class="flex-row">
					<view class="flex-row group_21">
						<text class="text_23">4.5分</text>
						<view class="flex-col items-start group_22">
							<text class="text_24">总评分</text>
							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 5" :key="idx" /></view>
						</view>
						<view class="section_8"></view>
					</view>
					<view class="flex-col items-center group_23">
						<text class="text_25">评价</text>
						<text class="text_26">70条</text>
					</view>
					<view class="section_8"></view>
					<view class="flex-col group_24">
						<text class="text_27">好评率</text>
						<text class="text_28">85%</text>
					</view>
				</view>
			</view>
			<view class="division-wrap"></view>
			<evaItem v-for="(item,idx) in 6" :key="idx" />
		</view>
		<view class="story-sec" v-else>
			<view class="s-top">
				<view class="line-wrap flex-row">
					<text class="key">
						商家名称：
					</text>
					<text class="val">幸福西饼</text>
				</view>
				<view class="line-wrap flex-row">
					<text class="key">
						商家地址：
					</text>
					<text class="val">万达广场商场内负一楼</text>
				</view>	
			</view>
			<view class="division-wrap"></view>
			<!-- 
			<view class="rich-wrap">
				<rich-text :nodes="richTxt" class="rich"></rich-text>
			</view>
			 -->
			<view class="promise-wrap">
				<view class="name">商家承诺:</view>
				<view class="content">
					本店所售盲盒保证品质完好，请放心购买！感谢您为粮食节约助力！一起实现零浪费、环保绿色的低碳生活。
				</view>
			</view>
		</view>
	    <safe-area />
	</view>
</template>

<script>
import evaItem from './components/eva-item.vue';
export default {
	components: {
		evaItem,
	},
	data() {
		return {
			richTxt:'<p>你知道吗，盲go good</p>', //	this.richTxt = this.$tools.replaceDetail(this.info.content || '');
		};
	}
};
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.header-sec {
	background-color: $base-color;
	height: 240rpx;
}
.name-sec {
	padding: 30rpx 14rpx 31.5rpx 30rpx;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
	border-radius: 20rpx;
	position: relative;
	width: 690rpx;
	margin: -196rpx auto 0;
	.img {
		width: 154rpx;
		height: 154rpx;
		position: absolute;
		left: 24rpx;
		top: 24rpx;
	}
	.group_5 {
		position: relative;
	}
	.loc-txt {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.group_6 {
		margin-right: 93rpx;
		margin-left: 172rpx;
		.name {
			color: #333333;
			font-size: 30rpx;
			font-family: PingFang;
			max-width: 300rpx;
			font-weight: bold;
		}
		.ic {
			margin-left: 18rpx;
			flex-shrink: 0;
			width: 31rpx;
			height: 27rpx;
		}
	}
	.stars {
		margin-top: 13rpx;
		margin-left: 172rpx;
		.starImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}
	.text_4 {
		margin-left: 172rpx;
		margin-top: 12rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 32rpx;
	}
	.loc-wrap {
		margin-top: 18rpx;
	}
	.group_7 {
		flex: 1 1 auto;
	}
	.image_7 {
		margin-top: 10.5rpx;
		flex-shrink: 0;
		width: 18rpx;
		height: 22rpx;
	}
	.group_8 {
		margin-left: 16rpx;
		flex: 1 1 auto;
		line-height: 37rpx;
		height: 74rpx;
	}
	.text_5 {
		color: #666666;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 37rpx;
	}
	.image_8 {
		margin-left: 40rpx;
		margin-right: 28rpx;
		align-self: center;
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
	}
}
.pro-sec {
	padding: 29rpx 20rpx 0;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
	border-radius: 20rpx;
	width: 690rpx;
	margin: 24rpx auto 0;
	.title {
		margin-left: 6rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: bold;
	}
	.list-item {
		padding: 29rpx 4rpx 25rpx;
		border-bottom: solid 1rpx #0000000f;
		position: relative;
		&:last-child {
			border: none;
		}
	}
	.image {
		flex-shrink: 0;
		width: 200rpx;
		height: 200rpx;
	}
	.group_10 {
		margin-left: 20rpx;
		flex: 1 1 auto;
	}
	.group_11 {
		flex: 1 1 auto;
	}
	.view_7 {
		flex: initial;
	}
	.name {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 400rpx;
		font-weight: bold;
	}
	.stars {
		margin-top: 11rpx;
		.starImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}
	.text_10 {
		margin-top: 21rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.group_12 {
		margin-top: 57rpx;
	}
	.group_13 {
		line-height: 28rpx;
		height: 29rpx;
	}
	.text_11 {
		color: #ff3e3e;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
	.text_12 {
		color: #ff3e3e;
		font-size: 36rpx;
		font-family: PingFang;
		line-height: 28rpx;
	}
	.text_13 {
		margin-left: 10rpx;
		margin-top: 9rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 20rpx;
		text-decoration: line-through;
	}
	.btn-wrap {
		padding: 18rpx 0 17rpx;
		flex-shrink: 0;
		background-color: #92b99c;
		border-radius: 32rpx;
		width: 168rpx;
		height: 64rpx;
		position: absolute;
		bottom: 26rpx;
		right: 10rpx;
		z-index: 2;
		.txt {
			color: #ffffff;
			font-size: 30rpx;
			font-family: PingFang;
			line-height: 29rpx;
		}
	}
}
.tab-sec {
	margin-top: 43rpx;
	padding: 0 54rpx;
	.tab-wrap {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}
	.tab {
		margin-right: 65rpx;
		color: #999999;
		font-size: 34rpx;
		font-family: PingFang;
		position: relative;
		&.active {
			color: #333333;
			font-weight: bold;
			&::after {
				content: '';
				background-color: #92b99c;
				width: 41rpx;
				height: 4rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -18rpx;
			}
		}
	}
}
.division-wrap {
		width: 750rpx;
		height: 17rpx;
		background: #000000;
		opacity: 0.06;
	}
.eva-sec {
	.e-top {
		padding: 17rpx 3rpx 19rpx;
		.group_21 {
			margin: 5rpx 0 8rpx;
			padding: 0 30rpx;
		}
		.text_23 {
			align-self: center;
			color: #ff3e3e;
			font-size: 36rpx;
			font-family: PingFang;
			margin-right: 10rpx;
		}
		.group_22 {
			flex-shrink: 0;
		}
		.text_24 {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.stars {
			margin-top: 6rpx;
			.starImg {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.section_8 {
			background-color: #0000000f;
			width: 1rpx;
			height: 70rpx;
		}
		.group_23 {
			margin: 4rpx 0 8rpx;
		}
		.text_25 {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_26 {
		 margin-top: 13rpx;
			color: #333333;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.group_24 {
			margin: 4rpx 30rpx 10rpx 0;
			width: 98rpx;
		}
		.text_27 {
			align-self: flex-start;
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_28 {
			margin-top: 15rpx;
			align-self: center;
			color: #333333;
			font-size: 24rpx;
			font-family: PingFang;
		}
	}
}
.story-sec{
	padding-top: 30rpx;
	.s-top{
		padding-bottom: 30rpx;
	}
	.line-wrap{
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.key{
			margin-right: 38rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
		}
		.val{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			max-width: 500rpx;
		}
	}
    .rich-wrap{
    	background-color: #fff;
    	.rich {
    		line-height: normal;
    	}
    }
	.promise-wrap{
		padding: 40rpx 30rpx 30rpx;
		.name{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.content{
			width: 696rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 42rpx;
			margin: 30rpx auto 0;
		}
	}
}
</style>