Skip to content

C
CRM
Commit 2d5c2f92 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parents 5a6eb087 6a6409c6
Show whitespace changes
Inline Side-by-side
Showing with 426 additions and 338 deletions
package.json
View file @ 2d5c2f92
......@@ -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",
......
public/favicon.ico
View replaced file @ 5a6eb087 View file @ 2d5c2f92
public/favicon.ico

1.12 KB | W: | H:

public/favicon.ico

16.6 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
src/App.vue
View file @ 2d5c2f92
......@@ -23,7 +23,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 deleted 100644 → 0
View file @ 5a6eb087
.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
View file @ 2d5c2f92
......@@ -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
View file @ 2d5c2f92
......@@ -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
View file @ 2d5c2f92
import Vue from "vue";
import Router from "vue-router";
import index from "./views/index";
import login from "./views/login";
import Home from "./components/Home"
Vue.use(Router);
......@@ -8,12 +9,32 @@ 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: "CRM",
title: "大象CRM",
"http-equiv": "X-UA-Compatible",
content: "IE=Edge,chrome=1"
},
......@@ -27,6 +48,14 @@ export default new Router({
},
}
]
},
{
path: '/table',
name: 'table',
component: resolve => require(['@/views/table.vue'], resolve),
meta: {
title: '表格测试'
}
}
]
});
src/views/login.vue 0 → 100644
View file @ 2d5c2f92
<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 0 → 100644
View file @ 2d5c2f92
<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
View file @ 2d5c2f92
......@@ -15,4 +15,13 @@ module.exports = {
require('webpack-require-http')
]
},
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment