128 lines
2.6 KiB
Vue
128 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="area_functional">
|
|||
|
|
<view
|
|||
|
|
v-for="(i, index) in area_functional"
|
|||
|
|
:key="`items_${index}`"
|
|||
|
|
class="item"
|
|||
|
|
@click="handleToPage(i?.url)"
|
|||
|
|
>
|
|||
|
|
<view class="icon">
|
|||
|
|
<image :src="`/static/svg/${i?.icon || ''}.svg`" mode="heightFix" />
|
|||
|
|
</view>
|
|||
|
|
<view class="label"> {{ i?.label || '' }} </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="house_wallet">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="title">房屋管理</view>
|
|||
|
|
<view class="value"> 已绑定<text>3</text>个房屋 </view>
|
|||
|
|
</view>
|
|||
|
|
<image src="/static/images/IconHouse.png" mode="heightFix" />
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="title">我的钱包</view>
|
|||
|
|
<view class="value"> 余额：<text>0.00元</text> </view>
|
|||
|
|
</view>
|
|||
|
|
<image src="/static/images/IconWallet.png" mode="heightFix" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
const area_functional = [
|
|||
|
|
{
|
|||
|
|
label: '我的收藏',
|
|||
|
|
icon: 'IconCollection',
|
|||
|
|
url: ''
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '我的审核',
|
|||
|
|
icon: 'IconReview',
|
|||
|
|
url: '/INDEX/owner_audit_list/index'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '我的活动',
|
|||
|
|
icon: 'IconEvent',
|
|||
|
|
url: ''
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '我的车辆',
|
|||
|
|
icon: 'IconVehicle',
|
|||
|
|
url: ''
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const handleToPage = (url: string) => {
|
|||
|
|
if (url) {
|
|||
|
|
uni.navigateTo({ url })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.area_functional {
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 30rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 40rpx 30rpx;
|
|||
|
|
color: #3d3d3d;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
.item {
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
.icon {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 42rpx;
|
|||
|
|
image {
|
|||
|
|
height: 42rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
padding-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.house_wallet {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
.item {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 330rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.content {
|
|||
|
|
padding: 0 0 0 30rpx;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
color: #3d3d3d;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
.value {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text {
|
|||
|
|
color: #c45656;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|