|
|
|
@ -1,8 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="newGoods"> |
|
|
|
|
<image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> |
|
|
|
|
<view class="title"> |
|
|
|
|
新品首发 |
|
|
|
|
<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> --> |
|
|
|
|
<view > |
|
|
|
|
<u-navbar title="新品首发" back-icon-color="#fff" :border-bottom="false" title-color="#333" :background="background"></u-navbar> |
|
|
|
|
</view> |
|
|
|
|
<view class="firGoods"> |
|
|
|
|
<view class="topLine"> |
|
|
|
@ -18,13 +18,12 @@ |
|
|
|
|
</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> |
|
|
|
|
<!-- <image src="/static/newGoods/bg.png" mode="" class="bg"></image> --> |
|
|
|
|
<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></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"> |
|
|
|
|
现货热卖 |
|
|
|
@ -65,10 +64,14 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import img from "@/static/member/head.png" |
|
|
|
|
export default{ |
|
|
|
|
data(){ |
|
|
|
|
return{ |
|
|
|
|
|
|
|
|
|
background: { |
|
|
|
|
background: 'url('+ img+') center top no-repeat', |
|
|
|
|
backgroundSize: '100% auto', |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -77,8 +80,6 @@ |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.newGoods{ |
|
|
|
|
width: 100%; |
|
|
|
|
padding-bottom: 30rpx; |
|
|
|
|
padding-top: 120rpx; |
|
|
|
|
position:relative; |
|
|
|
|
.bgImg{ |
|
|
|
|
width: 100%; |
|
|
|
@ -89,25 +90,18 @@ |
|
|
|
|
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; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 548rpx; |
|
|
|
|
background-image: url('/static/newGoods/top.png'); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
padding-left: 30rpx; |
|
|
|
|
padding-top: 44rpx; |
|
|
|
|
.topLine{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
.left{ |
|
|
|
|
margin-top: 132rpx; |
|
|
|
|
.goodsName{ |
|
|
|
|
height: 58rpx; |
|
|
|
|
font-size: 42rpx; |
|
|
|
@ -140,30 +134,41 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
background-image: url('../../static/newGoods/bg.png'); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size:422rpx 102rpx ; |
|
|
|
|
position: relative; |
|
|
|
|
background-position: left bottom; |
|
|
|
|
height: 500rpx; |
|
|
|
|
.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; |
|
|
|
|
z-index: 99; |
|
|
|
|
} |
|
|
|
|
.bg{ |
|
|
|
|
width: 422rpx; |
|
|
|
|
height: 102rpx; |
|
|
|
|
position: relative; |
|
|
|
|
top: -42rpx; |
|
|
|
|
z-index: -1; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 374rpx; |
|
|
|
|
z-index: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.goodsList{ |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 26rpx 0 30rpx 26rpx; |
|
|
|
|
background-image: url('/static/newGoods/bot.png'); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
.goodsItem{ |
|
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
} |
|
|
|
|
margin-top: 26rpx; |
|
|
|
|
margin-left: 26rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.item{ |
|
|
|
|
width: 700rpx; |
|
|
|
|
height: 334rpx; |
|
|
|
|