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 :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>
		
		
		<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/1.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);
			}
		}
	}
	
</style>