newyqg/pages/store/storeInfo.vue

<template>
	<view class="center">
		<view class="store-info flex">
			<view class="store-top flex">
				<image class="simage" src="" mode=""></image>
				<view class="stop-main">
					<view class="stop-title">巴黎莎士比亚书店</view>
					<view class="stop-address">
						<image class="mrt-image" src="../../static/index/index10.png" mode=""></image>
						<view class="mrt-font">距离0.3KM</view>
					</view>
				</view>
			</view>
		</view>
		<view class="store-item">
			<image class="store-image1" src="../../static/img/store2.png" mode=""></image>
			<view class="store-font">营业时间：10:00-21:00</view>
		</view>
		<view class="store-item">
			<image class="store-image2" src="../../static/img/store3.png" mode=""></image>
			<view class="store-font">商家电话：14255212336</view>
		</view>
		<view class="store-item">
			<image class="store-image3" src="../../static/img/store1.png" mode=""></image>
			<view class="store-font">门店地址：椒江区市府大道200号</view>
		</view>
		<view class="store-main">
			<view class="smain-title">门头照片</view>
			<scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true" scroll-left="10px">
				<view class="scroll-item" v-for="(item,index) in 4" :key="index">
					<image class="scroll-image" src="" mode="heightFix"></image>
				</view>
			</scroll-view>
		</view>
		<view class="store-main">
			<view class="smain-title">店内图片</view>
			<scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true" scroll-left="10px">
				<view class="scroll-item" v-for="(item,index) in 4" :key="index">
					<image class="scroll-image" src="" mode="heightFix"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		scroll(e) {
			console.log(e,"123456");
		}
	}
};
</script>

<style lang="less">
.center,
page {
	background: #f8f8f8;
	height: 100%;
}
.store-info {
	background: #ffffff;
	.store-top {
		padding: 40rpx 20rpx;
		justify-content: flex-start;
		.simage {
			width: 130rpx;
			height: 130rpx;
			background: #f44939;
		}
		.stop-main {
			height: 130rpx;
			padding: 6rpx 0;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			.stop-title {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.stop-address {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.mrt-image {
					width: 20rpx;
					height: 28rpx;
				}

				.mrt-font {
					margin-left: 8rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}
}
.store-item {
	background: #ffffff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 30rpx 30rpx 30rpx 44rpx;
	.store-image1 {
		width: 36rpx;
		height: 36rpx;
	}
	.store-image2 {
		margin: 0 1rpx;
		width: 34rpx;
		height: 34rpx;
	}
	.store-image3 {
		margin: 0 7rpx;
		width: 22rpx;
		height: 28rpx;
	}
	.store-font {
		margin-left: 22rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2d2d2d;
	}
}
.store-main {
	margin-top: 16rpx;
	background: #FFFFFF;
	padding: 30rpx 42rpx 40rpx;
	.smain-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #464646;
	}
}
.scroll-box {
	white-space: nowrap;
	margin-top: 30rpx;
	height: 240rpx;
	.scroll-item:first-child {
		margin-left: 0;
	}
	.scroll-item {
		margin-left: 20rpx;
		display: inline-block;
		height: 240rpx;
		width: 240rpx;
	}
	.scroll-image {
		height: 240rpx;
		width: 240rpx;
		background: #5AC725;
	}
}
</style>