项目【官网】第五天--查询结果页面代码编写

项目【官网】第五天–查询结果页面代码编写

项目开发进程

总目录 :项目【官网】的诞生

项目【官网】第一天----后端整体框架搭建

项目【官网】第二天----后端C端接口的编写

项目【官网】第三天----前端框架搭建

项目【官网】第四天–首页的编写

页面说明

• 从Main.vue页面跳转就是跳到Home.vue页面，也就是信息展示页面
• 首先是有一个搜索框
• 下面是一个标签的选择，打算做一个有趣的东西
• 再就是展示用的iframe标签来展示

效果就是下面的样子

---

开始写代码

【官网】两个字

<span class="el_table_font" >官网</span>

样式定位,字体部分还要进行调整，可能要加本地字体，细化的时候再加

.el_table_font {
  text-decoration: none;
  position: relative;
  top: 8%;
  left: 32%;
  font-size: 320%;
  font-family: "方正舒体","YouYuan","华文隶书", "FZShuTi","微软雅黑";
  z-index: 4;
}

搜索框

 <el-input
    style="position: relative;width: 20%;top: 0%;left: 36%;z-index: 6"
    placeholder="请输入要查询的内容"
    v-model="input"
    clearable
    small
    @keyup.enter.native="inputEnter"
    @focus="kl"
    @blur="bl"
    prefix-icon="el-icon-search"
  >
  </el-input>

事件和请求 kl和bl和之前一样是遮罩层的输入焦点事件，可以改变变量值而显示不显示遮罩层

对于z-index已经写上了所以就不另说了，不懂的可以看第四天的内容

 getList(e){
      this.formLi.na=this.input
      http.post('/directory/selectName',e).then(res => {
        this.directorys=res.data
      })

    },
    kl (){
      this.module = true
    },
    bl (){
      this.module=false
    },
    inputEnter(){
      this.getList(this.formLi)
      this.module=false
    },

而且页面跳转完成后也需要执行函数

mounted () {
    this.input = this.$route.query.input
    this.formLi.na=this.input
    this.getList(this.formLi)
  },

还有一个东西，element的输入框颜色有点灰修改输入框默认颜色(首页也有这东西，忘写了)

 /deep/ .el-input__inner {
   background-color: #f1f3f4;
 }

遮罩层

  <div v-if=this.module class="mask">

  </div>

.mask{
  z-index: 5;
  background-color: rgb(0,0,0);
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

再然后就是内容的展示

现在有两个标签页，先写一个，另外一个后面在写，已经想好写什么了

<el-tabs  style="position:relative;left: 30%;margin-top: 20px;width: 40%;margin-bottom: -10px;" v-model="activeName" type="card">
  <el-tab-pane label="查询结果" name="first">
    <el-row   style="position: relative;top: 15%" >
      <el-card v-if="directorys.length==0" class="box-card">
        <div slot="header" class="clearfix">
          <span>没有</span>
        </div>
        <span>没有查询到可以申请加入到查询表</span>
      </el-card>
      <el-card v-for="directory in directorys" class="box-card">
        <a target="_blank"  :href="directory.link" >
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;font-size: 20px">{{directory.name}}</span>
          </div>
        </a>
        <p style="font-size: 15px">{{directory.content}}</p>
        <el-card  style="height: 210px;width: 460px">
          <div style="width: 200px;height: 200px;overflow: hidden;">
            <iframe :src="(directory.link)"  style="height: 800px;width: 1800px;transform: scale(0.25);position: absolute;left: -640px;top: -200px;border-radius: 36px" ></iframe>
          </div>
        </el-card>
      </el-card>

    </el-row>
  </el-tab-pane>
  <el-tab-pane  label="XXXX" name="second" >
    
  </el-tab-pane>

</el-tabs>

a {
   color: black;
   text-decoration-line: none;
 }
 a:hover{
   text-decoration-line: underline;
 }
el-card>p{
   font-size: 10px;
 }
.clearfix:before,.clearfix:after{
  display: table;
}
.clearfix:after{
  clear: both;
}
.box-card {
  position: relative;
  left: 1%;
  width: 500px;
  margin-top: 18px;
  padding-left: 10px;
}
.on {
  overflow: hidden;
}

我觉得页面里面嵌入官网内容挺不错，虽然现在有点小后面会改进

下面的是效果，点QQ就可以跳转到QQ的官网，这数据要自己录入数据库

更多内容可以关注公众号【路口上】