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.
1082 lines
21 KiB
1082 lines
21 KiB
<template>
|
|
<view class="page">
|
|
<view class="box_1">
|
|
<view class="box_3">
|
|
<view class="group_2">
|
|
<view class="group_3">
|
|
<view class="text-wrapper_1">
|
|
<text lines="1" class="text_1">首页</text>
|
|
</view>
|
|
<text lines="1" class="text_2">同城送</text>
|
|
</view>
|
|
</view>
|
|
<view class="group_4">
|
|
<view class="group_5">
|
|
<view class="image-text_6">
|
|
<image src="../../static/home/search.png" mode="" class="box_4"></image>
|
|
<text lines="1" decode="true" class="text-group_6">iPhone 15</text>
|
|
</view>
|
|
<view class="text-wrapper_2">
|
|
<text lines="1" class="text_3">搜索</text>
|
|
</view>
|
|
</view>
|
|
<view class="group_6">
|
|
<view class="text-wrapper_3">
|
|
<text lines="1" class="text_4">4</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="group_7">
|
|
<text lines="1" class="text_5" v-for="(item,index) in 6" :key="index">手机</text>
|
|
</view>
|
|
<view class="group_9"></view>
|
|
<view class="group_10">
|
|
<view class="list_1">
|
|
<view class="image-text_8-0" v-for="(item,index) in 10" :key="index">
|
|
<image src="/static/home/demoPng.png" class="label_2-0"></image>
|
|
<text lines="1" class="text-group_8-0">HuaWei</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="big">
|
|
<view class="bigheader">
|
|
<view class="card">
|
|
大牌正品
|
|
</view>
|
|
<view class="shop">
|
|
<text class="shopText">店内到货</text>
|
|
</view>
|
|
</view>
|
|
<view class="sellGoods">
|
|
<view v-for="(item,index) in 10" :key="index" class="goodsItem">
|
|
<view class="goodsImage">
|
|
<image src="/static/home/goodsDemo.png" mode=""></image>
|
|
</view>
|
|
<view class="goodsPrice">
|
|
<text class="price">￥1428</text>
|
|
</view>
|
|
<view class="goodsName">
|
|
松下洗衣机
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="limitTime">
|
|
<view class="limitHeadr">
|
|
<view class="headerTitle">
|
|
限时抢购
|
|
</view>
|
|
<view class="residue">
|
|
本场剩余
|
|
<view class="">
|
|
20
|
|
</view>
|
|
:
|
|
<view class="">
|
|
56
|
|
</view>
|
|
:
|
|
<view class="">
|
|
47
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="limitGoods">
|
|
<view v-for="(item,index) in 5" :key="index" class="limitItem">
|
|
<view class="limitImg">
|
|
<image src="../../static/home/goodsDemo.png" mode=""></image>
|
|
</view>
|
|
<view class="price">
|
|
<view class="limitPrice">
|
|
￥372
|
|
</view>
|
|
<view class="oldPrice">
|
|
￥2428
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="newGoods">
|
|
<view class="newImage">
|
|
<image src="../../static/home/newImg.png" mode=""></image>
|
|
</view>
|
|
<view class="newRight">
|
|
<view class="newFirt">
|
|
<view class="starting">
|
|
新品首发
|
|
</view>
|
|
<view class="firstGoods">
|
|
<view v-for="(item,index) in 3" :key="index" class="goodsItem">
|
|
<image src="/static/home/phone.jpg" mode=""></image>
|
|
<view class="firstPrice">
|
|
￥1428
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="ranking newFirt">
|
|
<view class="starting">
|
|
排行榜
|
|
<text class="hotSell">热卖好物专场</text>
|
|
</view>
|
|
<view class="firstGoods">
|
|
<view v-for="(item,index) in 3" :key="index" class="goodsItem">
|
|
<image src="/static/home/phone.jpg" mode=""></image>
|
|
<view class="firstPrice">
|
|
￥1428
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="group_11" v-for="(item,index) in 8" :key="index">
|
|
<view class="block_2">
|
|
<image src="/static/home/phone.jpg" class="image_3"></image>
|
|
<view class="box_6">
|
|
<view class="text-wrapper_4">
|
|
<text lines="1" class="text_12">自营</text>
|
|
</view>
|
|
<text lines="1" decode="true" class="text_13">iphone13 绿色 128GB</text>
|
|
</view>
|
|
<view class="text-wrapper_5">
|
|
<text lines="1" class="text_14">¥</text>
|
|
<text lines="1" class="text_15">7599</text>
|
|
<text lines="1" class="text_16">到手价</text>
|
|
<text lines="1" class="text_17">¥7089</text>
|
|
</view>
|
|
<text lines="1" decode="true" class="text_18">200+条评论 99%好评率</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
goodsList: [
|
|
|
|
],
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: url('../../static/home/homeback.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.box_1 {
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 100%;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.box_2 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
height: 160rpx;
|
|
width: 750rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 2032rpx 0 0 -6rpx;
|
|
}
|
|
|
|
.section_1 {
|
|
width: 608rpx;
|
|
height: 84rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
margin: 12rpx 0 0 74rpx;
|
|
}
|
|
|
|
.image-text_1 {
|
|
width: 48rpx;
|
|
height: 84rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.image_1 {
|
|
width: 38rpx;
|
|
height: 44rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.text-group_1 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 23, 0, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.image-text_2 {
|
|
width: 48rpx;
|
|
height: 76rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 8rpx 0 0 86rpx;
|
|
}
|
|
|
|
.label_1 {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.text-group_2 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(124, 124, 124, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.image-text_3 {
|
|
width: 48rpx;
|
|
height: 74rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 10rpx 0 0 94rpx;
|
|
}
|
|
|
|
.thumbnail_1 {
|
|
width: 40rpx;
|
|
height: 36rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.text-group_3 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(124, 124, 124, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.image-text_4 {
|
|
width: 72rpx;
|
|
height: 74rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 10rpx 0 0 88rpx;
|
|
}
|
|
|
|
.thumbnail_2 {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.text-group_4 {
|
|
width: 72rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(124, 124, 124, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.image-text_5 {
|
|
width: 48rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 12rpx 0 0 76rpx;
|
|
}
|
|
|
|
.thumbnail_3 {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.text-group_5 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(124, 124, 124, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.section_2 {
|
|
width: 272rpx;
|
|
height: 8rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 32rpx 0 24rpx 228rpx;
|
|
}
|
|
|
|
.group_1 {
|
|
background-color: rgba(0, 0, 0, 1.000000);
|
|
border-radius: 58rpx;
|
|
width: 272rpx;
|
|
height: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.box_3 {
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 2034rpx;
|
|
margin-left: -744rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.group_2 {
|
|
width: 482rpx;
|
|
height: 56rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 94rpx 0 0 242rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.group_3 {
|
|
background-color: rgba(255, 255, 255, 0.510000);
|
|
border-radius: 68rpx;
|
|
width: 212rpx;
|
|
height: 56rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.text-wrapper_1 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
border-radius: 68rpx;
|
|
height: 48rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 94rpx;
|
|
margin: 4rpx 0 0 4rpx;
|
|
}
|
|
|
|
.text_1 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(251, 33, 61, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin: 8rpx 0 0 22rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
width: 72rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin: 12rpx 24rpx 0 18rpx;
|
|
}
|
|
|
|
.image_2 {
|
|
width: 158rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.group_4 {
|
|
width: 658rpx;
|
|
height: 64rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 14rpx 0 0 36rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.group_5 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
border-radius: 68rpx;
|
|
width: 590rpx;
|
|
height: 64rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.image-text_6 {
|
|
width: 176rpx;
|
|
height: 40rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 12rpx 0 0 22rpx;
|
|
}
|
|
|
|
.box_4 {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.text-group_6 {
|
|
width: 126rpx;
|
|
height: 40rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(141, 141, 141, 1.000000);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.text-wrapper_2 {
|
|
background-color: rgba(243, 32, 42, 1.000000);
|
|
border-radius: 48rpx;
|
|
height: 56rpx;
|
|
line-height: 40rpx;
|
|
display: flex;
|
|
text-align: center;
|
|
width: 126rpx;
|
|
margin: 4rpx 4rpx 0 262rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.text_3 {
|
|
width: 56rpx;
|
|
height: 40rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1.000000);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
margin: 8rpx 0 0 36rpx;
|
|
}
|
|
|
|
.group_6 {
|
|
background-image: url('../../static/home/news.png');
|
|
background-size: 100% 100%;
|
|
height: 44rpx;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 48rpx;
|
|
}
|
|
|
|
.text-wrapper_3 {
|
|
background: #F3202A;
|
|
border-radius: 100%;
|
|
height: 30rpx;
|
|
display: flex;
|
|
text-align: center;
|
|
align-items: center;
|
|
width: 30rpx;
|
|
margin: -8rpx 0 0 34rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
width: 16rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Medium;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 34rpx;
|
|
margin: -4rpx 0 0 8rpx;
|
|
}
|
|
|
|
.group_7 {
|
|
width: 660rpx;
|
|
height: 44rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
margin: 14rpx 0 0 40rpx;
|
|
}
|
|
|
|
.text_5 {
|
|
width: 56rpx;
|
|
height: 40rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(40, 40, 40, 1.000000);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
margin-top: 4rpx;
|
|
margin-right: 54rpx;
|
|
}
|
|
|
|
.group_9 {
|
|
background-color: rgba(251, 48, 51, 1.000000);
|
|
width: 20rpx;
|
|
height: 8rpx;
|
|
margin-left: 172rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.group_10 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
border-radius: 8rpx;
|
|
width: 700rpx;
|
|
height: 354rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 12rpx 0 0 20rpx;
|
|
}
|
|
|
|
.goodsList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 354rpx;
|
|
}
|
|
|
|
.big {
|
|
width: 696rpx;
|
|
height: 408rpx;
|
|
background-image: url('../../static/home/bigBack.png');
|
|
background-size: 100% 100%;
|
|
margin-top: 16rpx;
|
|
margin-left: 20rpx;
|
|
padding-left: 20rpx;
|
|
|
|
.bigheader {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.card {
|
|
width: 190rpx;
|
|
height: 58rpx;
|
|
font-size: 44rpx;
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
color: #303030;
|
|
line-height: 58rpx;
|
|
}
|
|
|
|
.shop {
|
|
width: 148rpx;
|
|
height: 42rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #8C4D00;
|
|
line-height: 42rpx;
|
|
background-image: url('../../static/home/shopBack.png');
|
|
margin-left: 12rpx;
|
|
|
|
.shopText {
|
|
width: 96rpx;
|
|
text-align: center;
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sellGoods {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.goodsItem {
|
|
width: 134rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
|
|
.goodsImage {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goodsPrice {
|
|
width: 134rpx;
|
|
height: 34rpx;
|
|
position: relative;
|
|
top: -6rpx;
|
|
background-image: url('../../static/home/priceBack.png');
|
|
background-size: 100% 100;
|
|
text-align: center;
|
|
|
|
.price {
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.goodsName {
|
|
width: 100rpx;
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #505050;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.limitTime {
|
|
width: 694rpx;
|
|
height: 234rpx;
|
|
background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%);
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
opacity: 1;
|
|
margin-left: 20rpx;
|
|
margin-top: 14rpx;
|
|
|
|
.limitHeadr {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.headerTitle {
|
|
width: 159rpx;
|
|
height: 60rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
}
|
|
|
|
.residue {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.limitGoods {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 24rpx;
|
|
|
|
.limitItem {
|
|
width: 116rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
margin-right: 14rpx;
|
|
|
|
.limitImg {
|
|
width: 100%;
|
|
height: 106rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
width: 116rpx;
|
|
position: relative;
|
|
top: -32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
|
|
.limitPrice {
|
|
width: 82rpx;
|
|
height: 32rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
background-image: url('../../static/home/tip.png');
|
|
}
|
|
|
|
.oldPrice {
|
|
width: 116rpx;
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #8E8E8E;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.newGoods {
|
|
width: 694rpx;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.newImage {
|
|
width: 300rpx;
|
|
height: 436rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
opacity: 1;
|
|
margin-top: 14rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.newRight {
|
|
margin-top: 14rpx;
|
|
marign-left: 14rpx;
|
|
width: 390rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
.newFirt {
|
|
width: 390rpx;
|
|
height: 208rpx;
|
|
background-image: url('../../static/home/newFirst.png');
|
|
background-size: 100% 100%;
|
|
|
|
.starting {
|
|
text-align: left;
|
|
width: 300rpx;
|
|
height: 58rpx;
|
|
font-size: 40rpx;
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 58rpx;
|
|
margin: 14rpx 0 0 26rpx;
|
|
|
|
.hotSell {
|
|
;
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #454545;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.firstGoods {
|
|
display: flex;
|
|
|
|
.goodsItem {
|
|
position: relative;
|
|
width: 112rpx;
|
|
height: 140rpx;
|
|
margin-left: 26rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.firstPrice {
|
|
width: 112rpx;
|
|
height: 34rpx;
|
|
position: absolute;
|
|
background-image: url('../../static/home/priceBack.png');
|
|
background-size: 100% 100%;
|
|
top: 100rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.ranking {
|
|
margin-top: 16rpx;
|
|
width: 390rpx;
|
|
height: 208rpx;
|
|
background-image: url('../../static/home/ranking.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list_1 {
|
|
width: 100%;
|
|
height: 122rpx;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
margin: 26rpx 0 0 28rpx;
|
|
}
|
|
|
|
.image-text_8-0 {
|
|
width: 84rpx;
|
|
height: 122rpx;
|
|
margin-right: 54rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.label_2-0 {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
|
|
.text-group_8-0 {
|
|
width: 84rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1.000000);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.image-text_8-3 {
|
|
width: 84rpx;
|
|
height: 122rpx;
|
|
margin-right: 54rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.group_11 {
|
|
width: 340rpx;
|
|
height: 438rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 14rpx 0 0 16rpx;
|
|
}
|
|
|
|
.block_2 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
border-radius: 8rpx;
|
|
width: 340rpx;
|
|
height: 436rpx;
|
|
margin-top: 2rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-center;
|
|
}
|
|
|
|
.image_3 {
|
|
width: 276rpx;
|
|
height: 252rpx;
|
|
margin: 20rpx 0 0 28rpx;
|
|
}
|
|
|
|
.box_6 {
|
|
width: 300rpx;
|
|
height: 34rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 14rpx 0 0 28rpx;
|
|
}
|
|
|
|
.text-wrapper_4 {
|
|
background-color: rgba(255, 68, 56, 1.000000);
|
|
border-radius: 4rpx;
|
|
height: 34rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 58rpx;
|
|
}
|
|
|
|
.text_12 {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.text_13 {
|
|
width: 236rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(30, 30, 30, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.text-wrapper_5 {
|
|
width: 242rpx;
|
|
height: 50rpx;
|
|
flex-direction: row;
|
|
display: flex;
|
|
margin: 20rpx 0 0 34rpx;
|
|
}
|
|
|
|
.text_14 {
|
|
width: 16rpx;
|
|
height: 34rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(242, 26, 28, 1.000000);
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.text_15 {
|
|
width: 86rpx;
|
|
height: 50rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(242, 26, 28, 1.000000);
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.text_16 {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(242, 26, 28, 1.000000);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Medium;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 14rpx 0 0 4rpx;
|
|
}
|
|
|
|
.text_17 {
|
|
width: 66rpx;
|
|
height: 30rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(148, 148, 148, 1.000000);
|
|
font-size: 22rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 22rpx;
|
|
margin: 16rpx 0 0 10rpx;
|
|
}
|
|
|
|
.text_18 {
|
|
width: 220rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(148, 148, 148, 1.000000);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: -2rpx 0 20rpx 36rpx;
|
|
}
|
|
</style> |