项目【官网】第六天–申请页面的编写

项目开发进程

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

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

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

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

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

页面说明

• 在信息展示页放一个浮窗放在右边
• 里面放几个跳转
• 点击跳转的申请页面

页面展示

有点丑先用着。。。。。。

浮窗

先建一个Apply.vue 加入路由

<el-row style="height: 200px;width: 200px;background-color: #e8eaec;position: fixed;right: 140px;top: 300px">
  <router-link :to="{path: '/apply'}" style="text-decoration: none">
    <span style="font-size: 20px;padding: 6px">没有查询到需要的</span>
    <el-divider style=""></el-divider>
  </router-link>
</el-row>

页面内容

<div style="width: 30%;height: 80%;background-color: #d9dbde;position: fixed;left: 35%;right: 50%;top: 30px">
  <span style="font-size: 38px;position: relative;left: 40%;top: 2%">申请</span>
  <span style="position:absolute;  left: 60px;top: 80px;font-size: 24px" >名字</span><el-input v-model="apply.app_name" placeholder="" style="position:absolute;width: 60%;top: 75px;left: 140px"></el-input>
  <span style="position:absolute;  left: 60px;top: 180px;font-size: 24px" >描述</span>
  <el-input
    type="textarea"
    :rows="12"
    placeholder="请输入内容"
    style="position: absolute;top: 180px;left: 130px;width: 65%"
    v-model="apply.app_description">
  </el-input>
  <el-button style="position: absolute;top: 550px;left: 240px" type="info" plain @click="addApplication">提交</el-button>
</div>

页面样式

没有，都直接写在标签style上了

事件请求

import http from '@/utils/http'
export default {
  name: "apply",
  data () {
    return {
      apply:{
        app_name: '',
        app_description: ''
      }
    }
  },
  methods: {
    addApplication() {
      http.post('/application/addApplication', this.apply).then(res => {
        console.log(res)

      })
    }
  }
}

结束 划水

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