物业催缴UI(home)
This commit is contained in:
parent
df4d533583
commit
8018d5d308
|
|
@ -13,14 +13,27 @@
|
||||||
<text class="li-text-42">物业费催缴</text>
|
<text class="li-text-42">物业费催缴</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
<template #right>
|
<template #right>
|
||||||
<view class="li-mr-30 li-flex li-items-center">
|
<view class="li-mr-180 li-flex li-items-center">
|
||||||
<view class="community-switch li-flex li-items-center" @click="showCommunityPicker = true">
|
<view class="community-switch li-flex li-items-center" @click="showCommunityPicker = true">
|
||||||
<text class="li-text-30 li-text-primary li-mr-10">{{activeCommunity.name}}</text>
|
<text class="li-text-30 li-text-primary li-mr-10">{{activeCommunity.name}}</text>
|
||||||
<text class="ri-arrow-down-s-line li-text-30"></text>
|
<text class="ri-arrow-down-s-line li-text-30"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
|
<template #right>
|
||||||
|
<view class="li-mr-25 li-flex li-items-center">
|
||||||
|
<view class="community-switch li-flex li-items-center" @click="showCommunityPicker = true">
|
||||||
|
<text class="li-text-30 li-text-primary li-mr-10">{{activeCommunity.name}}</text>
|
||||||
|
<text class="ri-arrow-down-s-line li-text-30"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- #endif -->
|
||||||
</wd-navbar>
|
</wd-navbar>
|
||||||
<!-- 导航栏背景 -->
|
<!-- 导航栏背景 -->
|
||||||
<view class="nav-bg-layer"></view>
|
<view class="nav-bg-layer"></view>
|
||||||
|
|
@ -31,7 +44,8 @@
|
||||||
<view class="community-card li-mx-40 li-mt-40">
|
<view class="community-card li-mx-40 li-mt-40">
|
||||||
<view class="community-header li-p-30">
|
<view class="community-header li-p-30">
|
||||||
<view class="li-flex li-justify-between li-items-center">
|
<view class="li-flex li-justify-between li-items-center">
|
||||||
<text class="community-name li-text-42 li-font-bold li-text-white">{{activeCommunity.name}}</text>
|
<text
|
||||||
|
class="community-name li-text-42 li-font-bold li-text-white">{{activeCommunity.name}}</text>
|
||||||
<view class="li-px-20 li-py-10 li-bg-rgba(255,255,255,0.3) li-rd-30" @click="handleRefresh">
|
<view class="li-px-20 li-py-10 li-bg-rgba(255,255,255,0.3) li-rd-30" @click="handleRefresh">
|
||||||
<text class="li-text-28 li-text-white">刷新数据</text>
|
<text class="li-text-28 li-text-white">刷新数据</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -52,71 +66,87 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 楼栋选择 (使用wd-tabs组件) -->
|
<view class="building-selector-container li-mt-30">
|
||||||
<view class="building-tabs-container li-mt-30">
|
<view class="building-sidebar-layout">
|
||||||
<wd-tabs v-model="activeBuilding" :slidable="'always'" sticky bg-color="#fff" line-height="3px" inactive-color="#666" color="#3e9bff">
|
<!-- 左侧楼栋侧边导航 -->
|
||||||
<wd-tab v-for="item in buildingList" :key="item.id" :name="item.id" :title="item.name">
|
<view class="sidebar-container">
|
||||||
<!-- 单元选择 (使用wd-tabs组件) -->
|
<wd-sidebar v-model="activeBuilding" custom-class="building-sidebar">
|
||||||
<view class="unit-selector li-mt-20 li-mx-30">
|
<wd-sidebar-item v-for="item in buildingList" :key="item.id" :value="item.id"
|
||||||
|
:label="item.name" :badge="getBuildingUnpaidCount(item.id)"
|
||||||
|
:badge-props="{ type: 'primary', bgColor: '#ff4d4f' }" />
|
||||||
|
</wd-sidebar>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧单元与房屋内容 -->
|
||||||
|
<view class="content-container">
|
||||||
|
<!-- 单元选择 -->
|
||||||
|
<view class="unit-selector li-px-30 li-py-20">
|
||||||
<view class="li-mb-20">
|
<view class="li-mb-20">
|
||||||
<text class="li-text-30 li-font-bold">选择单元</text>
|
<text class="li-text-30 li-font-bold">{{getActiveBuilding().name}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="unit-buttons li-flex li-flex-wrap">
|
<view class="unit-buttons li-flex li-flex-wrap">
|
||||||
<view v-for="unit in unitList" :key="unit.value"
|
<view v-for="unit in unitList" :key="unit.value"
|
||||||
class="unit-button li-flex-center li-mr-20 li-mb-20"
|
class="unit-button li-flex-center li-mr-20 li-mb-20"
|
||||||
:class="activeUnitId === String(unit.value) ? 'unit-button-active' : ''"
|
:class="activeUnitId === String(unit.value) ? 'unit-button-active' : ''"
|
||||||
@click="activeUnitId = String(unit.value)">
|
@click="activeUnitId = String(unit.value)">
|
||||||
<text class="unit-text" :class="activeUnitId === String(unit.value) ? 'unit-text-active' : ''">{{unit.label}}</text>
|
<text class="unit-text"
|
||||||
<view v-if="getUnitUnpaidCount(unit.value) > 0" class="unit-badge">{{getUnitUnpaidCount(unit.value)}}</view>
|
:class="activeUnitId === String(unit.value) ? 'unit-text-active' : ''">{{unit.label}}</text>
|
||||||
|
<view v-if="getUnitUnpaidCount(unit.value) > 0" class="unit-badge">
|
||||||
|
{{getUnitUnpaidCount(unit.value)}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 楼层和房屋数据 -->
|
|
||||||
<view class="house-list li-mt-30 li-pb-40">
|
<!-- 楼层和房屋数据 -->
|
||||||
<view v-for="(floor, floorIndex) in floorHouseList" :key="floorIndex" class="floor-item li-mb-20">
|
<view class="house-list li-px-30 li-pb-40">
|
||||||
<view class="floor-header li-py-15 li-px-30">
|
<view v-for="(floor, floorIndex) in floorHouseList" :key="floorIndex"
|
||||||
<text class="li-text-30 li-font-bold li-text-#333">{{floor.floor}}层</text>
|
class="floor-item li-mb-20">
|
||||||
</view>
|
<view class="floor-header li-py-15 li-px-30">
|
||||||
<view class="house-grid">
|
<text class="li-text-30 li-font-bold li-text-#333">{{floor.floor}}层</text>
|
||||||
<view v-for="(house, houseIndex) in floor.houses" :key="houseIndex"
|
</view>
|
||||||
class="house-card" @click="showHouseDetailFunc(house)">
|
<view class="house-grid">
|
||||||
<view class="house-card-inner">
|
<view v-for="(house, houseIndex) in floor.houses" :key="houseIndex"
|
||||||
<view class="house-icon li-flex-center">
|
class="house-card" @click="showHouseDetailFunc(house)">
|
||||||
<text class="ri-building-2-line li-text-60 li-text-#3e9bff"></text>
|
<view class="house-card-inner">
|
||||||
<!-- 欠费标记 -->
|
<view class="house-icon li-flex-center">
|
||||||
<view v-if="house.unpaid > 0" class="unpaid-badge">{{house.unpaid}}</view>
|
<text class="ri-building-2-line li-text-60 li-text-#3e9bff"></text>
|
||||||
|
<!-- 欠费标记 -->
|
||||||
|
<view v-if="house.unpaid > 0" class="unpaid-badge">{{house.unpaid}}
|
||||||
</view>
|
</view>
|
||||||
<view class="house-info li-mt-15">
|
</view>
|
||||||
<text class="li-text-30 li-font-bold li-text-#333 li-text-center">{{house.number}}</text>
|
<view class="house-info li-mt-15">
|
||||||
<view class="li-flex li-items-center li-justify-center li-mt-5">
|
<text
|
||||||
<text class="li-text-24" :class="house.unpaid > 0 ? 'li-text-#ff4d4f' : 'li-text-#52c41a'">
|
class="li-text-30 li-font-bold li-text-#333 li-text-center">{{house.number}}</text>
|
||||||
{{house.unpaid > 0 ? house.unpaid + '笔欠费' : '无欠费'}}
|
<view class="li-flex li-items-center li-justify-center li-mt-5">
|
||||||
</text>
|
<text class="li-text-24"
|
||||||
</view>
|
:class="house.unpaid > 0 ? 'li-text-#ff4d4f' : 'li-text-#52c41a'">
|
||||||
|
{{house.unpaid > 0 ? house.unpaid + '笔欠费' : '无欠费'}}
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 空状态 -->
|
|
||||||
<view v-if="floorHouseList.length === 0" class="empty-state li-py-100 li-flex-center li-flex-col">
|
<!-- 空状态 -->
|
||||||
<text class="ri-file-list-3-line li-text-100 li-text-#ccc"></text>
|
<view v-if="floorHouseList.length === 0"
|
||||||
<text class="li-text-30 li-text-#999 li-mt-20">该单元暂无数据</text>
|
class="empty-state li-py-100 li-flex-center li-flex-col">
|
||||||
</view>
|
<text class="ri-file-list-3-line li-text-100 li-text-#ccc"></text>
|
||||||
|
<text class="li-text-30 li-text-#999 li-mt-20">该单元暂无数据</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</wd-tab>
|
</view>
|
||||||
</wd-tabs>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 小区选择器 -->
|
<!-- 小区选择器 -->
|
||||||
<wd-picker v-model="showCommunityPicker" :columns="communityList" title="选择小区"
|
<!-- <wd-picker v-model="showCommunityPicker" :columns="communityList" title="选择小区"
|
||||||
v-model:value="selectedCommunity" @confirm="handleCommunityConfirm" label-key="name" value-key="id" />
|
v-model:value="selectedCommunity" @confirm="handleCommunityConfirm" label-key="name" value-key="id" /> -->
|
||||||
|
|
||||||
<!-- 房屋详情弹窗 -->
|
<!-- 房屋详情弹窗 -->
|
||||||
<wd-popup v-model="showHouseDetail" position="bottom" >
|
<wd-popup v-model="showHouseDetail" position="bottom">
|
||||||
<view class="house-detail" :style="{ height: '60vh' }">
|
<view class="house-detail" :style="{ height: '60vh' }">
|
||||||
<view class="detail-header li-p-30 li-bottom-border">
|
<view class="detail-header li-p-30 li-bottom-border">
|
||||||
<view class="li-flex li-justify-between li-items-center">
|
<view class="li-flex li-justify-between li-items-center">
|
||||||
|
|
@ -124,7 +154,8 @@
|
||||||
<text class="ri-close-line li-text-50 li-text-#999" @click="showHouseDetail = false"></text>
|
<text class="ri-close-line li-text-50 li-text-#999" @click="showHouseDetail = false"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-center li-mt-10">
|
<view class="li-flex li-items-center li-mt-10">
|
||||||
<text class="li-text-28 li-text-#666">{{activeCommunity.name}} {{getActiveBuilding().name}} {{activeUnit}}单元</text>
|
<text class="li-text-28 li-text-#666">{{activeCommunity.name}} {{getActiveBuilding().name}}
|
||||||
|
{{activeUnit}}单元</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y class="detail-content-scroll">
|
<scroll-view scroll-y class="detail-content-scroll">
|
||||||
|
|
@ -134,7 +165,8 @@
|
||||||
<text class="li-text-32 li-font-bold">欠费账单</text>
|
<text class="li-text-32 li-font-bold">欠费账单</text>
|
||||||
<text class="li-text-28 li-text-#3e9bff">共 {{selectedHouse.unpaid}} 笔</text>
|
<text class="li-text-28 li-text-#3e9bff">共 {{selectedHouse.unpaid}} 笔</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-for="(bill, index) in selectedHouse.bills" :key="index" class="bill-item li-p-30 li-mb-20">
|
<view v-for="(bill, index) in selectedHouse.bills" :key="index"
|
||||||
|
class="bill-item li-p-30 li-mb-20">
|
||||||
<view class="li-flex li-items-center li-justify-between">
|
<view class="li-flex li-items-center li-justify-between">
|
||||||
<text class="li-text-30 li-font-bold">{{bill.type}}</text>
|
<text class="li-text-30 li-font-bold">{{bill.type}}</text>
|
||||||
<text class="li-text-30 li-text-#ff4d4f">￥{{bill.amount}}</text>
|
<text class="li-text-30 li-text-#ff4d4f">￥{{bill.amount}}</text>
|
||||||
|
|
@ -148,8 +180,10 @@
|
||||||
<text class="li-text-26 li-text-#666">{{bill.overdueTime}}</text>
|
<text class="li-text-26 li-text-#666">{{bill.overdueTime}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-justify-between li-items-center li-mt-20">
|
<view class="li-flex li-justify-between li-items-center li-mt-20">
|
||||||
<wd-button size="small" type="info" plain @click="callOwner(selectedHouse)">电话催缴</wd-button>
|
<wd-button size="small" type="info" plain
|
||||||
<wd-button size="small" type="primary" @click="sendReminder(selectedHouse)">发送通知</wd-button>
|
@click="callOwner(selectedHouse)">电话催缴</wd-button>
|
||||||
|
<wd-button size="small" type="primary"
|
||||||
|
@click="sendReminder(selectedHouse)">发送通知</wd-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -165,10 +199,22 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed, onMounted, watch } from 'vue';
|
import {
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
ref,
|
||||||
import { useNavigation } from '@/hooks/useNavigation';
|
reactive,
|
||||||
import { useToast } from '@/uni_modules/wot-design-uni';
|
computed,
|
||||||
|
onMounted,
|
||||||
|
watch
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onLoad
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
|
import {
|
||||||
|
useNavigation
|
||||||
|
} from '@/hooks/useNavigation';
|
||||||
|
import {
|
||||||
|
useToast
|
||||||
|
} from '@/uni_modules/wot-design-uni';
|
||||||
|
|
||||||
const Toast = useToast();
|
const Toast = useToast();
|
||||||
|
|
||||||
|
|
@ -181,11 +227,22 @@
|
||||||
|
|
||||||
// 小区列表
|
// 小区列表
|
||||||
const communityList = ref([
|
const communityList = ref([
|
||||||
[
|
[{
|
||||||
{ id: '1', name: '九仙花苑' },
|
id: '1',
|
||||||
{ id: '2', name: '阳光花园小区' },
|
name: '九仙花苑'
|
||||||
{ id: '3', name: '翠湖庭院' },
|
},
|
||||||
{ id: '4', name: '金色家园' }
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '阳光花园小区'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '翠湖庭院'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
name: '金色家园'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
@ -229,28 +286,77 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// 楼栋列表
|
// 楼栋列表
|
||||||
const buildingList = ref([
|
const buildingList = ref([{
|
||||||
{ id: '1', name: '1号楼' },
|
id: '1',
|
||||||
{ id: '2', name: '2号楼' },
|
name: '1号楼'
|
||||||
{ id: '3', name: '3号楼' },
|
},
|
||||||
{ id: '5', name: '5号楼' },
|
{
|
||||||
{ id: '6', name: '6号楼' },
|
id: '2',
|
||||||
{ id: '7', name: '7号楼' },
|
name: '2号楼'
|
||||||
{ id: '8', name: '8号楼' },
|
},
|
||||||
{ id: '9', name: '9号楼' },
|
{
|
||||||
{ id: '10', name: '10号楼' },
|
id: '3',
|
||||||
{ id: '11', name: '11号楼' },
|
name: '3号楼'
|
||||||
{ id: '12', name: '12号楼' }
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
name: '5号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
name: '6号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
name: '7号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '8',
|
||||||
|
name: '8号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '9',
|
||||||
|
name: '9号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '10',
|
||||||
|
name: '10号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '11',
|
||||||
|
name: '11号楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '12',
|
||||||
|
name: '12号楼'
|
||||||
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 单元列表
|
// 单元列表
|
||||||
const unitList = ref([
|
const unitList = ref([{
|
||||||
{ value: 1, label: '1单元' },
|
value: 1,
|
||||||
{ value: 2, label: '2单元' },
|
label: '1单元'
|
||||||
{ value: 3, label: '3单元' },
|
},
|
||||||
{ value: 4, label: '4单元' },
|
{
|
||||||
{ value: 5, label: '5单元' },
|
value: 2,
|
||||||
{ value: 6, label: '6单元' }
|
label: '2单元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '3单元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: '4单元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
label: '5单元'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 6,
|
||||||
|
label: '6单元'
|
||||||
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 当前选中的楼栋
|
// 当前选中的楼栋
|
||||||
|
|
@ -259,7 +365,7 @@
|
||||||
const activeUnitId = ref('1');
|
const activeUnitId = ref('1');
|
||||||
// 兼容原有的数字类型单元ID
|
// 兼容原有的数字类型单元ID
|
||||||
const activeUnit = computed(() => parseInt(activeUnitId.value));
|
const activeUnit = computed(() => parseInt(activeUnitId.value));
|
||||||
|
|
||||||
// 监听activeUnit变化，更新floorHouseList
|
// 监听activeUnit变化，更新floorHouseList
|
||||||
watch(activeUnit, (newVal) => {
|
watch(activeUnit, (newVal) => {
|
||||||
console.log('activeUnit changed to', newVal);
|
console.log('activeUnit changed to', newVal);
|
||||||
|
|
@ -268,89 +374,253 @@
|
||||||
// 房屋数据
|
// 房屋数据
|
||||||
const houseData = reactive({
|
const houseData = reactive({
|
||||||
// 1号楼 1单元数据
|
// 1号楼 1单元数据
|
||||||
'1-1': [
|
'1-1': [{
|
||||||
{
|
|
||||||
floor: '1',
|
floor: '1',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-101', number: '1-1001', unpaid: 0, owner: '张先生', phone: '13812345678', bills: [] },
|
id: '1-1-101',
|
||||||
{ id: '1-1-102', number: '1-1002', unpaid: 3, owner: '刘女士', phone: '13812345679', bills: [
|
number: '1-1001',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
unpaid: 0,
|
||||||
{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
owner: '张先生',
|
||||||
] },
|
phone: '13812345678',
|
||||||
{ id: '1-1-103', number: '1-1003', unpaid: 2, owner: '陈先生', phone: '13812345680', bills: [
|
bills: []
|
||||||
{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
},
|
||||||
] },
|
{
|
||||||
{ id: '1-1-104', number: '1-1004', unpaid: 0, owner: '林女士', phone: '13812345681', bills: [] },
|
id: '1-1-102',
|
||||||
{ id: '1-1-105', number: '1-1005', unpaid: 4, owner: '黄先生', phone: '13812345682', bills: [
|
number: '1-1002',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
unpaid: 3,
|
||||||
{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
owner: '刘女士',
|
||||||
{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
phone: '13812345679',
|
||||||
] },
|
bills: [{
|
||||||
{ id: '1-1-106', number: '1-1006', unpaid: 1, owner: '张先生', phone: '13812345683', bills: [
|
type: '物业费',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
amount: '568.00',
|
||||||
] }
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '水费',
|
||||||
|
amount: '124.50',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-103',
|
||||||
|
number: '1-1003',
|
||||||
|
unpaid: 2,
|
||||||
|
owner: '陈先生',
|
||||||
|
phone: '13812345680',
|
||||||
|
bills: [{
|
||||||
|
type: '电费',
|
||||||
|
amount: '356.80',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-104',
|
||||||
|
number: '1-1004',
|
||||||
|
unpaid: 0,
|
||||||
|
owner: '林女士',
|
||||||
|
phone: '13812345681',
|
||||||
|
bills: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-105',
|
||||||
|
number: '1-1005',
|
||||||
|
unpaid: 4,
|
||||||
|
owner: '黄先生',
|
||||||
|
phone: '13812345682',
|
||||||
|
bills: [{
|
||||||
|
type: '物业费',
|
||||||
|
amount: '568.00',
|
||||||
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '水费',
|
||||||
|
amount: '124.50',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '电费',
|
||||||
|
amount: '356.80',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-106',
|
||||||
|
number: '1-1006',
|
||||||
|
unpaid: 1,
|
||||||
|
owner: '张先生',
|
||||||
|
phone: '13812345683',
|
||||||
|
bills: [{
|
||||||
|
type: '物业费',
|
||||||
|
amount: '568.00',
|
||||||
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '2',
|
floor: '2',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-201', number: '2-1002', unpaid: 0, owner: '李女士', phone: '13812345679', bills: [] }
|
id: '1-1-201',
|
||||||
]
|
number: '2-1002',
|
||||||
|
unpaid: 0,
|
||||||
|
owner: '李女士',
|
||||||
|
phone: '13812345679',
|
||||||
|
bills: []
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '3',
|
floor: '3',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-301', number: '3-1003', unpaid: 0, owner: '王先生', phone: '13812345680', bills: [] }
|
id: '1-1-301',
|
||||||
]
|
number: '3-1003',
|
||||||
|
unpaid: 0,
|
||||||
|
owner: '王先生',
|
||||||
|
phone: '13812345680',
|
||||||
|
bills: []
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '4',
|
floor: '4',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-401', number: '4-1004', unpaid: 6, owner: '赵女士', phone: '13812345681', bills: [
|
id: '1-1-401',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
number: '4-1004',
|
||||||
{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
unpaid: 6,
|
||||||
{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
owner: '赵女士',
|
||||||
{ type: '停车费', amount: '300.00', period: '2023-11-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
phone: '13812345681',
|
||||||
{ type: '垃圾处理费', amount: '45.00', period: '2023-10-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
bills: [{
|
||||||
{ type: '维修基金', amount: '120.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
type: '物业费',
|
||||||
] }
|
amount: '568.00',
|
||||||
]
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '水费',
|
||||||
|
amount: '124.50',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '电费',
|
||||||
|
amount: '356.80',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '停车费',
|
||||||
|
amount: '300.00',
|
||||||
|
period: '2023-11-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '垃圾处理费',
|
||||||
|
amount: '45.00',
|
||||||
|
period: '2023-10-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '维修基金',
|
||||||
|
amount: '120.00',
|
||||||
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '5',
|
floor: '5',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-501', number: '5-1005', unpaid: 0, owner: '钱先生', phone: '13812345682', bills: [] }
|
id: '1-1-501',
|
||||||
]
|
number: '5-1005',
|
||||||
|
unpaid: 0,
|
||||||
|
owner: '钱先生',
|
||||||
|
phone: '13812345682',
|
||||||
|
bills: []
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '6',
|
floor: '6',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-1-601', number: '6-1006', unpaid: 6, owner: '孙女士', phone: '13812345683', bills: [
|
id: '1-1-601',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
number: '6-1006',
|
||||||
{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
unpaid: 6,
|
||||||
{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
owner: '孙女士',
|
||||||
{ type: '停车费', amount: '300.00', period: '2023-11-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
phone: '13812345683',
|
||||||
{ type: '垃圾处理费', amount: '45.00', period: '2023-10-01 至 2023-12-31', overdueTime: '2024-01-15' },
|
bills: [{
|
||||||
{ type: '维修基金', amount: '120.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
type: '物业费',
|
||||||
] }
|
amount: '568.00',
|
||||||
]
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '水费',
|
||||||
|
amount: '124.50',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '电费',
|
||||||
|
amount: '356.80',
|
||||||
|
period: '2023-12-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '停车费',
|
||||||
|
amount: '300.00',
|
||||||
|
period: '2023-11-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '垃圾处理费',
|
||||||
|
amount: '45.00',
|
||||||
|
period: '2023-10-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '维修基金',
|
||||||
|
amount: '120.00',
|
||||||
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// 1号楼 2单元数据
|
// 1号楼 2单元数据
|
||||||
'1-2': [
|
'1-2': [{
|
||||||
{
|
|
||||||
floor: '1',
|
floor: '1',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-2-101', number: '1-2001', unpaid: 3, owner: '周先生', phone: '13812345684', bills: [
|
id: '1-2-101',
|
||||||
{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
|
number: '1-2001',
|
||||||
] }
|
unpaid: 3,
|
||||||
]
|
owner: '周先生',
|
||||||
|
phone: '13812345684',
|
||||||
|
bills: [{
|
||||||
|
type: '物业费',
|
||||||
|
amount: '568.00',
|
||||||
|
period: '2023-07-01 至 2023-12-31',
|
||||||
|
overdueTime: '2024-01-15'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
floor: '2',
|
floor: '2',
|
||||||
houses: [
|
houses: [{
|
||||||
{ id: '1-2-201', number: '2-2002', unpaid: 0, owner: '吴女士', phone: '13812345685', bills: [] }
|
id: '1-2-201',
|
||||||
]
|
number: '2-2002',
|
||||||
|
unpaid: 0,
|
||||||
|
owner: '吴女士',
|
||||||
|
phone: '13812345685',
|
||||||
|
bills: []
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// 添加5单元和6单元的空数据
|
// 添加5单元和6单元的空数据
|
||||||
|
|
@ -367,14 +637,17 @@
|
||||||
|
|
||||||
// 获取当前选中的楼栋对象
|
// 获取当前选中的楼栋对象
|
||||||
const getActiveBuilding = () => {
|
const getActiveBuilding = () => {
|
||||||
return buildingList.value.find(item => item.id === activeBuilding.value) || { id: '', name: '' };
|
return buildingList.value.find(item => item.id === activeBuilding.value) || {
|
||||||
|
id: '',
|
||||||
|
name: ''
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取单元欠费数量
|
// 获取单元欠费数量
|
||||||
const getUnitUnpaidCount = (unit) => {
|
const getUnitUnpaidCount = (unit) => {
|
||||||
const key = `${activeBuilding.value}-${unit}`;
|
const key = `${activeBuilding.value}-${unit}`;
|
||||||
if (!houseData[key]) return 0;
|
if (!houseData[key]) return 0;
|
||||||
|
|
||||||
return houseData[key].reduce((total, floor) => {
|
return houseData[key].reduce((total, floor) => {
|
||||||
return total + floor.houses.filter(house => house.unpaid > 0).length;
|
return total + floor.houses.filter(house => house.unpaid > 0).length;
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
@ -417,7 +690,7 @@
|
||||||
showHouseDetail.value = false;
|
showHouseDetail.value = false;
|
||||||
}, 1500);
|
}, 1500);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 小区选择确认
|
// 小区选择确认
|
||||||
const handleCommunityConfirm = (selected) => {
|
const handleCommunityConfirm = (selected) => {
|
||||||
selectedCommunity.value = selected[0].id;
|
selectedCommunity.value = selected[0].id;
|
||||||
|
|
@ -450,6 +723,22 @@
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
checkRouteStack();
|
checkRouteStack();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 获取楼栋的欠费住户数量
|
||||||
|
const getBuildingUnpaidCount = (buildingId) => {
|
||||||
|
let count = 0;
|
||||||
|
// 遍历该楼栋的所有单元
|
||||||
|
unitList.value.forEach(unit => {
|
||||||
|
const key = `${buildingId}-${unit.value}`;
|
||||||
|
if (!houseData[key]) return;
|
||||||
|
|
||||||
|
count += houseData[key].reduce((total, floor) => {
|
||||||
|
return total + floor.houses.filter(house => house.unpaid > 0).length;
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
return count > 0 ? count : '';
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -480,7 +769,7 @@
|
||||||
|
|
||||||
.community-switch {
|
.community-switch {
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
padding: 0 20rpx;
|
padding: 10rpx 20rpx 0;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
background-color: rgba(62, 155, 255, 0.1);
|
background-color: rgba(62, 155, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
@ -525,20 +814,56 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-tabs-container {
|
.building-selector-container {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.building-sidebar-layout {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100vh - 400rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container {
|
||||||
|
width: 180rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.building-sidebar {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .wd-sidebar-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .wd-sidebar-item--active {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #3e9bff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.unit-selector {
|
.unit-selector {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
border-radius: 16rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit-buttons {
|
.unit-buttons {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit-button {
|
.unit-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 140rpx;
|
width: 140rpx;
|
||||||
|
|
@ -546,23 +871,23 @@
|
||||||
background-color: #f7f8fa;
|
background-color: #f7f8fa;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
background: rgba(62, 155, 255, 0.1);
|
background: rgba(62, 155, 255, 0.1);
|
||||||
border: 1px solid rgba(62, 155, 255, 0.3);
|
border: 1px solid rgba(62, 155, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit-text {
|
.unit-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
color: #3e9bff;
|
color: #3e9bff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit-badge {
|
.unit-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10rpx;
|
top: -10rpx;
|
||||||
|
|
@ -579,16 +904,12 @@
|
||||||
padding: 0 8rpx;
|
padding: 0 8rpx;
|
||||||
box-shadow: 0 2rpx 6rpx rgba(255, 77, 79, 0.3);
|
box-shadow: 0 2rpx 6rpx rgba(255, 77, 79, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.house-list {
|
|
||||||
padding: 0 2rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floor-item {
|
.floor-item {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
@ -601,27 +922,27 @@
|
||||||
background-color: #f5f7fa;
|
background-color: #f5f7fa;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.house-grid {
|
|
||||||
display: flex;
|
.house-grid {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
padding: 20rpx;
|
flex-wrap: wrap;
|
||||||
}
|
padding: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.house-card {
|
.house-card {
|
||||||
width: 25%;
|
width: 33.33%;
|
||||||
padding: 8rpx;
|
padding: 10rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@media screen and (max-width: 768rpx) {
|
@media screen and (max-width: 768rpx) {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 580rpx) {
|
@media screen and (max-width: 580rpx) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
|
|
@ -633,13 +954,13 @@
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
height: 180rpx;
|
height: 180rpx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.house-icon {
|
.house-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
|
|
@ -648,7 +969,7 @@
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unpaid-badge {
|
.unpaid-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10rpx;
|
top: -10rpx;
|
||||||
|
|
@ -665,13 +986,13 @@
|
||||||
padding: 0 10rpx;
|
padding: 0 10rpx;
|
||||||
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
|
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.house-info {
|
.house-info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.li-text-30 {
|
.li-text-30 {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -695,7 +1016,7 @@
|
||||||
padding-top: env(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-content-scroll {
|
.detail-content-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: calc(100% - 120rpx);
|
height: calc(100% - 120rpx);
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
|
|
||||||
.li-items-center{align-items:center}
|
.li-items-center{align-items:center}
|
||||||
.items-center{align-items:center}
|
.items-center{align-items:center}
|
||||||
.justify-end{justify-content:end}
|
|
||||||
.li-justify-center{justify-content:center}
|
.li-justify-center{justify-content:center}
|
||||||
|
.justify-end{justify-content:end}
|
||||||
.justify-center{justify-content:center}
|
.justify-center{justify-content:center}
|
||||||
.li-justify-between{justify-content:space-between}
|
.li-justify-between{justify-content:space-between}
|
||||||
.justify-between{justify-content:space-between}
|
.justify-between{justify-content:space-between}
|
||||||
|
|
@ -51,58 +51,9 @@
|
||||||
.li-w-58{width:58rpx}
|
.li-w-58{width:58rpx}
|
||||||
.li-w-full-70{width:70%}
|
.li-w-full-70{width:70%}
|
||||||
.li-w-full-88{width:88%}
|
.li-w-full-88{width:88%}
|
||||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
|
||||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
||||||
.li-h-110{height:110rpx}
|
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
||||||
.li-items-start{align-items:start}
|
|
||||||
.li-mb-12{margin-bottom:12rpx}
|
|
||||||
.li-mb-20{margin-bottom:20rpx}
|
|
||||||
.li-mb-8{margin-bottom:8rpx}
|
|
||||||
.li-ml-15{margin-left:15rpx}
|
|
||||||
.li-ml-20{margin-left:20rpx}
|
|
||||||
.li-mr-10{margin-right:10rpx}
|
|
||||||
.li-mr-12{margin-right:12rpx}
|
|
||||||
.li-mr-3{margin-right:3rpx}
|
|
||||||
.li-mr-6{margin-right:6rpx}
|
|
||||||
.li-mt-40{margin-top:40rpx}
|
|
||||||
.li-mt-90{margin-top:90rpx}
|
|
||||||
.li-pb-25{padding-bottom:25rpx}
|
|
||||||
.li-pb-30{padding-bottom:30rpx}
|
|
||||||
.li-pl-20{padding-left:20rpx}
|
|
||||||
.li-pl-30{padding-left:30rpx}
|
|
||||||
.li-pr-30{padding-right:30rpx}
|
|
||||||
.li-pt-2{padding-top:2rpx}
|
|
||||||
.li-pt-20{padding-top:20rpx}
|
|
||||||
.li-pt-30{padding-top:30rpx}
|
|
||||||
.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
|
|
||||||
.li-rd-20{border-radius:20rpx}
|
|
||||||
.li-text-009aff-color{color:rgb(0,154,255)}
|
|
||||||
.li-text-32{font-size:32rpx}
|
|
||||||
.li-text-40{font-size:40rpx}
|
|
||||||
.li-text-42{font-size:42rpx}
|
|
||||||
.li-text-55{font-size:55rpx}
|
|
||||||
.li-text-5f5f5f-color{color:rgb(95,95,95)}
|
|
||||||
.li-text-666-color{color:rgb(102,102,102)}
|
|
||||||
.li-text-70{font-size:70rpx}
|
|
||||||
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
|
||||||
.li-text-right{text-align:right}
|
|
||||||
.li-w-110{width:110rpx}
|
|
||||||
.li-w-150{width:150rpx}
|
|
||||||
.li-w-400{width:400rpx}
|
|
||||||
.li-w-full-85{width:85%}
|
|
||||||
.li-w-full-92{width:92%}
|
|
||||||
.overflow-hidden{overflow:hidden}
|
|
||||||
.li-ml-6{margin-left:6rpx}
|
|
||||||
.li-mt-300-important{margin-top:300rpx !important}
|
|
||||||
.li-p-15{padding:15rpx}
|
|
||||||
.li-pb-15{padding-bottom:15rpx}
|
|
||||||
.li-pt-25{padding-top:25rpx}
|
|
||||||
.li-pt-4{padding-top:4rpx}
|
|
||||||
.li-text-333333-color{color:rgb(51,51,51)}
|
|
||||||
.li-text-36{font-size:36rpx}
|
|
||||||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
|
||||||
.li-w-full-100{width:100%}
|
|
||||||
.li-h-100{height:100rpx}
|
.li-h-100{height:100rpx}
|
||||||
.li-h-240{height:240rpx}
|
.li-h-240{height:240rpx}
|
||||||
.li-h-250{height:250rpx}
|
.li-h-250{height:250rpx}
|
||||||
|
|
@ -123,14 +74,17 @@
|
||||||
.li-pb-10{padding-bottom:10rpx}
|
.li-pb-10{padding-bottom:10rpx}
|
||||||
.li-pb-14{padding-bottom:14rpx}
|
.li-pb-14{padding-bottom:14rpx}
|
||||||
.li-pb-20{padding-bottom:20rpx}
|
.li-pb-20{padding-bottom:20rpx}
|
||||||
|
.li-pt-20{padding-top:20rpx}
|
||||||
.li-pt-8{padding-top:8rpx}
|
.li-pt-8{padding-top:8rpx}
|
||||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||||
|
.li-rd-20{border-radius:20rpx}
|
||||||
.li-rd-full-50{border-radius:50%}
|
.li-rd-full-50{border-radius:50%}
|
||||||
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
||||||
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
||||||
.li-text-000000-color{color:rgb(0,0,0)}
|
.li-text-000000-color{color:rgb(0,0,0)}
|
||||||
.li-text-19171B-color{color:rgb(25,23,27)}
|
.li-text-19171B-color{color:rgb(25,23,27)}
|
||||||
.li-text-20{font-size:20rpx}
|
.li-text-20{font-size:20rpx}
|
||||||
|
.li-text-32{font-size:32rpx}
|
||||||
.li-text-34{font-size:34rpx}
|
.li-text-34{font-size:34rpx}
|
||||||
.li-text-38{font-size:38rpx}
|
.li-text-38{font-size:38rpx}
|
||||||
.li-text-706e70-color{color:rgb(112,110,112)}
|
.li-text-706e70-color{color:rgb(112,110,112)}
|
||||||
|
|
@ -145,35 +99,81 @@
|
||||||
.li-w-50{width:50rpx}
|
.li-w-50{width:50rpx}
|
||||||
.li-w-60{width:60rpx}
|
.li-w-60{width:60rpx}
|
||||||
.li-w-full-94{width:94%}
|
.li-w-full-94{width:94%}
|
||||||
|
.li-ml-20{margin-left:20rpx}
|
||||||
.li-ml-200{margin-left:200rpx}
|
.li-ml-200{margin-left:200rpx}
|
||||||
.li-ml-30{margin-left:30rpx}
|
.li-ml-30{margin-left:30rpx}
|
||||||
|
.li-mr-10{margin-right:10rpx}
|
||||||
.li-mr-30{margin-right:30rpx}
|
.li-mr-30{margin-right:30rpx}
|
||||||
|
.li-mt-300-important{margin-top:300rpx !important}
|
||||||
|
.li-pt-2{padding-top:2rpx}
|
||||||
.li-text-25{font-size:25rpx}
|
.li-text-25{font-size:25rpx}
|
||||||
.li-text-35{font-size:35rpx}
|
.li-text-35{font-size:35rpx}
|
||||||
|
.li-text-42{font-size:42rpx}
|
||||||
.li-text-46{font-size:46rpx}
|
.li-text-46{font-size:46rpx}
|
||||||
.li-w-full-80{width:80%}
|
.li-w-full-80{width:80%}
|
||||||
|
|
||||||
.li-mb-25{margin-bottom:25rpx}
|
|
||||||
.li-w-full-90{width:90%}
|
|
||||||
|
|
||||||
.li-font-550{font-weight:550}
|
.li-font-550{font-weight:550}
|
||||||
.li-h-68{height:68rpx}
|
.li-h-68{height:68rpx}
|
||||||
.li-mt-100{margin-top:100rpx}
|
.li-mt-100{margin-top:100rpx}
|
||||||
.li-mt-28{margin-top:28rpx}
|
.li-mt-28{margin-top:28rpx}
|
||||||
.li-mt-32{margin-top:32rpx}
|
.li-mt-32{margin-top:32rpx}
|
||||||
|
.li-mt-90{margin-top:90rpx}
|
||||||
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
|
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
|
||||||
.li-pt-270{padding-top:270rpx}
|
.li-pt-270{padding-top:270rpx}
|
||||||
.li-rd-40{border-radius:40rpx}
|
.li-rd-40{border-radius:40rpx}
|
||||||
.li-text-2EA1EA-color{color:rgb(46,161,234)}
|
.li-text-2EA1EA-color{color:rgb(46,161,234)}
|
||||||
.li-text-a5a5a5-color{color:rgb(165,165,165)}
|
.li-text-a5a5a5-color{color:rgb(165,165,165)}
|
||||||
|
.li-w-150{width:150rpx}
|
||||||
.li-w-420{width:420rpx}
|
.li-w-420{width:420rpx}
|
||||||
|
.li-w-full-85{width:85%}
|
||||||
|
.li-w-full-90{width:90%}
|
||||||
|
|
||||||
|
.li-h-110{height:110rpx}
|
||||||
|
.li-items-start{align-items:start}
|
||||||
|
.li-mb-12{margin-bottom:12rpx}
|
||||||
|
.li-mb-20{margin-bottom:20rpx}
|
||||||
|
.li-mb-8{margin-bottom:8rpx}
|
||||||
|
.li-ml-15{margin-left:15rpx}
|
||||||
|
.li-mr-12{margin-right:12rpx}
|
||||||
|
.li-mr-3{margin-right:3rpx}
|
||||||
|
.li-mr-6{margin-right:6rpx}
|
||||||
|
.li-mt-40{margin-top:40rpx}
|
||||||
|
.li-pb-25{padding-bottom:25rpx}
|
||||||
|
.li-pb-30{padding-bottom:30rpx}
|
||||||
|
.li-pl-20{padding-left:20rpx}
|
||||||
|
.li-pl-30{padding-left:30rpx}
|
||||||
|
.li-pr-30{padding-right:30rpx}
|
||||||
|
.li-pt-30{padding-top:30rpx}
|
||||||
|
.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
|
||||||
|
.li-text-009aff-color{color:rgb(0,154,255)}
|
||||||
|
.li-text-40{font-size:40rpx}
|
||||||
|
.li-text-55{font-size:55rpx}
|
||||||
|
.li-text-5f5f5f-color{color:rgb(95,95,95)}
|
||||||
|
.li-text-666-color{color:rgb(102,102,102)}
|
||||||
|
.li-text-70{font-size:70rpx}
|
||||||
|
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
||||||
|
.li-text-right{text-align:right}
|
||||||
|
.li-w-110{width:110rpx}
|
||||||
|
.li-w-400{width:400rpx}
|
||||||
|
.li-w-full-92{width:92%}
|
||||||
|
.overflow-hidden{overflow:hidden}
|
||||||
|
|
||||||
|
|
||||||
|
.li-ml-6{margin-left:6rpx}
|
||||||
|
.li-p-15{padding:15rpx}
|
||||||
|
.li-pb-15{padding-bottom:15rpx}
|
||||||
|
.li-pt-25{padding-top:25rpx}
|
||||||
|
.li-pt-4{padding-top:4rpx}
|
||||||
|
.li-text-333333-color{color:rgb(51,51,51)}
|
||||||
|
.li-text-36{font-size:36rpx}
|
||||||
|
.li-text-ff0000-color{color:rgb(255,0,0)}
|
||||||
|
.li-w-full-100{width:100%}
|
||||||
|
|
||||||
.li-font-400{font-weight:400}
|
.li-font-400{font-weight:400}
|
||||||
.li-m-30{margin:30rpx}
|
.li-m-30{margin:30rpx}
|
||||||
.li-text-595959-color{color:rgb(89,89,89)}
|
.li-text-595959-color{color:rgb(89,89,89)}
|
||||||
|
|
||||||
|
.li-mb-25{margin-bottom:25rpx}
|
||||||
|
|
||||||
|
|
||||||
.li-mb-30{margin-bottom:30rpx}
|
.li-mb-30{margin-bottom:30rpx}
|
||||||
.li-ml-10{margin-left:10rpx}
|
.li-ml-10{margin-left:10rpx}
|
||||||
|
|
@ -195,7 +195,6 @@
|
||||||
.li-w-500{width:500rpx}
|
.li-w-500{width:500rpx}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.li-mb-10{margin-bottom:10rpx}
|
.li-mb-10{margin-bottom:10rpx}
|
||||||
.li-mb-15{margin-bottom:15rpx}
|
.li-mb-15{margin-bottom:15rpx}
|
||||||
.li-mb-40{margin-bottom:40rpx}
|
.li-mb-40{margin-bottom:40rpx}
|
||||||
|
|
@ -204,6 +203,7 @@
|
||||||
.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
|
.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
|
||||||
.li-text-07c160-color{color:rgb(7,193,96)}
|
.li-text-07c160-color{color:rgb(7,193,96)}
|
||||||
|
|
||||||
|
|
||||||
.li-h-90{height:90rpx}
|
.li-h-90{height:90rpx}
|
||||||
.li-text-47{font-size:47rpx}
|
.li-text-47{font-size:47rpx}
|
||||||
.li-w-90{width:90rpx}
|
.li-w-90{width:90rpx}
|
||||||
|
|
@ -221,29 +221,31 @@
|
||||||
|
|
||||||
.li-flex-1{flex:1}
|
.li-flex-1{flex:1}
|
||||||
.li-flex-wrap{flex-wrap:wrap}
|
.li-flex-wrap{flex-wrap:wrap}
|
||||||
.li-line-clamp-2{overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
|
.li-mt-25{margin-top:25rpx}
|
||||||
.li-text-999999-color{color:rgb(153,153,153)}
|
.li-text-999999-color{color:rgb(153,153,153)}
|
||||||
.li-w-160{width:160rpx}
|
.li-w-160{width:160rpx}
|
||||||
|
|
||||||
|
.li-line-clamp-2{overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
|
||||||
.li-w-full-96{width:96%}
|
.li-w-full-96{width:96%}
|
||||||
|
|
||||||
.li-mt-25{margin-top:25rpx}
|
.li-px-15{padding-left:15rpx;padding-right:15rpx}
|
||||||
|
|
||||||
.li-text-52{font-size:52rpx}
|
.li-text-52{font-size:52rpx}
|
||||||
|
|
||||||
|
|
||||||
|
.li-opacity-80{undefined:0.8}
|
||||||
|
.li-pb-40{padding-bottom:40rpx}
|
||||||
|
.li-px-20{padding-left:20rpx;padding-right:20rpx}
|
||||||
.li-h-100{height:100rpx}
|
.li-py-10{padding-top:10rpx;padding-bottom:10rpx}
|
||||||
.li-ml-30{margin-left:30rpx}
|
.li-py-100{padding-top:100rpx;padding-bottom:100rpx}
|
||||||
.li-mr-30{margin-right:30rpx}
|
.li-py-15{padding-top:15rpx;padding-bottom:15rpx}
|
||||||
.li-pt-2{padding-top:2rpx}
|
.li-rd-30{border-radius:30rpx}
|
||||||
.li-rd-full-50{border-radius:50%}
|
.li-text-100{font-size:100rpx}
|
||||||
.li-text-25{font-size:25rpx}
|
.li-text-3e9bff-color{color:rgb(62,155,255)}
|
||||||
.li-text-35{font-size:35rpx}
|
.li-text-50{font-size:50rpx}
|
||||||
.li-text-46{font-size:46rpx}
|
.li-text-52c41a-color{color:rgb(82,196,26)}
|
||||||
.li-w-100{width:100rpx}
|
.li-text-60{font-size:60rpx}
|
||||||
.li-w-full-80{width:80%}
|
.li-text-ccc-color{color:rgb(204,204,204)}
|
||||||
|
.li-text-ff4d4f-color{color:rgb(255,77,79)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue