YFYC-H5/src/views/Construct/components/search.vue

<template>
  <div class='ConstructSearch'>
    <!-- 输入框 -->
    <!-- <div class="inputBox" @keydown.enter="searchFu()">
      <div class="searInco" @click="searchFu()">
        <van-icon name="search" />
      </div>
      <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
    </div> -->
    <!-- 文字介绍 -->
    <div class="searTxt">
      <h3>芜湖市古建一张图</h3>
      <p>&emsp;&emsp;芜湖是全国文明域市、全国创新型试点域市、全国电子商务示范城市、全国信息消费示范域市、全国双拥模范城、国家园林域市等。</p>
      <p>&emsp;&emsp;辖区内有方特旅游度假区、天门山、镜湖公园、鸠兹古镇、丫山风景区、马仁奇峰、松鼠小镇、广济寺、王稼祥纪念园、繁昌窑遗址等景区。</p>
    </div>
    <!-- 底部下拉 -->
    <div class="searDown">
      <h3>区域划分</h3>
      <div class="searDownBox">
        <div class="searDownBox_row" v-for="item in data" :key="item.id">
          <div class="one" @click="item.done = !item.done">
            <div class="ll">{{ item.name }}</div>
            <div class="rr">
              <div class="bs">{{ item.children.length }}</div>
              <div class="arrows">
                <van-icon name="arrow-up" v-show="item.done" />
                <van-icon name="arrow-down" v-show="!item.done" />
              </div>
            </div>
          </div>
          <div class="downInfo" :class="{ downInfoAc: item.done }">
            <div @click="$router.push('/layout/goods')" v-for="val in item.children" :key="val.id">{{ val.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConstructSearch',
  components: {},
  data() {
    return {
      txt: '',
      data: [
        { id: 1, name: '全部', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
        { id: 2, name: '镜湖', done: false, children: [] },
        { id: 3, name: '鸠江', done: false, children: [] },
        { id: 4, name: '弋江', done: false, children: [] },
        { id: 5, name: '湾沚', done: false, children: [] },
        { id: 6, name: '繁昌', done: false, children: [] },
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    searchFu() {
      console.log('---------');
    }
  },
  created() {

  },
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.ConstructSearch {
  width: 75%;
  height: 100%;
  background-image: url('../../../assets/img/construct/searchBac.png');
  background-size: 100% 100%;
  padding-top: 10px;

  .inputBox {
    margin: 0px auto;
    width: 90%;
    height: 30px;
    position: relative;

    .searInco {
      color: #A0A0A0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      position: absolute;
      top: 0;
      left: 10px;
      z-index: 3;
      width: 20px;
      height: 30px;
    }

    /deep/.van-cell {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0px 0 0px 36px;
      background-color: #fff;
      border-radius: 15px;
    }
  }

  .searTxt {
    width: 100%;
    height: 35%;
    overflow-y: auto;
    font-size: 14px;
    padding: 5px 8px;

    h3 {
      text-align: center;
      margin: 10px 0;
    }

    p {
      margin-bottom: 5px;
      line-height: 18px;
    }
  }

  .searDown {
    padding-top: 30px;
    width: 100%;
    height: 64%;
    color: black;

    h3 {
      text-align: center;
      font-size: 18px;
    }

    .searDownBox {
      padding: 15px 20px 0;
      margin-top: 10px;
      width: 100%;
      height: calc(100% - 34px);
      overflow-y: auto;

      .searDownBox_row {
        width: 100%;
        font-size: 16px;
        color: #666666;
        margin-bottom: 20px;

        .one {
          height: 24px;
          align-items: center;
          display: flex;
          justify-content: space-between;

          .rr {
            display: flex;
            align-items: center;
          }

          .bs {
            width: 30px;
            height: 24px;
            border-radius: 5px;
            background-color: #ECB1B8;
            text-align: center;
            line-height: 24px;
            color: #fff;
          }

          .arrows {
            margin-left: 15px;
          }
        }

        .downInfo {
          &>div {
            transition: height .3s;
            padding-left: 40px;
            height: 0;
            line-height: 0;
            overflow: hidden;
            opacity: 0;
          }
        }

        .downInfoAc {
          &>div {
            opacity: 1;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>