|
@@ -0,0 +1,342 @@
|
|
|
+<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>
|