null/pages/mang/detail.vue

<template>
	<view class="page">
		<view class="swiper-sec">
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item, idx) in 3" :key="idx" class="swiper-item">
					<view class="img-wrap"><image src="/static/temp/pro.png" mode="aspectFill" class="img"></image></view>
				</swiper-item>
			</swiper>
			<view class="ic-wrap align-center justify-center"><image src="/static/love-full.png" mode="aspectFill" class="ic"></image></view>
		</view>
		<view class="header-sec">
			<view class="flex-col name-wrap">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_2 clamp">幸福西饼Rice盲盒</text>
						<view class="text-wrapper text_3 clamp">仅剩3份</view>
					</view>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_9"
					/>
				</view>
				<view class="align-center group_10">
					<view class="stars align-center">
						 <image
						  src="/static/mang_star.png"
						  class="image_10"
						  v-for="(item,idx) in 3"
						  :key="idx"
						/>	
					</view>
					<text class="text_4">随机搭配</text>
				</view>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-row time-wrap">
				<text class="text_5">自提时间</text>
				<text class="text_6">今天15:00~22:00</text>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-col loc-wrap">
				<view class="flex-row justify-between items-start">
					<view class="flex-row">
						<image
							src="/static/temp/pro.png"
							class="image_12"
							mode="aspectFill"
						/>
						<view class="flex-col items-start group_15">
							<text class="text_7 clamp">幸福西饼万达店</text>
							<text class="text_8 clamp2">河东区万达广场1F东门入口</text>
						</view>
					</view>
					<view class="flex-row group_16">
						<view class="flex-col items-center image-wrapper">
							<image
								src="/static/mangd-loc.png"
								class="image_13"
								mode="aspectFill"
							/>
						</view>
						<view class="section_5"><!--*--></view>
						<view class="flex-col items-center image-wrapper view_3">
							<image
								src="/static/mang-phone.png"
								class="image_14"
								mode="aspectFill"
							/>
						</view>
					</view>
				</view>
				<view class="group_17">
					<text class="text_9">距离您</text>
			 	<text class="text_10">864m</text>
				</view>
			</view>
		</view>
		<view class="line-wrap"></view>
		<view class="flex-col items-start tips-wrap">
			<text class="title">盲盒内能得到什么</text>
			<text class="text_12">随机获得四拼蛋糕，奶油慕斯蛋糕二选一<br/>精致蛋挞、南瓜蛋糕二选一</text>
		</view>
		<view class="line-wrap"></view>
		<view class="review-sec">
			<view class="title-wrap align-center justify-between">
				<text class="text_14">商品评价</text>
				<view class="flex-row group_21">
					<text class="text_15">查看全部</text>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_15"
						mode="aspectFill"
			 	    />
				</view>
			</view>		
			<evaItem v-for="(item,idx) in 3" :key="idx" />
		</view>
		<view class="line-wrap"></view>
		<view class="rich-wrap">
			<rich-text :nodes="richTxt" class="rich"></rich-text>
		</view>
		<view class="btn-wrap">
			<view class="flex-row group_34">
			  <view class="flex-col justify-center items-start section_7">
			    <view class="group_35 align-center">
			      <text class="text_26">￥</text>
			      <text class="text_27 clamp">149.00</text>
			    </view>
			  </view>
			  <view class="flex-col items-center text-wrapper_1"><text class="text_30">下单</text></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 || '');
		};
	},
	methods:{
		previewImg(idx){
			let url = [];
			this.$tools.previewImg(url)
		}
	}
};
</script>

