wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新年换新

Browse Source
dev
syt 1 year ago
parent 7abe30c0d8
commit 04bbb5aebe
9 changed files with 543 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      pages.json
  2. 533
      pages/activity/newsshop.vue
  3. BIN
      static/news/newshop-01.png
  4. BIN
      static/news/newshop-02.png
  5. BIN
      static/news/newshop-03.png
  6. BIN
      static/news/newshop-04.png
  7. BIN
      static/news/newshop-05.png
  8. BIN
      static/news/newshop-06.png
  9. BIN
      static/news/newshop-bg.png

10
pages.json
Unescape View File

@ -507,6 +507,16 @@
}
}
,{
"path" : "pages/activity/newsshop",
"style" :
{
"navigationBarTitleText": "新年换新",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
// #ifdef H5

533
pages/activity/newsshop.vue
Unescape View File

@ -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>

BIN
static/news/newshop-01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
static/news/newshop-02.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
static/news/newshop-03.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/news/newshop-04.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/news/newshop-05.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/news/newshop-06.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/news/newshop-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

Write Preview
Loading…
Cancel
Save