dd_pc/src/index.vue

<template>
	<el-container class="box-all" v-loading="loading">
		<el-header>
			<div class="flex-box" style="height: 60px;min-width: 1200px;">
				<div class="logo-box flex-box flex-center-center" @click="openHome()">
					<img src="./assets/image/logo.png" class="logo" />
					<div>功道云积分制</div>
				</div>
				<div class="flex-1 hea-right flex-box flex-v-ce" >
					<div class="name" style="min-width: 200px;">{{ info.name }}</div>
					<div class="flex-1 flex-box-ce font-flex-word" style="cursor: pointer;padding: 0 20px;">
						<template v-if="$supremeAuthority()=='dept_manager'||$supremeAuthority()=='employee'">
							<template v-if="information.name">
								<img src="./assets/image/tz.png" style="width: 18px;height: 18px;"/>
								<span style="max-width: 500px;padding-left: 10px;" class="font-flex-word"  @click="$router.push({path:'inform'})">{{information.name}}</span>
							</template>
						</template>
						<div v-else  class="flex-box-ce" >
							<img src="./assets/image/tz.png" style="width: 18px;height: 18px;"/>
							<template v-if="information.name">
								<span style="max-width: 500px;padding-left: 10px;" class="font-flex-word"  @click="$router.push({path:'inform'})">{{information.name}}</span>
							</template>
							<span v-else style="padding: 0 10px;cursor: pointer;color: #606266;"  @click="$router.push({path:'inform'})">暂无公告,点击此处添加公告</span>
						</div>
					</div>
					<div class="flex-box flex-v-ce">
						  <el-popover placement="bottom" width="240" trigger="hover">
							 <div class="popoverText">
								 <div class="flex-box-ce"><span>当前使用版本：</span><i>{{ corpMessage.package_name|| '测试环境版本' }}</i></div>
								 <div class="flex-box-ce"><span>到期时间：</span><i class="orange">{{ corpMessage.expire_time}}</i></div>
								 <div class="flex-box-ce"><span>企业使用人数：</span><i class="blue">{{ corpMessage.user_count_max }}人</i></div>
								 <div class="flex-box-end">
									<el-button size="small" @click="isTz = true" class="upgrade" type="primary" icon="el-icon-upload">续费升级</el-button>
								 </div>
							 </div> 
							<div slot="reference" class="flex-box-ce megData" style="cursor: pointer;margin: 0 10px;">
								<div>{{ corpMessage.package_name|| '测试环境版本' }}</div>
								<div>{{ corpMessage.user_count_max }}人</div>
							</div>
						  </el-popover>
						 <el-popover
							v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')"
						    placement="bottom"
							class="popoverBox"
						    width="60"
							v-model="visible"
						    trigger="manual">
							<div style="text-align: center;">这里再次打开</div>
							<div slot="reference" @click="showWn" class="flex-box-ce btnWn">
								<i class="el-icon-tickets" style="font-size: 18px;margin-right: 5px;"></i>
								<!-- <img slot="reference" src="./assets/image/wn.png" class="wn"/> -->
								<span>新手引导</span>
							</div>
						  </el-popover>
