Skip to content

C
CRM
Commit f67cdb97 authored by 罗超's avatar 罗超
Browse files
Options

首页进行了部分调整

parent 3b5b3f50
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1376 additions and 899 deletions
package.json
View file @ f67cdb97
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"chart.js": "^2.9.3",
"co": "^4.6.0", "co": "^4.6.0",
"echarts": "^4.2.0-rc.1", "echarts": "^4.2.0-rc.1",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
...@@ -17,12 +18,15 @@ ...@@ -17,12 +18,15 @@
"moment": "^2.22.2", "moment": "^2.22.2",
"register-service-worker": "^1.0.0", "register-service-worker": "^1.0.0",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-chartjs": "^3.5.0",
"vue-echarts-v3": "^1.0.19", "vue-echarts-v3": "^1.0.19",
"vue-lazyload": "^1.2.6", "vue-lazyload": "^1.2.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue2.0-zoom": "^2.1.1", "vue2.0-zoom": "^2.1.1",
"vuex": "^3.0.1", "vuex": "^3.0.1",
"webpack-require-http": "^0.4.3" "vxe-table": "^2.7.24",
"webpack-require-http": "^0.4.3",
"xe-utils": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.4.1", "@vue/cli-plugin-babel": "^3.4.1",
......
src/App.vue
View file @ f67cdb97
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_zhwytyp2i4.css'; @import '//at.alicdn.com/t/font_1627123_b01m6uprnb.css';
/* @import './assets/css/common.css'; */ /* @import './assets/css/common.css'; */
@import './assets/css/init.css'; @import './assets/css/init.css';
body,html{ body,html{
......
src/components/Home.vue
View file @ f67cdb97
This diff is collapsed.
src/components/HomeNav/HomeNavLeft.vue
View file @ f67cdb97
<style> <style>
.home-nav{ .home-nav {
width: 100%; width: 100%;
height: 100%; height: 100%;
} font-family: perfectFont;
.log-box{ user-select: none;
width: 100%; }
height: 13.19%; .log-box {
} width: 100%;
.log-box{ height: 13.19%;
background-color: #F4F5F9; }
} .log-box {
.log-box>div{ background-color: #f4f5f9;
height: 100%; }
width: 100%; .log-box > div {
background:rgba(13,36,129,1); height: 100%;
border-radius:0px 40px 40px 0px; width: 100%;
display: flex; background: rgba(13, 36, 129, 1);
align-items: center; /* border-radius:0px 40px 40px 0px; */
justify-content: center display: flex;
} align-items: center;
.home-nav .log-box.fillet-none>div{ justify-content: center;
border-radius:0px 40px 0px 0px; }
} .log-box img {
.log-box img{ width: 42px;
width: 42px;
} }
.home-nav .home-menu { .home-nav .home-menu {
padding-left: 19px; padding-left: 19px;
} }
.home-nav .home-menu .home-menu-item{ .home-nav .home-menu .home-menu-item {
color:rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
font-size: 12px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all linear .2s; transition: all linear 0.2s;
background-color: #F4F5F9; background-color: #f4f5f9;
} }
.home-nav .home-menu .home-menu-item>div{ .home-nav .home-menu .home-menu-item > div {
padding: 0 0 0 35px; padding: 0 0 0 35px;
background-color: rgba(13,36,129,1); background-color: rgba(13, 36, 129, 1);
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
} }
.home-nav .home-menu .home-menu-item.active{ .home-nav .home-menu .home-menu-item.active {
background-color: rgba(13,36,129,1); background-color: rgba(13, 36, 129, 1);
} }
.home-nav .home-menu .home-menu-item.active>div{ .home-nav .home-menu .home-menu-item.active > div {
font-weight:bold; font-weight: bold;
color:rgba(13,36,129,1); color: rgba(13, 36, 129, 1);
opacity: 1; opacity: 1;
transition: all linear .2s; transition: all linear 0.2s;
background-color: #F4F5F9; background-color: #f4f5f9;
border-radius: 19px 0 0 19px; /* border-radius: 19px 0 0 19px; */
} }
.home-nav .home-menu .home-menu-item.active + .home-menu-item>div{ .home-nav .home-menu .home-menu-item > div .iconfont {
border-radius: 0px 40px 0px 0px; padding-right: 10px;
}
.home-nav .home-menu .home-menu-item.shang>div{
border-radius: 0px 0px 40px 0px;
}
.home-nav .home-menu .home-menu-item.active + .home-menu-item>div{
border-radius: 0px 40px 0px 0px;
}
.home-nav .home-menu .home-menu-item>div .iconfont{
padding-right: 10px;
} }
</style> </style>
<template> <template>
<div class="home-nav"> <div class="home-nav">
<div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']"> <div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']">
<div> <div>
<img src="../../assets/img/logo.png" alt=""> <img src="../../assets/img/logo.png" alt />
</div> </div>
</div>
<ul class="home-menu">
<li class="home-menu-item" v-for="(item, index) in navList" :key="index" :class="[index === activeIndex ? 'active' : '', activeIndex === index + 1 ? 'shang' : '']" @click="changeMenu(item, index)">
<div>
<i :class="item.class"></i><span>{{item.name}}</span>
</div>
</li>
</ul>
</div> </div>
<ul class="home-menu">
<li
class="home-menu-item"
v-for="(item, index) in navList"
:key="index"
:class="[index === activeIndex ? 'active' : '', activeIndex === index + 1 ? 'shang' : '']"
@click="changeMenu(item, index)"
>
<div>
<i :class="item.class"></i>
<span>{{item.name}}</span>
</div>
</li>
</ul>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
activeIndex: 0, activeIndex: 0,
navList: [ navList: [
{ {
class: 'iconfont iconyibiaopan', class: "iconfont iconyibiaopan",
name: '仪表盘' name: "仪表盘"
}, },
{ {
class: 'iconfont icondaiban', class: "iconfont icondaiban",
name: '待办事项' name: "待办事项"
}, },
{ {
class: 'iconfont iconxiansuo', class: "iconfont iconxiansuo",
name: '线索' name: "线索"
}, },
{ {
class: 'iconfont iconkehu', class: "iconfont iconkehu",
name: '客户' name: "客户"
}, },
{ {
class: 'iconfont iconkehu1', class: "iconfont iconkehu1",
name: '联系人' name: "联系人"
}, },
{ {
class: 'iconfont icongonghaiguanli', class: "iconfont icongonghaiguanli",
name: '公海' name: "公海"
}, },
{ {
class: 'iconfont iconshangji', class: "iconfont iconshangji",
name: '商机' name: "商机"
}, },
{ {
class: 'iconfont iconhetong', class: "iconfont iconhetong",
name: '合同' name: "合同"
}
]
} }
}, ]
mounted () { };
},
}, mounted() {},
methods: { methods: {
changeMenu: function (it, ind) { changeMenu: function(it, ind) {
this.activeIndex = ind this.activeIndex = ind;
}
} }
}
} };
</script> </script>
src/components/HomeNav/HomeNavRight.vue deleted 100644 → 0
View file @ 3b5b3f50
<style>
.nav-right{
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-right .nav-right-menu,.nav-right-info{
display: flex;
align-items: center;
}
.nav-right .nav-right-menu>div{
padding: 10px 35px;
background:rgba(237,237,237,1);
border-radius:8px;
font-weight:400;
color:rgba(153,153,153,1);
font-size: 12px;
margin-right: 20px;
cursor: pointer;
}
.nav-right .nav-right-menu>div.active{
background:rgba(13,36,129,1);
box-shadow:0px 5px 6px 0px rgba(23,31,62,0.4);
color:rgba(255,255,255,1);
}
.nav-right-info{
align-items: center;
font-size:14px;
height: 100%;
}
.nav-right-info .n-left{
display: flex;
align-items: center;
margin-right: 30px;
}
.nav-right-info .n-left span{
padding-left: 10px;
}
.nav-right-info .n-left .qiehuan{
font-weight: bold;
color:#0D2481;
cursor: pointer;
padding-right: 30px;
}
.nav-right-info .n-left .el-input__inner{
border-radius: 17px;
}
.nav-right-info .n-right{
padding: 0 30px;
display: flex;
align-items: center;
height: 100%;
border-radius:30px 0px 0px 0px;
background:linear-gradient(0deg,rgba(244,245,249,1),rgba(255,255,255,1));
}
.nav-right-info .n-right img.msg{
padding-right: 30px;
}
.nav-right-info .n-right .hi{
color: #BEBEBE;
}
.nav-right-info .n-right .name{
padding-right: 30px;
}
.nav-right-info .n-right img.head{
width:44px;
height:44px;
background:rgba(255,106,105,1);
border-radius:50%;
}
</style>
<template>
<div class="nav-right">
<div class="nav-right-menu">
<div v-for="(item, index) in menuList" :key="index" :class="{'active': activeIndex === index}" @click="activeIndex = index">{{item.name}}</div>
</div>
<div class="nav-right-info">
<div class="n-left">
<img src="../../assets/img/nav/em.png" alt="">
<span>本人及下属</span>
<span>|</span>
<span class="qiehuan">切换</span>
<el-select v-model="value" size="mini" class="w110" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="n-right">
<img class="msg" src="../../assets/img/nav/msg.png" alt="">
<span class="hi">Hello,</span>
<span class="name">李思思</span>
<img class="head" src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3520291871,4257579916&fm=58" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
activeIndex: 0,
value: 0,
menuList: [
{
name: '客户管理',
},
{
name: '商业智能',
}
],
options: [
{
value: 0,
label: '本年'
},{
value: 1,
label: '本月'
},{
value: 2,
label: '今日'
}
]
}
},
mounted () {
},
methods: {
}
}
</script>
src/components/HomeNav/HomeNavTop.vue 0 → 100644
View file @ f67cdb97
<style>
.nav-right {
height: 100%;
margin: 0 30px;
display: flex;
font-family: perfectFont;
user-select: none;
}
.nav-right .nav-right-menu,
.nav-right .nav-right-info {
display: flex;
align-items: center;
height: 100%;
flex: 1;
}
.nav-right .nav-right-menu ul {
padding: 0;
margin: 0;
display: flex;
width: 100%;
height: 100%;
}
.nav-right .nav-right-menu ul li {
line-height: 56px;
display: inline-block;
border-bottom: 3px solid rgba(13, 36, 129, 0);
margin: 0 20px;
color: #666;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.nav-right .nav-right-menu ul li:first-child {
margin-left: 0px;
}
.nav-right .nav-right-menu ul li.active {
color: rgba(13, 36, 129, 1);
border-bottom-color: rgba(13, 36, 129, 1);
}
.nav-right .nav-right-menu ul li i {
font-size: 16px;
margin-right: 5px;
}
.nav-right .nav-right-info {
flex: unset;
width: 240px;
justify-content: flex-end;
}
.nav-right .nav-right-info .right-item {
text-align: right;
padding-left: 20px;
}
/* .nav-right .nav-right-info .right-item:last-child{
margin: 0px;
} */
.nav-right .nav-right-info .right-item img {
width: 34px;
height: 34px;
border-radius: 100%;
}
.nav-right .nav-right-info .right-item .welcomne-txt {
font-size: 12px;
color: #bbb;
margin-right: 5px;
}
.nav-right .nav-right-info .right-item .usr-name {
font-size: 16px;
font-weight: bold;
color: black;
}
.nav-right .nav-right-info .right-item i {
font-size: 20px;
color: #0d2481;
}
</style>
<template>
<div class="nav-right">
<div class="nav-right-menu">
<ul>
<li :class="{'active':chosenMenuId==item.id}" v-for="(item, index) in menuList" :key="index" @click="chosenFirstLeaveMenu(item.id)">
<i class="iconfont" :class="[item.icon]"></i>{{item.name}}
</li>
</ul>
</div>
<div class="nav-right-info">
<div class="right-item">
<i class="iconfont iconmessage"></i>
</div>
<div class="right-item">
<span class="welcomne-txt">Good Job,</span>
<span class="usr-name">吴彦祖</span>
</div>
<div class="right-item">
<el-avatar :size="34" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580985297255&di=d10539f3a69a8507564aaa3ac4fc131b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20170728%2F5843abd8cdb74745a2fe2349879cb055.jpeg" @error="errorHandler">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: 0,
value: 0,
menuList: [
{
id:1,
name: "客户管理",
path: "/home",
icon: "iconcompany"
},
{
id:2,
name: "任务/审批",
path: "/home",
icon: "icontask"
},
{
id:3,
name: "日志",
path: "/home",
icon: "iconlog"
},
{
id:4,
name: "通讯录",
path: "/home",
icon: "icontongxunlu"
},
{
id:5,
name: "智能分析",
path: "/home",
icon: "iconareachart"
}
],
chosenMenuId:0
};
},
mounted() {},
methods: {
chosenFirstLeaveMenu(id){
this.chosenMenuId=id
},
errorHandler() {
return false
}
}
};
</script>
src/components/Home_bak.vue 0 → 100644
View file @ f67cdb97
This diff is collapsed.
src/components/chart/ticheng.vue 0 → 100644
View file @ f67cdb97
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
data:{
type:Array,
default:[]
}
},
data() {
return {};
},
mounted() {
this.data=[
{
dataStr:'9月',
preferPrice:12000
},
{
dataStr:'10月',
preferPrice:8000
},
{
dataStr:'11月',
preferPrice:8500
},
{
dataStr:'12月',
preferPrice:7000
},
{
dataStr:'1月',
preferPrice:16000
},
{
dataStr:'2月',
preferPrice:0
},
]
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.dataStr)
data2.push(x.preferPrice)
})
let option = {
// backgroundColor: "#0abb87", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
}
},
grid: {
left: -54,
right: -54,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: '#FAB6B6'
}
}
},
series: [
{
name: "提成",
type: "line",
smooth: false,
symbol: "circle",
symbolSize: 4,
itemStyle: {
normal: {
lineStyle: {
color: "#00C5C8"
},
areaStyle: {
color: "#00C5C8"
},
color:"#00C5C8"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/views/index.vue
View file @ f67cdb97
<style> <style>
.main{ .main{
height: 100%; height: 100%;
position: relative;
} }
.left-nav{ .left-nav{
width: 15%; width: 184px;
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
height: 100%;
background:rgba(13,36,129,1); background:rgba(13,36,129,1);
position: absolute;
top: 0;
left: 0;
bottom: 0;
} }
.right-content{ .right-content{
float: left; position: absolute;
width: 85%; top:0;
left: 184px;
background: #F4F5F9; background: #F4F5F9;
box-sizing: border-box; box-sizing: border-box;
height: 100%; right: 0;
padding-left: 30px; bottom: 0;
} }
.home-nv-right{ .home-nv-top{
width: 100%; width: 100%;
height: 11%; height: 60px;
box-sizing: border-box; box-sizing: border-box;
position: absolute;
left:0;
right: 0;
top: 0px;
background: #FFF;
border-bottom: 1px solid #F1F1F1;
} }
.template-div{ .template-div{
height: calc(100vh - 14%); position: absolute;
top: 90px;
left: 30px;
right: 30px;
bottom: 0;
overflow-y: auto; overflow-y: auto;
} }
.template-div::-webkit-scrollbar{ *::-webkit-scrollbar{
width: 4px; width: 4px;
height: 8px; height: 8px;
} }
.template-div::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9; background: #c9c9c9;
} }
.template-div::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
background: #EDEDED; background: #EDEDED;
} }
</style> </style>
<template> <template>
<div class="clearfix main"> <div class="main">
<div class="left-nav"> <div class="left-nav">
<HomeNavLeft/> <HomeNavLeft/>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="home-nv-right"> <div class="home-nv-top">
<HomeNavRight/> <HomeNavTop/>
</div> </div>
<div class="template-div"> <div class="template-div">
<router-view/> <router-view/>
...@@ -58,9 +73,9 @@ ...@@ -58,9 +73,9 @@
</template> </template>
<script> <script>
import HomeNavLeft from '../components/HomeNav/HomeNavLeft' import HomeNavLeft from '../components/HomeNav/HomeNavLeft'
import HomeNavRight from '../components/HomeNav/HomeNavRight' import HomeNavTop from '../components/HomeNav/HomeNavTop'
export default { export default {
components: {HomeNavLeft, HomeNavRight}, components: {HomeNavLeft, HomeNavTop},
data () { data () {
return { return {
......
src/views/table.vue
View file @ f67cdb97
<template> <template>
<div> <div>
<vxe-table border height="300" highlight-hover-row show-overflow :data="tableData"> <div style="width:60%;margin:100px auto;">
<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 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="name" title="Name" width="300"></vxe-table-column>
<vxe-table-column field="role" title="Role" width="300"></vxe-table-column> <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
...@@ -13,6 +14,7 @@ ...@@ -13,6 +14,7 @@
</template> </template>
</vxe-table-column> </vxe-table-column>
</vxe-table> </vxe-table>
</div>
</div> </div>
</template> </template>
......
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