159 lines
3.1 KiB
Vue
159 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<view
|
|
:class="[
|
|
'single-favorite',
|
|
{ offuse: favor.status == '1' }
|
|
]"
|
|
v-for="(favor, index) in favoriteList"
|
|
:key="index"
|
|
>
|
|
<view class="single-lef">
|
|
<image :src="favor.pic" mode=""></image>
|
|
</view>
|
|
<view class="single-rig">
|
|
<view class="rig-name">{{ favor.name }}</view>
|
|
<view class="rig-pay">
|
|
<text>￥{{ favor.cash }}<span style="color: #000;">/月</span></text>
|
|
<span style="color: #959795; font-size: 12px;">
|
|
<uni-icons type="location" style="color: #959795;" size="20"></uni-icons>
|
|
{{ favor.location }}
|
|
</span>
|
|
</view>
|
|
<view class="rig-btn">
|
|
<h5 style="margin-right: 15rpx;">进入店铺</h5>
|
|
<h5>立即租用</h5>
|
|
</view>
|
|
</view>
|
|
<view class="lef-top-stick" v-show="favor.status == '1'">
|
|
{{ favor.tag }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
favoriteList: [
|
|
{
|
|
name: '出租G160SDY-13柴动空压机',
|
|
cash: '2000',
|
|
location: '河北省保定市',
|
|
pic: '/static/bg1.jpg',
|
|
status: '0'
|
|
},
|
|
{
|
|
name: '出租G160SDY-13柴动空压机',
|
|
cash: '3000',
|
|
location: '河北省保定市',
|
|
pic: '/static/bg2.jpg',
|
|
status: '0'
|
|
},
|
|
{
|
|
name: '出租G160SDY-13柴动空压机',
|
|
cash: '4000',
|
|
location: '河北省保定市',
|
|
pic: '/static/bg3.jpg',
|
|
status: '1'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
for (let i = 0; i < this.favoriteList.length; i++) {
|
|
if (this.favoriteList[i].status == '1') {
|
|
this.favoriteList[i].tag = '失效'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body{
|
|
background-color: #F8F8F8;
|
|
}
|
|
.single-favorite{
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
display: flex;
|
|
position: relative;
|
|
.single-lef{
|
|
width: 25%;
|
|
height: 10vh;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.single-rig{
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
view{
|
|
font-size: 14px;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
view:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.rig-name{
|
|
color: #333333;
|
|
}
|
|
.rig-pay{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
font-weight: bold;
|
|
margin-right: 15rpx;
|
|
color: #EE1D1D;
|
|
}
|
|
}
|
|
.rig-btn{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
h5{
|
|
box-sizing: border-box;
|
|
padding: 5rpx 10rpx;
|
|
border: 1px solid #797979;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
.lef-top-stick{
|
|
position: absolute;
|
|
left: 15rpx;
|
|
top: 15rpx;
|
|
box-sizing: border-box;
|
|
padding: 5rpx;
|
|
border-radius: 15rpx 0 0 0;
|
|
background-color: #fff;
|
|
border: 1px solid #7F7F7F;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
.offuse{
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
</style>
|