feat: .

src/views/data/data.js

@@ -23,6 +23,16 @@ export const houseData = [
     ],
     price: "RMB 25000/㎡",
     total: "RMB 130-275 (million/set)",
+    allScore: 7.5,
+    score1: 8.4,
+    score2: 8,
+    score3: 7.8,
+    score4: 7.3,
+    plan: "The project’s community planning scores higher than 75% of similar properties in the area, with separate routes for pedestrians and vehicles.",
+    unitRating:
+      "The floor plan design scores higher than 82.1% of similar properties nearby, offering units from 64 to 163 sqm with 1 to 4 bedrooms.",
+    traffic:
+      "The project’s transport access scores higher than 75% of similar properties, with 35 bus stops within a 3 km radius.",
   },
   {
     id: 2,
@@ -47,6 +57,16 @@ export const houseData = [
     ],
     price: "RMB 24000/㎡",
     total: "RMB 170-315 (million/set)",
+    allScore: 7.5,
+    score1: 8.4,
+    score2: 8,
+    score3: 7.8,
+    score4: 7.3,
+    plan: "The project’s community planning scores higher than 75% of similar properties in the area, with separate routes for pedestrians and vehicles.",
+    unitRating:
+      "The floor plan design scores higher than 82.1% of similar properties nearby, offering units from 64 to 163 sqm with 1 to 4 bedrooms.",
+    traffic:
+      "The project’s transport access scores higher than 75% of similar properties, with 35 bus stops within a 3 km radius.",
   },
   {
     id: 3,
@@ -66,6 +86,16 @@ export const houseData = [
     label: ["Off-Plan", " Park", " Two-Bedroom", " Compact Unit"],
     price: "RMB 25000/㎡",
     total: "RMB 115-255 (million/set)",
+    allScore: 7.5,
+    score1: 8.4,
+    score2: 8,
+    score3: 7.8,
+    score4: 7.3,
+    plan: "The project’s community planning scores higher than 75% of similar properties in the area, with separate routes for pedestrians and vehicles.",
+    unitRating:
+      "The floor plan design scores higher than 82.1% of similar properties nearby, offering units from 64 to 163 sqm with 1 to 4 bedrooms.",
+    traffic:
+      "The project’s transport access scores higher than 75% of similar properties, with 35 bus stops within a 3 km radius.",
   },
   {
     id: 4,
@@ -90,6 +120,16 @@ export const houseData = [
     ],
     price: "RMB 25000/㎡",
     total: "RMB 150-538 (million/set)",
+    allScore: 7.5,
+    score1: 8.4,
+    score2: 8,
+    score3: 7.8,
+    score4: 7.3,
+    plan: "The project’s community planning scores higher than 75% of similar properties in the area, with separate routes for pedestrians and vehicles.",
+    unitRating:
+      "The floor plan design scores higher than 82.1% of similar properties nearby, offering units from 64 to 163 sqm with 1 to 4 bedrooms.",
+    traffic:
+      "The project’s transport access scores higher than 75% of similar properties, with 35 bus stops within a 3 km radius.",
   },
   {
     id: 5,
@@ -109,5 +149,15 @@ export const houseData = [
     label: ["Direct Bus Access", " Park", " Two-Bedroom", " Compact Unit"],
     price: "RMB 16000/㎡",
     total: "RMB 130-200 (million/set)",
+    allScore: 7.5,
+    score1: 8.4,
+    score2: 8,
+    score3: 7.8,
+    score4: 7.3,
+    plan: "The project’s community planning scores higher than 75% of similar properties in the area, with separate routes for pedestrians and vehicles.",
+    unitRating:
+      "The floor plan design scores higher than 82.1% of similar properties nearby, offering units from 64 to 163 sqm with 1 to 4 bedrooms.",
+    traffic:
+      "The project’s transport access scores higher than 75% of similar properties, with 35 bus stops within a 3 km radius.",
   },
 ];

src/views/data/index.vue

@@ -148,6 +148,30 @@ const procressData = (list) => {
         case "谷歌经纬度":
           obj["location"] = item[key];
           break;
+        case "楼盘综合评分":
+          obj["allScore"] = item[key];
+          break;
+        case "小区":
+          obj["score1"] = item[key];
+          break;
+        case "户型":
+          obj["score2"] = item[key];
+          break;
+        case "交通":
+          obj["score3"] = item[key];
+          break;
+        case "配套":
+          obj["score4"] = item[key];
+          break;
+        case "小区规划":
+          obj["plan"] = item[key];
+          break;
+        case "户型评分":
+          obj["unitRating"] = item[key];
+          break;
+        case "交通情况":
+          obj["traffic"] = item[key];
+          break;
       }
     }
     // obj.vrLink = "https://www.4dkankan.com/panorama/show.html?id=WK1768236336482967552&vr=fd720_NZ0i3ASIq&lang=zh"

