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.
252 lines
5.7 KiB
252 lines
5.7 KiB
<template>
|
|
<view class="home">
|
|
<view class="hometitle" :style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',marginLeft:0,lineHeight:navBarHeight + 'px'}">首页</view>
|
|
|
|
<view class="swiper-box" :style="{marginTop:navBarHeight +10+ 'px'}">
|
|
<u-swiper :list="list" height="400" border-radius="20"></u-swiper>
|
|
</view>
|
|
<view class="welcome">
|
|
<image src="../../static/images/Welcome.png" mode="heightFix"></image>
|
|
<text>首次注册立享新人券</text>
|
|
</view>
|
|
<view class="notice">
|
|
<image src="../../static/images/noice.png" mode="widthFix"></image>
|
|
<u-notice-bar mode="vertical"
|
|
:list="noticeList"
|
|
style="flex:1"
|
|
:volume-icon="false"
|
|
type="none"
|
|
color="#111111"
|
|
font-size="28"
|
|
:more-icon="true"></u-notice-bar>
|
|
</view>
|
|
<view class="flagGroup">
|
|
<view class="flag">
|
|
<image src="../../static/images/m1.png" mode="widthFix"></image>
|
|
<view class="desc">100%正品</view>
|
|
</view>
|
|
<view class="devide"></view>
|
|
<view class="flag">
|
|
<image src="../../static/images/m2.png" mode="widthFix"></image>
|
|
<view class="desc">精选上新</view>
|
|
</view>
|
|
<view class="devide"></view>
|
|
<view class="flag">
|
|
<image src="../../static/images/m3.png" mode="widthFix"></image>
|
|
<view class="desc">多重惊喜</view>
|
|
</view>
|
|
</view>
|
|
<view class="shopList">
|
|
<view class="shopItem" v-for="(item,index) in shopList" :key="index">
|
|
<view class="shopImg">
|
|
<image :src="item.img" mode="heightFix"></image>
|
|
</view>
|
|
<view class="infoBox">
|
|
<view class="shopTitle">
|
|
<image src="../../static/images/xinp.png" mode="widthFix"></image>
|
|
<text>{{item.title}}</text>
|
|
</view>
|
|
<view class="progress">
|
|
<u-line-progress active-color="#F0D2A0"
|
|
:show-percent="false" height="20"
|
|
style="width: 60%;"
|
|
inactive-color="#F6EEE6" :percent="70"></u-line-progress>
|
|
<text>已售{{item.num}}套</text>
|
|
</view>
|
|
<view class="price">
|
|
<view class="priceInfo">
|
|
<text class="mainPrice">￥{{item.mainprice}}</text>
|
|
<text class="subPrice">￥{{item.subprice}}</text>
|
|
</view>
|
|
<view class="btn">去抢购</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
noticeList: [
|
|
'新活动上新拉！赶紧抢先一步点击查看~'
|
|
],
|
|
list: ['/static/images/home.png'],
|
|
shopList:[
|
|
{
|
|
img:'../../static/images/shopdesc.png',
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌',
|
|
num:288,
|
|
mainprice:389.00,
|
|
subprice:999.00
|
|
},
|
|
{
|
|
img:'../../static/images/shopdesc.png',
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌',
|
|
num:288,
|
|
mainprice:389.00,
|
|
subprice:999.00
|
|
}
|
|
],
|
|
navBarTop:0,
|
|
navBarHeight:0
|
|
};
|
|
},
|
|
onLoad() {
|
|
let statuBar = uni.getSystemInfoSync().statusBarHeight;
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
|
|
this.navBarTop = menuButtonInfo.top;
|
|
this.navBarHeight = menuButtonInfo.height;
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home{
|
|
min-height: calc(100vh);
|
|
background-color: #21222B;
|
|
padding:0 25upx;
|
|
.hometitle{
|
|
font-size: 34upx;
|
|
color: #FFFFFF;
|
|
// padding-top: 30px;
|
|
// margin-bottom: 49upx;
|
|
}
|
|
.welcome{
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 6upx 16upx 0px rgba(25,25,25,0.05);
|
|
border-radius: 20upx;
|
|
padding:39upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin:24upx 0;
|
|
image{
|
|
height:27upx;
|
|
}
|
|
text{
|
|
|
|
font-size: 34upx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.notice{
|
|
background: #F0D2A0;
|
|
border-radius: 20upx;
|
|
padding:29upx;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width:38upx;
|
|
height:auto;
|
|
}
|
|
}
|
|
.flagGroup{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin:40upx 0;
|
|
.flag{
|
|
text-align: center;
|
|
image{
|
|
width:54upx;
|
|
}
|
|
.desc{
|
|
font-size: 28upx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #F0D2A0;
|
|
margin-top:22upx;
|
|
}
|
|
}
|
|
.devide{
|
|
width: 1px;
|
|
height: 90upx;
|
|
border: 1px solid #494A53;
|
|
}
|
|
}
|
|
.shopList{
|
|
padding-bottom: 16rpx;
|
|
.shopItem{
|
|
// height: 650px;
|
|
margin-bottom: 24upx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05);
|
|
border-radius: 20upx;
|
|
overflow: hidden;
|
|
.shopImg{
|
|
height: 400upx;
|
|
background: #D3D3D3;
|
|
box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05);
|
|
border-radius: 20upx 20upx 0upx 0upx;
|
|
image{
|
|
height:100%;
|
|
}
|
|
}
|
|
.infoBox{
|
|
margin-top: 20upx;
|
|
.shopTitle{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image{
|
|
width:180upx;
|
|
height:auto
|
|
}
|
|
text{
|
|
font-size: 34upx;
|
|
color: #333333;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin-left: 22upx;
|
|
}
|
|
}
|
|
.progress{
|
|
display: flex;
|
|
align-items: center;
|
|
padding:0 30upx;
|
|
margin: 30upx 0;
|
|
text{
|
|
margin-left: 22upx;
|
|
font-size: 24upx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding:0 30upx;
|
|
margin-bottom: 30upx;
|
|
.mainPrice{
|
|
font-size: 34upx;
|
|
color: #111111;
|
|
font-weight: bold;
|
|
}
|
|
.subPrice{
|
|
font-size: 24upx;
|
|
text-decoration: line-through;
|
|
color: #C4BFBC;
|
|
margin-left:20upx;
|
|
}
|
|
.btn{
|
|
padding:20upx 46upx;
|
|
background: #111111;
|
|
border: 1px solid #EAEAEA;
|
|
border-radius: 33px;
|
|
font-size: 30upx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|