|
|
@@ -8,11 +8,25 @@
|
|
|
<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
|
|
|
<view class="list-scroll-view">
|
|
|
<view class="two_1">
|
|
|
- 商品筛选
|
|
|
+ <view class="cond_1">
|
|
|
+ 默认
|
|
|
+ </view>
|
|
|
+ <view class="cond_1">
|
|
|
+ 默认
|
|
|
+ </view>
|
|
|
+ <view class="cond_1">
|
|
|
+ 默认
|
|
|
+ </view>
|
|
|
+ <view class="cond_1">
|
|
|
+ 默认
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="two_2">
|
|
|
<view class="list" v-for="(item,index) in list" :key="index">
|
|
|
<image class="image" :src="item.url" mode=""></image>
|
|
|
+ <view class="sale" v-if="item.is_sale==true">
|
|
|
+ <text>已售尽</text>
|
|
|
+ </view>
|
|
|
<view class="name">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
@@ -21,7 +35,7 @@
|
|
|
<text>¥</text>
|
|
|
<text>{{item.money}}</text>
|
|
|
</view>
|
|
|
- <view class="btn">
|
|
|
+ <view class="btn" v-if="item.is_sale==false">
|
|
|
<text class="iconfont icon-gouwuche"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -43,17 +57,20 @@
|
|
|
{
|
|
|
url: require('@/static/test.png'),
|
|
|
name: '商品名称',
|
|
|
- money: '10.00'
|
|
|
+ money: '10.00',
|
|
|
+ is_sale: false
|
|
|
},
|
|
|
{
|
|
|
url: require('@/static/test.png'),
|
|
|
name: '商品名称',
|
|
|
- money: '10.00'
|
|
|
+ money: '10.00',
|
|
|
+ is_sale: false
|
|
|
},
|
|
|
{
|
|
|
url: require('@/static/test.png'),
|
|
|
name: '商品名称',
|
|
|
- money: '10.00'
|
|
|
+ money: '10.00',
|
|
|
+ is_sale: true
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
@@ -96,26 +113,80 @@
|
|
|
position: relative;
|
|
|
flex-grow: 1;
|
|
|
|
|
|
- .two_1 {}
|
|
|
+ .two_1 {
|
|
|
+ background-color: var(--fffColor);
|
|
|
+ padding: 2vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
|
|
|
.two_2 {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 2vw 2vw 0 2vw;
|
|
|
+ background-color: var(--f1Color);
|
|
|
|
|
|
.list {
|
|
|
- border: 1px solid #ff0000;
|
|
|
+ position: relative;
|
|
|
+ width: 43vw;
|
|
|
+ margin: 0 2vw 2vw 0;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 9px;
|
|
|
+ background-color: var(--fffColor);
|
|
|
|
|
|
.image {
|
|
|
+
|
|
|
width: 100%;
|
|
|
- height: 10vw;
|
|
|
+ height: 40vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sale {
|
|
|
+ position: absolute;
|
|
|
+ top: 18vw;
|
|
|
+ text-align: center;
|
|
|
+ width: 43vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ background-color: #0000005f;
|
|
|
+ border-radius: 90px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 15vw;
|
|
|
+ height: 15vw;
|
|
|
+ color: var(--fffColor);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 15vw;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
- font-size: 16px;
|
|
|
+ font-size: var(--font16Size);
|
|
|
margin: 0 0 1vw 0;
|
|
|
}
|
|
|
|
|
|
- .other {}
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ text:nth-child(1) {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ button {
|
|
|
+ font-size: var(--font20Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list:nth-child(2n) {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
