You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
3.5 KiB
181 lines
3.5 KiB
<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>
|