src/views/details/index.vue

@@ -130,7 +130,68 @@
             </div>
           </div>
           <div class="bottom-info-box">
-            <div class="name-info">
+            <h2 class="bottom-info-title">Property Value Analysis Report</h2>
+            <div class="rate-box">
+              <div class="rate-left">
+                <span>7.5</span>
+                <span>Overall Project Rating</span>
+              </div>
+              <div class="rate-right">
+                <div class="rate-right-top">
+                  <div class="rate-item">
+                    <span>Community {{ houseInfo.score1 }}</span>
+                    <div class="slide">
+                      <n-progress
+                        type="line"
+                        :show-indicator="false"
+                        :percentage="houseInfo.score1 * 10"
+                      />
+                    </div>
+                  </div>
+                  <div class="rate-item">
+                    <span> Layout {{ houseInfo.score2 }}</span>
+                    <div class="slide">
+                      <n-progress
+                        type="line"
+                        :show-indicator="false"
+                        :percentage="houseInfo.score2 * 10"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="rate-right-bottom">
+                  <div class="rate-item">
+                    <span>Transportation {{ houseInfo.score3 }}</span>
+                    <div class="slide">
+                      <n-progress
+                        type="line"
+                        :show-indicator="false"
+                        :percentage="houseInfo.score3 * 10"
+                      />
+                    </div>
+                  </div>
+                  <div class="rate-item">
+                    <span>Amenities {{ houseInfo.score4 }}</span>
+                    <div class="slide">
+                      <n-progress
+                        type="line"
+                        :show-indicator="false"
+                        :percentage="houseInfo.score4 * 10"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="info-box">
+              <div class="info-title">Community Planning</div>
+              <div class="info-desc">{{ houseInfo.plan }}</div>
+              <div class="info-title">Layout Rating</div>
+              <div class="info-desc">{{ houseInfo.unitRating }}</div>
+              <div class="info-title">Traffic Conditions</div>
+              <div class="info-desc">{{ houseInfo.traffic }}</div>
+            </div>
+            <!-- <div class="name-info">
               <h3>{{ houseInfo.title }}</h3>
               <div class="label-wrap">
                 <div class="label zs">{{ houseInfo.tags[0] }}</div>
@@ -140,7 +201,6 @@
             <div class="top-info">
               <span class="title">Reference Average Price</span>
               <span class="price-number">{{ houseInfo.price }}</span>
-              <!-- <span class="price-unit">元/平(单价) </span> -->
             </div>
 
             <div class="info-desc">
@@ -158,10 +218,9 @@
                   <span v-for="(i, key, index) in cadData"
                     >{{ key }}({{ i.length }})</span
                   >
-                  <!-- <span>四居室({{ 2 }})</span> -->
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="google-map" id="map">
@@ -695,13 +754,71 @@ onMounted(() => {
       }
     }
     .bottom-info-box {
-      width: 400px;
+      min-width: 400px;
       position: relative;
       padding: 20px 30px;
       box-sizing: border-box;
       border-radius: 4px;
       background: #fff;
       box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
+      .bottom-info-title {
+        font-size: 24px;
+      }
+      .rate-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .rate-left {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .rate-right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-start;
+          flex: 1;
+          margin-left: 20px;
+          .rate-right-top,
+          .rate-right-bottom {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1;
+            .rate-item {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              margin-right: 10px;
+              > span {
+                display: inline-block;
+                white-space: nowrap;
+              }
+              .slide {
+                flex: 1;
+                width: 60px;
+                margin-left: 5px;
+              }
+            }
+          }
+        }
+      }
+      .info-box {
+        .info-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: #000;
+          margin-top: 10px;
+        }
+        .info-desc {
+          font-size: 12px;
+          color: #000;
+        }
+      }
+
+      //
       .name-info {
         display: flex;
         font-size: 26px;
@@ -756,6 +873,7 @@ onMounted(() => {
           }
         }
       }
+      //
     }
   }
 }