|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="bottomRight">
|
|
|
|
|
<div id="bottomRight" @mouseenter="isPause = true" @mouseleave="isPause = false">
|
|
|
|
|
<div class="bg-color-black">
|
|
|
|
|
<div class="d-flex pt-2">
|
|
|
|
|
<div class="title">
|
|
|
|
|
@ -10,24 +10,76 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex">
|
|
|
|
|
<div class="decoration2">
|
|
|
|
|
<dv-decoration-2 :reverse="true" style="position:absolute;width:5px;height:6rem;" />
|
|
|
|
|
<dv-decoration-2
|
|
|
|
|
:reverse="true"
|
|
|
|
|
style="position: absolute; width: 5px; height: 6rem"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<svg class="arrow"
|
|
|
|
|
viewBox="0 0 1024 1024"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
@click="() => {
|
|
|
|
|
--index;
|
|
|
|
|
showLease = leaseList[index % leaseList.length];
|
|
|
|
|
}">
|
|
|
|
|
<path d="M635.733333 490.666667l174.933334 174.933333-64 59.733333-234.666667-234.666666L746.666667 256 810.666667 315.733333l-174.933334 174.933334z m-260.266666 0l174.933333 174.933333-59.733333 59.733333L256 490.666667 490.666667 256l59.733333 59.733333-174.933333 174.933334z" fill="currentColor"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<span v-for="item in leaseName">{{ item.name }}</span>
|
|
|
|
|
<div>
|
|
|
|
|
<div>承租方</div>
|
|
|
|
|
<div>{{ showLease.chengzufang }}</div>
|
|
|
|
|
<img :src="require('@/assets/lease.png')" alt="">
|
|
|
|
|
<template>
|
|
|
|
|
<transition-group name="fade">
|
|
|
|
|
<div class="area-name" key="1" v-show="index%2">
|
|
|
|
|
<div v-for="(item) in leaseName.slice(0,3)">{{ item.name }}</div>
|
|
|
|
|
<div v-if="leaseName.length > 3">...等共{{ leaseName.length }}处</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>租赁期限</div>
|
|
|
|
|
<div>{{ showLease.zulinkaishiqixian }}~{{ showLease.zulinjieshuqixian }}</div>
|
|
|
|
|
<div class="area-name" key="2" v-show="!index%2">
|
|
|
|
|
<div v-for="(item) in leaseName.slice(0,3)">{{ item.name }}</div>
|
|
|
|
|
<div v-if="leaseName.length > 3">...等共{{ leaseName.length }}处</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>面积</div>
|
|
|
|
|
<div>{{ showLease.chengzufang }}</div>
|
|
|
|
|
</transition-group>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<svg class="arrow"
|
|
|
|
|
viewBox="0 0 1024 1024"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
@click="() => {
|
|
|
|
|
++index;
|
|
|
|
|
showLease = leaseList[index % leaseList.length];
|
|
|
|
|
}">
|
|
|
|
|
<path d="M430.933333 490.666667L256 665.6 315.733333 725.333333l234.666667-234.666666L315.733333 256 256 315.733333l174.933333 174.933334z m256 0L512 665.6l59.733333 59.733333 234.666667-234.666666L576 256 512 315.733333l174.933333 174.933334z" fill="currentColor"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-item__label">承租方</div>
|
|
|
|
|
<div class="info-item__value">{{ showLease.chengzufang }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-item__label">租赁期限</div>
|
|
|
|
|
<div class="info-item__value">
|
|
|
|
|
{{ showLease.zulinkaishiqixian }} ~ {{
|
|
|
|
|
showLease.zulinjieshuqixian
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-item__label">面积</div>
|
|
|
|
|
<div class="info-item__value">
|
|
|
|
|
<dv-digital-flop
|
|
|
|
|
style="height: 11.8px;width: 100px;"
|
|
|
|
|
:config="{
|
|
|
|
|
number: [areas],
|
|
|
|
|
toFixed: 2,
|
|
|
|
|
content: '{nt}m²',
|
|
|
|
|
textAlign: 'left',
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
}
|
|
|
|
|
}" />
|
|
|
|
|
<!-- {{ areas }} m²-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -36,53 +88,81 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon"
|
|
|
|
|
import Chart from "@/components/Charts"
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
SvgIcon
|
|
|
|
|
SvgIcon,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isPause: false,
|
|
|
|
|
showLease: {},
|
|
|
|
|
timer: null,
|
|
|
|
|
index: 0,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.showLease = this.leaseList[this.index % this.leaseList.length];
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
this.showLease = this.leaseList[this.index%this.leaseList.length]
|
|
|
|
|
if (!this.isPause) {
|
|
|
|
|
this.index++;
|
|
|
|
|
},5000)
|
|
|
|
|
this.showLease = this.leaseList[this.index % this.leaseList.length];
|
|
|
|
|
}
|
|
|
|
|
}, 5000);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
computed: {
|
|
|
|
|
leaseName() {
|
|
|
|
|
let temp = this.index;
|
|
|
|
|
return [...this.showLease?.land || [],...this.showLease?.houses || []]
|
|
|
|
|
return [
|
|
|
|
|
...(this.showLease?.land || []),
|
|
|
|
|
...(this.showLease?.houses || []),
|
|
|
|
|
];
|
|
|
|
|
},
|
|
|
|
|
areas() {
|
|
|
|
|
let temp = this.index;
|
|
|
|
|
return [
|
|
|
|
|
...(this.showLease?.land || []),
|
|
|
|
|
...(this.showLease?.houses || []),
|
|
|
|
|
].reduce(
|
|
|
|
|
(pre, cur) =>
|
|
|
|
|
pre +
|
|
|
|
|
(!isNaN(Number(cur.shijimianji || 0))
|
|
|
|
|
? Number(cur.shijimianji || 0)
|
|
|
|
|
: 0),
|
|
|
|
|
0
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
leaseList() {
|
|
|
|
|
return this.$store.state.bigdata.adventLeases || []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return this.$store.state.bigdata.leases || [];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
#bottomRight {
|
|
|
|
|
padding: 20px 10px;
|
|
|
|
|
user-select: none;
|
|
|
|
|
padding: 20px 10px 34px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.bg-color-black {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 0;
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
}
|
|
|
|
|
@ -92,4 +172,56 @@ export default {
|
|
|
|
|
height: 24px;
|
|
|
|
|
color: #1da4a1;
|
|
|
|
|
}
|
|
|
|
|
.top {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 33px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.area-name {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%,26%);
|
|
|
|
|
}
|
|
|
|
|
.arrow {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 36px;
|
|
|
|
|
color: #8ef0e0;
|
|
|
|
|
animation: colors linear 6s infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bottom {
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
.info-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
|
width: 150px;
|
|
|
|
|
color: #8ef0e0;
|
|
|
|
|
padding-left: 46px;
|
|
|
|
|
padding-right: 36px;
|
|
|
|
|
}
|
|
|
|
|
&__value {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.info-item + .info-item {
|
|
|
|
|
padding-top: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes colors {
|
|
|
|
|
0%,100% {
|
|
|
|
|
color: #8ef0e0;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
color: #19506c;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