<!-- 						<el-tooltip v-model="wn_show" class="item" effect="dark" content="设置向导" placement="bottom" v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')">
							<img src="./assets/image/wn.png" class="wn" @click="showWn" />
						</el-tooltip> -->
						<userImage :user_name="userData.name" :img_url="userData.img_url" width="44px" height="44px"></userImage>
					</div>
				</div>
			</div>
		</el-header>
		<el-container class="main">
			<el-aside>
				<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router="true" @select="activeRouter" :unique-opened="true">
					<template v-for="(item, index) in routers">
						<div v-if="item.children.length != 0" :key="index">
							<template v-if="item.children.length >= 1 && item.name != '首页'">
								<template v-if="item.name=='福利'">
									<el-submenu :index="index.toString()" :key="index" v-if="returnConfig">
										<template slot="title">
											<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
											<span style="margin-left: 5px;">{{ item.name }}</span>
										</template>
										<template v-for="(item2, index2) in item.children">
											<el-menu-item :index="returnIndex(index, index2)" :ref="item2.path" :route="item2.path" :key="index2" class="font-flex-word">
												<span slot="title" style="margin-left: 10px;width:120px">{{ item2.name }}</span>
											</el-menu-item>
										</template>
									</el-submenu>
								</template>
								<el-submenu :index="index.toString()" :key="index" v-else>
									<template slot="title">
										<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
										<span style="margin-left: 5px;">{{ item.name }}</span>
									</template>
									<template v-for="(item2, index2) in item.children">
										<el-menu-item :index="returnIndex(index, index2)" :ref="item2.path" :route="item2.path" :key="index2" class="font-flex-word">
											<span slot="title" style="margin-left: 10px;width:120px">{{ item2.name }}</span>
										</el-menu-item>
									</template>
								</el-submenu>
							</template>
							<el-menu-item :index="returnIndex(index, index)" :route="item.children[0].path" :ref="item.children[0].path" v-else>
								<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
								<span slot="title" style="margin-left: 5px;">{{ item.children[0].name }}</span>
							</el-menu-item>
						</div>
					</template>
				</el-menu>
			</el-aside>
			<el-main id="main">
				<router-view />
				<div class="fontColorC" style="text-align: center;margin: 10px 0;">Copyright © {{$moment().format('YYYY')}} 广东功道云数字科技有限公司</div>
			</el-main>
		</el-container>
		<!-- 续费升级 -->
		<el-dialog class="续费升级" :visible.sync="isTz" width="400px">
			<div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 276px;box-sizing: border-box;margin: 0 auto;">
				<img src="./assets/image/code.png" />
			</div>
			<div class="fontColorC" style="text-align: center;margin-top: 15px;font-size: 18px;">手机钉钉扫码，付费升级</div>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" title="轻松四步落地积分制" :visible.sync="wn_show" width="680px">
		  <el-row :gutter="0" class="set_role_div" style="border-top:1px solid rgb(234 234 234);">
		    <el-col :span="8" style="padding:20px 0 20px 0;">
		      <el-menu default-active="0" style="border: none">
		        <el-menu-item
		          :index="index.toString()"
		          v-for="(item, index) in activeName"
		          :key="index"
		          @click="open_right(item)"
		          style="margin-bottom:20px;position: relative;height:40px;line-height:40px;"
		        >
		          <b style="display: inline-block;font-size:16px;text-align:center;">{{ index + 1 }}&nbsp;&nbsp;</b>
		          <span slot="title" style="padding-left: 10px;">{{ item.name }}</span>
		          <span v-if="index < activeName.length - 1" style="width:1px;height:15px;border:1px solid rgb(224 224 224);position: absolute;bottom:-17px;left:23px;"></span>
		        </el-menu-item>
		      </el-menu>
		    </el-col>
		    <el-col :span="1" style="height:370px;border-right:1px solid rgb(234 234 234);"></el-col>
		    <el-col :span="15" style="padding:20px 0 20px 0;">
		      <div>
		        <el-row>
		          <div style="text-align:center;margin-top:25px;color: #35353a;font-size:16px;">{{ activeNameRig.name }}</div>
		          <div
		            v-if="activeNameRig.code == '0' || activeNameRig.code == '1'"
		            :style="'display:flex;justify-content: space-around;margin:75px auto 0;width:' + usingwidth + 'px;flex-wrap:wrap;'"
		          >
		            <div v-for="(item, index) in activeNameRig.item" :key="index">
		              <div style="text-align:center;display:flex;">
		                <div @click="strategyClick(item.push)" style="cursor: pointer;">
		                  <img :src="item.image" alt="" style="width:50px;" />
		                  <p style="margin:0;padding:0;padding-top:10px;">{{ item.name }}</p>
		                  <p style="margin:0;padding:0;font-size:13px;color:#2ba5ec;padding-top:8px;cursor: pointer;">{{ item.conf }}</p>
		                </div>
		                <i class="el-icon-right" :style="'font-size:30px;margin-top:57px;margin-left:' + usingmarginL + 'px;'" 
						v-if="index < activeNameRig.item.length - 1" />
		              </div>
		            </div>
		          </div>
		
		          <div v-if="activeNameRig.code == '2'" :style="'display:flex;justify-content: space-around;margin:20px auto 0;width:' + usingwidth + 'px;flex-wrap:wrap;'">
		            <el-col :span="14"
		              style="display:flex;flex-wrap:wrap;justify-content: space-around;text-align:center;margin-left:20px;position: relative;"
		            >
		              <i class="el-icon-plus" style="font-size:30px;position: absolute;top:45%;" />
		              <div v-for="(item, index) in activeNameRig.item" :key="index" style="width:49%;margin-top:60px;">
		                <div style="cursor: pointer;" v-if="index != 2" @click="strategyClick(item.push)">
		                  <img :src="item.image" alt="" style="width:50px;" />
		                  <p style="margin:0;padding:0;padding-top:10px;">{{ item.name }}</p>
		                  <p style="margin:0;padding:0;font-size:13px;color:#2ba5ec;padding-top:8px;cursor: pointer;">{{ item.conf }}</p>
		                </div>
		              </div>
		            </el-col>
		            <el-col :span="8" v-if="activeNameRig.code == '2'">
		              <div v-for="(item, index) in activeNameRig.item" :key="index">
		                <div style="text-align:center;display:flex;margin-top:60px;" v-if="index == 2">
		                  <i class="el-icon-right" style="font-size:30px;margin-top:57px;" />
		                  <div style="margin-left:25px;cursor: pointer;" @click="strategyClick(item.push)">
		                    <img :src="item.image" alt="" style="width:50px;" />
		                    <p style="margin:0;padding:0;padding-top:10px;">{{ item.name }}</p>
		                    <p style="margin:0;padding:0;font-size:13px;color:#2ba5ec;padding-top:8px;cursor: pointer;">{{ item.conf }}</p>
		                  </div>
		                </div>
		              </div>
		            </el-col>
		          </div>
				  
				  
				  <div v-if="activeNameRig.code == '3'" :style="'display:flex;justify-content: space-around;margin:20px auto 0;width:' + usingwidth + 'px;flex-wrap:wrap;'">
				    <el-col :span="24"
				      style="display:flex;flex-wrap:wrap;justify-content: space-around;text-align:center;margin-left:20px;position: relative;"
				    >
				      <i class="el-icon-plus" style="font-size:30px;position: absolute;top:45%;" />
				      <div v-for="(item, index) in activeNameRig.item" :key="index" style="width:49%;margin-top:20px;">
				        <div style="cursor: pointer;" v-if="index != 4" @click="strategyClick(item.push)">
				          <img :src="item.image" alt="" style="width:50px;" />
				          <p style="margin:0;padding:0;padding-top:10px;">{{ item.name }}</p>
				          <p style="margin:0;padding:0;font-size:13px;color:#2ba5ec;padding-top:8px;cursor: pointer;">{{ item.conf }}</p>
				        </div>
				      </div>
				    </el-col>
				    <el-col :span="8" v-if="activeNameRig.code == '2'">
				      <div v-for="(item, index) in activeNameRig.item" :key="index">
				        <div style="text-align:center;display:flex;margin-top:60px;" v-if="index == 4">
				          <i class="el-icon-right" style="font-size:30px;margin-top:57px;" />
				          <div style="margin-left:25px;cursor: pointer;" @click="strategyClick(item.push)">
				            <img :src="item.image" alt="" style="width:50px;" />
				            <p style="margin:0;padding:0;padding-top:10px;">{{ item.name }}</p>
				            <p style="margin:0;padding:0;font-size:13px;color:#2ba5ec;padding-top:8px;cursor: pointer;">{{ item.conf }}</p>
				          </div>
				        </div>
				      </div>
				    </el-col>
				  </div>
		        </el-row>
		      </div>
		    </el-col>
		  </el-row>
		</el-dialog>
	</el-container>
