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.
287 lines
5.9 KiB
287 lines
5.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>
|
|
<view class="main">
|
|
<view class="head">
|
|
<view class="ranking">
|
|
-好物排行榜-
|
|
</view>
|
|
<view class="headTitle">
|
|
手机热销榜
|
|
</view>
|
|
<view class="ques">
|
|
根据商品销量等级排序|每日更新
|
|
</view>
|
|
</view>
|
|
<view class="hb">
|
|
<view class="goodsList" v-for="(item,index) in 3" :key="index">
|
|
<view class="goodsDetail">
|
|
<image src="../../static/rank/topOne.png" mode="" class="topOne"></image>
|
|
<view class="goodsInfo">
|
|
<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
<view class="name">
|
|
Apple iphone 15(A3092)
|
|
支持移动联通电信5G双卡双待手机
|
|
</view>
|
|
<view class="hot">
|
|
<text class="hotTitle">HOT</text>
|
|
<text class="zs">综合热卖指数9.8</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="opera">
|
|
<view class="price">
|
|
￥<text>2399</text>
|
|
</view>
|
|
<view class="look">
|
|
去看看
|
|
<image src="/static/rank/right.png" mode="" class="right"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/static/rank/top.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
|
|
},
|
|
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.newGoods {
|
|
width: 100%;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -10;
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 360rpx;
|
|
background-image: url('../../static/rank/head.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 58rpx;
|
|
width: 128rpx;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
line-height: 44rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.headTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 98rpx;
|
|
font-size: 60rpx;
|
|
font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 98rpx;
|
|
text-shadow: 8px 2px 15px #FF5F4C;
|
|
}
|
|
|
|
.ranking {
|
|
margin-top: 22rpx;
|
|
width: 430rpx;
|
|
height: 112rpx;
|
|
padding-top: 18rpx;
|
|
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;
|
|
}
|
|
|
|
.ques {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.hb {
|
|
background-image: url('../../static/rank/mainbg.png');
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 30rpx;
|
|
|
|
.goodsList {
|
|
width: 700rpx;
|
|
height: 440rpx;
|
|
background: #FCE5C6;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
margin-bottom: 42rpx;
|
|
.goodsDetail {
|
|
width: 700rpx;
|
|
height: 336rpx;
|
|
padding: 54rpx 0 0 52rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
opacity: 1;
|
|
position: relative;
|
|
.topOne{
|
|
width:73rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
left: 36rpx;
|
|
top: -8rpx;
|
|
}
|
|
.goodsInfo {
|
|
display: flex;
|
|
.goodsImg{
|
|
width: 224rpx;
|
|
height: 224rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
margin-right: 16rpx;
|
|
}
|
|
.goodsName{
|
|
.name{
|
|
width: 396rpx;
|
|
height: 132rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0E0E0E;
|
|
line-height: 38rpx;
|
|
}
|
|
.hot{
|
|
width: 336rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(90deg, #FCE5C6 0%, #FFFFFF 100%);
|
|
border-radius: 70rpx 70rpx 70rpx 70rpx;
|
|
opacity: 1;
|
|
margin-top: 16rpx;
|
|
.hotTitle{
|
|
margin-right: 8rpx;
|
|
width: 68rpx;
|
|
height: 42rpx;
|
|
font-size: 32rpx;
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
|
font-weight: 600;
|
|
line-height: 60rpx;
|
|
margin-left: 8rpx;
|
|
background: -webkit-linear-gradient(180deg, #FFA621 0%, #F34A40 100%);
|
|
-webkit-text-fill-color:transparent;
|
|
-webkit-background-clip:text;
|
|
}
|
|
.zs{
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9F6516;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.opera{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 104rpx;
|
|
.price{
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #301F14;
|
|
line-height: 44rpx;
|
|
text{
|
|
font-size: 48rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #301F14;
|
|
line-height: 68rpx;
|
|
}
|
|
}
|
|
.look{
|
|
width: 202rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%);
|
|
border-radius: 70rpx 70rpx 70rpx 70rpx;
|
|
opacity: 1;
|
|
margin-right: 22rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
.right{
|
|
width: 20rpx;
|
|
height: 18rpx;
|
|
margin-left:26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |