新增登录页

.gitignore

+node_modules
+yarn.lock
+yarn-error.log

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "co": "^4.6.0",
     "echarts": "^4.2.0-rc.1",
     "element-ui": "^2.13.0",
     "html2canvas": "^1.0.0-alpha.12",

src/App.vue

@@ -21,7 +21,7 @@ export default {
 <style>
 @import './assets/global/font.css';
 @import '//at.alicdn.com/t/font_1627123_95ez472hgyg.css';
-@import './assets/css/common.css';
+/* @import './assets/css/common.css'; */
 @import './assets/css/init.css';
 body,html{
   padding: 0px;

src/assets/css/common.css

-.commonF{
-    font-family: "PingFang";    
-}
-.commonF .f12{
-    font-size: 12px;
-}
-.commonF .f14{
-    font-size: 14px;
-}
-.commonF .f16{
-    font-size: 16px;
-}
-.commonF .f18{
-    font-size: 18px;
-}
-.commonF .f20{
-    font-size: 20px;
-}
-.commonF .f24{
-    font-size: 24px;
-}
-.commonF .f26{
-    font-size: 26px;
-}
-.commonF .f30{
-    font-size:30px;
-}
-.commonF .f32{
-    font-size:32px;
-}
-.commonF .f40{
-    font-size:40px;
-}
-.commonF .pfR{
-    font-family: "PingFangR";
-}
-.commonF .w1200{
-    width: 1200px;
-}
-.commonF .w1000{
-    width: 1000px;
-    margin: 0 auto;
-
-}
-.commonF .basefix:after {
-    clear: both;
-    content: '.';
-    display: block;
-    height: 0;
-    overflow: hidden;
-}
-.commonF .text1{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-}
-.commonF .text2{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-.commonF .text3{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-.commonF .text4{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-}
-.commonF .cee{
-    color: #EE4454
-}
-.commonF .c11{
-    color: #111111
-}
-.commonF .c22{
-    color: #222222
-}
-.commonF .c33{
-    color: #333333
-}
-.commonF .c44{
-    color: #444444
-}
-.commonF .c55{
-    color: #555555
-}
-.commonF .c66{
-    color: #666666
-}
-.commonF .c77{
-    color: #777777
-}
-.commonF .c88{
-    color: #888888
-}
-.commonF .c99{
-    color: #999999
-}
-.commonF .cff{
-    color: #ffffff
-}
-.commonF .SearchSpan{
-    display: inline-block;
-    width: 70px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    color:#fff;
-    background: #EE4454;
-    position: relative;
-    cursor: pointer;
-    margin:0!important;
-    padding:0!important;
-}
-.commonF .SearchKey .el-input__inner{
-    border-radius: 0;
-}
-.del-text{
-    text-decoration: line-through
-}
-.bold{
-    font-weight: bold;
-}
-.PingFangR{
-    font-family: 'PingFangR'
-}
-.mg-r-10{
-    margin-right: 10px;
-}
-.flex{
-    display: flex;
-}
-.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar{
-			/*滚动条整体样式*/
-			width: 4px;
-			/*高宽分别对应横竖滚动条的尺寸*/
-			height: 8px;
-}
-.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-thumb ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-thumb{
-			/*滚动条里面小方块*/
-			border-radius: 4px;
-			-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
-			background: #c9c9c9;
-}
-.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-track ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-track{
-			/*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
-            border-radius: 4px;
-            background: #EDEDED;
-}
-.content-item-box .content-item-box-hover::-webkit-scrollbar{
-/*滚动条整体样式*/
-    width: 0px;
-    /*高宽分别对应横竖滚动条的尺寸*/
-    height: 0px;
-}
-.content-item-box .content-item-box-hover::-webkit-scrollbar-thumb{
-			/*滚动条里面小方块*/
-			border-radius: 0px;
-			-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
-			background: #c9c9c9;
-}
-.content-item-box .content-item-box-hover::-webkit-scrollbar-track{
-			/*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
-            border-radius: 0px;
-            background: #EDEDED;
-}
-.w200{
-    width: 200px !important;
-}
-.brd0{
-    border-radius: 0;
-}
-
-.pfR{
-    font-family: "PingFangR"
-}
-.commonF ._choice_box{
-      height: 19px;
-      position: absolute;
-      right: 10px;
-      bottom: 8px;
-      display: flex;
-      align-items: center;
-    }
-  .commonF  ._choice_box span{
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      line-height: 16px;
-      text-align: center;
-      background-color: white;
-      display: inline-block;
-      font-size: 12px !important;
-    }
-.commonF .sawtooth .input{
-    position: relative;
-    top: 2px;
-}
-.commonF .sawtooth {
-    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
-    position: relative;
-    /* 把超出p的部分隐藏起来 */
-    overflow: hidden;
-    width:234px;
-    height:84px;
-    background: #6776D2;
-    display: inline-block;
-    margin-right:26px;
-    padding-left:20px;
-    color:#fff;
-
-}
-.commonF .sawtooth .kdj{
-    position: absolute;
-    display: inline-block;
-    width:51px;
-    height:22px;
-    background:rgba(255,231,27,1);
-    right:20px;
-    top:12px;
-    color:#7C6F01; 
-    font-size: 12px;
-    text-align: center;
-    line-height: 22px;
- }
-.commonF .sawtooth:before, .sawtooth:after {
-    content: ' ';
-    width: 0;
-    height: 100%;
-    /* 绝对定位进行偏移 */
-    position: absolute;
-    top: 10px;
-}
- 
-.commonF .sawtooth:before {
-    /* 圆点型的border */
-    border-right: 10px dotted white;
-    /* 偏移一个半径，让圆点的一半覆盖p */
-    left: -5px;
-}
-.commonF .Yhq{
-    background: #fff;
-    padding:20px 0;
-}
-.commonF .yhqUl{
-    padding:0 20px;
-    margin:20px 0;
-}
-.commonF .icon-xuanzhong2{
-    color: #31AA21;
-}
-.commonF .sawtooth:hover {
-    cursor: pointer;
-    /* box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
-    transition: all linear .5s; */
-}
-.commonF .yhqUl .blue{
-    background-color: #8794E2;
-  }
-  .commonF .yhqUl .blue:hover{
-    background-color: #6776D2;
-  }
-  .commonF .yhqUl .blue ._time{
-    color: #4C58A4 !important;
-  }
-  .commonF .yhqUl ._active{
-    background-color: #D9A24D;
-  }
-  .commonF .yhqUl .blue._active{
-    background-color: #6776D2;
-  }
-
-  .commonF ._trip_xiangqing_tips{
-    color: red !important;
-    font-size: 14px !important;
-  }
-  .commonF ._trip_xiangqing_tips span{
-    color: #3965B0;
-    cursor: pointer;
-  }
-  .commonF .yhqImg{
-      position: absolute;
-      right: 80px;
-      top: 10px;
-      width: 50px;
-      height: 50px;
-  }
-  .commonF .yhqImg img{
-      width: 100%;
-      height: 100%;
-      display: block;
-  }
-  .commonF .yhqUl .disab{
-    background-color: #7d7d7d !important;
-}
\ No newline at end of file

src/assets/global/font.css

@@ -11,19 +11,7 @@
     font-style: normal;
     font-weight: normal;
 }
-@font-face {
-    font-family: "FZDBSJW";
-    src: url("../fonts/FZDBSJW.woff") format("woff"),
-    url("../fonts/FZDBSJW.TTF") format("truetype"),
-    url("../fonts/FZDBSJW.svg") format('svg'); 
-    font-style: normal;
-    font-weight: normal;
-}
-@font-face{
-    font-family:'方正大标宋简体';
-    src:url('../fonts/FZDBSJW.woff') format('woff')
-}
 @font-face{
-    font-family:'方正宋三简体';
-    src:url('../fonts/FZSSJ.ttf') format('truetype')
+    font-family: 'perfectFont';
+    src:url('../fonts/MicrosoftYaHeiLight.woff')  format('woff');
 }
\ No newline at end of file

src/main.js

@@ -17,9 +17,14 @@ import moment from 'moment'
 import co from 'co'
 import MsgBus from './plugins/event-bus'
 import { location } from "./assets/utils/getLocation"
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/index.css'
 // 使用Vue.use()方法就会调用工具方法中的install方法
 Vue.use(htmlToPdf)
 Vue.use(VueLazyload)
+Vue.use(VXETable)
+
 // Vue.use(VueLazyload, {
 //   preLoad: 1.3,
 //   error: '../src/assets/img/banner@3x.png',

src/router.js

 import Vue from "vue";
 import Router from "vue-router";
 import index from "./views/index";
+import login from "./views/login";
 Vue.use(Router);
 
 export default new Router({
   mode: "hash",
   base: process.env.BASE_URL,
   routes: [
+    {
+      path: "/login",
+      name: "login",
+      component: login,
+      meta: {
+        title: "欢迎使用CRM系统-请登录使用",
+        "http-equiv": "X-UA-Compatible",
+        content: "IE=Edge,chrome=1"
+      }
+    },
+    {
+      path: "/",
+      name: "login",
+      component: login,
+      meta: {
+        title: "欢迎使用CRM系统-请登录使用",
+        "http-equiv": "X-UA-Compatible",
+        content: "IE=Edge,chrome=1"
+      }
+    },
     {
       path: "/index",
       name: "index",
       component: index,
       meta: {
-        title: "印象之旅~感动与世界同步",
+        title: "大象CRM",
         "http-equiv": "X-UA-Compatible",
         content: "IE=Edge,chrome=1"
       },
       children: [
+        
       ]
-    }    
+    },
+    {
+      path: '/table', 
+      name: 'table',
+      component: resolve => require(['@/views/table.vue'], resolve),
+      meta: {
+        title: '表格测试'
+      }
+    }
   ]
 });

src/views/login.vue

+<template>
+  <div class="login">
+    <div class="login-box">
+      <div class="left-card">
+        <el-carousel trigger="click" height="560px" interval="10000" width="100%" arrow="never">
+          <el-carousel-item v-for="item in 2" :key="item">
+            <div class="item-card">
+              <div class="head-icon">
+                <img src="http://imgfile.oytour.com/Upload/User/636681352035115417.jpg" />
+              </div>
+              <div class="publisher">徐总</div>
+              <div class="job">总经理</div>
+              <div
+                class="content"
+              >職場上成功者與失敗者最大的分別就是，前者找機會，後者找藉口，今日的你痛恨每天上班「度日如年」，將來的你會感激經歷過這一切，你練成了更強大的自己，玻璃心不再怕碎。</div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div class="right-card">
+        <div class="company">四川和平国际旅行社有限公司</div>
+        <div class="t">登录</div>
+        <div class="field_wrap">
+          <div class="pwd_box">
+            <div class="mu-text-field has-label">
+              <div class="field_wrap">
+                <div class="pwd_box">
+                  <div class="mu-text-field has-label">
+                    <div class="mu-text-field-content">
+                      <div class="mu-text-field-label">账号</div>
+                      <input
+                        type="text"
+                        v-model="account"
+                        class="mu-text-field-input"
+                        @focus="accountStatus=true"
+                        @blur="accountStatus=false"
+                      />
+                      <div>
+                        <hr class="mu-text-field-line" />
+                        <hr class="mu-text-field-focus-line" :class="{'focus':accountStatus}" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="field_wrap">
+                <div class="pwd_box">
+                  <div class="mu-text-field has-label">
+                    <div class="mu-text-field-content">
+                      <div class="mu-text-field-label">密码</div>
+                      <input
+                        type="text"
+                        v-model="pwd"
+                        class="mu-text-field-input"
+                        @focus="pwdStatus=true"
+                        @blur="pwdStatus=false"
+                      />
+                      <div>
+                        <hr class="mu-text-field-line" />
+                        <hr class="mu-text-field-focus-line" :class="{'focus':pwdStatus}" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="field_wrap" style="margin-top:30px;">
+                <el-button
+                  type="primary"
+                  :loading="isLogining"
+                  style="width:100%; font-family:perfectFont;font-size: 16px;"
+                >立即登录</el-button>
+              </div>
+              <div class="field_wrap forget">
+                <div class="item-forget">
+                  <el-checkbox v-model="isAutoLogin">下次自动登录</el-checkbox>
+                </div>
+                <div class="item-forget">
+                  <a href="javascript:void(0);">忘记密码？</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="logo-box">
+        <el-row :gutter="12">
+            <el-col :span="10">
+                <img src="../assets/img/logo.png" />
+            </el-col>
+            <el-col :span="12">CRM</el-col>
+        </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      accountStatus: false,
+      account: "",
+      pwdStatus: false,
+      pwd: "",
+      isLogining: false,
+      isAutoLogin: false
+    };
+  }
+};
+</script>
+
+<style scoped>
+.login {
+  background: url("../assets/img/login/bg.jpg") no-repeat 100% 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.logo-box{
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    width: 120px;
+    font-size: 48px;
+    font-family: perfectFont;
+    color: #FFF;
+}
+.login .login-box {
+  width: 1000px;
+  height: 560px;
+  box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
+    0 16px 24px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  background: #fff;
+  display: flex;
+}
+.login .login-box .left-card {
+  width: 440px;
+  height: 100%;
+}
+.login .login-box .left-card .item-card {
+  background: url("../assets/img/login/yinhao.png") right bottom/221px no-repeat,
+    linear-gradient(180deg, #2878ff, #0d2481);
+  width: 100%;
+  height: 100%;
+  padding-top: 96px;
+  color: white;
+  box-sizing: border-box;
+}
+.login .login-box .left-card .item-card .head-icon {
+  width: 104px;
+  height: 104px;
+  margin: 0 auto;
+  border-radius: 100%;
+  background: rgba(40, 120, 255, 0.5);
+  padding: 5px;
+}
+.login .login-box .left-card .item-card .head-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+}
+.login .login-box .left-card .item-card .publisher,
+.login .login-box .left-card .item-card .job {
+  margin-top: 20px;
+  font-size: 24px;
+  font-family: perfectFont;
+  text-align: center;
+}
+.login .login-box .left-card .item-card .publisher {
+  font-weight: bold;
+}
+.login .login-box .left-card .item-card .job {
+  font-size: 16px;
+  margin-top: 10px;
+}
+.login .login-box .left-card .item-card .content {
+  font-size: 13px;
+  font-family: perfectFont;
+  margin-top: 20px;
+  margin: 20px;
+  line-height: 24px;
+  text-indent: 28px;
+}
+.login .login-box .right-card {
+  flex: 1;
+  padding-top: 50px;
+  font-family: perfectFont;
+}
+.login .login-box .right-card .company {
+  font-size: 20px;
+  text-align: center;
+  font-weight: bold;
+}
+.login .login-box .right-card .t {
+  margin-top: 20px;
+  font-size: 34px;
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 30px;
+}
+.field_wrap {
+  width: 330px;
+  margin: 0 auto;
+  font-family: perfectFont;
+}
+.field_wrap .pwd_box {
+  position: relative;
+}
+.field_wrap .pwd_box .mu-text-field {
+  width: 100%;
+  color: rgba(0, 0, 0, 0.54);
+}
+.field_wrap .pwd_box .mu-text-field.has-label {
+  min-height: 72px;
+}
+.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
+  display: block;
+  height: 100%;
+  padding-bottom: 12px;
+  padding-top: 4px;
+}
+.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
+  padding-top: 28px;
+  padding-bottom: 12px;
+}
+.field_wrap
+  .pwd_box
+  .mu-text-field.has-label
+  .mu-text-field-content
+  .mu-text-field-label {
+  line-height: 20px;
+  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: 1;
+  cursor: text;
+  transform: translateZ(0) scale(0.75);
+  transform-origin: left top;
+  user-select: none;
+  pointer-events: none;
+  backface-visibility: hidden;
+  font-size: 16px;
+  font-family: perfectFont;
+  font-weight: bold;
+}
+.field_wrap
+  .pwd_box
+  .mu-text-field.has-label
+  .mu-text-field-content
+  .mu-text-field.has-label
+  .mu-text-field-label {
+  top: 8px;
+  position: absolute;
+}
+.field_wrap
+  .pwd_box
+  .mu-text-field.has-label
+  .mu-text-field-content
+  .mu-text-field-input {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+  border-radius: 0 0 0 0;
+  box-shadow: none;
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 32px;
+  color: rgba(0, 0, 0, 0.87);
+  font-family: inherit;
+  position: relative;
+}
+.mu-text-field-line {
+  background-color: rgba(0, 0, 0, 0.4);
+  margin: 0;
+  height: 1px;
+  border: none;
+  left: 0;
+  right: 0;
+  position: absolute;
+  box-sizing: content-box;
+  overflow: visible;
+}
+.mu-text-field-focus-line {
+  margin: 0;
+  height: 2px;
+  border: none;
+  background-color: #0d2481;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-top: -1px;
+  transform: scaleX(0);
+  transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
+    -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.mu-text-field-focus-line.focus {
+  transform: scaleX(1);
+}
+.el-button--primary,
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #0d2481 !important;
+  border-color: #0d2481 !important;
+}
+.login .login-box .right-card .forget {
+  margin-top: 12px;
+  display: flex;
+}
+.login .login-box .right-card .forget .item-forget {
+  flex: 1;
+  font-size: 14px;
+  font-family: perfectFont;
+}
+.login .login-box .right-card .forget .item-forget:last-child {
+  text-align: right;
+}
+.login .login-box .right-card .forget .item-forget a {
+  color: #000;
+  text-decoration: none;
+}
+.login .login-box .right-card .forget .item-forget a:hover {
+  color: #0d2481;
+}
+</style>
\ No newline at end of file

src/views/table.vue

+<template>
+  <div>
+    <vxe-table border height="300" highlight-hover-row show-overflow :data="tableData">
+      <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
+      <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
+      <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
+      <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
+      <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>
+      <vxe-table-column title="操作" fixed="right" width="200">
+        <template>
+          <vxe-button status="primary">按钮1</vxe-button>
+          <vxe-button>按钮2</vxe-button>
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: []
+    };
+  },
+  created() {
+    this.tableData = window.MOCK_DATA_LIST.slice(0, 20);
+  }
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

vue.config.js

 module.exports = {
-    configureWebpack: {
-      resolve: {
-        alias: {
-          'assets': '@/assets',
-          'components': '@/components',
-          'views': '@/views',
-        }
+  configureWebpack: {
+    resolve: {
+      alias: {
+        'assets': '@/assets',
+        'components': '@/components',
+        'views': '@/views',
+      }
     },
     devServer: {
       // host: 'www.B2B.com',
     },
-      externals:  [
-        'BMap',
-        require('webpack-require-http')
-      ]
-    },
-  }
+    externals: [
+      'BMap',
+      require('webpack-require-http')
+    ]
+  },
+  pwa: {
\ No newline at end of file
+    iconPaths: {
+      favicon32: 'favicon.ico',
+      favicon16: 'favicon.ico',
+      appleTouchIcon: 'favicon.ico',
+      maskIcon: 'favicon.ico',
+      msTileImage: 'favicon.ico'
+    }
+  }
+}
\ No newline at end of file