rice-front/pages/index/index.vue

<template>
	<view class="page">

		<navbar bgColor="#88D259" />

		<view class="bg-color"></view>

		<view class="page-title">
			三只青蛙
		</view>

		<view class="search">
			<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" v-model="keyword"></uv-search>
		</view>

		<view class="swipe">
			<uv-swiper :list="bannerList" indicator height="320rpx" keyName="url"></uv-swiper>
		</view>

		<view class="notice">
			<uv-notice-bar fontSize="32rpx" :text="notice"></uv-notice-bar>
		</view>

		<view class="menu">
			<uv-grid :border="false" :col="4">
				<uv-grid-item v-for="(item,index) in baseList" :key="index">

					<image :src="item.image" mode=""></image>
					<text class="menu-text">{{item.title}}</text>

				</uv-grid-item>
			</uv-grid>
		</view>

		<view class="map">
			<image src="../../static/image/home/8.png" mode="aspectFill" />
		</view>

		<view class="commodity"
		@click="$utils.navigateTo('/pages/index/category')">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>Experience the product</view>
						<view>体验产品 ___ _</view>
					</view>
				</view>
				<view class="centre">
					<view class="boxs">
						<view class="box-text">
							<view>三只青蛙低GI大米</view>
							<view>5斤每盒*3盒</view>
							<text class="text1">225</text>
							<text class="text2">原价375</text>
						</view>
						<view class="box-img">
							<image src="../../static/logo.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commodity"
		@click="$utils.navigateTo('/pages/index/category')">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>Experience the product</view>
						<view>常规产品 ___ _</view>
					</view>
				</view>
				<view class="centre">
					<view class="boxs">
						<view class="box-text">
							<view>三只青蛙低GI大米</view>
							<view>5斤每盒*3盒</view>
							<text class="text1">225</text>
							<text class="text2">原价375</text>
						</view>
						<view class="box-img">
							<image src="../../static/logo.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commodity">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>Experience the product</view>
						<view>新闻动态 ___ _</view>
					</view>
					<view class="top1" @click="$utils.navigateTo('/pages_order/home/journalism')">
						更多
					</view>
				</view>
				<view class="centre">
					<view class="boxs">
						<view class="images">
							<image src="../../static/image/home/9.png" mode="aspectFill"></image>
						</view>
						<view class="box-fone">
							<view>新闻标题</view>
							<view>说明文字说明文字说明文字说明文字说明文字</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="qr">
			<view class="scan">扫码关注公众号</view>
			<view class="qr-scan">
				<image src="../../static/image/home/10.png" mode="aspectFill"></image>
			</view>
			<view class="qr-bottom">
				<view>保存公众号二维码图片</view>
				<view>长按识别公众号</view>
			</view>
		</view>

		<PrivacyAgreementPoup />

		<tabber select="home" />
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import Position from '@/utils/position.js'
	import tabber from '@/components/base/tabbar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			tabber,
			PrivacyAgreementPoup,
		},
		data() {
			return {
				area: '长沙',
				notice: '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
				bannerList: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					},
				],
				baseList: [{
						image: '/static/image/home/0.png',
						title: '关于我们',
					},
					{
						image: '/static/image/home/1.png',
						title: '产品介绍',
					},
					{
						image: '/static/image/home/2.png',
						title: '促销活动',
					},
					{
						image: '/static/image/home/3.png',
						title: '商城',
					},
					{
						image: '/static/image/home/4.png',
						title: '邀请好友',
					},
					{
						image: '/static/image/home/5.png',
						title: '新闻中心',
					},
					{
						image: '/static/image/home/6.png',
						title: '校企合作',
					},
					{
						image: '/static/image/home/7.png',
						title: '联系我们',
					},
				],
				productList: [],
				keyword: '',
			}
		},
		computed: {},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.page {
		.bg-color {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 550rpx;
			background: linear-gradient(to bottom, #88D259, #88D259, #fff);
		}

		.page-title {
			position: relative;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
		}

		.search {
			position: relative;
			background: #FFFFFF;
			margin: 20rpx;
			border-radius: 41rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;

			/deep/ .uv-search__action {
				background-color: $uni-color;
				color: #FFFFFF;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}
		}

		.swipe {
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}

		.menu {
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 0 10rpx 10rpx #00000009;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-top: 10rpx;
			}

			.menu-text {
				font-size: 28rpx;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
			}
		}

		.notice {
			margin: 0 20rpx;

			/deep/ .uv-notice-bar {
				background: linear-gradient(to right, #f9edc9, #dfedd6);
				border-radius: 16rpx;
			}

			/deep/ .uv-notice {
				padding: 14rpx 0;
			}

			/deep/ .uv-icon__icon {
				font-size: 36rpx !important;
				color: #000 !important;
			}
		}

		.map {
			margin: 20rpx;
			height: 100rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.commodity {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;

			.box {
				width: 100%;
				margin: 20rpx;

				.top {
					display: flex;
					border-left: 6rpx solid #A3D250;
					align-items: center;
					justify-content: space-between;

					.top-text {
						margin-left: 20rpx;

						view:nth-child(1) {
							font-size: 24rpx;
							color: #474747;
						}

						view:nth-child(2) {
							font-size: 32rpx;
							color: #A3D250;
							font-weight: 600;
						}
					}

					.top1 {
						font-size: 26rpx;
						color: #fff;
						padding: 10rpx 30rpx;
						background-color: #F6CD59;
						border-radius: 30rpx;
					}
				}

			}

			.centre {
				margin: 40rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.boxs {
					display: flex;
					width: 100%;
					align-items: center;

					.images {
						width: 180rpx;
						height: 140rpx;
						flex-shrink: 0;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.box-fone {
						margin-left: 20rpx;

						view:nth-child(1) {
							font-size: 36rpx;
							color: #474747;
						}

						view:nth-child(2) {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #A2A2A2;
						}
					}

					.box-text,
					.box-img {
						flex: 1;
					}

					.box-text {
						view:nth-child(1) {
							font-size: 32rpx;
							font-weight: 500;
							margin-top: 30rpx;
						}

						view:nth-child(2) {
							font-size: 28rpx;
							color: #CCCCCC;
							margin-bottom: 30rpx;
						}

						.text1 {
							color: red;
							font-size: 68rpx;
						}

						.text2 {
							font-size: 28rpx;
							color: #CCCCCC;
						}

					}

					.box-img {

						image {
							height: 100%;
							width: 100%;
						}
					}
				}

			}
		}

		.qr {
			margin-top: 40rpx;

			.scan {
				text-align: center;
				font-size: 28rpx;
				color: #A2A2A2;
			}

			.qr-scan {
				margin: 20rpx auto;
				width: 400rpx;
				height: 400rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.qr-bottom {
				display: flex;
				font-size: 28rpx;
				color: #A2A2A2;
				justify-content: space-around;

				view {
					border: 2rpx solid #A2A2A2;
					padding: 20rpx;
					border-radius: 45rpx;
				}
			}


		}
	}
</style>