|
|
|
@ -1,49 +1,68 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar bgColor="#88D259"/> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<uv-swiper :list="bannerList" indicator height="320rpx" keyName="url"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="notice"> |
|
|
|
<uv-notice-bar :text="notice"></uv-notice-bar> |
|
|
|
<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"> |
|
|
|
|
|
|
|
<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 class="map"> |
|
|
|
<image src="../../static/image/home/8.png" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="commodity" v-for="(item,index) in 10" :key="index"> |
|
|
|
<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> |
|
|
|
|
|
|
|
<PrivacyAgreementPoup /> |
|
|
|
|
|
|
|
<tabber select="home" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -51,75 +70,73 @@ |
|
|
|
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue' |
|
|
|
import Position from '@/utils/position.js' |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
components : { |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
PrivacyAgreementPoup, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
area: '长沙', |
|
|
|
notice : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....', |
|
|
|
bannerList: [ |
|
|
|
{ |
|
|
|
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 : '关于我们', |
|
|
|
baseList: [{ |
|
|
|
image: '/static/image/home/0.png', |
|
|
|
title: '关于我们', |
|
|
|
}, |
|
|
|
{ |
|
|
|
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/2.png', |
|
|
|
title: '促销活动', |
|
|
|
}, |
|
|
|
{ |
|
|
|
image : '/static/image/home/3.png', |
|
|
|
title : '商城', |
|
|
|
image: '/static/image/home/3.png', |
|
|
|
title: '商城', |
|
|
|
}, |
|
|
|
{ |
|
|
|
image : '/static/image/home/4.png', |
|
|
|
title : '邀请好友', |
|
|
|
image: '/static/image/home/4.png', |
|
|
|
title: '邀请好友', |
|
|
|
}, |
|
|
|
{ |
|
|
|
image : '/static/image/home/5.png', |
|
|
|
title : '新闻中心', |
|
|
|
image: '/static/image/home/5.png', |
|
|
|
title: '新闻中心', |
|
|
|
}, |
|
|
|
{ |
|
|
|
image : '/static/image/home/6.png', |
|
|
|
title : '校企合作', |
|
|
|
image: '/static/image/home/6.png', |
|
|
|
title: '校企合作', |
|
|
|
}, |
|
|
|
{ |
|
|
|
image : '/static/image/home/7.png', |
|
|
|
title : '联系我们', |
|
|
|
image: '/static/image/home/7.png', |
|
|
|
title: '联系我们', |
|
|
|
}, |
|
|
|
], |
|
|
|
productList: [], |
|
|
|
keyword : '', |
|
|
|
keyword: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
computed : { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
} |
|
|
|
computed: {}, |
|
|
|
methods: {} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page{ |
|
|
|
.bg-color{ |
|
|
|
.page { |
|
|
|
.bg-color { |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
@ -127,11 +144,13 @@ |
|
|
|
height: 550rpx; |
|
|
|
background: linear-gradient(to bottom, #88D259, #88D259, #fff); |
|
|
|
} |
|
|
|
.page-title{ |
|
|
|
|
|
|
|
.page-title { |
|
|
|
position: relative; |
|
|
|
margin-left: 30rpx; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search { |
|
|
|
position: relative; |
|
|
|
background: #FFFFFF; |
|
|
|
@ -140,42 +159,155 @@ |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
/deep/ .uv-search__action{ |
|
|
|
|
|
|
|
/deep/ .uv-search__action { |
|
|
|
background-color: $uni-color; |
|
|
|
color: #FFFFFF; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.swipe{ |
|
|
|
|
|
|
|
.swipe { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin: 20rpx; |
|
|
|
} |
|
|
|
.menu{ |
|
|
|
|
|
|
|
.menu { |
|
|
|
margin: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 0 10rpx 10rpx #00000009; |
|
|
|
image{ |
|
|
|
|
|
|
|
image { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
.menu-text{ |
|
|
|
|
|
|
|
.menu-text { |
|
|
|
font-size: 28rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.notice{ |
|
|
|
|
|
|
|
.notice { |
|
|
|
margin: 0 20rpx; |
|
|
|
/deep/ .uv-notice-bar{ |
|
|
|
|
|
|
|
/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; |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.centre { |
|
|
|
margin: 40rpx 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.boxs { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.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%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
