团队冲刺(1)

今天完成:

高级搜索

<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="keyword"
          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="rouse"></el-option>
                </el-select>
 
          <el-button
            slot="append"
            type="primary"
            @click.native.prevent="search"
            icon="el-icon-search"
            >搜索
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          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-select>
          <el-button
            slot="append"
            type="primary"
            @click.native.prevent="search"
            icon="el-icon-search"
            >搜索
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          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-select>
          <el-button
            slot="append"
            type="primary"
            @click.native.prevent="search"
            icon="el-icon-search"
            >搜索
          </el-button>
        </el-input>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
export default {
     data(){
        return{
            currentPage: 1, // 初始页码
            pageSize: 10,   // 每页的数据
            total: 0,       // 总记录数
            keyword: '', // 关键词
            type1: '',       //查询方式
            type2: '',       //查询方式
            type3: '',       //查询方式
            contents: []        //查询结果
        }
    },
 
};
</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>

 预计明天完善高搜索功能,

遇到的问题:

<el-row> 的间隔修改,属性的应用。
垂直分布和水平分布,页面的调整
posted @ 2023-04-12 21:53  旺旺大菠萝  阅读(18)  评论(0)    收藏  举报