<style lang="scss">
.swiper-sec{
	position: relative;
	.swiper{
		width: 750rpx;
		height: 750rpx;
		.img-wrap{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.4);
			}
		}
		.img{
			width: 750rpx;
			height: 750rpx;
		}
	}
    .ic-wrap{
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		width: 118rpx;
		height: 94rpx;
		.ic{
			width: 54rpx;
			height: 54rpx;
		}
	}
}
.name-wrap {
	padding: 34rpx 31rpx 37rpx;
	.text_2 {
		margin: 7rpx 0 6rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang;
		letter-spacing: 1.28rpx;
		max-width: 500rpx;
	}
	.text-wrapper {
		margin-left: 10rpx;
		padding: 10rpx 10rpx 11rpx;
		background-color: #92b99c;
		border-radius: 10rpx;
		height: 44rpx;
		max-width: 160rpx;
	}
	.text_3 {
		margin-left: 10rpx;
		margin-right: 5rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang;
		// max-width: 110rpx;
		text-align: center;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_9 {
		margin-right: 9rpx;
		flex-shrink: 0;
		align-self: flex-end;
	}
	.group_10 {
		margin-top: 6rpx;
	}
	.image_10 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.text_4 {
		margin-left: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.border-wrap{
	margin: 0 auto;
	width: 710rpx;
	height: 2rpx;
	background-color: #eee;
}
.time-wrap {
	padding: 40rpx 33rpx 39rpx;
	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.text_6 {
		margin-left: 28rpx;
		margin-top: 3rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.loc-wrap {
	padding: 40rpx 30rpx 41rpx;
	.image_12 {
		margin-top: 5rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 68rpx;
	}
	.group_15 {
		margin-left: 16rpx;
	}
	.text_7 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 420rpx;
	}
	.text_8 {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		max-width: 420rpx;
		line-height: 36rpx;
	}
	.group_16 {
		margin-right: 20rpx;
		margin-top: 37rpx;
	}
	.image-wrapper {
		align-self: center;
		width: 28rpx;
	}
	.image_13 {
		width: 28rpx;
		height: 33rpx;
	}
	.section_5 {
		margin-left: 41rpx;
		background-color: #0000001a;
		width: 1rpx;
		height: 65rpx;
	}
	.view_3 {
		margin-left: 40rpx;
	}
	.image_14 {
		width: 28rpx;
		height: 28rpx;
	}
	.group_17 {
		margin-left: 3rpx;
		align-self: flex-start;
		line-height: 23rpx;
		margin-top: 10rpx;
	}
	.text_9 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_10 {
		color: #92b99c;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
}
.line-wrap {
	background-color: #0000000f;
	height: 17rpx;
}
.tips-wrap {
	padding: 40rpx 32rpx;
	.title {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
	}
	.text_12 {
		margin-left: 4rpx;
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 36rpx;
	}
}
.review-sec{
	padding-top: 35rpx;
}
.title-wrap {
	height: 37rpx;
	margin-bottom: 10rpx;
	padding: 0 30rpx;
	.text_14 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.group_21 {
		margin-right: 9rpx;
	}
	.text_15 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_15 {
		margin-left: 11rpx;
		margin-bottom: 3rpx;
		flex-shrink: 0;
	}
}

.rich-wrap{
	background-color: #fff;
	.rich {
		line-height: normal;
	}
}
.btn-wrap{
	   // margin-top: 67rpx;
	   padding: 0 20rpx;
	   position: fixed;
	   /* #ifdef H5 */
	   bottom: calc(var(--window-bottom) / 2);
	   /* #endif */
	   /* #ifdef MP */
	   bottom: calc(var(--safe-area-inset-bottom) / 2);
	   /* #endif */
	   
	   z-index: 10;
	   left: 20rpx;
	   right: 20rpx;
	 .section_7 {
	   padding: 15rpx 30rpx 14rpx;
	   flex: 1 1 auto;
	   background-color: #333333;
	   border-radius: 47rpx 0px 0px 47rpx;
	   height: 94rpx;
	 }
	 .group_35 {
	   line-height: 26rpx;
	 }
	 .text_26 {
	   color: #ffffff;
	   font-size: 24rpx;
	   font-family: PingFang;
	 }
	 .text_27 {
	   color: #ffffff;
	   font-size: 34rpx;
	   font-family: PingFang;
	   max-width: 300rpx;
	   letter-spacing: 1.36rpx;
	 }
	
	.text-wrapper_1 {
	   padding: 31rpx 0;
	   flex-shrink: 0;
	   background-color: #92b99c;
	   border-radius: 0px 47rpx 47rpx 0px;
	   width: 165rpx;
	   height: 94rpx;
	}
	.text_30 {
	   color: #ffffff;
	   font-size: 34rpx;
	   font-family: PingFang;
	   line-height: 32rpx;
	   letter-spacing: 1.36rpx;
	}
}
</style>