SH_museum/sh_museum/src/pages/search/index.vue

<template>
    <div class="layout">
      <div class="ui-con">
        
          <img @click="$router.push({path:'/'})" class="logo" :src="`${$cdn}images/k.png`" alt="">
        
        <div class="search-con">
          <input v-model="keywordVal" @keydown.enter="gotoResult('')" :placeholder="defaultKey" type="text">
          <img @click="gotoResult('')" :src="`${$cdn}images/s-search.png`" alt="">
        </div>
        
        <ul class="txt-con" v-if="!isMobile">
          <li @click="gotoResult(item)" v-for="(item,i) in keyword" :key="i">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
import browser from "@/utils/browser.js";

let keyword = [
    '西楼外立面',
    '东楼',
    '铁栏杆',
    '贵宾室'
]
export default {
    data() {
        return {
           keyword,
           keywordVal:'',
           defaultKey:'东楼',
           isMobile: browser.mobile
        };
    },
    methods:{
      gotoResult(item=''){
        this.$router.push({name:'Result',query:{
          keyword:item||this.keywordVal||this.defaultKey
        }})
      }
    }
};
</script>

<style lang="less" scoped>
@import '../../assets/css/globalVars.less';

input::placeholder {
    color: @theme !important;
}

.layout{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .ui-con{
    position: absolute;
    top: 32%;
    left: calc(50% - 200px / 2);
    transform: translate(-50%,-50%);
    text-align: center;
    >div:not(:last-of-type){
      text-align: center;
      margin-top: 40px;
    }
    .logo{
      width: 340px;
    }
    .search-con{
      border: 2px solid @theme;
      border-radius: 28px;
      width: 560px;
      margin: 20px auto;
      position: relative;
      padding-left: 0px;
      background: rgba(0, 0, 0, .05);
      input{
        border: none;
        background: none;
        line-height: @inputH;
        height: @inputH;
        width: 94%;
        vertical-align: middle;
        color: @theme;
      }
      img{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 6px;
      }
    }
    .txt-con{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      li{
        padding: 4px 6px;
        cursor: pointer;
        &:hover{
          background: @theme;
          color: #C9A27B;
          position: relative;
          &::after{
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            content: '';
            background: url('@{cdn}search-icon.png') no-repeat;
            width: 30px;
            height: 30px;
          }
        }
      }
      
    }
  }
}

@media screen and (max-width: 500px) {
  .layout {
    .ui-con {
      position: fixed;
      top: 25vh;
      left: 50vw;
      transform: translateX(-50%);
      .logo, .search-con{
        width: 50vw;
      }
      .search-con {
        input {
          font-size: 16px;
        }
      }
      
    }
  }
  
}
</style>