| | |
| | | <img src="@/assets/center-top-left.png" alt=""> |
| | | <div> |
| | | <div class="label">申请总户数(户)</div> |
| | | <div class="value">8888</div> |
| | | <div class="value">{{ data.houseHoldCount }}</div> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | <img src="@/assets/center-top-right.png" alt=""> |
| | | <div> |
| | | <div class="label">本月应补偿总额(万元)</div> |
| | | <div class="value">8888 <span>环比</span><span class="value-change value-change-down">-4%</span></div> |
| | | <div class="value">{{ data.monthCompensationAmount }} <span>环比</span><span class="value-change value-change-down">{{ data.monthCompensationAmountRate }}</span></div> |
| | | </div> |
| | | </div> |
| | | <div class="data-item"> |
| | | <img src="@/assets/center-top-right.png" alt=""> |
| | | <div> |
| | | <div class="label">下月应补偿总额(万元)</div> |
| | | <div class="value">8888 <span>环比</span><span class="value-change value-change-up">+4%</span></div> |
| | | <div class="value">{{ data.nextMonthCompensationAmount }} <span>环比</span><span class="value-change value-change-up">{{ data.nextMonthCompensationAmountRate }}</span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <!-- 中间地图 --> |
| | | <div class="center-middle"> |
| | | <Map :data="data.mapResponses" /> |
| | | <Map :data="data" /> |
| | | </div> |
| | | |
| | | <!-- 中间下部数据 --> |
| | |
| | | |
| | | .map-data { |
| | | display: flex; |
| | | justify-content: center; |
| | | justify-content: space-between; |
| | | padding-left: 94px; |
| | | padding-right: 94px; |
| | | height: 100%; |
| | | align-items: center; |
| | | |
| | | .data-item { |
| | | display: flex; |
| | | width: 268px; |
| | | |
| | | flex-shrink: 0; |
| | | img { |
| | | width: 94px; |
| | | height: 80px; |