登录

package-lock.json

@@ -2257,6 +2257,37 @@
       "integrity": "sha1-oXs6jqgRBg501H0wYSJACtRJeuI=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz",
+      "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518405361&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+          "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1582676223200&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -7009,6 +7040,11 @@
       "integrity": "sha1-z5MBvFzHVokqmmyNcTgyLllE+w0=",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz?cache=0&sync_timestamp=1583934793245&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-cookie%2Fdownload%2Fjs-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "js-cookie": "^2.2.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

public/index.html

@@ -13,5 +13,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=AZCBZ-ALOLU-AJSVS-2WVQ3-X2TIQ-5QFCG"></script>
   </body>
 </html>

src/api/login.js

+import request from '@/utils/request'
+
+export function login (params) {
+  return request({
+    url: '/sso/login',
+    method: 'post',
+    params
+  })
+}
+
+export function getInfo () {
+  return request({
+    url: '/sso/info',
+    method: 'get'
+  })
+}
+
+export function logout () {
+  return request({
+    url: '/admin/logout',
+    method: 'post'
+  })
+}
+
+export function fetchList (params) {
+  return request({
+    url: '/admin/list',
+    method: 'get',
+    params: params
+  })
+}
+
+export function createAdmin (data) {
+  return request({
+    url: '/admin/register',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateAdmin (id, data) {
+  return request({
+    url: '/admin/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateStatus (id, params) {
+  return request({
+    url: '/admin/updateStatus/' + id,
+    method: 'post',
+    params: params
+  })
+}
+
+export function deleteAdmin (id) {
+  return request({
+    url: '/admin/delete/' + id,
+    method: 'post'
+  })
+}
+
+export function getRoleByAdmin (id) {
+  return request({
+    url: '/admin/role/' + id,
+    method: 'get'
+  })
+}
+
+export function allocRole (data) {
+  return request({
+    url: '/admin/role/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 下面部分为自主添加
+export function register (data) {
+  return request({
+    url: '/admin/register',
+    method: 'post',
+    data: data
+  })
+}
+
+export function fetchSupplierList (data) {
+  return request({
+    url: '/admin/list',
+    method: 'get',
+    params: data
+  })
+}
+
+export function updateUser (userId, data) {
+  return request({
+    url: '/admin/update/' + userId,
+    method: 'post',
+    data
+  })
+}
+
+export function updatePassword (data) {
+  return request({
+    url: '/admin/updatePwd',
+    method: 'post',
+    data
+  })
+}
+
+export function updateBindPhone (data) {
+  return request({
+    url: '/admin/updateBindPhone',
+    method: 'post',
+    data
+  })
+}
+
+// 用户日志列表
+export function logRequest (params) {
+  return request({
+    url: '/admin/login/list',
+    method: 'get',
+    params: params
+  })
+}

src/assets/scss/common.scss

@@ -24,5 +24,10 @@ dl {
   //background: #dcdcdc;
 }
 .input-width{
-  width: 300px;
+  width: 500px;
+}
+.container{
+  width: 1200px;
+  margin: 0 auto;
+  padding: 4% 0;
 }

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-
+import Layout from '@/views/layout/Layout'
 Vue.use(VueRouter)
 
 const routes = [
+  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
+  { path: '/forget', component: () => import('@/views/login/forgetPwd'), hidden: true },
+  { path: '/404', component: () => import('@/views/404'), hidden: true },
   {
-    path: '/',
-    name: 'home',
-    component: () => import('@/views/Home/index.vue')
+    path: '',
+    component: Layout,
+    redirect: '/home',
+    children: [{
+      path: 'home',
+      name: 'home',
+      component: () => import('@/views/home/index.vue')
+    }, {
+      path: 'search',
+      name: 'search',
+      component: () => import('@/views/search/index.vue')
+    }]
   }
 ]
 

src/store/getters.js

+const getters = {
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  stockRoomId: state => state.user.stockRoomId,
+  type: state => state.user.type,
+  memberId: state => state.user.memberId,
+  userId: state => state.user.userId,
+  name: state => state.user.name
+}
+export default getters

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
+import user from './modules/user'
+import getters from './getters'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
+const store = new Vuex.Store({
   modules: {
-  }
+    user
+  },
+  getters
 })
+
+export default store

src/store/modules/user.js

+import { login, logout, getInfo } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import { setCookie, getCookie } from '@/utils/support'
+
+const user = {
+  state: {
+    token: getToken(),
+    name: '',
+    userId: getCookie('userId'),
+    memberId: getCookie('memberId'),
+    stockRoomId: getCookie('stockRoomId'),
+    avatar: '',
+    roles: []
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_USERID: (state, userId) => {
+      state.userId = userId
+      setCookie('userId', userId, 15)
+    },
+    SET_MEMBERID: (state, memberId) => {
+      state.memberId = memberId
+      setCookie('memberId', memberId, 15)
+    },
+    SET_STOCKROOMID: (state, stockRoomId) => {
+      state.stockRoomId = stockRoomId
+      setCookie('stockRoomId', stockRoomId, 15)
+    },
+    SET_TYPE: (state, type) => {
+      state.type = type
+      setCookie('type', type, 15)
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    }
+  },
+
+  actions: {
+    // 登录
+    Login ({ commit }, userInfo) {
+      // const username = userInfo.username.trim()
+      console.log('userifno', userInfo)
+      return new Promise((resolve, reject) => {
+        login(userInfo).then(response => {
+          const data = response.data
+          const tokenStr = data.tokenHead + data.token
+          setToken(tokenStr)
+          commit('SET_TOKEN', tokenStr)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 获取用户信息
+    GetInfo ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo().then(response => {
+          const data = response.data
+          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+            commit('SET_ROLES', data.roles)
+          } else {
+            // reject('getInfo: roles must be a non-null array !')
+          }
+          commit('SET_NAME', data.username)
+          commit('SET_AVATAR', data.icon)
+          commit('SET_USERID', data.userId)
+          commit('SET_MEMBERID', data.memberId)
+          commit('SET_STOCKROOMID', data.stockRoomId)
+          commit('SET_TYPE', data.type)
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 登出
+    LogOut ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          removeToken()
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 前端 登出
+    FedLogOut ({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        removeToken()
+        resolve()
+      })
+    }
+  }
+}
+
+export default user

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'loginToken'
+
+export function getToken () {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken (token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken () {
+  return Cookies.remove(TokenKey)
+}

src/utils/date.js

+// date.js
+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+    }
+  }
+  return fmt;
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length);
+}
+
+export function str2Date(dateStr, separator) {
+  if (!separator) {
+    separator = "-";
+  }
+  let dateArr = dateStr.split(separator);
+  let year = parseInt(dateArr[0]);
+  let month;
+  //处理月份为04这样的情况
+  if (dateArr[1].indexOf("0") == 0) {
+    month = parseInt(dateArr[1].substring(1));
+  } else {
+    month = parseInt(dateArr[1]);
+  }
+  let day = parseInt(dateArr[2]);
+  let date = new Date(year, month - 1, day);
+  return date;
+}

src/utils/index.js

+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+export function formatTime(time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) { // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+  }
+}

src/utils/request.js

+/* eslint-disable */
+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import store from '../store'
+import { getToken } from '@/utils/auth'
+// 创建axios实例
+const service = axios.create({
+  // baseURL: process.env.BASE_API,
+  withCredentials: true,
+  baseURL: 'http://192.168.31.127:8401/mall-portal',
+  // baseURL: 'http://hhg.api.jsonpro.cn:8201/mall-admin',
+  timeout: 60000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  if (store.getters.token) {
+    config.headers.Authorization = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    config.headers['Access-Control-Allow-Credentials'] = true
+  }
+  return config
+}, error => {
+  // Do something with request error
+  console.log(error) // for debug
+  Promise.reject(error)
+})
+
+// respone拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+    * code为非200是抛错 可结合自己业务进行修改
+    */
+    const res = response.data
+    if (res.code !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 3 * 1000
+      })
+      // 401:未登录;
+      if (res.code === 401) {
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('FedLogOut').then(() => {
+            location.reload()// 为了重新实例化vue-router对象 避免bug
+          })
+        })
+      }
+      return Promise.reject('error')
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    console.log('err' + error)// for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 3 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+export default service

src/utils/support.js

+import Cookies from 'js-cookie'
+const SupportKey = 'supportKey'
+export function getSupport () {
+  return Cookies.get(SupportKey)
+}
+
+export function setSupport (isSupport) {
+  return Cookies.set(SupportKey, isSupport, { expires: 3 })
+}
+
+export function setCookie (key, value, expires) {
+  return Cookies.set(key, value, { expires: expires })
+}
+
+export function getCookie (key) {
+  return Cookies.get(key)
+}

src/utils/validate.js

+export default {
+// 获取分类label值
+  getCascaderObj(val, opt) {
+    return val.map(function (value, index, array) {
+      for (var itm of opt) {
+        if (itm.id == value) {
+          opt = itm.children;
+          return itm.name;
+        }
+      }
+      return null;
+    })
+  },
+  // 数组对象合并去重
+  removingDplicate(a, b) {
+    let ab = a.concat(b);
+    let obj = {};
+    let result = ab.reduce((cur,next) => {
+      obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
+      return cur;
+    },[]); //设置cur默认类型为数组，并且初始值为空的数组
+    console.log(result);
+    return  result;
+  },
+
+  /* 合法uri*/
+  validateURL(textval) {
+    const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+    return urlregex.test(textval)
+  },
+
+  /* 小写字母*/
+  validateLowerCase(str) {
+    const reg = /^[a-z]+$/
+    return reg.test(str)
+  },
+
+  /* 大写字母*/
+  validateUpperCase(str) {
+    const reg = /^[A-Z]+$/
+    return reg.test(str)
+  },
+
+  /* 大小写字母*/
+  validatAlphabets(str) {
+    const reg = /^[A-Za-z]+$/
+    return reg.test(str)
+  }
+}
+

src/views/404.vue

+<template>
+  <div>
+    <div class="app-container">
+      <el-col :span="12">
+        <img :src="img_404" alt="404" class="img-style">
+      </el-col>
+      <el-col :span="12">
+        <div style="margin-left: 100px;margin-top: 60px">
+          <h1 class="color-main">OOPS!</h1>
+          <h2 style="color: #606266">很抱歉，页面它不小心迷路了！</h2>
+          <div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+          <el-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</el-button>
+        </div>
+      </el-col>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import img_404 from '@/assets/images/gif_404.gif'
+
+export default {
+  name: 'wrongPage',
+  data () {
+    return {
+      img_404
+    }
+  },
+  methods: {
+    handleGoMain () {
+      this.$router.push({ path: '/' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-container {
+    width: 80%;
+    margin: 120px auto;
+  }
+
+  .img-style {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+</style>

src/views/Home/index.vue → src/views/home/index.vue

 <template>
   <div class="page">
-    <div class="nav">
-      <img src="@/assets/images/ic_logo.png" alt="">
-      <div class="search-module">
-        <ul>
-          <li class="checked">文档名称</li>
-          <li>文档类型</li>
-          <li>发布时间</li>
-          <li>创建者</li>
-        </ul>
-        <el-input
-          class="input-width"
-          placeholder="请输入内容"
-          v-model="searchName">
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
-      </div>
-      <div>
-      </div>
-    </div>
     <div class="container">
-      <el-row :gutter="50">
-        <el-col :span="12">
+      <el-row  type="flex" justify="space-around">
+        <el-col :span="11">
           <div class="title">
             <p>热门下载 Popular download</p>
             <p>更多 <i class="el-icon-arrow-right"></i></p>
@@ -33,14 +14,14 @@
               style="width: 100%">
               <el-table-column
                 prop="address"
-                >
+              >
               </el-table-column>
               <el-table-column
                 prop="zip"
                 width="200">
               </el-table-column>
               <el-table-column
-              width="100">
+                width="100">
                 <template slot-scope="scope">
                   <el-button
                     @click.native.prevent="deleteRow(scope.$index, tableData)"
@@ -52,7 +33,7 @@
             </el-table>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="11">
           <div class="title">
             <p>热门下载 Popular download</p>
             <p>更多 <i class="el-icon-arrow-right"></i></p>
@@ -94,7 +75,6 @@ export default {
   components: {},
   data () {
     return {
-      searchName: null,
       tableData: [{
         date: '2016-05-03',
         name: '王小虎',
@@ -154,59 +134,19 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  .nav {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 70%;
-    margin: 0 auto;
-    padding: 30px 0;
-  }
-
-  .nav img {
-    margin-right: 30px;
-  }
 
-  .search-module {
+  .title {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    padding: 20px;
+    font-size: 16px;
   }
 
-  .search-module ul {
-    list-style: none;
-    display: flex;
-  }
-
-  .search-module li {
-    margin-right: 5px;
-    font-size: 12px;
-    cursor: pointer;
-    line-height: 26px;
-    text-align: center;
-    background: #f0f0f0;
-    padding: 0 5px;
-    height: 26px;
-    border-radius: 4px 4px 0 0;
+  .title p:last-child {
+    color: #4583F3;
+    font-size: 13px;
   }
 
-  .search-module .checked {
-    background: #4583F3;
-    color: #ffffff;
-  }
-  .container{
-    width: 70%;
-    margin: 50px auto;
-  }
-.title{
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-  font-size: 16px;
-}
-.title p:last-child{
-  color:#4583F3;
-  font-size: 13px;
-}
   .input-width {
     width: 500px;
     /*border: 1px solid #4583F3;*/

src/views/layout/Layout.vue

+<template>
+  <div>
+    <Header></Header>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import Header from './modules/Header'
+
+export default {
+  name: 'Layout',
+  components: { Header },
+  data () {
+    return {}
+  },
+  mounted () {
+  },
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/layout/modules/Header.vue

+<template>
+  <div class="navbar">
+    <div class="nav">
+      <div class="nav-left">
+        <img src="@/assets/images/ic_logo.png" alt="">
+        <p class="project-name">万科文档库平台</p>
+      </div>
+      <div class="search-module">
+        <ul>
+          <li class="checked">文档名称</li>
+          <li>文档类型</li>
+          <li>发布时间</li>
+          <li>创建者</li>
+        </ul>
+        <div>
+          <el-input
+            class="input-width"
+            placeholder="请输入内容"
+            v-model="searchName">
+<!--            <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
+            <el-button  @click ="search" type="primary" slot="append" icon="el-icon-search">搜索</el-button>
+          </el-input>
+        </div>
+
+      </div>
+      <div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  components: {},
+  data () {
+    return {
+      searchName: null
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    search () {
+      this.$router.push('/search')
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+  .navbar{
+    border-bottom: 1px solid #ccc;
+  }
+  .project-name{
+    font-size: 20px;
+    margin-top: 5px;
+  }
+  .nav {
+    display: flex;
+    /*justify-content: center;*/
+    align-items: center;
+    width:1200px;
+    margin: 0 auto;
+    padding: 4% 0;
+    position: relative;
+
+  }
+  .nav .nav-left {
+    margin-right: 50px;
+  }
+
+  .search-module {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-module ul {
+    list-style: none;
+    display: flex;
+  }
+
+  .search-module li {
+    margin-right: 5px;
+    font-size: 12px;
+    cursor: pointer;
+    line-height: 26px;
+    text-align: center;
+    background: #f0f0f0;
+    padding: 0 5px;
+    height: 26px;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .search-module .checked {
+    background: #4583F3;
+    color: #ffffff;
+  }
+  .input-width{
+    /*border: 1px solid #4583F3;*/
+  }
+</style>
+<style>
+  .input-with-select .el-input-group__append {
+    background-color: #fff;
+  }
+</style>

src/views/login/components/BottomFooter.vue

+<template>
+  <div class="footer">
+    <el-link style="color: #fff;font-size: 12px;">如遇问题请联系我们</el-link>
+    <div>Copyright © 2020 Powered By 泉州六方网络科技有限公司</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'bottomFooter',
+  methods: {}
+}
+</script>
+
+<style scoped>
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 88px;
+  padding: 0 20px;
+  color: #FFFFFF;
+  font-size: 12px;
+}
+
+.footer div {
+  margin-top: 10px;
+}
+</style>

src/views/login/components/TopNav.vue

+<template>
+  <div class="nav">
+    <img src="@/assets/images/ic_logo.png" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'topNav',
+  methods: {}
+}
+</script>
+
+<style scoped>
+.nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 88px;
+  background-color: white;
+}
+
+.nav img {
+  height: 43px;
+  margin-left: 104px;
+}
+</style>

src/views/login/forgetPwd.vue

+<template>
+    <div class="container">
+      <div class="content">
+        <img class="logo"
+             src="@/assets/images/ic_logo.png"/>
+        <el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
+          <el-col :span="12">
+            <img class="bg-img"
+                 src="@/assets/images/Diagram.png"/>
+          </el-col>
+          <el-col :span="9">
+            <div class="password-form-layout">
+              <div class="password-title">找回密码（1/2）</div>
+              <el-form>
+                <el-form-item prop="username">
+                  <el-input type="text"
+                            placeholder="请输入登录手机号">
+              <span slot="prefix">
+                <i class="el-icon-user" />
+
+              </span>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                  <el-input type="text"
+                            placeholder="请输入短信验证码">
+              <span slot="prefix">
+                <i class="el-icon-mobile-phone" />
+
+              </span>
+                    <span slot="suffix">
+                <el-button type="primary"
+                           size="mini">发送短信</el-button>
+              </span>
+                  </el-input>
+                  <div class="row">
+                    <el-link style="color:#C5CDD3;" @click="goLogin">立即登录</el-link>
+                  </div>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary"
+                             style="width: 100%;border-radius: 20px;"
+                             :loading="loading"
+                             @click.native.prevent="resetPassword">重设密码</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <bottom-footer />
+    </div>
+</template>
+
+<script>
+// import TopNav from './components/TopNav'
+import BottomFooter from './components/BottomFooter'
+
+export default {
+  name: 'ForgetPwd',
+  components: {
+    // TopNav,
+    BottomFooter
+  },
+  data () {
+    return {
+      loading: false
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    resetPassword () {
+
+    },
+    goLogin () {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: url("~@/assets/images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}
+.container .content {
+  width: 60%;
+  padding: 3%;
+  height: 70%;
+  background: #FFFFFF;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.content .bg-img {
+  width: 100%;
+}
+.row{
+  padding-bottom: 5px;
+  font-size:10px;
+  color: #C5CDD3;
+}
+.container .logo {
+  width: 12%;
+}
+
+.my-form {
+  padding-top: 5%;
+  flex: 1;
+  align-items: center;
+}
+
+.password-form-layout {
+  z-index: 9;
+}
+
+.password-title {
+  color: #AFB0B3;
+  font-size: 25px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.password-form-layout .el-input .el-divider {
+  margin: 0;
+}
+</style>
+<style>
+  .password-form-layout .el-input__inner {
+    border: none;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 0;
+  }
+</style>

src/views/login/index.vue

+<template>
+  <div class="container">
+    <div class="content">
+      <img class="logo"
+           src="@/assets/images/ic_logo.png"/>
+      <el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
+        <el-col :span="12">
+          <img class="bg-img"
+               src="@/assets/images/Diagram.png"/>
+        </el-col>
+        <el-col :span="9">
+          <div class="login-form-layout">
+            <div class="login-title">账号登录</div>
+            <el-form autoComplete="on"
+                     :model="loginForm"
+                     :rules="loginRules"
+                     ref="loginForm"
+                     label-position="left">
+              <el-form-item prop="username">
+                <el-input name="username"
+                          type="text"
+                          v-model="loginForm.username"
+                          autoComplete="on"
+                          placeholder="请输入用户名">
+              <span slot="prefix">
+                <i class="el-icon-user-solid"/>
+              </span>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input name="password"
+                          :type="pwdType"
+                          @keyup.enter.native="handleLogin"
+                          v-model="loginForm.password"
+                          autoComplete="on"
+                          placeholder="请输入密码">
+               <span slot="prefix">
+                    <i class="el-icon-lock"></i>
+                  </span>
+                </el-input>
+              </el-form-item>
+<!--              <div class="row">-->
+<!--                <p @click="forgetPwd">忘记密码</p>-->
+<!--              </div>-->
+              <el-form-item>
+                <el-button type="primary"
+                           style="width: 100%;border-radius: 20px;"
+                           :loading="loading"
+                           @click.native.prevent="handleLogin">登录
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <bottom-footer/>
+  </div>
+</template>
+
+<script>
+import { setCookie, getCookie } from '@/utils/support'
+import BottomFooter from './components/BottomFooter'
+
+export default {
+  name: 'login',
+  components: {
+    BottomFooter
+  },
+  data () {
+    const validateUsername = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const validatePass = (rule, value, callback) => {
+      if (value.length < 3) {
+        callback(new Error('密码不能小于3位'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      captchaImage: null,
+      codeList: [],
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      loginRules: {
+        username: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateUsername
+        }],
+        password: [{
+          required: true,
+          trigger: 'blur',
+          validator: validatePass
+        }]
+      },
+      loading: false,
+      pwdType:
+        'password'
+    }
+  },
+  created () {
+    const username = getCookie('username')
+    const password = getCookie('password')
+    if (username) {
+      this.loginForm.username = username
+    }
+    if (password) {
+      this.loginForm.password = password
+    }
+  },
+  methods: {
+    showPwd () {
+      if (this.pwdType === 'password') {
+        this.pwdType = ''
+      } else {
+        this.pwdType = 'password'
+      }
+    },
+    handleLogin () {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          console.log('this.loginForm', this.loginForm)
+          this.$store.dispatch('Login', this.loginForm).then(() => {
+            this.loading = false
+            setCookie('username', this.loginForm.username, 15)
+            setCookie('password', this.loginForm.password, 15)
+            this.$router.push({ path: '/' })
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('参数验证不合法！')
+          return false
+        }
+      })
+    },
+    forgetPwd () {
+      this.$router.push('/forget')
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: url("~@/assets/images/bg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .container .content {
+    width: 60%;
+    padding: 3%;
+    height: 70%;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+
+  }
+
+  .content .bg-img {
+    width: 100%;
+  }
+
+  .row {
+    padding-bottom: 5px;
+    font-size: 10px;
+    color: #C5CDD3;
+  }
+
+  .container .logo {
+    width: 12%;
+  }
+
+  .my-form {
+    padding-top: 5%;
+    flex: 1;
+    align-items: center;
+  }
+
+  .login-form-layout {
+    z-index: 9;
+  }
+
+  .login-title {
+    color: #AFB0B3;
+    font-size: 25px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .login-form-layout .el-input .el-divider {
+    margin: 0;
+  }
+</style>
+<style>
+  .login-form-layout .el-input__inner {
+    border: none;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 0;
+  }
+</style>

src/views/search/index.vue

+<template>
+  <div class="page">
+    <div class="container">
+      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+        <el-menu-item index="1">最新上传</el-menu-item>
+        <el-menu-item index="2">热门下载</el-menu-item>
+      </el-menu>
+      <el-row :gutter="20" class="row">
+        <el-col :span="6" v-for="(item,index) in 7" :key="index">
+          <el-card :body-style="{ padding: '0px' }">
+            <div class="card_image">
+              <img src="@/assets/images/ECEL.png"
+                   class="image">
+              <div>
+                <p class="time">2020-05-21</p>
+                <p class="time">下载量： 123</p>
+              </div>
+            </div>
+
+            <div style="padding: 14px;text-align: left;">
+              <span>实名制工作计划PPT模板</span>
+              <div class="bottom clearfix">
+                <time class="time">陈大大</time>
+                <el-button type="text" class="button">立即下载</el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  components: {},
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  },
+  mounted () {
+  },
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+  .card_image {
+    position: relative;
+    background: #ffffff;
+    width: 100%;
+    height: 300px;
+  }
+  .card_image img{
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .card_image div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    background: #eeeeee;
+    line-height: 30px;
+    padding: 0 14px;
+
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
+
+  .row {
+    margin-top: 30px;
+  }
+  .row>div{
+    margin-bottom: 20px;
+  }
+</style>