添加图标

13404089107

2025-03-26 3465d50e50361b106684386f1055d7df2e6da97f

添加图标

 src/assets/area.png

 src/assets/blue.png

 src/assets/green.png

 src/assets/money.png

 src/assets/red.png

 src/assets/rent.png

 src/assets/successPay.png

 src/assets/yellow.png

 src/components/BottomCharts.vue

@@ -12,19 +12,19 @@
    </div>
    <div class="map-container">
      <div class="map-marker-item" @click="handleMapMarkerClick('已出租')" :class="{ active: activeStatus === '已出租' }">
        <div class="map-marker-item-icon"></div>
         <img :src="require('@/assets/blue.png')" width="30" height="30">
        <div class="map-marker-item-text">已出租</div>
      </div>
      <div class="map-marker-item" @click="handleMapMarkerClick('待出租')" :class="{ active: activeStatus === '待出租' }">
        <div class="map-marker-item-icon"></div>
        <img :src="require('@/assets/yellow.png')" width="30" height="30">
        <div class="map-marker-item-text">待出租</div>
      </div>
      <div class="map-marker-item" @click="handleMapMarkerClick('维修中')" :class="{ active: activeStatus === '维修中' }">
        <div class="map-marker-item-icon"></div>
        <img :src="require('@/assets/red.png')" width="30" height="30">
        <div class="map-marker-item-text">维修中</div>
      </div>
      <div class="map-marker-item" @click="handleMapMarkerClick('欠费')" :class="{ active: activeStatus === '欠费' }">
        <div class="map-marker-item-icon"></div>
        <img :src="require('@/assets/green.png')" width="30" height="30">
        <div class="map-marker-item-text">欠费</div>
      </div>
    </div>
@@ -325,7 +325,7 @@

  &:nth-child(1) {
    .map-marker-item-icon {
      background-color: #4fd9ff;
      // background-color: #4fsdsad9ff;
      &::before,
      &::after {
        border: 2px solid #4fd9ff;
@@ -335,7 +335,7 @@

  &:nth-child(2) {
    .map-marker-item-icon {
      background-color: #faad14;
      // background-color: #faad14;
      &::before,
      &::after {
        border: 2px solid #faad14;
@@ -345,7 +345,7 @@

  &:nth-child(3) {
    .map-marker-item-icon {
      background-color: #ff4d4f;
      // background-color: #ff4d4f;
      &::before,
      &::after {
        border: 2px solid #ff4d4f;
@@ -355,7 +355,7 @@

  &:nth-child(4) {
    .map-marker-item-icon {
      background-color: #39c5bb;
      // background-color: #39c5bb;
      &::before,
      &::after {
        border: 2px solid #39c5bb;

 src/components/LeftPanel.vue

@@ -7,12 +7,14 @@
    <div class="header-left" style="width: 350px;">
      <div class="stat-group">
        <div class="stat-item">
          <img :src="require('@/assets/area.png')" width="40" height="40" />
          <div class="stat-info">
            <div class="stat-label"> <i class="icon-area"></i> 房屋总面积</div>
            <div class="stat-value">{{ staticsData.houseTotalArea }}<span class="unit">m²</span></div>
          </div>
        </div>
        <div class="stat-item">
          <img :src="require('@/assets/rent.png')" width="40" height="40" />
          <div class="stat-info">
            <div class="stat-label"> <i class="icon-area"></i>已出租面积</div>
            <div class="stat-value">{{ staticsData.houseRentedArea }}<span class="unit">m²</span></div>
@@ -22,12 +24,14 @@
      <div class="header-right">
        <div class="stat-group">
          <div class="stat-item mt-10">
            <img :src="require('@/assets/money.png')" width="40" height="40" />
            <div class="stat-info">
              <div class="stat-label"> <i class="icon-money"></i>总计应收租金</div>
              <div class="stat-value">{{ staticsData.totalReceivableRent }}<span class="unit">万元</span></div>
            </div>
          </div>
          <div class="stat-item mt-10">
              <img :src="require('@/assets/successPay.png')" width="40" height="40" />
            <div class="stat-info">
              <div class="stat-label"><i class="icon-money"></i>总计已收租金</div>
              <div class="stat-value">{{ staticsData.totalReceivedRent }}<span class="unit">万元</span></div>