增加表格页面

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Login from '../views/Login.vue'
+import Login from '../views/Login/Login.vue'
+import Table1 from '../views/Articles/index.vue'
 
 Vue.use(VueRouter)
 
@@ -9,6 +10,11 @@ const routes = [
     path: '/',
     name: 'Login',
     component: Login
+  },
+  {
+    path: '/table1',
+    name: 'Table1',
+    component: Table1
   }
 ]
 

src/views/Articles/ArticleAdd.vue

@@ -0,0 +1,187 @@
+/* eslint-disable vue/valid-v-for */
+<template>
+  <div class="publish-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <el-form ref="form" :rules="rules" :model="article" label-width="80px">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model.trim="article.title"></el-input>
+        </el-form-item>
+        <!--
+          由于编辑器属于三方组件 并不能直接通过简单配置实现自动校验
+          需要我们手动编写
+          1.找到触发表单校验的时机  blur失焦事件
+          2.编写校验逻辑 (主动发起校验)
+         -->
+        <el-form-item label="内容：" prop="content">
+          <!-- 编辑器中输入的内容会自动绑定到article.content -->
+          <quillEditor :options="editorOption" v-model="article.content" @blur="editorBlur"></quillEditor>
+        </el-form-item>
+        <el-form-item label="封面">
+          <el-radio-group v-model="article.cover.type" @change="forceUpdate">
+            <!-- 根据后端接口约定 -->
+            <el-radio :label="0">无图</el-radio>
+            <el-radio :label="1">单图</el-radio>
+            <el-radio :label="3">三图</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="article.cover.type > 0" class="cover-container">
+          <!--
+            这种写法相当于既传递了属性又绑定的了事件 语法糖
+            为了简化当前基于props数据的操作  基于props的双向绑定
+            img-url.sync  =>  img-url属性   +  绑定了一个修改此属性的自定义事件
+           -->
+          <Cover :img-url.sync="article.cover.images[index]" v-for="(item,index) in article.cover.type" :key="item"></Cover>
+        </div>
+        <el-form-item label="频道" prop="channel_id">
+          <el-select v-model="article.channel_id" placeholder="请选择活动区域">
+            <el-option
+              v-for="channel in channels"
+              :key="channel.id"
+              :label="channel.name"
+              :value="channel.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="doValidate(false)">发表</el-button>
+          <el-button @click="doValidate(true)">存入草稿</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getChannels, createArticle } from '@/api/articles'
+// 引入编辑器核心包和相关样式
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import Cover from './Cover'
+export default {
+  components: {
+    quillEditor,
+    Cover
+  },
+  data () {
+    return {
+      channels: [], // 频道列表
+      // 按照接口文档的格式  做一个参数收敛 包裹到一个对象中
+      // 这个对象内部包含了所有需要向后端发送的字段
+      article: {
+        title: '', // 文章标题
+        content: '', // 文章内容
+        cover: {
+          type: 0, // 封面图片的张数
+          images: [] // 封面的地址  属性现在属于当前组件  将来里面的数据要发送给后端
+        },
+        channel_id: '', // 频道id
+        forceKey: true
+      },
+      // 定义规则
+      rules: {
+        title: [
+          { required: true, message: '文章标题为必填字段', trigger: 'blur' },
+          { min: 5, max: 30, message: '文章标题长度必须在5-30个字符之间', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入文章内容', trigger: 'blur' },
+          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
+        ],
+        channel_id: [
+          { required: true, message: '请选择文章频道', trigger: 'change' }
+        ]
+      },
+      // 编辑器的配置
+      editorOption: {
+        placeholder: '哈哈哈哈哈', // 占位文字
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ header: 1 }, { header: 2 }],
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ indent: '-1' }, { indent: '+1' }]
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    hGetChannels () {
+      getChannels().then(res => {
+        this.channels = res.data.data.channels
+      })
+    },
+    hCreateArticle (draft) {
+      // 1.准备接口参数
+      const params = {
+        draft
+      }
+      // this.article 等同于data参数
+      // 2.发送接口请求
+      createArticle(params, this.article).then(res => {
+        this.$message({
+          type: 'success',
+          message: '发布文章成功'
+        })
+        this.$router.push({
+          path: '/articles'
+        })
+      })
+    },
+    editorBlur () {
+      console.log('当前编辑器失焦了')
+      // 在这里我们可以主动做一些校验逻辑
+      // 手动调用方法 主动发起对特定表单的校验 validateField
+      this.$refs.form.validateField('content')
+      // 总结
+      /**
+       * 1.给编辑器三方组件绑定了自定义事件 @blur, 绑定了一个methods中的函数
+       * 2.在blur事件触发时，在回调函数中主动触发表单校验
+       *   兜底校验 （对有所的表单进行统一校验） this.$refs.form.validate()
+       *   针对特定字段做校验 （针对特定字段） this.$refs.form.validateField('需要校验的字段名称')
+       */
+    },
+    // 兜底校验 防止用户直接点击发表按钮
+    doValidate (draft) {
+      // 另加一个对于type 和 images长度是否匹配的校验
+      if (this.article.cover.type !== this.article.cover.images.length) {
+        this.$message({
+          type: 'warning',
+          message: '封面图的个数和类型必须一致'
+        })
+        // 手动触发对于cover的校验
+        return false
+      }
+      this.$refs.form.validate((valid) => {
+        // valid 所有表单项都通过校验返回true
+        // 有一个不满足条件返回false
+        if (!valid) {
+          return false
+        } else {
+          // 正式完成接口调用
+          this.hCreateArticle(draft)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.hGetChannels()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .cover-container{
+    margin-left: 70px;
+    margin-bottom: 20px;
+  }
+</style>

src/views/Articles/ArticleEdit.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="publish-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>编辑文章</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <el-form ref="form" :rules="rules" :model="article" label-width="80px">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model.trim="article.title"></el-input>
+        </el-form-item>
+        <!--
+          由于编辑器属于三方组件 并不能直接通过简单配置实现自动校验
+          需要我们手动编写
+          1.找到触发表单校验的时机  blur失焦事件
+          2.编写校验逻辑 (主动发起校验)
+         -->
+        <el-form-item label="内容：" prop="content">
+          <!-- 编辑器中输入的内容会自动绑定到article.content -->
+          <quillEditor :options="editorOption" v-model="article.content" @blur="editorBlur"></quillEditor>
+        </el-form-item>
+        <el-form-item label="封面">
+          <el-radio-group v-model="article.cover.type">
+            <!-- 根据后端接口约定 -->
+            <el-radio :label="0">无图</el-radio>
+            <el-radio :label="1">单图</el-radio>
+            <el-radio :label="3">三图</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="article.cover.type>0" class="cover-container">
+          <!--
+            这种写法相当于既传递了属性又绑定的了事件 语法糖
+            为了简化当前基于props数据的操作  基于props的双向绑定
+            img-url.sync  =>  img-url属性   +  绑定了一个修改此属性的自定义事件
+           -->
+          <Cover :img-url.sync="article.cover.images[index]" v-for="(item,index) in article.cover.type" :key="index"></Cover>
+        </div>
+        <el-form-item label="频道" prop="channel_id">
+          <el-select v-model="article.channel_id" placeholder="请选择活动区域">
+            <el-option
+              v-for="channel in channels"
+              :key="channel.id"
+              :label="channel.name"
+              :value="channel.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="doValidate(false)">发表</el-button>
+          <el-button @click="doValidate(true)">存入草稿</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getChannels, updateArticle, getArticle } from '@/api/articles'
+// 引入编辑器核心包和相关样式
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import Cover from './Cover'
+export default {
+  components: {
+    quillEditor,
+    Cover
+  },
+  data () {
+    return {
+      channels: [], // 频道列表
+      // 按照接口文档的格式  做一个参数收敛 包裹到一个对象中
+      // 这个对象内部包含了所有需要向后端发送的字段
+      article: {
+        title: '', // 文章标题
+        content: '', // 文章内容
+        cover: {
+          type: 0, // 封面图片的张数
+          images: [] // 封面的地址  属性现在属于当前组件  将来里面的数据要发送给后端
+        },
+        channel_id: '' // 频道id
+      },
+      // 定义规则
+      rules: {
+        title: [
+          { required: true, message: '文章标题为必填字段', trigger: 'blur' },
+          { min: 5, max: 30, message: '文章标题长度必须在5-30个字符之间', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入文章内容', trigger: 'blur' },
+          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
+        ],
+        channel_id: [
+          { required: true, message: '请选择文章频道', trigger: 'change' }
+        ]
+      },
+      // 编辑器的配置
+      editorOption: {
+        placeholder: '哈哈哈哈哈', // 占位文字
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ header: 1 }, { header: 2 }],
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ indent: '-1' }, { indent: '+1' }]
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    hGetChannels () {
+      getChannels().then(res => {
+        this.channels = res.data.data.channels
+      })
+    },
+    hCreateArticle (draft) {
+      // 1.准备接口参数
+      const params = {
+        draft
+      }
+      // this.article 等同于data参数
+      // 2.发送接口请求
+      const id = this.$route.query.id
+      updateArticle(id, params, this.article).then(res => {
+        console.log(res)
+      })
+    },
+    editorBlur () {
+      console.log('当前编辑器失焦了')
+      // 在这里我们可以主动做一些校验逻辑
+      // 手动调用方法 主动发起对特定表单的校验 validateField
+      this.$refs.form.validateField('content')
+      // 总结
+      /**
+       * 1.给编辑器三方组件绑定了自定义事件 @blur, 绑定了一个methods中的函数
+       * 2.在blur事件触发时，在回调函数中主动触发表单校验
+       *   兜底校验 （对有所的表单进行统一校验） this.$refs.form.validate()
+       *   针对特定字段做校验 （针对特定字段） this.$refs.form.validateField('需要校验的字段名称')
+       */
+    },
+    // 兜底校验 防止用户直接点击发表按钮
+    doValidate (draft) {
+      // 另加一个对于type 和 images长度是否匹配的校验
+      if (this.article.cover.type !== this.article.cover.images.length) {
+        this.$message({
+          type: 'warning',
+          message: '封面图的个数和类型必须一致'
+        })
+        // 手动触发对于cover的校验
+        return false
+      }
+      this.$refs.form.validate((valid) => {
+        // valid 所有表单项都通过校验返回true
+        // 有一个不满足条件返回false
+        if (!valid) {
+          return false
+        } else {
+          // 正式完成接口调用
+          this.hCreateArticle(draft)
+        }
+      })
+    },
+    // 获取文章数据
+    hGetArticle () {
+      const id = this.$route.query.id
+      getArticle(id).then(res => {
+        console.log(res)
+        this.article = res.data.data
+      })
+    }
+  },
+  mounted () {
+    this.hGetChannels()
+    this.hGetArticle()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .cover-container{
+    margin-left: 70px;
+    margin-bottom: 20px;
+  }
+</style>

src/views/Articles/Cover.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="my-cover">
+     <div class="operateBox" @click="dialogVisible = true">
+       <span>选择素材</span>
+       <!-- 负责展示父组件传过来的数据 -->
+       <img :src="imgUrl" alt="" class="img">
+     </div>
+    <!-- 对话框 -->
+    <el-dialog
+      :append-to-body="true"
+      :visible.sync="dialogVisible"
+      width="720px">
+      <el-card class="box-card">
+        <div style="padding-bottom: 20px;">
+          <el-radio-group v-model="collect" size="mini" @change="collectChange">
+            <el-radio-button :label="false">全部</el-radio-button>
+            <el-radio-button :label="true">收藏</el-radio-button>
+          </el-radio-group>
+        </div>
+        <el-row :gutter="10">
+          <el-col
+            v-for="(image) in imageList"
+            :key="image.id" class="img_item" :xs="12" :sm="6" :md="6" :lg="4">
+            <div class="img_box" @click="selectImage(image)">
+              <img :src="image.url" alt="">
+              <!-- 当前点击项会展示小对勾
+                v-show/v-if
+              -->
+              <div class="selected" v-show="image.selected">
+                <img src="./img/selected.png" alt="">
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-pagination
+          style="margin-top:10px;"
+          background
+          layout="sizes, prev, pager, next"
+          :page-sizes="[5, 10, 15, 20]"
+          :page-size="10"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+          :total="total_cont">
+        </el-pagination>
+      </el-card>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 引入图片素材接口
+import { getImageList } from '@/api/image'
+export default {
+  props: {
+    imgUrl: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      imageList: [], // 素材列表
+      total_cont: 0, // 素材总数
+      curPage: 1, // 当前要请求第几页数据
+      per_page: 10, // 当前每页的条数
+      dialogVisible: false, // 弹出框是否显示
+      collect: false // 是否为收藏状态
+    }
+  },
+  methods: {
+    openDialog () {
+      this.dialogVisible = true
+    },
+    currentChange (pageNum) {
+      this.curPage = pageNum
+      this.hGetImage()
+    },
+    // 发起素材请求列表
+    hGetImage () {
+      getImageList({
+        collect: this.collect,
+        per_page: this.per_page, // 每页的条数
+        page: this.curPage // 当前请求第几页
+      }).then(res => {
+        // 素材列表
+        // 处理源数据 在里面的每一项都添加一个字段 专门用来控制对勾是否显示
+        // [{}{}{}] 完成映射关系的数组处理使用map函数
+        this.imageList = res.data.data.results.map((item) => {
+          return {
+            ...item, // 把数组项中之前就有的三个字段展开放过来
+            selected: false // false代表不展示 true代表展示
+          }
+        })
+
+        this.total_cont = res.data.data.total_count
+      })
+    },
+    sizeChange (pageSize) {
+      this.per_page = pageSize
+      this.hGetImage()
+    },
+    collectChange (collect) {
+      this.hGetImage()
+    },
+    cancel () {
+      this.dialogVisible = false
+    },
+    confirm () {
+      // 遍历this.imageList找到seleted为true的那一项 取到它的url交给父组件
+      let url = ''
+      this.imageList.forEach((item) => {
+        if (item.selected) {
+          url = item.url
+        }
+      })
+      // 交给父组件 这里是最关键的一部 不管中间经过什么样的交互
+      this.$emit('update:imgUrl', url)
+      this.dialogVisible = false
+    },
+    selectImage (image) {
+      // 排它思想  selected
+      // 把所有项都设置为false
+      // 这个地方的选择并不是最终决定要将哪项抛给父组件 只有点击确定按钮才能决定
+      // 点击确定按钮的时候需要去找当前身上有对勾的项然后把它的url拿到 交给父组件
+      this.imageList.forEach((item) => {
+        item.selected = false
+      })
+      // 把自己设置为true
+      image.selected = true
+    }
+  },
+  mounted () {
+    this.hGetImage()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.my-cover{
+  display: inline-block;
+}
+.operateBox{
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  margin-left: 10px;
+  border-radius: 4px;
+  border:1px solid #ccc;
+  font-size:13px;
+  color:#666;
+  text-align: center;
+  line-height: 100px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  .img{
+    position: absolute;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 100%;
+  }
+}
+  .img_item {
+    position: relative;
+    box-sizing: border-box;
+    .img_box{
+      height: 120px;
+      margin-bottom: 10px;
+       position: relative;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+      .selected{
+        position: absolute;
+        width: 20%;
+        left:0;
+        top:0;
+      }
+    }
+  }
+  .option {
+    position: absolute;
+    left: 5px;
+    right:5px;
+    bottom: 5px;
+    height: 30px;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    display: flex;
+    span {
+      flex:1;
+      text-align: center;
+      cursor: pointer;
+      line-height: 30px;
+    }
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .uploadBox{
+    text-align: center;
+    img {
+      width:100%;
+    }
+    // scoped代表当前的样式只能影响当前的组件  影响不了子组件的样式
+    // 加上 /deep/ 之后可以进行深度样式控制
+    // 当试图直接控制子组件内部元素样式的时候就需要添加 /deep/
+    /deep/.el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+
+  // 1.要复用  有多个地方都需要用到此组件
+  // 2.维护性  .vue单文件代码行数不能太多
+  // 组件的抽离必定增加组件之间的通信成本
+</style>

src/views/Articles/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="table-wrapper">
+<div class="table-box">
+  <div class="title">风电</div>
+      <el-row :gutter="20">
+        <el-form>
+          <el-col :span="5">
+            <el-form-item
+              label="场站名称:"
+              style="font-weight: 700"
+              label-width="75px"
+            >
+              <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item
+              label="装机容量(MVA):"
+              style="font-weight: 700"
+              label-width="120px"
+            >
+              <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item
+              label="是否受控:"
+              style="font-weight: 700"
+              label-width="75px"
+              >
+              <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item
+              label="下发状态:"
+              style="font-weight: 700"
+              label-width="75px"
+            >
+              <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item
+              label="日期:"
+              style="font-weight: 700"
+              label-width="45px"
+            >
+              <el-date-picker
+                v-model="form.date"
+                type="date"
+                size="mini"
+                placeholder="选择日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <el-table
+      :data="tableData"
+      size="mini"
+      style="width: 100%"
+      :header-cell-style="{backgroundColor:'rgba(0, 96, 170)',color:'#fff'}"
+      :cell-style="{backgroundColor:'rgba(2, 66, 120)',color:'#fff'}"
+      >
+      <el-table-column
+        prop="date"
+        label="场站名称"
+        align="center"
+       >
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="是否受控"
+        align="center"
+        >
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="装机容量(MVA)"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="虚拟电厂计划值"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="现货系统计划值"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="计划时刻"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="执行时刻"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="下发状态"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="下发时间"
+        align="center">
+      </el-table-column>
+    </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Article-Index',
+  data () {
+    return {
+      form: {
+        taskNumber: '',
+        date: '',
+        current: 1,
+        size: 10
+      },
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '是'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '是'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '是'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '是'
+      }]
+    }
+  },
+  methods: {
+
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.table-wrapper {
+  width: 100%;
+  padding: 0 20px;
+background: url(./img/bigbgc.png);
+background-size: cover;
+  .table-box {
+    background: url(./img/bgc.png);
+    min-height: 600px;
+    background-size: cover;
+  }
+  .title {
+    margin-bottom: 20px;
+    margin-left: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+  /deep/ .el-form-item__label {
+    color: #fff;
+  }
+  /deep/ .el-input__inner {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 1px solid blue;
+  }
+ /deep/ .el-table thead {
+  background-color:rgba(0, 0, 255);
+ }
+ /deep/ .el-table__body{
+  -webkit-border-vertical-spacing: 13px;  // 垂直间距
+}
+/deep/ .el-table, .el-table__expanded-cell {
+   background-color: rgb(1,40,81);
+}
+}
+</style>

src/views/Login.vue → src/views/Login/Login.vue

@@ -4,7 +4,7 @@
     <div class="tab">
         <div style="width: 100%;text-align: center">
           <div class="tab-wrapper">
-            <img alt="" style="display: inline-block;position: absolute;top:50px;" :class="flag1? 'active1':'active2'" src="./img/img_2.png">
+            <img alt="" style="display: inline-block;position: absolute;top:50px;" :class="flag1? 'active1':'active2'" src="img/img_2.png">
             <div @click="handleChange" class="tab1" :class="flag1? 'active':''">账号登陆</div>
             <img alt="" style="display: inline-block;position: absolute;top:-12px;" src="./img/split.png">
             <div @click="handleChange" class="tab2" :class="flag2? 'active':''">人脸识别</div>