团队作业(14)

<template>
  <div class="show" style="background-color: white">
    <el-row style="flex-direction: column">
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword1"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type1"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range1"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword2"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type2"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range2"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="1" :offset="1" style="margin-top: 35px">
        <el-select v-model="AND3" placeholder="AND" @change="typeChange">
          <el-option label="AND" value="AND"></el-option>
          <el-option label="OR" value="OR"></el-option>
          <el-option label="NOT" value="NOT"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword3"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type3"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range3"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="1" :offset="1" style="margin-top: 35px">
        <el-select v-model="AND2" placeholder="AND" @change="typeChange">
          <el-option label="AND" value="AND"></el-option>
          <el-option label="OR" value="OR"></el-option>
          <el-option label="NOT" value="NOT"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="block" style="margin-top: 35px">
      <span class="demonstration">时间范围：</span>
      <el-date-picker v-model="time1" type="date" placeholder="选择日期"></el-date-picker>
      <span class="demonstration">   -----   </span>
      <el-date-picker v-model="time2" type="date" placeholder="选择日期"></el-date-picker>
    </div>

    <div style="margin-top: 35px">
      <el-button
        slot="append"
        type="primary"
        @click.native.prevent="search"
        icon="el-icon-search"
        >高级检索
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 初始页码
      pageSize: 10, // 每页的数据
      total: 0, // 总记录数
      keyword1: "", // 关键词
      keyword2: "", // 关键词
      keyword3: "", // 关键词
      type1: "主题", //查询方式
      type2: "作者", //查询方式
      type3: "文献来源", //查询方式
      range1: "精准",
      range2: "精准",
      range3: "精准",
      AND2: "AND",
      AND3: "AND",
      contents: [], //查询结果
      time1: "",
      time2: "",
    };
  },
};
</script>

<style>
.show {
  margin: 100px auto;
  width: 80%;
  height: 450px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  font-size: 20px;
}
/* 
.show:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
} */
</style>