Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成精选榜单页面UI，完成月销榜单页面UI

master
邓平艺 4 years ago
parent
f9bea26c52
commit
fcfea8475b
4 changed files with 331 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/lf-multiColumnAd/lf-multiColumnAd.vue
  2. 14
      pages.json
  3. 157
      pages/index/list/monthlyList.vue
  4. 159
      pages/index/list/selected.vue

2
components/lf-multiColumnAd/lf-multiColumnAd.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="content">
<view class="left" @click="$msg('敬请期待')">
<view class="left" @click="$url('/pages/index/list/selected')">
<image class="left-img"></image>
</view>
<view class="right">

14
pages.json
View File

@ -924,6 +924,20 @@
"navigationBarTitleText": "会员权益",
"navigationStyle": "custom"
}
},
{
"path" : "pages/index/list/selected",
"style" : {
"navigationBarTitleText": "精选榜单",
"navigationStyle": "custom"
}
},
{
"path" : "pages/index/list/monthlyList",
"style" : {
"navigationBarTitleText": "热销榜单",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

157
pages/index/list/monthlyList.vue
View File

@ -0,0 +1,157 @@
<template>
<view>
<lf-nav :showIcon="true" bgColor="transparent" :spreadOut="false"></lf-nav>
<view class="head">
<image class="img" mode="aspectFill" src="https://picsum.photos/200/300?grayscale"></image>
<view class="title">热销榜单</view>
</view>
<view class="content">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="ranking">{{ item+1 }}</view>
</view>
<view class="goods-info">
<view>
<view class="lf-line-2 title">SK-II秋日宠粉体验套装</view>
<view class="desc">月销量：324</view>
</view>
<view class="lf-row-between">
<view class="price">
<text>¥888</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
},
methods: {
}
}
</script>
<style>
page{
background-color: #F8F8F8;
}
</style>
<style lang="scss" scoped="scoped">
.head{
width: 750rpx;
height: 430rpx;
position: relative;
.img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 100rpx;
color: #FFFFFF;
font-weight: bold;
font-family: '楷体';
}
}
.content{
padding: 30rpx 32rpx;
.card{
width: 686rpx;
height: 260rpx;
background: #FFFFFF;
border-radius: 20rpx;
box-sizing: border-box;
padding: 30rpx;
display: flex;
&:nth-child(n+2){
margin-top: 30rpx;
}
.goods-img{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
margin-right: 15rpx;
.img{
width: 100%;
height: 100%;
background-color: #EEEEEE;
}
.ranking{
position: absolute;
top: 0;
left: 0;
width: 36rpx;
height: 38rpx;
background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
}
}
}
.goods-info{
width: 410rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title{
font-size: 28rpx;
color: #222222;
}
.desc{
width: max-content;
height: 35rpx;
border-radius: 18rpx;
background-color: #E9F2F2;
font-size: 24rpx;
color: #15716E;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
padding: 0 10rpx;
}
.price>text:nth-child(1){
font-size: 32rpx;
color: #222222;
font-weight: bold;
}
}
}
}
</style>

159
pages/index/list/selected.vue
View File

@ -0,0 +1,159 @@
<template>
<view>
<lf-nav :showIcon="true" bgColor="transparent" :spreadOut="false"></lf-nav>
<view class="head">
<image class="img" mode="aspectFill" src="https://picsum.photos/200/300?grayscale"></image>
<view class="title">精选榜单</view>
</view>
<view class="content">
<view class="card" v-for="(c_item, c_index) in 3" :key="c_index">
<view class="title" @click="$url('/pages/index/list/monthlyList')">灯具榜 ></view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="goods-img">
<image class="img"></image>
<view class="ranking">{{ item+1 }}</view>
</view>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
<view>￥0.5</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
},
methods: {
}
}
</script>
<style>
page{
background-color: #497C64;
}
</style>
<style lang="scss" scoped="scoped">
.head{
width: 750rpx;
height: 430rpx;
position: relative;
.img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 100rpx;
color: #FFFFFF;
font-weight: bold;
font-family: '楷体';
}
}
.content{
padding: 30rpx 32rpx;
.card{
width: 686rpx;
height: max-content;
padding-bottom: 40rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-bottom: 30rpx;
.title{
width: 181rpx;
height: 60rpx;
background: #15716E;
border-radius: 0rpx 0rpx 15rpx 15rpx;
font-size: 28rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.scroll-view{
height: 280rpx;
width: 100%;
margin-top: 30rpx;
padding: 0 25rpx;
.scroll-content{
display: flex;
width: 100%;
.goods-item{
margin-right: 15rpx;
width: 180rpx;
}
.goods-img{
width: 180rpx;
height: 180rpx;
position: relative;
.img{
width: 100%;
height: 100%;
background-color: #EEEEEE;
border-radius: 10rpx;
}
.ranking{
position: absolute;
top: 0;
left: 0;
width: 36rpx;
height: 38rpx;
background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
}
}
}
.goods-info{
text-align: center;
color: #222222;
&>view:nth-child(1n){
font-size: 24rpx;
}
&>view:nth-child(2n){
font-size: 28rpx;
font-weight: bold;
}
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save