odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://git.hchyun.com/feashow/pupil into dev

Browse Source
This commit is contained in:
”chenxuelian“
2022-12-18 13:29:01 +08:00
parent 9d1526a28e 204149745e
commit 99b39f3eed
98 changed files with 4169 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
pages/index/index.vue
View File

@@ -1,41 +1,119 @@
<!-- 首页 -->
<template>
<view>
<view class="input_block">
<view class="input_block_border">
<view @click="toSearch">
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
<!-- 搜索框 -->
<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>
<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: {
toSearch() {
console.log('--search')
uni.navigateTo({
url: '/pages/index/search/search'
})
//点击一级分类
click(listIndex) {
this.$refs.uToast.success(`点击了第${listIndex}个`)
}
}
}
</script>
<style lang="scss">
.input_block {
// 搜索框样式
.search_box {
background: linear-gradient(135deg, #12CA64 0%, #1ACA67 100%);
.input_block_border {
.search_box_border {
width: 94.6%;
height: 124rpx;
background: linear-gradient(320deg, #36E182 0%, #26DD76 100%, #26DD76 100%);
@@ -51,8 +129,59 @@
height: 64rpx;
border-radius: 32rpx;
background-color: #fff;
.u-input__content__field-wrapper__field {
font-size: 26rpx !important;
}
}
}
}
}
</style>
.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>