t

src/views/house/trendonly.vue

@@ -1,9 +1,40 @@
 <template>
   <div class="app-container">
     <div class="scoped-top">
-      <div class="t">当前时间：{{curTime}}，将在 <div class="b">{{countdown}}</div> 秒后自动刷新页面</div>
+      <div class="t">当前时间:{{curTime}}，将在 <div class="b">{{countdown}}</div> 秒后自动刷新页面</div>
     </div>
-    <table-list
+    <div class="scoped-table">
+      <div class="st-th">
+        <div class="st-td td1">更新时间</div>
+        <div class="st-td td2">楼盘</div>
+        <div class="st-td td3">产品面积</div>
+        <div class="st-td td4">起始价</div>
+        <div class="st-td td5">最新动态</div>
+        <div class="st-td td6">现场折扣</div>
+        <div class="st-td td7">实际折扣</div>
+        <div class="st-td td8">在售楼栋</div>
+        <div class="st-td td9">待售楼栋</div>
+        <div class="st-td td10">推荐房源</div>
+      </div>
+      <div class="st-body">
+        <div class="st-tr" v-for="(item, i) in tableData2" :key="i">
+          <div class="st-td td1">{{item.update_re}}</div>
+          <div class="st-td td2">{{item.estate_name}}</div>
+          <div class="st-td td3">{{ item.product_type2 }} <div class="s">{{item.house_square}}㎡</div> </div>
+          <div class="st-td td4 red">{{item.price_minPrice_max}}</div>
+          <div class="st-td td5">{{getShowStr(item.dynamic)}}</div>
+          <div class="st-td td6">{{getShowStr(item.scene_discount)}}</div>
+          <div class="st-td td7">{{getShowStr(item.actual_discount)}}</div>
+          <div class="st-td td8">{{getShowStr(item.on_sale)}}</div>
+          <div class="st-td td9">{{getShowStr(item.for_sale)}}</div>
+          <div class="st-td td10">{{getShowStr(item.recommend)}}</div>
+        </div>
+      </div>
+    </div>
+
+
+
+    <!-- <table-list
       :list-loading="listLoading"
       :data="tableData2"
       :columns="listConfig"
@@ -12,7 +43,7 @@
       :total-records="totalRecords"
       @currentChange="pageHandle"
       @sizeChange="sizeChange"
-    />
+    /> -->
 
   </div>
 </template>
@@ -51,7 +82,8 @@ export default {
       arr.map(item => {
         item.estate_nameArea_type = `${atObj[item.area_type]}:${item.estate_name}`
         item.product_typeHouse_square = `${ptObj[item.product_type]}:${item.house_square}㎡`
-        item.price_minPrice_max = item.price_max && Number(item.price_max) > 0 ? `￥${item.price_min}-${item.price_max}万` : `￥${item.price_min}万-上限未知`
+        item.product_type2 = `${ptObj[item.product_type]}`
+        item.price_minPrice_max = item.price_max && Number(item.price_max) > 0 ? `￥${item.price_min}-${item.price_max}万` : `￥${item.price_min}万-未知`
       })
       return arr
     }
@@ -93,6 +125,9 @@ export default {
     }
   },
   methods: {
+    getShowStr(str) {
+      return str === 'null' ? '' : str;
+    },
     getTime () {
       let date = new Date()
       let year = date.getFullYear()
@@ -127,9 +162,8 @@ export default {
 <style lang="scss" scoped>
 .scoped-top {
   text-align: center;
-  font-size: 20px;
+  font-size: 28px;
   color: #333;
-  margin-top: -10px;
   padding-bottom: 10px;
   .b {
     display: inline-block;
@@ -137,4 +171,72 @@ export default {
     color: #2d8cf0;
   }
 }
+
+.scoped-table {
+  .st-th {
+    display: flex;
+    color: #999;
+  }
+  .st-body {
+    border: 1px solid #e6e6e6;
+  }
+  .st-tr {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:nth-child(2n+1) {
+      background: #f2f2f2;
+    }
+  }
+  .st-td {
+    padding: 10px;
+    font-size: 22px;
+    flex: 1;
+    color: #666;
+    text-align: center;
+    box-sizing: content-box;
+    &.red {
+      color: #ed4014;
+      font-weight: bold;
+    }
+    .s {
+      color: #333;
+      font-weight: bold;
+    }
+    &.td1 {
+      flex: none;
+      width: 100px;
+    }
+    &.td2 {
+      flex: none;
+      width: 190px;
+    }
+    &.td3 {
+      flex: none;
+      width: 120px;
+    }
+    &.td4 {
+      flex: none;
+      width: 140px;
+    }
+    &.td5 {
+      text-align: left;
+    }
+    &.td6 {
+      text-align: left;
+    }
+    &.td7 {
+      text-align: left;
+    }
+    &.td8 {
+      text-align: left;
+    }
+    &.td9 {
+      text-align: left;
+    }
+    &.td10 {
+      text-align: left;
+    }
+  }
+}
 </style>