@ -0,0 +1,533 @@ |
|||||||
|
<template> |
||||||
|
<view class="newsshop"> |
||||||
|
<view class="newsshop-navbar"> |
||||||
|
<u-navbar title="元旦主会场" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar> |
||||||
|
</view> |
||||||
|
<view class="newsshop-hd"></view> |
||||||
|
<view class="newsshop-bd"> |
||||||
|
<view class="newsshop-sale"> |
||||||
|
<view class="a"> |
||||||
|
<image src="@/static/news/newshop-03.png"></image> |
||||||
|
</view> |
||||||
|
<view class="info"> |
||||||
|
<scroll-view scroll-x class="b"> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 12" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
<image class="icon" src="@/static/news/newshop-05.png"></image> |
||||||
|
<view class="p">¥<text>23999</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 12" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
<image class="icon" src="@/static/news/newshop-05.png"></image> |
||||||
|
<view class="p">¥<text>23999</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<view class="c" @click="toggleList()">点击查看更多<u-icon style="margin-left: 20rpx;" name="arrow-down"></u-icon></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="newsshop-hot"> |
||||||
|
<view class="a"> |
||||||
|
<image src="@/static/news/newshop-04.png"></image> |
||||||
|
</view> |
||||||
|
<view class="info"> |
||||||
|
<view class="d"> |
||||||
|
<u-tabs font-size="28rpx" active-color="#F34A40" :list="list" :is-scroll="true" v-model="current"></u-tabs> |
||||||
|
</view> |
||||||
|
<scroll-view scroll-x class="b"> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 24" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
<image class="icon" src="@/static/news/newshop-06.png"></image> |
||||||
|
<view class="p">¥<text>23999</text></view> |
||||||
|
<view class="o">160</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 24" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
<image class="icon" src="@/static/news/newshop-06.png"></image> |
||||||
|
<view class="p">¥<text>23999</text></view> |
||||||
|
<view class="o">160</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<view class="c">点击查看更多<u-icon style="margin-left: 20rpx;" name="arrow-down"></u-icon></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="newsshop-new"> |
||||||
|
<view class="a"></view> |
||||||
|
<scroll-view scroll-x class="b"> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<view class="c">点击查看更多<u-icon style="margin-left: 20rpx;" name="arrow-down"></u-icon></view> |
||||||
|
</view> |
||||||
|
<view class="newsshop-new1" > |
||||||
|
<view class="a"> |
||||||
|
</view> |
||||||
|
<scroll-view scroll-x class="b"> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view><view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="li"> |
||||||
|
<view class="item" v-for="i in 16" :key="i"> |
||||||
|
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||||
|
<view class="title">iphone 15pro</view> |
||||||
|
<view class="price"> |
||||||
|
¥<text>23999</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<view class="c">点击查看更多<u-icon style="margin-left: 20rpx;" name="arrow-down"></u-icon></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import img from "@/static/news/newshop-bg.png" |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
current: 0, |
||||||
|
list: [ |
||||||
|
{ |
||||||
|
name:"精选爆款" |
||||||
|
},{ |
||||||
|
name:"家电家电" |
||||||
|
},{ |
||||||
|
name:"手机数码" |
||||||
|
},{ |
||||||
|
name:"食品饮料" |
||||||
|
},{ |
||||||
|
name:"电子信息" |
||||||
|
},{ |
||||||
|
name:"汽车配件" |
||||||
|
},{ |
||||||
|
name:"电脑用品" |
||||||
|
},{ |
||||||
|
name:"健康保健" |
||||||
|
}], |
||||||
|
|
||||||
|
background: { |
||||||
|
background: 'url('+ img+') center top no-repeat', |
||||||
|
backgroundSize: '100% auto', |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.newsshop{ |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
min-height: 100vh; |
||||||
|
background: url(@/static/news/newshop-bg.png) center top no-repeat; |
||||||
|
background-size: 100% auto; |
||||||
|
&-hd{ |
||||||
|
height: 380rpx; |
||||||
|
} |
||||||
|
&-bd{ |
||||||
|
background-color: #f34a40; |
||||||
|
padding-bottom: 30rpx; |
||||||
|
overflow: hidden; |
||||||
|
.c{ |
||||||
|
width: 656rpx; |
||||||
|
height: 83rpx; |
||||||
|
background: #FFE7E3; |
||||||
|
border-radius: 8rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #F34A40; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
&-sale{ |
||||||
|
width: 710rpx; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
.a{ |
||||||
|
width: 100%; |
||||||
|
height: 93rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.info{ |
||||||
|
width: 100%; |
||||||
|
padding: 30rpx 20rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 0 0 10rpx 10rpx; |
||||||
|
.li{ |
||||||
|
margin-top: 20rpx; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
width: 100%; |
||||||
|
white-space: nowrap; |
||||||
|
.item{ |
||||||
|
display: inline-block; |
||||||
|
overflow: hidden; |
||||||
|
margin-left: 20rpx; |
||||||
|
&:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.pic{ |
||||||
|
width: 218rpx; |
||||||
|
height: 218rpx; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #3F3F3F; |
||||||
|
line-height: 50rpx; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.price{ |
||||||
|
width: 215rpx; |
||||||
|
height: 55rpx; |
||||||
|
position: relative; |
||||||
|
.icon{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.p{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
line-height: 55rpx; |
||||||
|
top: 0; |
||||||
|
z-index: 2; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #DE041C; |
||||||
|
padding-left: 5rpx; |
||||||
|
text{ |
||||||
|
font-size: 34rpx; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-hot{ |
||||||
|
width: 710rpx; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
.a{ |
||||||
|
width: 100%; |
||||||
|
height: 93rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.info{ |
||||||
|
width: 100%; |
||||||
|
padding: 0 20rpx 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 0 0 10rpx 10rpx; |
||||||
|
.d{ |
||||||
|
padding: 0 10rpx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
width: 100%; |
||||||
|
white-space: nowrap; |
||||||
|
margin-top: 20rpx; |
||||||
|
.li{ |
||||||
|
margin-top: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.item{ |
||||||
|
display: inline-block; |
||||||
|
overflow: hidden; |
||||||
|
margin-left: 20rpx; |
||||||
|
&:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.pic{ |
||||||
|
width: 218rpx; |
||||||
|
height: 218rpx; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #3F3F3F; |
||||||
|
line-height: 50rpx; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.price{ |
||||||
|
width: 220rpx; |
||||||
|
height: 80rpx; |
||||||
|
position: relative; |
||||||
|
.icon{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.o{ |
||||||
|
width: 80rpx; |
||||||
|
height: 50rpx; |
||||||
|
position: absolute; |
||||||
|
right: 10rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
top: 25rpx; |
||||||
|
z-index: 2; |
||||||
|
font-size: 24rpx; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.p{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
line-height: 80rpx; |
||||||
|
top: 0; |
||||||
|
z-index: 2; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #DE041C; |
||||||
|
padding-left: 5rpx; |
||||||
|
text{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-new{ |
||||||
|
width: 710rpx; |
||||||
|
position: relative; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
overflow: hidden; |
||||||
|
border-radius: 10rpx; |
||||||
|
padding-bottom: 30rpx; |
||||||
|
background: #fff url(@/static/news/newshop-01.png) center top no-repeat; |
||||||
|
background-size: 100% auto; |
||||||
|
.a{ |
||||||
|
height: 190rpx; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
width: 100%; |
||||||
|
padding: 0 20rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
left: 0; |
||||||
|
z-index: 2; |
||||||
|
white-space: nowrap; |
||||||
|
.li{ |
||||||
|
margin-top: 20rpx; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.item{ |
||||||
|
display: inline-block; |
||||||
|
margin-left: 20rpx; |
||||||
|
background: linear-gradient(180deg, #FFFFFF 50%, #FEE5E1 100%); |
||||||
|
box-shadow: -2rpx -2rpx 8rpx 0px rgba(0,0,0,0.07); |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 15rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
&:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.pic{ |
||||||
|
width: 218rpx; |
||||||
|
height: 218rpx; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #3F3F3F; |
||||||
|
line-height: 50rpx; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.price{ |
||||||
|
width: 220rpx; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #DE041C; |
||||||
|
padding-left: 15rpx; |
||||||
|
text{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-new1{ |
||||||
|
width: 710rpx; |
||||||
|
position: relative; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
overflow: hidden; |
||||||
|
border-radius: 10rpx; |
||||||
|
padding-bottom: 30rpx; |
||||||
|
background: #fff url(@/static/news/newshop-02.png) center top no-repeat; |
||||||
|
background-size: 100% auto; |
||||||
|
.a{ |
||||||
|
height: 190rpx; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
width: 100%; |
||||||
|
padding: 0 20rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
left: 0; |
||||||
|
z-index: 2; |
||||||
|
white-space: nowrap; |
||||||
|
.li{ |
||||||
|
margin-top: 20rpx; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.item{ |
||||||
|
display: inline-block; |
||||||
|
margin-left: 20rpx; |
||||||
|
background: linear-gradient(180deg, #FFFFFF 50%, #FEE5E1 100%); |
||||||
|
box-shadow: -2rpx -2rpx 8rpx 0px rgba(0,0,0,0.07); |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 15rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
&:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.pic{ |
||||||
|
width: 218rpx; |
||||||
|
height: 218rpx; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #3F3F3F; |
||||||
|
line-height: 50rpx; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.price{ |
||||||
|
width: 220rpx; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #DE041C; |
||||||
|
padding-left: 15rpx; |
||||||
|
text{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 117 KiB |