Skip to content

C
CRM
Commit 4d6e680d authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

页面布局

parent 2bfff7d6
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 0 deletions
src/components/HomeNav/HomeNavLeft.vue 0 → 100644
View file @ 4d6e680d
<style>
.home-nav{
width: 100%;
height: 100%;
}
.log-box{
width: 100%;
height: 13.19%;
}
.log-box{
background-color: #F4F5F9;
}
.log-box>div{
height: 100%;
width: 100%;
background:rgba(13,36,129,1);
border-radius:0px 40px 40px 0px;
display: flex;
align-items: center;
justify-content: center
}
.home-nav .log-box.fillet-none>div{
border-radius:0px 40px 0px 0px;
}
.log-box img{
width: 42px;
}
.home-nav .home-menu {
padding-left: 19px;
}
.home-nav .home-menu .home-menu-item{
color:rgba(255,255,255,1);
font-size: 12px;
cursor: pointer;
transition: all linear .2s;
background-color: #F4F5F9;
}
.home-nav .home-menu .home-menu-item>div{
padding: 0 0 0 35px;
background-color: rgba(13,36,129,1);
height: 50px;
line-height: 50px;
}
.home-nav .home-menu .home-menu-item.active{
background-color: rgba(13,36,129,1);
}
.home-nav .home-menu .home-menu-item.active>div{
font-weight:bold;
color:rgba(13,36,129,1);
opacity: 1;
transition: all linear .2s;
background-color: #F4F5F9;
border-radius: 19px 0 0 19px;
}
.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.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>
<template>
<div class="home-nav">
<div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']">
<div>
<img src="../../assets/img/logo.png" alt="">
</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>
<script>
export default {
data () {
return {
activeIndex: 0,
navList: [
{
class: 'iconfont icondongwu',
name: '仪表盘'
},
{
class: 'iconfont icondongwu',
name: '待办事项'
},
{
class: 'iconfont icondongwu',
name: '线索'
},
{
class: 'iconfont icondongwu',
name: '客户'
},
{
class: 'iconfont icondongwu',
name: '联系人'
},
{
class: 'iconfont icondongwu',
name: '公海'
},
{
class: 'iconfont icondongwu',
name: '商机'
},
{
class: 'iconfont icondongwu',
name: '合同'
}
]
}
},
mounted () {
},
methods: {
changeMenu: function (it, ind) {
this.activeIndex = ind
}
}
}
</script>
src/components/HomeNav/HomeNavRight.vue 0 → 100644
View file @ 4d6e680d
<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>
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