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.
238 lines
4.9 KiB
238 lines
4.9 KiB
<template>
|
|
<view class="newGoods">
|
|
<view >
|
|
<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar>
|
|
</view>
|
|
<image src="/static/rank/rangkImg.png" mode="" class="bgImg"></image>
|
|
<view class="headTitle">
|
|
全站热销好物
|
|
</view>
|
|
<view class="ranking">
|
|
- 实时排名 -
|
|
</view>
|
|
<view class="menuList">
|
|
<scroll-view scroll-x="true" class="list">
|
|
<view class="menuItem" v-for="(item,index) in menuList" :key="index">
|
|
<view class="menuName">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="line" v-if="chosed==item.value">
|
|
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="rankList" v-for="(s,k) in 4" :key="k">
|
|
<view class="firLine" @click="goDetail">
|
|
<view class="hotTitle">手机热销榜</view>
|
|
<view class="opera">
|
|
<text>更多上榜好物</text>
|
|
<image src="../../static/order/left.png" mode="" class="more"></image>
|
|
</view>
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="goodsItem" v-for="(item,index) in 3" :key="index">
|
|
<image src="/static/rank/topOne.png" mode="" class="topOne" v-if="index==0"></image>
|
|
<image src="/static/rank/topTwo.png" mode="" class="topOne" v-if="index==1"></image>
|
|
<image src="/static/rank/topThree.png" mode="" class="topOne" v-if="index==2"></image>
|
|
<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
Neo9 Pro...
|
|
</view>
|
|
<view class="goodsPrice">
|
|
￥2399
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/static/rank/rank1.png"
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
background: 'url('+ img+') center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
chosed:0,
|
|
menuList:[
|
|
{
|
|
name:'精选',
|
|
value:0
|
|
},{
|
|
name:'手机通讯',
|
|
value:1
|
|
},{
|
|
name:'电脑',
|
|
value:2
|
|
},{
|
|
name:'家用电器',
|
|
value:3
|
|
},{
|
|
name:'美妆',
|
|
value:4
|
|
},
|
|
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
goDetail(){
|
|
uni.navigateTo({
|
|
url:'/pages/activity/charts'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.newGoods {
|
|
width: 100%;
|
|
position: relative;
|
|
min-height:100vh ;
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -10;
|
|
}
|
|
}
|
|
.headTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 98rpx;
|
|
font-size: 76rpx;
|
|
font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 98rpx;
|
|
text-shadow: 8px 2px 15px #FF5F4C;
|
|
}
|
|
|
|
.ranking {
|
|
width: 430rpx;
|
|
height: 150rpx;
|
|
padding-top: 22rpx;
|
|
background-image: url('../../static/rank/timeRank.png');
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
.menuList{
|
|
margin-top: 34rpx;
|
|
width: 100%;
|
|
padding-left: 50rpx;
|
|
.list{
|
|
white-space: nowrap;
|
|
}
|
|
.menuItem{
|
|
display: inline-block;
|
|
margin-right: 62rpx;
|
|
.menuName{
|
|
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
}
|
|
.line{
|
|
width: 70rpx;
|
|
height: 10rpx;
|
|
background: #FFE4C3;
|
|
border-radius: 72rpx 72rpx 72rpx 72rpx;
|
|
opacity: 1;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
.rankList{
|
|
width: 702rpx;
|
|
height: 456rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
opacity: 1;
|
|
margin: 28rpx 0 0 22rpx;
|
|
padding: 32rpx;
|
|
.firLine{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.hotTitle{
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #0E0E0E;
|
|
line-height: 50rpx;
|
|
}
|
|
.opera{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9F9F9F;
|
|
line-height: 44rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
.more{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.goodsList{
|
|
display: flex;
|
|
margin-top: 86rpx;
|
|
margin-left: 18rpx;
|
|
justify-content: space-around;
|
|
.goodsItem{
|
|
position: relative;
|
|
.topOne{
|
|
width: 48rpx;
|
|
height: 66rpx;
|
|
position: absolute;
|
|
top:-38rpx;
|
|
left: -28rpx;
|
|
}
|
|
.goodsImg{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
.goodsName{
|
|
width: 150rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 40rpx;
|
|
margin: 8rpx 0 4rpx 0;
|
|
}
|
|
.goodsPrice{
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #DE041C;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |