nsgk_mobile/src/views/sunVillage/dynamic/injoint/publicResources.vue

<template>
  <div class="home_wrapper">
    <header-nav
      :headings="headingsTitle"
      :currentNav="1"
      returnUrl="/sunVillage/index"
    ></header-nav>
    <projectNav :serialTag="4"></projectNav>
    <div class="public_details">
      <div class="search_wrap">
        <div class="search_ipt">
          <input type="text" placeholder="请输入查询信息" class="ipt" />
        </div>
        <div class="search_btn">查询</div>
      </div>
      <div class="table_wrap">
        <div class="head_main">
          <div class="flex f1">资源名称</div>
          <div class="flex f2">面积(㎡)</div>
          <div class="flex f3">性质</div>
          <div class="flex f4">状态</div>
        </div>
        <div class="tbody_main">
          <div
            class="item_list"
            @click="skip('/sunVillage/injoint/publicResources_desc')"
          >
            <div class="flex f1">0001机动地</div>
            <div class="flex f2">20</div>
            <div class="flex f3">经营</div>
            <div class="flex f4">正常</div>
          </div>
          <div
            class="item_list"
            @click="skip('/sunVillage/injoint/publicResources_desc')"
          >
            <div class="flex f1">西部山林地</div>
            <div class="flex f2">19.5</div>
            <div class="flex f3">经营</div>
            <div class="flex f4">正常</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home_wrapper {
  width: 100%;
  padding-top: 198px;
  min-height: 100vh;
  background: #fff;
  .public_details {
    margin: 20px 24px 0;
    .search_wrap {
      height: 84px;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      .search_ipt {
        flex: 1;
        display: flex;
        padding: 0 20px;
        .ipt {
          flex: 1;
          font-size: 34px;
        }
      }
      .search_btn {
        width: 110px;
        font-size: 34px;
        color: #b3b3b3;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #e6e6e6;
      }
    }
    .table_wrap {
      .head_main {
        height: 76px;
        display: flex;
        color: #bababa;
        .flex {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          &.f1 {
            flex: 6;
          }
          &.f2 {
            flex: 2;
          }
          &.f3 {
            flex: 2;
          }
          &.f4 {
            flex: 2;
          }
        }
      }
      .tbody_main {
        .item_list {
          height: 150px;
          display: flex;
          .flex {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.f1 {
              flex: 6;
            }
            &.f2 {
              flex: 2;
            }
            &.f3 {
              flex: 2;
            }
            &.f4 {
              flex: 2;
            }
          }
        }
      }
    }
  }
}
</style>

<script>
import headerNav from "@/components/sunVillage/common/header.vue";
import projectNav from "@/components/sunVillage/injoint/nav";
export default {
  name: "sunVillagePublicResources",
  components: { headerNav, projectNav },
  data() {
    return {
      headingsTitle: "三资公开",
    };
  },
  mounted() {},
  methods: {
    skip(url) {
      this.$router.push(url);
    },
  },
};
</script>