192 lines
3.9 KiB
Vue
192 lines
3.9 KiB
Vue
<!-- 首页 -->
|
|
<template>
|
|
<view>
|
|
<!-- 搜索框 -->
|
|
<view class="search_box">
|
|
<view class="search_box_border">
|
|
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
|
|
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx">
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<!-- 分类模块 -->
|
|
<view class="classify">
|
|
<u-grid :border="false" col="5">
|
|
<u-grid-item v-for="(listItem,listIndex) in classifyList" :key="listIndex"
|
|
@click="click(listIndex)">
|
|
<!-- 懒加载 :lazy-load="true" -->
|
|
<u--image :src="listItem.src" width="86rpx" height="86rpx" :lazy-load="true">
|
|
</u--image>
|
|
<text class="grid-text">{{listItem.title}}</text>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
<!-- 分类模块下的轮播图 -->
|
|
<view>
|
|
<u-swiper :list="swiperList" indicatorMode="line" radius="0" circular></u-swiper>
|
|
</view>
|
|
<!-- 选项卡: 上架时间和点赞量 -->
|
|
<view>
|
|
<u-tabs :list="tabList" lineColor="#15CA65" :is-scroll="false"
|
|
activeStyle="color:#15CA65;font-weight: bold;">
|
|
</u-tabs>
|
|
</view>
|
|
<!-- 产品 -->
|
|
<products></products>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
classifyList: [{
|
|
src: '/static/classify/sy_icon_hp.png',
|
|
title: '烘培宝典'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_ls.png',
|
|
title: '零食铺子'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_yp.png',
|
|
title: '饮品大全'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_tw.png',
|
|
title: '调味菜单'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_rs.png',
|
|
title: '肉食荟萃'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_np.png',
|
|
title: '乳品手册'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_gs.png',
|
|
title: '果蔬地图'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_sj.png',
|
|
title: '食界新贵'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_hz.png',
|
|
title: '欢喜盒子'
|
|
},
|
|
{
|
|
src: '/static/classify/sy_icon_cy.png',
|
|
title: '创意工具'
|
|
},
|
|
],
|
|
tabList: [{
|
|
name: '上架时间'
|
|
},
|
|
{
|
|
name: '点赞量'
|
|
},
|
|
],
|
|
swiperList: [
|
|
'/static/products/sy_bg.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png'
|
|
],
|
|
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
//关闭下拉刷新
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
methods: {
|
|
//点击一级分类
|
|
click(listIndex) {
|
|
this.$refs.uToast.success(`点击了第${listIndex}个`)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 搜索框样式
|
|
.search_box {
|
|
background: linear-gradient(135deg, #12CA64 0%, #1ACA67 100%);
|
|
|
|
.search_box_border {
|
|
width: 94.6%;
|
|
height: 124rpx;
|
|
background: linear-gradient(320deg, #36E182 0%, #26DD76 100%, #26DD76 100%);
|
|
margin: 0 auto;
|
|
box-shadow: 0 -1px 3px 0 #31B96D;
|
|
border-radius: 38rpx 38rpx 0 0;
|
|
|
|
.u-border {
|
|
border: none;
|
|
padding-top: 16px !important;
|
|
|
|
.u-input__content {
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
background-color: #fff;
|
|
|
|
.u-input__content__field-wrapper__field {
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
|
|
//分类模块
|
|
.classify {
|
|
height: 350rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
|
|
box-shadow: 0px 2px 4px 0px rgba(206, 206, 206, 0.5);
|
|
|
|
.u-grid {
|
|
padding-top: 30rpx;
|
|
|
|
.grid-text {
|
|
padding-top: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.u-grid-item {
|
|
padding-bottom: 38rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
//轮播图
|
|
.u-swiper__wrapper__item__wrapper {
|
|
margin-top: 20rpx;
|
|
height: 290rpx;
|
|
}
|
|
|
|
.u-swiper-indicator__wrapper {
|
|
display: none !important;
|
|
}
|
|
|
|
// 选项卡
|
|
.u-tabs__wrapper__nav {
|
|
background-color: #FFFFFF;
|
|
|
|
.u-tabs__wrapper__nav__item {
|
|
padding: 0 !important;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|