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.
195 lines
4.1 KiB
195 lines
4.1 KiB
<template>
|
|
<view class="category">
|
|
<view class="search" @click="goSearch">
|
|
<image src="../../static/home/search.png" mode="" class="searchIcon"></image>
|
|
<text class="searchInfo">iPone15</text>
|
|
</view>
|
|
<view class="main">
|
|
<view class="menu">
|
|
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
|
@scrolltolower="lower" @scroll="scroll">
|
|
<view id="demo1" class="menuList" v-for="(item,index) in 10" :key="index">厨房电器</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="goods">
|
|
<view class="goodsTop">
|
|
<scroll-view class="suggest" scroll-x="true">
|
|
<view id="demo1" class="sugItem" v-for="(item,index) in 5" :key="index">热门分类</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="goodsCenter">
|
|
<view class="hotType">
|
|
热门分类
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="listItem" v-for="(item,index) in 9" :key="index">
|
|
<image src="/static/home/goodsDemo.png" mode="" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
TCL
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goodsCenter">
|
|
<view class="hotType">
|
|
投影仪
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="listItem" v-for="(item,index) in 9" :key="index">
|
|
<image src="/static/home/goodsDemo.png" mode="" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
TCL
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
goSearch(){
|
|
uni.navigateTo({
|
|
url:'/pages/search/index'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.category {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #F5F5F5;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
|
|
.search {
|
|
width: 678rpx;
|
|
height: 64rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 68rpx 68rpx 68rpx 68rpx;
|
|
opacity: 1;
|
|
margin: 32rpx 0 0 34rpx;
|
|
|
|
.searchIcon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
margin: 18rpx 0 0 26rpx;
|
|
}
|
|
|
|
.searchInfo {
|
|
height: 64rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #8D8D8D;
|
|
line-height: 64rpx;
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
margin-top: 28rpx;
|
|
|
|
.menu {
|
|
width: 172rpx;
|
|
height: 100%;
|
|
|
|
.scroll-Y {
|
|
height: 100%;
|
|
}
|
|
|
|
.menuList {
|
|
margin-bottom: 54rpx;
|
|
text-align: center;
|
|
width: 172rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #434343;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
.goodsTop{
|
|
width: 500rpx;
|
|
.suggest{
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
.sugItem{
|
|
display: inline-block;
|
|
width: 146rpx;
|
|
height: 54rpx;
|
|
background: #FEF6F6;
|
|
border-radius: 82rpx 82rpx 82rpx 82rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #F22029;
|
|
line-height: 54rpx;
|
|
margin-right: 34rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.goodsCenter{
|
|
width: 566rpx;
|
|
height: 700rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
opacity: 1;
|
|
margin-top: 22rpx;
|
|
padding-top: 30rpx;
|
|
.hotType{
|
|
width: 112rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #434343;
|
|
line-height: 40rpx;
|
|
margin: 0rpx 0 0 34rpx;
|
|
}
|
|
.goodsList{
|
|
width: 544rpx;
|
|
margin: 26rpx 0 0 8rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.listItem{
|
|
width: 180rpx;
|
|
height: 150rpx;
|
|
margin-bottom: 34rpx;
|
|
.goodsImg{
|
|
width: 176rpx;
|
|
height: 110rpx;
|
|
}
|
|
.goodsName{
|
|
width: 180rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #434343;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |