JiangMenCun/webM/src/views/Search.vue

<template>
  <div class="search">
    <div class="top">
      <!-- 返回按钮 -->
      <div class="back" @click="$emit('close')"></div>
      <!-- 搜索按钮 -->
      <div class="searBtn"></div>
      <input type="text" v-model="txt" placeholder="请输入关键词..." />
    </div>
    <!-- 下面内容 -->
    <div class="main">
      <div class="mainTop">
        <div>村落名称</div>
        <div>访问量</div>
      </div>
      <div class="mainCon">
        <div class="row" v-for="i in 12" :key="i" @click="$router.push('/stair/1')">
          <div><span>·</span>卢边村</div>
          <div>99999</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  components: {},
  data() {
    //这里存放数据
    return {
      txt: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.search {
  padding: 18px 12px 0;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(202, 185, 153, 0.9);
    backdrop-filter: blur(4px);
    z-index: -2;
  }
  .top {
    position: relative;
    width: 100%;
    height: 40px;
    input {
      color: #e0bb74;
      padding: 0 40px;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      border: none;
    }
    /*修改提示文字的颜色*/
    /deep/input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #bfb094;
    }
    /deep/input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #bfb094;
    }
    /deep/input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #bfb094;
    }
    /deep/input:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #bfb094;
    }
    .back {
      position: absolute;
      top: 6px;
      left: 10px;
      width: 29px;
      height: 29px;
      background: url("../assets/img/back.png");
      background-size: 100% 100%;
    }
    .searBtn {
      position: absolute;
      top: 5px;
      right: 10px;
      width: 29px;
      height: 29px;
      background: url("../assets/img/search2.png");
      background-size: 100% 100%;
    }
  }
  .main {
    padding: 0 10px;
    border-radius: 10px;
    margin-top: 10px;
    background-image: linear-gradient(
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );
    width: 100%;
    height: calc(100% - 60px);
    .mainTop {
      display: flex;
      width: 100%;
      height: 41px;
      border-bottom: 1px solid #bfb094;
      margin-bottom: 20px;
      & > div {
        width: 50%;
        text-align: center;
        line-height: 40px;
        font-family: "SYST";
        color: #5b5b5b;
        font-size: 14px;
      }
    }
    .mainCon {
      width: 100%;
      height: calc(100% - 62px);
      overflow-y: auto;
    }
    .row {
      display: flex;
      height: 40px;
      & > div {
        width: 50%;
        text-align: center;
        color: #5b5b5b;
        font-size: 14px;
        line-height: 40px;
        & > span {
          font-size: 24px;
          margin-right: 5px;
        }
        &:nth-of-type(1){
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>