zhouzhenyuan
1 year ago
parent
0a3ca8a90a
commit
dc58ccb4f7
@ -0,0 +1,290 @@ |
||||
<template> |
||||
<view class="newGoods"> |
||||
<view> |
||||
<u-navbar title="排行榜" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="main"> |
||||
<!-- <image src="/static/rank/charts.png" mode="" class="bgImg"></image> --> |
||||
<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/hbg.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
background: { |
||||
background: 'url(' + img + ') center -44px no-repeat', |
||||
backgroundSize: '100%' |
||||
}, |
||||
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%; |
||||
padding-bottom: 30rpx; |
||||
position: relative; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
.main { |
||||
width: 100%; |
||||
height: 1996rpx; |
||||
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-color: #333; |
||||
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> |
||||
@ -0,0 +1,276 @@ |
||||
<template> |
||||
<view class="newGoods"> |
||||
<image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> |
||||
<view class="title"> |
||||
新品首发 |
||||
</view> |
||||
<view class="firGoods"> |
||||
<view class="topLine"> |
||||
<view class="left"> |
||||
<view class="goodsName"> |
||||
nava 5z |
||||
</view> |
||||
<view class="goodsDesc"> |
||||
影棚级人像 |
||||
</view> |
||||
<view class="newTip"> |
||||
新品驿站 |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image> |
||||
<image src="/static/newGoods/bg.png" mode="" class="bg"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="goodsList"> |
||||
<!-- v-for="(item,index) in goodsList" --> |
||||
<view class="goodsItem" v-for="(item,index) in 5" :key="index"> |
||||
<view class="hotSell"> |
||||
现货热卖 |
||||
</view> |
||||
<view class="item"> |
||||
<view class="goodsInfo"> |
||||
<view class="goodsDetail"> |
||||
<view class="infoLeft"> |
||||
<view class="gName"> |
||||
Neo9 Pro |
||||
</view> |
||||
<view class="gd"> |
||||
天机9300续航芯，自研电竞芯19Q1 |
||||
</view> |
||||
<view class="gp"> |
||||
低价官网100 |
||||
</view> |
||||
</view> |
||||
<view class="infoRight"> |
||||
<image src="/static/newGoods/goods.png" mode="" class="infoImg"></image> |
||||
</view> |
||||
</view> |
||||
<view class="price"> |
||||
<view class="lowPrice"> |
||||
￥2399起 |
||||
</view> |
||||
<view class="buyNow"> |
||||
立即购买 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.newGoods{ |
||||
width: 100%; |
||||
padding-bottom: 30rpx; |
||||
padding-top: 120rpx; |
||||
position:relative; |
||||
.bgImg{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -10; |
||||
} |
||||
} |
||||
.title{ |
||||
width: 128rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #424242; |
||||
line-height: 44rpx; |
||||
left: 0; |
||||
right: 0; |
||||
margin: auto; |
||||
} |
||||
.firGoods{ |
||||
margin-top: 44rpx; |
||||
margin-left: 56rpx; |
||||
.topLine{ |
||||
display: flex; |
||||
justify-content: center; |
||||
.left{ |
||||
.goodsName{ |
||||
height: 58rpx; |
||||
font-size: 42rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #242424; |
||||
line-height: 58rpx; |
||||
} |
||||
.goodsDesc{ |
||||
width: 280rpx; |
||||
height: 78rpx; |
||||
font-size: 56rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #242424; |
||||
line-height: 78rpx; |
||||
} |
||||
.newTip{ |
||||
width: 156rpx; |
||||
height: 56rpx; |
||||
background: #DA1646; |
||||
opacity: 1; |
||||
border-radius: 25rpx 0 25rpx 25rpx; |
||||
text-align: center; |
||||
font-size: 36rpx; |
||||
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
line-height: 56rpx; |
||||
} |
||||
} |
||||
.right{ |
||||
.goodsImg{ |
||||
width: 414rpx; |
||||
height: 414rpx; |
||||
box-shadow: 0rpx 12rpx 29rpx 0rpx rgba(0,0,0,0.25); |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
z-index: 30; |
||||
} |
||||
.bg{ |
||||
width: 422rpx; |
||||
height: 102rpx; |
||||
position: relative; |
||||
top: -42rpx; |
||||
z-index: -1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.goodsList{ |
||||
.goodsItem{ |
||||
margin-bottom: 32rpx; |
||||
} |
||||
margin-top: 26rpx; |
||||
margin-left: 26rpx; |
||||
.item{ |
||||
width: 700rpx; |
||||
height: 334rpx; |
||||
background: #FDE7D5; |
||||
border-radius: 12rpx 12rpx 12rpx 12rpx; |
||||
opacity: 1; |
||||
padding: 8rpx 10rpx 10rpx; |
||||
} |
||||
.hotSell{ |
||||
width: 226rpx; |
||||
height: 82rpx; |
||||
background: linear-gradient(180deg, #FDE7D5 0%, #FFDCC3 100%); |
||||
opacity: 1; |
||||
text-align: center; |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #C82821; |
||||
line-height: 82rpx; |
||||
position: relative; |
||||
top: 8rpx; |
||||
border-radius: 20rpx 20rpx 0 0; |
||||
} |
||||
.goodsInfo{ |
||||
width: 680rpx; |
||||
height: 316rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
padding-left: 28rpx; |
||||
.goodsDetail{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
position: relative; |
||||
.infoLeft{ |
||||
.gName{ |
||||
// width: 180rpx; |
||||
height: 56rpx; |
||||
font-size: 40rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #3F3F3F; |
||||
line-height: 56rpx; |
||||
margin-top: 32rpx; |
||||
} |
||||
.gd{ |
||||
width: 362rpx; |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #9F9F9F; |
||||
line-height: 38rpx; |
||||
} |
||||
.gp{ |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #DE041C; |
||||
line-height: 38rpx; |
||||
} |
||||
} |
||||
.infoRight{ |
||||
width: 290rpx; |
||||
height: 290rpx; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
margin-left: 14rpx; |
||||
.infoImg{ |
||||
width: 290rpx; |
||||
height: 290rpx; |
||||
} |
||||
position: absolute; |
||||
top: -68rpx; |
||||
right: 0; |
||||
} |
||||
} |
||||
.price{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin-top: 14rpx; |
||||
.lowPrice{ |
||||
height: 50rpx; |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #DE041C; |
||||
line-height: 50rpx; |
||||
margin-right: 30rpx; |
||||
} |
||||
.buyNow{ |
||||
width: 174rpx; |
||||
height: 58rpx; |
||||
background: linear-gradient(180deg, #FC522C 0%, #FA2929 100%); |
||||
border-radius: 58rpx 58rpx 58rpx 58rpx; |
||||
opacity: 1; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 58rpx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,243 @@ |
||||
<template> |
||||
<view class="newGoods"> |
||||
<image src="/static/rank/rangkImg.png" mode="" class="bgImg"></image> |
||||
<view class="title"> |
||||
排行榜 |
||||
</view> |
||||
<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"> |
||||
<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> |
||||
export default { |
||||
data() { |
||||
return { |
||||
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%; |
||||
padding-bottom: 30rpx; |
||||
padding-top: 120rpx; |
||||
position: relative; |
||||
min-height:100vh ; |
||||
.bgImg { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -10; |
||||
} |
||||
} |
||||
|
||||
.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: 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> |
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in new issue