xiaoshi_system/src/views/home/index.vue

<template>
  <div class="home">
    <div class="main">
      <div class="carousel" id="step1">
        <carousel></carousel>
      </div>
      <!-- <div class="title">
        <h2>知识产权风控与组织记忆系统</h2>
      </div> -->
      <div class="home_search">
        <div class="input_search" id="step2">
          <el-input :placeholder="getPlaceholder()" v-model="queryParams.content" class="input-with-select">
            <el-select v-model="queryParams.select" slot="prepend" placeholder="请选择" style="width:130px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="echart">
        <myEcharts></myEcharts>
      </div>
    </div>
    <div class="footer">
      <div class="footerDiv">
        <div>
          <div class="logo">
            <img class="img" src="@/assets/logo-4.png" />
            <span class="title">知识产权风控与组织记忆系统</span>
          </div>
          <div class="bei">
            <el-link :underline="false" class="elLink">粤<span class="en">IPC</span>备010101010101</el-link>
          </div>
        </div>
        <div>
          <div>
            <el-link :underline="false" class="elLink">联系我们</el-link>
          </div>
          <div>
            <el-link :underline="false" class="elLink">
              <span>
                <i class="iconfont icon-tubiao- font-size_20 margin-right_10"></i>
                <i class="iconfont icon-youxiang"></i>
              </span>
            </el-link>
          </div>
        </div>
        <div>
          <div>
            <el-link :underline="false" class="elLink">反馈建议</el-link>
          </div>
          <div>
            <el-link :underline="false" class="elLink">
              <span>
                <i class="iconfont icon-yijianfankui" @click="feedback"></i>
              </span>
            </el-link>
          </div>
        </div>
        <div>
          <div>
            <el-link :underline="false" class="elLink">实时动态</el-link>
          </div>
          <div class="elLink">
            <i class="iconfont icon-xinxi font-size_20" @click="updateLog"></i>
          </div>
        </div>
      </div>
    </div>
    <feedback ref="feedback"></feedback>
    <updateLog ref="updateLog"></updateLog>
  </div>
</template>

<script>
import carousel from './components/carousel.vue'
import myEcharts from './components/echarts';
import feedback from '@/views/layout/components/dialog/feedback.vue';
import updateLog from './components/dialog/updateLog.vue'
export default {
  components: {
    carousel,
    myEcharts,
    feedback,
    updateLog
  },
  data() {
    return {
      
      options: [
        {
          label: '专利数据库',
          value: 'Project',
          placeholder: '请输入专利数据库名称'
        },
        {
          label: '专利',
          value: 'patentNo',
          placeholder: '请输入专利'
        },
        {
          label: '产品',
          value: 'Product',
          placeholder: '请输入产品名称'
        },
        {
          label: '事件',
          value: 'Event',
          placeholder: '请输入事件名称'
        },
        {
          label: '报告',
          value: 'AllReport',
          placeholder: '请输入报告名称'
        },
      ],
      queryParams: {
        content: '',
        select: 'Project'
      },
    }
  },
  methods: {
    updateLog(){
      this.$refs.updateLog.open()
    },
    // 点击搜索
    search(){
      if(!this.queryParams.select){
        this.$message.error('请选择需要检索的信息')
        return false
      }
      localStorage.searchContent = this.queryParams.content
      this.$router.push({
        name:this.queryParams.select,
      })
      setTimeout(function () {
        localStorage.removeItem('searchContent')
      }, 1000);
    },
    
    //获取提示信息
    getPlaceholder() {
      if (this.queryParams.select) {
        var a = this.options.find(item => {
          return item.value == this.queryParams.select
        }).placeholder
      } else {
        var a = '请输入内容'
      }
      return a
    },
    //意见反馈q
    feedback(){
      this.$refs.feedback.open()
    },
  }
}
</script>
<style lang="scss">
.home {
  .el-carousel__container {
    height: 200px;
  }

  .input_search {
    .el-input-group__append, .el-input-group__prepend{
      background: white;
    }
    // select中选中项颜色、上下角颜色改变
    .el-select .el-input .el-select__caret{
      color:var(--color2) !important;
      
    }
    .el-input-group__prepend div.el-select .el-input__inner{
      color: var(--color2) !important;
      font-weight: bold;
    }
    .el-select .el-input__inner::-webkit-input-placeholder{
      color: var(--ph) !important;
    }

    .el-button {
      // all: initial !important;
      border-radius: 0px;
      width: 50px;
      background: rgba(79,166,255);
      border: 1px solid rgba(79,166,255);
      color: var(--color) !important;
    }
  }

}
</style>
<style lang="scss" scoped>
.home {
  --minHeight:150px;
  --marginTop:50px;
  .main {
    // width: 85%;
    margin: 0 auto;
    position: relative;
    min-height: calc(100% - var(--minHeight) - var(--marginTop));
    .carousel{
      // padding-top: 10px;
    }
    .echart{
      width:80%;
      min-width: 1024px;
      max-width: 1530px;
      margin: 0 auto;
    }
    .title {
      text-align: center;
      color: var(--bg);
      font-family: 迷你简汉真广标;
    }

    .home_search {
      width: 100%;
      background: var(--bg);
      z-index: 999;
      margin: 0 auto 20px;
      height: 80px;
      line-height: 80px;
      padding: 10px 0;
      position: sticky;
      top: 0;
    }

    .input_search {
      min-width: 654px;
      width: 50%;
      height: 100%;
      margin: 0 auto;
    }

    
  }

  .footer {
    width: 100%;
    min-height: var(--minHeight);
    margin-top: var(--marginTop);
    background: var(--bg);

    .footerDiv {
      max-width: 80%;
      width: 800px;
      margin: auto;
      padding: 10px 0 20px;
      display: flex;
      flex-wrap: wrap;

      &>div {
        min-width: 140px;
        padding: 10px 0;
        color: var(--color);
        font-family: 仿宋_GB2312 !important;
        border-right: 2px solid var(--color);

        div {
          padding: 10px 30px;
          text-align: center;
        }

      }

      &>div:last-child {
        border-right: none;
      }

      &>div:first-child {
        min-width: 330px;

        &:last-child {
          text-align: left !important;
        }
      }

      .bei {
        text-align: left !important;
      }

      .title {
        font-weight: bolder;
      }

      .en {
        font-family: Arial !important;
      }

      .logo {
        display: flex;
        align-items: center;

        .img {
          height: 20px;
          margin-right: 20px;
        //  background: #fff;
        }
      }

      .elLink {
        color: var(--color);
        font-family: inherit;

        i {
          font-size: 16px;
        }
        .font-size_20{
          font-size: 20px;
        }
      }

    }
  }
}
</style>
<style lang="scss">
.home{
  .elLink .el-link--default:after, .elLink .el-link--primary.is-underline:hover:after, .elLink .el-link--primary:after{
    border: none;
  }
}

</style>