baozhida-mall-applet/pages/tabBar/home.vue

<template>
	<!-- 首页 -->
	<view>
		<u-navbar bgColor="#4CAF50" placeholder>
			<view class="u-nav-slot" slot="left">
				<view class="buy_medicine">宝智达买药</view>
				<view class="same_row_in">
					<u-icon name="map" size="15" color="#fff"></u-icon>
					<view class="address_box">请选择收货地址</view>
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="home_head_search">
			<u-search placeholder="请输入药品" borderColor="#4CAF50" v-model="keyword"></u-search>
		</view>
		<view class="center_in">
			<view style="margin-top: 20rpx;width: 95%;">
				<u-swiper :list="list1" indicator circular indicatorMode="dot"></u-swiper>
			</view>
		</view>
		<view class="box_notice">
			<u-notice-bar :text="notification" bgColor="#fff" color="#606266" :speed="30"></u-notice-bar>
		</view>
		<view style="padding: 0rpx 20rpx 20rpx 20rpx;">
			<u-scroll-list>
				<view class="box_classify">
					<view class="card_classify" v-for="(item, index) in list" :key="index">
						<image class="classify_img" :src="item.thumb"></image>
						<view>{{index + 1}}</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="title_store">门店列表</view>
		<view class="box_shop_list">
			<view class="box_shop_item" v-for="(item,index) in shopData" :key="index">
				<view class="store_img center_in">{{index + 1}}</view>
				<view class="home_box_content">
					<view class="home_name_shop">{{item.title}}</view>
					<view class="space_between" style="width: 100%;">
						<view style="display: flex;flex-direction: column;">
							<view class="subhead_title">距离您{{item.distance}}公里</view>
							<view class="subhead_title">营业时间:{{item.time}}</view>
						</view>
						<view class="box_enter_into center_in" @click="enterStore">进入门店</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list1: [
					"/static/image/swiper1.png",
					"/static/image/swiper2.png",
					"/static/image/swiper3.png",
				],
				notification: '亲爱的顾客，宝智达商场标注【跨境】字样的所有产品均为跨境产品，不支持非质量问题的退单退款，请在您购买时仔细核实好订单内容，避免买错/买重/地址或联系方式错误，感谢您的理解与支持。',
				shopData: [{
					title: '阳光大药房',
					distance: 0.8,
					time: '08:00-22:00'
				}, {
					title: '阳光大药房',
					distance: 0.8,
					time: '08:00-22:00'
				}],
				list: [{
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, {
					thumb: "/static/image/swiper3.png",
				}, ],
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff', // 前景色值，包括按钮、标题、状态栏的颜色
				backgroundColor: '#4CAF50', // 背景颜色值，有效的颜色值，Hex颜色值
			});
		},
		methods: {
			enterStore() {
				uni.navigateTo({
					url: '/pages/home/shop'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.home_head_search {
		padding-top: 30rpx;
		margin: 0rpx 30rpx;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
	}

	.buy_medicine {
		font-size: 32rpx;
		color: #fff;
		margin-right: 15rpx;
	}

	.address_box {
		font-size: 28rpx;
		color: #fff;
		margin-left: 5rpx;
	}

	.title_store {
		padding: 0rpx 30rpx 10rpx 30rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.box_shop_list {
		display: flex;
		flex-direction: column;
		margin: 0rpx 20rpx;
	}

	.box_shop_item {
		display: flex;
		background-color: #fff;
		margin: 10rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.store_img {
		flex: none;
		width: 150rpx;
		height: 130rpx;
		background-color: #F3F4F6;
	}

	.subhead_title {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #82848a;
	}

	.home_box_content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: calc(100% - 20rpx);
		margin-left: 20rpx;
	}

	.home_name_shop {
		font-size: 30rpx;
		font-weight: bold;
	}

	.box_enter_into {
		flex: none;
		width: fit-content;
		padding: 12rpx 20rpx;
		border-radius: 35rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: $x-color;
	}

	.box_classify {
		display: flex;
		height: 370rpx;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.card_classify {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 20rpx 20rpx 0rpx 0rpx;
	}

	.classify_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.box_notice ::v-deep .u-icon__icon {
		color: red !important;
	}

	::v-deep .u-scroll-list {
		padding-bottom: 0px !important;
	}
	::v-deep .u-scroll-list__indicator{
		margin: 0px !important;
	}
</style>