cart

pageC/merchant/details.vue

@@ -0,0 +1,129 @@
+<template>
+	<view class="details">
+		<view class="top">
+			<image></image>
+			<view class="name">店铺名称</view>
+			<view class="info">创建时间：2020年04月10日 | 浙江金华市</view>
+			<view class="num">
+				<view>
+					<view class="value">23435</view>
+					<view class="title">粉丝数</view>
+				</view>
+				<view>
+					<view class="value">23435</view>
+					<view class="title">评价</view>
+				</view>
+				<view>
+					<view class="value">23435</view>
+					<view class="title">信用等级</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="title">
+				<view>工商执照</view>
+				<image></image>
+			</view>
+			<view class="image-list">
+				<image></image>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.details {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	.top {
+		margin-top: 1rpx;
+		padding: 40rpx 80rpx;
+		text-align: center;
+		background-color: #ffffff;
+		> image {
+			width: 140rpx;
+			height: 140rpx;
+			border-radius: 70rpx;
+			margin-bottom: 29rpx;
+			background-color: aqua;
+		}
+		.name {
+			font-size: 28rpx;
+			font-weight: 500;
+			color: rgba(51,51,51,1);
+			margin-bottom: 29rpx;
+		}
+		.info {
+			font-size: 24rpx;
+			color: rgba(51,51,51,1);
+			margin-bottom: 37rpx;
+		}
+		.num {
+			display: flex;
+			justify-content: space-between;
+			> view {
+				text-align: center;
+				color: rgba(51,51,51,1);
+				position: relative;
+				&:not(:last-child)::after {
+					content: "";
+					position: absolute;
+					right: -77rpx;
+					top: 50%;
+					transform: translate(0, -50%);
+					width: 2rpx;
+					height: 60rpx;
+					background: rgba(51,51,51,1);
+				}
+				.value {
+					font-size: 32rpx;
+					font-weight: 500;
+					margin-bottom: 20rpx;
+				}
+				.title {
+					font-size: 24rpx;
+				}
+			}
+		}
+	}
+	.bottom {
+		.title {
+			padding: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #ffffff;
+			margin-bottom: 1rpx;
+			> view {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: rgba(51,51,51,1);
+			}
+			> image {
+				width: 24rpx;
+				height: 14rpx;
+				background-color: aqua;
+			}
+		}
+		.image-list {
+			background-color: #ffffff;
+			padding: 20rpx 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			> image {
+				width: 239rpx;
+				height: 170rpx;
+				flex-shrink: 0;
+				background-color: aqua;
+			}
+		}
+	}
+}
+</style>