dev/dcp-web-gate/src_old/components/search.vue

<template>
    <div>
        <div class="box1">
          <div class="box2">
                <div class="title">
                    <span  :style="$i18n.locale=='zh'?'margin-left: 152px;':'margin-left:50px;'">
                      {{ $t('common.Searchin')}} 
<!--                      <span style="color:#a4cf76;font-size: 20px;"> {{projectTotal}} </span>-->
<!--                      {{ $t('common.collaborationopportunities')}}-->
                        <span style="color:#a4cf76;font-size: 20px;"> {{informationTotal}}+ </span>
                        {{ $t('common.SearchInInformation')}}
                    </span>
                    <span style="float: right;width: 522px; margin-right: 82px;position: relative;text-align: center; ">
                      
                        <el-input 
                            class="input-with-select"
                            :placeholder="$t('common.LookingSearch')"
                            @keyup.enter.native="toView('WholeStationSearch',select,homeInput)"
                            maxlength="50"
                            show-word-limit
                            v-model="homeInput">
                            <el-select v-model="select" slot="prepend" style="text-align: center;">
                              <el-option :label="$t('common.WholeStation')" value="all"></el-option>
                              <el-option :label="$t('common.Project')" value="project"></el-option>
                              <el-option :label="$t('common.Enterprise')" value="unit"></el-option>
                              <el-option :label="$t('common.News')" value="information"></el-option>
                              <el-option :label="$t('common.Events')" value="activity"></el-option>
                              <el-option :label="$t('common.Conference')" value="meeting"></el-option>
                              <el-option :label="$t('common.Publications')" value="journal"></el-option>
                              <el-option :label="$t('common.Country')" value="country"></el-option>
                            </el-select>
                            <!-- <el-button slot="append" >搜索</el-button> -->
                            <!-- <template slot="prepend">{{serch}}</template> -->
                        </el-input> 
                        <span style="background: #fff;z-index: 99;width: 20px;height: 20px;position: absolute;right: 12px;top: 17px;"
                        @click="toView('WholeStationSearch',select,homeInput)" >
                          <i style="position: absolute;right: 1px;top: 1px;font-size: 18px;cursor: pointer;" 
                          class="el-icon-search"></i>
                        </span>
                    </span> 
                </div>
              </div>
        </div>
    </div>
  </template>
  
  <script>
    import Bus from "@/api/bus";   //注意引入
    export default {
    name: 'Search',
    data () {
      return {
            title:'项目资源',
            serch:'项目',
            select:'all',
            homeInput:'',
            placeHolder:'',
            label:''
      }
    },
    created() {
        // this.lookingChange();
        Bus.$on("title", (val) => {
            this.title=val.label
        });
        Bus.$on("serch", (val) => {
            this.serch=val.label
        });
        // let that = this;
        // document.onkeypress = (e) =>{
        //   var keycode = document.all ? event.keyCode : e.which;
        //   if (keycode == 13) {
        //     that.toView('WholeStationSearch',that.select,that.homeInput)
        //     return false;
        //   }
        // };
    },
  
    props: {
        informationTotal:{
            type: String,
            default: ''
        }
    },
    methods:{
        // lookingChange(){
        //   this.placeHolder=$t('common.LookingSearch');
        // }
        toView(router, select,input) {
          if(!input){
            this.$message({
              message: this.$t('common.Theinputboxcannotbeempty'),
              type: 'warning'
            });
          }else {
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            const { href } = this.$router.resolve({
                name: router,
                query: {
                  select: select,
                  input:input
                }
            });
            window.open(href, '_blank');
          }
         
        },
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    body {
        margin: 0;
        padding: 0;
    }
    .box1 {
      /* width:1500px; */
      height: 60px;
      margin: auto;
    }
    .box2 {
      width: 1200px;
      height: 60px;
      margin: auto;
      position: relative;
    }
    .language {
      line-height: 50px;
      color: #ccc;
      font-weight: 400;
      font-size: 12px;
    }
    .logo {
      position: absolute;
      top: 50px;
      left: 80px;
      width: 260px;
      height: 55px;
    }
    .box1 .title {
      position: absolute;
      top: 10px;
      left: 0px;
      font-size: 15px;
      font-weight: 700;
      height: 50px;
      line-height: 50px;
      color: #666;
      width: 1200px;
    }
    .box1 .title >>>.el-input__inner {
        height: 50px !important;
        border-radius: 0 22px 22px 0;
    }
    .box1>>>.el-input--suffix .el-input__inner{
        text-align: center; 
    }
    .box1 .title >>>.el-input-group__prepend {
        width: 100px;
        border-radius: 22px 0 0 22px;
        background: #fff;
    }
    
    .box1 .header1 >>>.el-input-group__prepend {
        background-color: #fff;
        color: #000;
    }
    .box1 .title >>>.el-input-group {
        border-radius: 20px;
    }
</style>