</template>

<script>
import { createSocket,sendWSPush,sendPing } from './api/websocket'
import { removeCache } from './api/auth'
export default {
	data() {
		return {
			loading: false,
			userData: {},
			routers: [],
			info: {},
			wn_show: false,
			defaultActive: '0-0',
			isTz: false,
			direction: 'rtl',
			corpMessage: {} ,//企业套餐信息
			information:{name:''},
			
			
			usingmarginL: '26',
			usingwidth: '220',
			activeNameRig: {
			  name: '员工积极参与，管理者权责分明',
			  code: '0',
			  item: [
			    { image: require('./assets/image/guild_dept_pic.png'), name: '组织架构', conf: '去配置', push: '/framework' },
			    { image: require('./assets/image/role_manage.png'), name: '角色权限', conf: '去配置', push: '/jurisdiction' }
			  ]
			},
			activeName: [
			  { name: '完善部门人员信息及授权', code: '0' },
			  { name: '建立积分奖扣制度', code: '1' },
			  { name: '积分执行与实施', code: '2' },
			  { name: '积分排名统计与分析', code: '3' }
			],
			visible:false,
		};
	},
	watch: {
		wn_show(val){
			if(!val){
				this.visible=true;
				setTimeout(()=>{
					this.visible=false;
				},3000)
			}
		},
		$route(to, from) {
			var str = to.path;
			this.routers.map((item, index) => {
				if (item.children.length > 0) {
					item.children.map((item2, index2) => {
						if (item2.path == str) {
							this.defaultActive = index + '-' + index2;
							this.$setCache('path', index + '-' + index2);
						}
					});
				}
			});
			if(this.$getCache('inform')){
				this.getInform()
				removeCache('inform')
			}
		}
	},
	computed:{
		returnConfig(){
			return this.$store.getters.config.shop_status==1;
		}
	},
	created() {
		this.cheakAx();
		this.initRouter();
		this.getEmployee()//缓存人员列表
		this.getInform();
	},
	mounted() {
		this.$setCache('isUrl',false)//清楚代办进入
		this.getInfo();
		var url = window.location.href;
		var str = this.GetRequest(url).corpId || 'ding49b5c3bf0b205896bc961a6cb783455b';
		var corpId = str.split('#')[0];
		if (corpId) {
			this.getCorp(corpId);
		}
		this.$nextTick(function() {
			if (!this.$authoritys('employee') && !this.$authoritys('dept_manager')) {
				if (this.$getCache('wn_show')) {
					this.wn_show = false;
				} else {
					this.wn_show = true;
					this.$setCache('wn_show', 'true');
				}
			}
		});
	},
	methods: {
		strategyClick(item) {
		    this.wn_show = false;
		    this.$router.push({ path: item });
		},
		open_right(item) {
		  if (item.code == '0') {
		    this.usingmarginL = '26';
		    this.usingwidth = '220';
		    this.activeNameRig = {
		      name: '员工积极参与，管理者权责分明',
		      code: '0',
		      item: [
		        { image: require('./assets/image/guild_dept_pic.png'), name: '组织架构', conf: '去配置', push: '/framework' },
		        { image: require('./assets/image/role_manage.png'), name: '角色权限', conf: '去配置', push: '/jurisdiction' }
		      ]
		    };
		  } else if (item.code == '1') {
		    this.usingmarginL = '14';
		    this.usingwidth = '300';
		    this.activeNameRig = {
		      name: '健全企业规章制度，建立公平的奖扣分体系',
		      code: '1',
		      item: [
		        { image: require('./assets/image/rule.png'), name: '积分规则', conf: '去配置', push: '/rule' },
		        { image: require('./assets/image/length_point.png'), name: '系统配置', conf: '去配置', push: '/systemLayout' },
		        { image: require('./assets/image/base_point.png'), name: '自动积分', conf: '去配置', push: '/voluntarilyPoint' }
		      ]
		    };
		  } else if (item.code == '2') {
		    this.usingwidth = '380';
		    this.activeNameRig = {
		      name: '员工积极挣分，管理者奖罚分明',
		      code: '2',
		      item: [
		        { image: require('./assets/image/entry_list.png'), name: '奖分/扣分', conf: '去奖扣', push: '/award_punish' },
		        { image: require('./assets/image/my_publish.png'), name: '任务', conf: '去发布', push: '/my_issue' },
		        { image: require('./assets/image/att_review.png'), name: '审批打分', conf: '去审批', push: '/approval_list' }
		      ]
		    };
		  } else if (item.code == '3') {
		    this.usingwidth = '380';
		    this.activeNameRig = {
		      name: '提高管理执行力，让优秀员工不吃亏',
		      code: '3',
		      item: [
		        { image: require('./assets/image/add_ticket.png'), name: '积分排名', conf: '去查看', push: '/dept_rank' },
		        { image: require('./assets/image/role_manage.png'), name: '管理者执行力', conf: '去查看', push: '/manager_statistics' },
		        { image: require('./assets/image/data_team.png'), name: '部门分析', conf: '去查看', push: '/department_statistics' },
		        { image: require('./assets/image/length_point.png'), name: '个人分析', conf: '去查看', push: '/individual_statistics' }
		      ]
		    };
		  }
		},
		
		openWebSocket(){
			// 接收消息
			const getsocketData = e => {  // 创建接收消息函数
			  const data = e && e.detail.data
			}
			// 注册监听事件
			window.addEventListener('onmessageWS', getsocketData)
			
			// 在需要的时候卸载监听事件，比如离开页面
			window.removeEventListener('onmessageWS', getsocketData)
		},
		getInform(){
			let params = {
				page: 1,
				page_size: 1
			};
			this.$axios('get', '/api/information/index', params).then(res => {
				if (res.data.code == 1) {
					let data= res.data.data;
					if(data[0]){
						this.information=data[0]
					}else{
						this.information={name:''};
					}
					
				}
			});
		},
		async cheakAx(name) {
		   await this.$axios('get', '/api/integral/site/config').then(res => {
				this.$store.dispatch('setConfig', res.data.data);
			})
		},
		initRouter() {
			this.routers = [
				{ name: '首页', children: this.returnRoutersArr('home'), icon: 'icon-shouye' },
				{ name: 'A/B分', children: this.returnRoutersArr('abPoint'), icon: 'icon-PC_gongzuotai_ABfen' },
				{ name: '任务', children: this.returnRoutersArr('task'), icon: 'icon-kaoqin_kaoqinyuebaobiao' },
				{ name: '统计', children: this.returnRoutersArr('ranking'), icon: 'icon-dingdingPC_tongji1' },
				{ name: '奖票', children: this.returnRoutersArr('award'), icon: 'icon-piao' },
			];
			//this.$authoritys('权限名') 判断权限
			if (this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager') || this.$authoritys('dept_manager')) {
				this.routers.splice(3, 0, { name: '审批', children: this.returnRoutersArr('workbench'), icon: 'icon-shezhi_jifenguize' });
			}
			if (this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager')) {
				this.routers.push({ name: '福利', children: this.returnRoutersArr('welfare'), icon: 'icon-fulizhongxin'});
				this.routers.push({ name: '设置', children: this.returnRoutersArr('set'), icon: 'icon-dingdingPC_shezhi1' });
			}
			//this.returnRoutersArr('set',true) 加true表示不限制路由
			this.userData = this.$getUserData();
			if (this.$route.path != '/home') {
				//当刷新页面是控制左边导航栏的选中
				this.defaultActive = this.$getCache('path');
			}
		},
		openHome() {
			this.$router.push({ path: '/home' });
		},
		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		},
		//获取套餐信息
		getCorp(corpId) {
			this.$axios('get', 'api/order/corp', { corp_id: corpId }).then(res => {
				this.corpMessage = res.data.data;
			});
		},
		//当刷新页面是控制左边导航栏的选中
		activeRouter(index, indexPath) {
			this.$setCache('path', indexPath[1] ? indexPath[1] : indexPath[0]);
		},
		routerAstrict(data) {
			//限制路由
			let obj = [];
			let supAuthority = this.$supremeAuthority(); //$supremeAuthority获取当前登录者的最高权限
			data.forEach(item => {
				if (!item.hidden) {
					if (!item.meta.jurisdiction) {
						obj.push(item);
					} else {
						if (item.meta.jurisdiction.indexOf(supAuthority) == -1) {
							obj.push(item);
						}
					}
				}
			});
			return obj;
		},
		returnRoutersArr(str, bool) {
			var routers = this.$router.options.routes[0].children;
			var routersArr = [];
			routers.forEach(item => {
				if (item.meta.groupCode == str&&!item.meta.noShow) {
					//获取对应模块的路由
					routersArr.push(item);
				}
			});
			if (bool) {
				return routersArr;
			}
			return this.routerAstrict(routersArr);
		},
		returnIndex(str, str2) {
			return str + '-' + str2;
		},
		showWn() {
			this.wn_show = true;
		},
		getInfo() {
			var that = this;
			this.$axios('get', '/api/site/info').then(res => {
				that.info = res.data.data;
			});
		},
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, page: 1, page_size: 3000,is_official:1 }).then(res => {
				let map={};
				res.data.data.list.map(item=>{
					 map[item.id]=item
				})
				this.$setCache("userList",map)
			})
		},
	},
};
</script>

