zhgkpt-datav/app/src/views/Home/components/BasicInfoModalContent.vue

<script>
export default {
  name: "BasicInfoModalContent",
  data() {
    return {
      options: [
        {
          value: '1',
          label: '1111'
        },
        {
          value: '2',
          label: '2222'
        },
        {
          value: '3',
          label: '3333'
        }
      ],
      tableData: [
        {
          idx: 1,
          area: "江北区",
          name: "大剧院",
          address: "江北区xxx街道x路x号",
          year: "2000年",
          height: 50,
        },
        {
          idx: 2,
          area: "渝北区",
          name: "科技园",
          address: "渝北区xxx街道x路x号",
          year: "2000年",
          height: 30,
        },
      ],
      unitList:[
        {
          title:'高层建筑总数(栋)',
          unitNum:487
        },
        {
          title:'超高层建筑总数(栋)',
          unitNum:87
        },
        {
          title:'老旧高层建筑总数(栋)',
          unitNum:165
        },
        {
          title:'公共建筑总数(栋)',
          unitNum:173
        },       
        {
          title:'住宅建筑总数(栋)',
          unitNum:287
        },  
      ],
      value:'全市'
    };
  },
  methods: {
    rowClickHandler() {
      this.$router.push("/detail");
    },
  },
};
</script>

<template>
  <div >
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <div class="maintenance-supervision_header">
        <div>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
     <div class="inp">
      <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
     </div>
      <el-button>搜索</el-button>
    </div>
    </div>
    <!-- 建筑数 -->
   <div class="unit-bulid">
    <div class="unit-num" v-for="(item,index) in unitList" :key="index">
      <span>{{ item.title }}</span>
      <!-- <span class="build-num">{{ item.unitNum }}</span> -->
      <LinearText
            style="display: inline-block"
            :text="item.unitNum"
            fontSize="40px"
          ></LinearText>
    </div>
   </div>
    <basic-table :data="tableData" @row-click="rowClickHandler">
      <el-table-column prop="idx" label="序号" width="180"> </el-table-column>
      <el-table-column prop="area" label="区域" width="180"> </el-table-column>
      <el-table-column prop="name" label="建筑名称"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="year" label="年代"> </el-table-column>
      <el-table-column prop="height" label="高度（米）"> </el-table-column>
    </basic-table>
    <br />
    <basic-pagination
      layout="->,prev, pager, next, sizes,jumper"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :total="1000"
    />
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    border: none;
    background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
    color: #fff;
  }
  ::v-deep(.el-button) {
    border: none;
    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
    color: #fff;
  }
  .maintenance-supervision_header {
    display: flex;
    // justify-content: space-around;
    // border-bottom: 1px solid #154956;
    padding-bottom: 16px;
    font-size: 12px;
    color: rgb(79, 149, 186);
  }
 
  .warp {
    height: 520px;
    margin: 0 auto;
    overflow: hidden;
    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  /deep/.el-input__inner {
  background-color: #184254;
  width: 150px;
  height: 30px;
  margin-bottom: 5px;

}
/deep/.el-button {
  width: 100px;
  height: 32px;
  font-size: 14px;
  line-height: 2px;
  background: #184254;
  margin: 0 20px 0 30px;
  color: #fff;
  border-radius: 5px;
  border: none;
}
// /deep/.el-select-dropdown{

//     background-color:#184254 !important;
//     position: fixed;

//   }
/deep/.select_btn {
  position: absolute;
  top: 225px;
  right: 320px;
  //下拉框
}
/deep/.el-input{
  width: 150px;
  // margin-left: 20px;
}
  .header {
    color: #fff;
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    color: #61dbff;
    margin-top: 15px;
    margin-bottom: 6px;
  }

  .row,
  li,
  a {
    display: block;
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    .time,
    .num,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .num {
      flex: 0.15;
    }
   
  }
  .inp{
      margin-left: 20px;
    }
}
.unit-bulid{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}
.unit-num{
  width: 200px;
  height: 109px;
  border: 1px solid #0463A7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  line-height: 59px;
}

</style>