案例效果
案例代码
<view class="addressSelect" @click="showAddressList">
<view class="rowLeft">适用场地:</view>
<view class="rowRight">
共1个场地,12个设备
<image src="/static/images/selectIcon.png" mode="widthFix" :class="isShowAddressList?'down':'up'"></image>
</view>
</view>
</view>
<script>
export default {
data() {
return {
isShowAddressList: false
}
},
methods: {
showAddressList() {
this.isShowAddressList = !this.isShowAddressList
}
}
}
</script>
.addressSelect {
height: 99rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: rgb(53, 53, 53);
font-size: 28rpx;
padding: 0 28rpx;
border-bottom: 1rpx solid #DDDDDD;
image {
width: 22rpx;
margin-left: 20rpx;
vertical-align: middle;
}
.up {
transition: all 0.3s;
}
.down {
transform: rotate(-180deg);
transition: all 0.3s;
}
}
.showList {
padding: 26rpx 50rpx;
border-bottom: 1rpx solid #DDDDDD;
font-size: 28rpx;
.addressName {
color: rgb(69, 69, 69);
margin-bottom: 20rpx;
}
.equiName {
color: rgb(136, 136, 136);
margin-left: 20rpx;
line-height: 50rpx;
}
}