<style scoped="scoped" lang="scss">
.popoverText span{
	width: 100px;
	display: block;
}
.popoverText{
	line-height: 30px;
	font-size: 14px;
}	
.megData div:nth-child(1) {
	background-image: linear-gradient(to bottom, #5e6e9b 0%, #232d48 100%);
	text-align: center;
	color: #e1bf66;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	line-height: 35px;
	height: 35px;
	padding: 0 10px;
}
.megData div:nth-child(2) {
	background-image: linear-gradient(to bottom, #ffeab2 0%, #e1bf66 100%);
	text-align: center;
	color: #232d48;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	line-height: 35px;
	height: 35px;
	padding: 0 10px;
}
.wn-box {
	padding: 20px 0;
}
.wn-box .flex-1 {
	cursor: pointer;
}
.wn-box .flex-1 div:nth-child(1) {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	text-align: center;
	line-height: 55px;
	background-color: #e0f2ff;
	color: #26a2ff;
	margin-bottom: 20px;
}
.wn-box .flex-1 div:nth-child(2) {
	width: 110px;
	border-radius: 25px;
	border: 1px solid #26a2ff;
	padding: 7px 10px;
	text-align: center;
	color: #26a2ff;
}
.wn-box .flex-1:hover div:nth-child(1) {
	color: #fff;
	background-color: #26a2ff;
}

.wn-box .flex-1:hover div:nth-child(2) {
	color: #fff;
	background-color: #26a2ff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 180px;
	// min-height: 400px;
}
.el-header {
	background-color: #fff;
	// line-height: 60px;
	padding: 0 !important;
	border-bottom: 1px solid #f1f1f1;
}
.el-menu {
	overflow: hidden;
	border: none;
}
.el-aside {
	transition: width 0.28s;
	width: 180px !important;
	background-color: #fff;
	height: calc(100vh - 60px);
}
.el-aside::-webkit-scrollbar {
	width: 0px;
	background-color: #fff;
}

.el-aside::-webkit-scrollbar-thumb {
	background-color: #ccc;
}
.con_nav_left {
	background: #fff;
	overflow-y: scroll;
}
.box-all {
	height: 100%;
	overflow: hidden;
}
.el-main {
	background-color: #f4f6f9;
	height: calc(100vh - 60px);
	overflow-y: scroll;
	padding: 10px;
	min-width: 1000px;
}
.el-main::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background-color: #fff;
}
.el-main::-webkit-scrollbar-thumb {
	background-color: #ccc;
}
.logo-box {
	width: 180px;
	cursor: pointer;
}
.logo-box .logo {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border-radius: 6px;
}
.logo-box div {
	font-size: 16px;
	font-weight: 600;
}
.wn {
	height: 26px;
	width: 26px;
	margin-right: 5px;
	cursor: pointer;
}
.hea-right {
	padding: 0 20px;
}
.btnWn{
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 7px 10px;
	margin-right: 10px;
	background-color: #409eff;
	border-color: #409eff;
	color: #fff;
}
.upgrade {
	// margin-left: 10px;
	// margin-right: 10px;
}
::v-deep .el-menu-item {
	padding-right: 10px !important;
}
::v-deep .el-menu-item.is-active {
	color: #26a2ff;
	background-color: #ecf5ff;
}
.popoverBox {
	// background-color: #232d48;
}
</style>