xinwang/pages/store/storeDetail.vue

<template>
	<view class="content">
		<view class="top">
			<image src="" mode="" class="store-img"></image>
			<view class="right">
				<view class="store-name clamp">
					鑫旺零售台州店
				</view>
				<view class="store-content clamp2">
					店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介
				</view>
			</view>
		</view>
		<view class="jg"></view>
		<view class="store-info">
			<view class="title">
				门店地址/营业时间
			</view>
			<view class="info-box">
				<view class="item">
					<image src="" mode="" class="item-img"></image>
					<view class="item-msg">
						台州市市府大道110号
					</view>
				</view>
				<view class="item">
					<image src="" mode="" class="item-img"></image>
					<view class="item-msg">
						营业时间8:30-12:00,13:30-17:00
					</view>
				</view>
				<view class="item">
					<image src="" mode="" class="item-img"></image>
					<view class="item-msg">
						0576-847112333
					</view>
				</view>
			</view>
		</view>
		<view class="edit-btn" @click="navTo('/pages/store/storeMessage')">
			编辑信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}
	.top {
		height: 198rpx;
		display: flex;
		padding: 30rpx 25rpx 36rpx;
		.store-img {
			width: 132rpx;
			height: 132rpx;
			background-color: red;
			flex-shrink: 0;
		}
		.right {
			padding-left: 20rpx;
			.store-name {
				padding: 5rpx 0;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.store-title {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 25rpx;
			}
		}
		
	}
	.jg {
		height: 20rpx;
		background-color: #f8f6f6;
	}
	.store-info {
		padding: 28rpx 30rpx 0;
		height: 100%;
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 55rpx;
		}
		.info-box {
			margin-top: 30rpx;
			width: 690rpx;
			min-height: 301rpx;
			border: 2px solid #DDDDDD;
			border-radius: 10rpx;
			padding: 40rpx 40rpx 0rpx;
			.item {
				display: flex;
				padding-bottom: 40rpx;
				image {
					margin-top: 6rpx;
					margin-right: 20rpx;
					height: 28rpx;
					width: 28rpx;
					background-color: red;
					flex-shrink: 0;
				}
				.item-msg {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}
	.edit-btn {
		position: fixed;
		bottom: 34rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 674rpx;
		// height: 88rpx;
		background: #FF4C4C;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>