|
|
@@ -1,342 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="work-project-index">
|
|
|
- <div class="work-project-box">
|
|
|
- <div class="work-project-left">
|
|
|
- <div class="work-project-house box-background">
|
|
|
- <div class="title">
|
|
|
- <span class="label">房源管理</span>
|
|
|
- </div>
|
|
|
- <div class="box-list">
|
|
|
- <div class="box-node box-line">
|
|
|
- <div class="name">总面积(㎡)</div>
|
|
|
- <div class="number alibaba">120</div>
|
|
|
- </div>
|
|
|
- <div class="box-node box-line">
|
|
|
- <div class="name">已租面积(㎡)</div>
|
|
|
- <div class="number alibaba">100</div>
|
|
|
- </div>
|
|
|
- <div class="box-node">
|
|
|
- <div class="name">剩余面积(㎡)</div>
|
|
|
- <div class="number alibaba">20</div>
|
|
|
- </div>
|
|
|
- <div class="box-node box-line">
|
|
|
- <div class="name">总房源(个)</div>
|
|
|
- <div class="number alibaba">28</div>
|
|
|
- </div>
|
|
|
- <div class="box-node box-line">
|
|
|
- <div class="name">已租房源(个)</div>
|
|
|
- <div class="number alibaba">26</div>
|
|
|
- </div>
|
|
|
- <div class="box-node">
|
|
|
- <div class="name">剩余房源(个)</div>
|
|
|
- <div class="number alibaba">2</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-project-bill box-background">
|
|
|
- <div class="title">
|
|
|
- <span class="label">费用管理</span>
|
|
|
- <div class="title-option">
|
|
|
- <div v-for="(item,index) in billList"
|
|
|
- :class="nowBillId === item.id ?'option-item active':'option-item'"
|
|
|
- @click="nowBillId = item.id">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-order-detail">
|
|
|
- <div class="detail-item">
|
|
|
- <span class="label">房租费用</span>
|
|
|
- <span class="detail-icon"></span>
|
|
|
- <div class="detail-test">
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">应收(万)</div>
|
|
|
- <div class="number alibaba">120</div>
|
|
|
- </div>
|
|
|
- <div class="test-item line">
|
|
|
- <div class="name">已收(万)</div>
|
|
|
- <div class="number alibaba">110</div>
|
|
|
- </div>
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">逾期(万)</div>
|
|
|
- <div class="number alibaba">10</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <span class="label">物业费用</span>
|
|
|
- <span class="detail-icon"></span>
|
|
|
- <div class="detail-test">
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">应收(万)</div>
|
|
|
- <div class="number alibaba">12</div>
|
|
|
- </div>
|
|
|
- <div class="test-item line">
|
|
|
- <div class="name">已收(万)</div>
|
|
|
- <div class="number alibaba">11</div>
|
|
|
- </div>
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">逾期(万)</div>
|
|
|
- <div class="number alibaba">1</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <span class="label">水电费用</span>
|
|
|
- <span class="detail-icon"></span>
|
|
|
- <div class="detail-test">
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">应收(万)</div>
|
|
|
- <div class="number alibaba">1.2</div>
|
|
|
- </div>
|
|
|
- <div class="test-item line">
|
|
|
- <div class="name">已收(万)</div>
|
|
|
- <div class="number alibaba">1.1</div>
|
|
|
- </div>
|
|
|
- <div class="test-item">
|
|
|
- <div class="name">逾期(万)</div>
|
|
|
- <div class="number alibaba">0.1</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-project-client box-background">
|
|
|
- <div class="title">
|
|
|
- <span class="label">客户管理</span>
|
|
|
- <div class="more">查看更多>></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-project-center"></div>
|
|
|
- <div class="work-project-right"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- billList: [{
|
|
|
- id: 1,
|
|
|
- name: '当月'
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- name: '当年'
|
|
|
- }, {
|
|
|
- id: 3,
|
|
|
- name: '累计'
|
|
|
- }],
|
|
|
- nowBillId: 1
|
|
|
- }
|
|
|
- },
|
|
|
- created() {},
|
|
|
- methods: {},
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .work-project-index {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- background: $--background;
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- background: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.2));
|
|
|
- margin: 15px;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 10px;
|
|
|
- border-left: 1px solid rgba(110, 163, 255, 0.3);
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- left: -1px;
|
|
|
- bottom: 10px;
|
|
|
- position: absolute;
|
|
|
- height: 20px;
|
|
|
- width: 2px;
|
|
|
- background: #4777e3;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- flex: 1;
|
|
|
- width: 0;
|
|
|
- overflow: hidden;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .title-option {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: rgba(26, 38, 60, 0.8);
|
|
|
- height: 20px;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .option-item {
|
|
|
- width: 60px;
|
|
|
- height: 20px;
|
|
|
- color: #818CA2;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- border-radius: 2px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .option-item.active,
|
|
|
- .option-item:hover {
|
|
|
- background: #6c7589;
|
|
|
- color: #D2E4FF;
|
|
|
- }
|
|
|
-
|
|
|
- .more {
|
|
|
- color: $--color-primary;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .box-node {
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 2px 0;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- &.box-line::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- height: 20px;
|
|
|
- width: 1px;
|
|
|
- background: rgba(123, 149, 198, 0.36);
|
|
|
- top: 16px;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .work-order-detail {
|
|
|
- padding: 0 15px;
|
|
|
-
|
|
|
- .detail-item {
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-item,
|
|
|
- .detail-test {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-icon {
|
|
|
- width: 15px;
|
|
|
- height: 20px;
|
|
|
- background: url(../../../assets/image/safe/title-icon.png) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- font-weight: 600;
|
|
|
- width: 56px;
|
|
|
- font-size: 13px;
|
|
|
- margin-left: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-test,
|
|
|
- .test-item {
|
|
|
- flex: 1;
|
|
|
- width: 0;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .test-item {
|
|
|
- text-align: center;
|
|
|
- padding: 2px 0;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom: 2px;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-list {
|
|
|
- padding: 20px 0 14px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .line::before,
|
|
|
- .line::after {
|
|
|
- content: '';
|
|
|
- width: 1px;
|
|
|
- height: 20px;
|
|
|
- background: rgba(123, 149, 198, 0.36);
|
|
|
- position: absolute;
|
|
|
- top: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .line::before {
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .line::after {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .work-project-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .work-project-left {
|
|
|
- width: 450px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .work-project-house {
|
|
|
- margin-bottom: 15px;
|
|
|
-
|
|
|
- .box-node {
|
|
|
- width: 33.333333%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .work-project-bill {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-project-client {
|
|
|
- flex: 1;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-</style>
|
