RT_ZB/bigdata2/src/components/Index.vue

<template>
	<el-container style="height: 100%">
		<el-header class="header" v-show="flag">
			<div v-if="userinfo.logo">
				<img
					:src="userinfo.logo"
					alt=""
					style="position: absolute; left: 20px; top: 20px; width: 250px"
				/>
			</div>
			<div class="navbarBtn">
				<!-- 用户 -->
				<div class="userinfo">欢迎您，{{ username }}</div>

				<!-- 站点 -->
				<div class="site" v-if="userinfo.site">
					<i class="iconfont icon-jidi"></i>
					<span>{{ userinfo.site }}</span>
				</div>

				<!-- 标题 -->
				<div class="caption">
					<div v-if="userinfo.user_header" class="tit">
						{{ userinfo.user_header }}
					</div>
					<div v-else class="tit">农业植保监测系统 智慧农业信息化</div>
					<div>Agricultural Plant Protection Monitoring System</div>
				</div>
			</div>

			<span class="header_btn" @click="hCheckFun">[隐藏]</span>
		</el-header>

		<el-header class="header2" v-show="!flag">
			<h3 v-if="userinfo.user_header">{{ userinfo.user_header }}</h3>
			<h3 v-else>农业植保监测系统</h3>
			<div class="site" v-if="userinfo.site && flag">
				<i class="iconfont icon-jidi"></i>
				<span>{{ userinfo.site }}</span>
			</div>
			<span class="header_btn" @click="hCheckFun">[展开]</span>

			<!-- <ul class="header_ul" style="margin: -55px 85px 0 0">
				<li
					style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
					@click="headerTitle(index)"
					:class="{ indexActive: tltIndex == index }"
					v-for="(item, index) in menuList1"
					:key="index"
				>
					{{ item.purview_name }}
				</li>
			</ul> -->
		</el-header>

		<!-- <div style="background: #166756">
			<ul class="header_ul">
				<li
					style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
					@click="headerTitle(index)"
					:class="{ indexActive: tltIndex == index }"
					v-for="(item, index) in menuList1"
					:key="index"
				>
					{{ item.purview_name }}
				</li>
			</ul>
		</div> -->

		<el-container style="overflow: auto">
			<!-- 菜单 -->
			<el-aside width="200px">
				<!-- 站点名称标题 -->
				<!-- <div style="display: flex; justify-content: space-between">
					<div style="display: flex; margin: 0 0 0 5px">
						<img
							style="width: 15px; height: 15px; margin: 3px 3px 0 0"
							src="../assets/images/zhankai.png"
							alt=""
						/>
						<div style="font-weight: 550">站点管理</div>
					</div>
					<img
						style="
							width: 16px;
							height: 16px;
							margin: 3px 0 0 0;
							cursor: pointer;
						"
						src="../assets/images/tianjia.png"
						alt=""
						@click="addStation()"
						v-if="userinfo.staff == 1"
					/>
				</div> -->

				<!-- 选中站点标题 -->
				<div
					style="
						background: #0d2c2e;
						line-height: 46px;
						height: 46px;
						color: #fff;
					"
				>
					<img
						style="
							width: 12px;
							height: 16px;
							margin: -3.5px 0 0 13.5%;
							vertical-align: middle;
							cursor: pointer;
						"
						title="点击获取全部站点名称列表"
						src="../assets/images/dingwei.png"
						alt=""
						@click="allSiteListData()"
					/>
					<span style="font-size: 13px; margin: 0 0 0 11.5px">{{
						siteNameTitle
					}}</span>
				</div>

				<el-menu
					:default-active="currRouter"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					text-color="#333"
					active-text-color="#fff"
					@select="handleOpen"
				>
					<el-menu-item
						:index="'/index/' + item.menu"
						v-for="item in menuList1"
						:key="item.pur_id"
					>
						<i :class="iconObj[item.pur_id]"></i>
						<span slot="title">{{ item.purview_name }}</span>
					</el-menu-item>
				</el-menu>

				<div v-if="isTree" style="margin: 13px 0 0 0; width: 95%">
					<ul>
						<li style="display: flex; justify-content: space-between">
							<div style="display: flex; margin: 0 0 0 5px">
								<img
									style="width: 13px; height: 13px; margin: 3px 3px 0 0"
									src="../assets/images/zhankai.png"
									alt=""
								/>
								<div
									style="font-weight: 550; margin: 0 0 0 4px; font-size: 14px"
								>
									站点管理
								</div>
							</div>
							<img
								style="
									width: 16px;
									height: 16px;
									margin: 3px 0 0 0;
									cursor: pointer;
								"
								src="../assets/images/tianjia.png"
								alt=""
								@click="addStation()"
								v-if="userinfo.staff == 1"
							/>
						</li>
						<!-- @node-contextmenu="rightClick"  右键增加事件 -->
						<li id="tree">
							<el-tree
								ref="treeRef"
								:data="data"
								:props="defaultProps"
								node-key="id"
								:current-node-key="firstItem"
								:default-expand-all="true"
								@node-click="handleNodeClick"
								@node-contextmenu="rightClick"
								highlight-current
							></el-tree>
						</li>
					</ul>
				</div>
			</el-aside>

			<!-- 右键信息 -->
			<div v-show="menuVisible">
				<ul id="menuList" class="menu">
					<li class="menu_item" @click="addrInformation()">增加</li>
				</ul>
			</div>
			<el-container>
				<el-main>
					<!-- <router-view ref="mychild" :flag="flag" :siteID="siteID"></router-view> -->
					<router-view ref="mychild" :flag="dataObj"></router-view>
				</el-main>
			</el-container>
		</el-container>

		<!-- 添加站点 -->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			title="新增站点"
			:visible.sync="addSite"
			width="25%"
		>
			<ul>
				<li style="margin: 10px 0 0 0">
					<span>站点名称：</span>
					<el-input style="width: 49%" v-model="siteName"></el-input>
				</li>
				<li style="margin: 10px 0 0 0">
					<span>站点地址：</span>
					<el-cascader
						clearable
						v-model="siteAddr"
						:options="options"
					></el-cascader>
				</li>
			</ul>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addSite = false">取 消</el-button>
				<el-button type="primary" @click="addrData()">确 定</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>

<script>
import city from '../components/citydata.js'
export default {
	data() {
		var validateNewPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkNewPass')
				}
				callback()
			}
		}
		var validateCheckPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.newPass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			isTree:true,
			firstItem:"",
			firstShow:true,
			isRouter: true,
			// 被激活导航地址
			// activePath:this.$store.state.activePath,
			changeHomedialogVisible: false,
			iconObj: {
				1: 'iconfont icon-chouchongbug',
				2: 'iconfont icon-weimingming-34',
				3: 'iconfont icon-cebaoguanli',
				4: 'iconfont icon-fangzhi',
				5: 'iconfont icon-shebei',
				6: 'iconfont icon-xitong'
			},
			userinfo: '',
			currRouter: '/index/bzy',
			menuList1: [
				{
					purview_name: '智能性诱测报',
					menu: 'xycb',
					parent_perm_id: 1,
					pur_id: 1
				},
				{
					purview_name: '植物孢子捕捉仪',
					menu: 'bzy',
					parent_perm_id: 2,
					pur_id: 2
				},
				{
					purview_name: '物联网虫情测报',
					menu: 'cbd',
					parent_perm_id: 3,
					pur_id: 3
				},
				{
					purview_name: '高空测报灯',
					menu: 'gkcbd',
					parent_perm_id: 9,
					pur_id: 3
				},
				{
					purview_name: '物联网杀虫灯',
					menu: 'scd',
					parent_perm_id: 4,
					pur_id: 4
				},
				{
					purview_name: '设备管理',
					menu: 'equipList',
					parent_perm_id: 5,
					pur_id: 5
				},
				{
					purview_name: '用户列表',
					menu: 'userManger',
					parent_perm_id: 6,
					pur_id: 6
				}
			], //首页菜单
			// activePath:'',
			username: '',
			userphoto: '',
			userHeadImg: '',
			resetPassDialogVisible: false,
			resetPassForm: {
				oldPass: '',
				newPass: '',
				checkNewPass: ''
			},
			resetPassFormRules: {
				oldPass: [
					{ required: true, message: '请输入原始密码', trigger: 'blur' }
				],
				newPass: [{ validator: validateNewPass, trigger: 'blur' }],
				checkNewPass: [{ validator: validateCheckPass, trigger: 'blur' }]
			},

			// 循环
			tltIndex: 0,
			data: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			siteName: '', // 站点名称
			siteAddr: [], // 站点地址
			options: [],
			addSite: false,
			menuVisible: false,
			operateObj: {}, // 右键点击时获取当前的数据信息
			urladdr: this.$route.path, // 当前界面路由

			// 站点名称选中
			siteNameTitle: '全 部',
			dataObj: {
				flag: true,
				siteID: null,
				allList: [],
				siteNameTitle:""
			},
			flag: true,
			req: '', // 站点列表是否显示有无设备的站点
			equip_type: '', //选中的设备类型
			siteID: null, // 需要传递给子组件的站点id

			// 保存点击默认树形站点数据
			loadData:{}
		}
	},
	created: function () {
		this.getuserinfo()
	},
	computed: {},
	watch: {
		addSite(val) {
			if (val == false) {
				this.siteName = ''
				this.siteAddr = []
				this.operateObj = {}
			}
			// else if (val == true) {
			// 	if (this.operateObj.label) {
			// 		console.log(this.operateObj)

			// 	} else {
			// 	}
			// }
		},

		// 监听路由变化，如果变化就将展示选中的站点名称归零为全部
		$route(to, from) {
			this.siteNameTitle = '全 部'
		},

		equip_type(val) {
			console.log(val + '设备类型')
			this.siteListData()
		}
	},
	mounted() {
		if (sessionStorage.getItem('tltIndex')) {
			this.tltIndex = sessionStorage.getItem('tltIndex')
		}
		this.currRouter = this.$route.path
		this.siteListData()
		this.options = city

		var url = this.$route.path



		url = url.split('/index', 2)
		if (url[1] == '/xycb') {
			sessionStorage.setItem('tltIndex', 0)
			this.tltIndex = 0
		}

		// 获取当前点击的设备类型
		if (url[1] == '/xycb') {
			// 性诱测报
			this.req = 'hide'
			this.equip_type = '4'
		} else if (url[1] == '/bzy') {
			// 孢子仪
			this.req = 'hide'
			this.equip_type = '7'
		} else if (url[1] == '/cbd') {
			// 测报灯
			this.req = 'hide'
			this.equip_type = '3'
		} else if (url[1] == '/scd') {
			// 杀虫灯
			this.req = 'hide'
			this.equip_type = '2'
		} else {
			this.req = ''
			this.equip_type = ''
		}
	},
	methods: {
		hCheckFun() {
			this.flag = !this.flag
			console.log(this.flag)
			this.dataObj.flag = this.flag
		},

		getuserinfo() {
			this.$axios({
				method: 'post',
				url: '/userinfo_'
			}).then((res) => {
				this.username = res.data.username
				this.userphoto = res.data.userphoto
				localStorage.setItem('username', res.data.username) // 0管理员  1用户
			})
			this.$axios({
				method: 'get',
				url: '/user_detail'
			}).then((res) => {
				this.userinfo = res.data
				localStorage.setItem('have_type', this.userinfo.have_type) // 0管理员  1用户   2项目
				localStorage.setItem('staff', this.userinfo.staff) // 1是admin
				localStorage.setItem('site_id', this.userinfo.site_id) // 站点id
				localStorage.setItem('siteName', this.userinfo.site) // 站点name

			})
		},

		headerTitle(i) {
			this.tltIndex = i
			sessionStorage.setItem('tltIndex', i)
			console.log(i)
			this.$router.push('/index/' + this.menuList1[i].menu)
		},

		// 树形插件
		handleNodeClick(data) {
			console.log(this.$route.path);
			console.log("shushushususssssssssssssssssss",data);
			this.loadData = data;
			if (this.$route.path !== '/index/scdList') {
				this.dataObj.siteID = data.id
				this.dataObj.allList = this.data
				this.dataObj.siteNameTitle = data.label
				// this.siteNameTitle = data.label
				this.$refs.mychild.getEquipList(data, 1)
			} else {
				this.$router.push('/index/scd')

				this.dataObj.siteID = data.id
				this.dataObj.allList = this.data
				this.dataObj.siteNameTitle = data.label
				// this.siteNameTitle = data.label
				var that = this
				var time = setTimeout(function()  {
					that.$refs.mychild.getEquipList(data, 1)
					clearInterval(time)
   				}, 500);
			}
		},

		// 站点列表
		siteListData() {
			this.$axios({
				method: 'GET',
				url: '/site_manage',
				params: {
					req: this.req,
					equip_type: this.equip_type
				}
			})
				.then((res) => {
					console.log(res.data)
					if (res.data) {
						var data = res.data
						var arrList = []
						var list = data.forEach((item) => {
							if (
								item.self_site_name !== undefined &&
								item.self_site_name == ''
							) {
							} else {
								if (item.self_site_name == undefined) {
									if (item.child) {
										var obj = {}
										var a = []
										obj['label'] = item.site_name
										obj['id'] = item.site_id
										for (var j in item.child) {
											var obja = {}
											obja['label'] = item.child[j].site_name
											obja['id'] = item.child[j].site_id
											if (
												item.child[j].child &&
												item.child[j].child.length == 0
											) {
												obja['children'] = item.child[j].child
											} else if (
												item.child[j].child &&
												item.child[j].child.length !== 0
											) {
												for (var k in item.child[j].child) {
													var objb = {}
													objb['label'] = item.child[j].child[k].site_name
													objb['id'] = item.child[j].child[k].site_id
												}
												obja['children'] = [objb]
											}
											a.push(obja)
											obj['children'] = a
										}
									}
									arrList.push(obj)
								} else if (item.self_site_name !== undefined) {
								}
							}
						})
						this.data = arrList
						console.log(arrList)
						// 默认子站点
						// this.siteNameTitle =  data[0].child[0].site_name;
						// this.firstItem = data[0].child[0].site_id;
						// 默认选中第一个站点
						if(localStorage.getItem('siteName')=='超级管理员'){
							this.siteNameTitle = "瑞通集团总站"
						}else{
							this.siteNameTitle = localStorage.getItem('siteName');
						}
						this.firstItem = localStorage.getItem('site_id');
						let data = {};
						this.treeIterator(arrList,res => {
							if(res.id==this.firstItem){
								data = res
							}
						})
						this.$nextTick(()=>{
							this.$refs.treeRef.setCurrentKey(this.firstItem);
							// if(this.siteNameTitle=="0"){
							// 	data ="" 
							// }
							const childrenItem = data;
							if(this.firstShow){
								this.handleNodeClick(childrenItem);
								this.objData.id = childrenItem.id
								this.firstShow = false;
							}
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},
		treeIterator(tree, func) {
			let node, curTree = [...tree]
			while ((node = curTree.shift())) {
			func(node)
			node.children && curTree.push(...node.children)
			}
		},

		// 全部-添加新站点
		addStation() {
			this.addSite = true
			this.operateObj = {}
		},
		addrData() {
			if (this.siteName == '') {
				this.$message({
					message: '未填写站点名称，请填写！',
					type: 'warning',
					duration: 1500
				})
			} else if (this.siteAddr.length == 0) {
				this.$message({
					message: '未填写站点地址，请填写！',
					type: 'warning',
					duration: 1500
				})
			} else {
				if (this.siteAddr.length < 3) {
					var sheng = ''
					var shi = this.siteAddr[0]
					var xian = this.siteAddr[1]
				} else {
					var sheng = this.siteAddr[0]
					var shi = this.siteAddr[1]
					var xian = this.siteAddr[2]
				}
				var postData = this.qs.stringify({
					site_name: this.siteName, // 站点名称
					site_pro: sheng, // 省
					site_city: shi, // 市
					site_area: xian, // 县或区
					site_parent_id:
						this.operateObj.id !== undefined ? this.operateObj.id : '' // id
				})
				this.$axios({
					method: 'POST',
					url: '/site_manage',
					data: postData
				})
					.then((res) => {
						console.log(res.data)
						if (res.data.status == 0) {
							this.$message({
								message: res.data.msg,
								type: 'success',
								duration: 1500
							})
							this.addSite = false
							this.siteListData()
						} else {
							this.$message({
								message: res.data.msg,
								type: 'error',
								duration: 1500
							})
						}
					})
					.catch((err) => {
						console.log(err)
						this.$message({
							message: '添加失败请重试！',
							type: 'error',
							duration: 1500
						})
					})
			}
		},

		// 树形插件右键点击事件
		rightClick(MouseEvent, object, Node, element) {
			console.log(object)
			this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
			this.menuVisible = true // 显示模态窗口，跳出自定义菜单栏
			var menu = document.querySelector('#menuList')
			document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
			menu.style.display = 'block'
			menu.style.left = MouseEvent.clientX - 0 + 'px'
			menu.style.top = MouseEvent.clientY - 0 + 'px'
			this.operateObj = object
		},
		foo() {
			// 取消鼠标监听事件 菜单栏
			this.menuVisible = false
			document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
		},

		// 指定新增
		addrInformation() {
			this.addSite = true
		},

		// 获取到当前点击菜单的数据
		handleOpen(key, keyPath) {
			this.isTree = true
			var data = key
			var typeIndex = data.split('/index/')
			if (typeIndex[1] == 'xycb') {
				// 性诱测报
				this.req = 'hide'
				this.equip_type = '4'
				this.$refs.mychild.getEquipList(this.loadData,1)
			} else if (typeIndex[1] == 'bzy') {
				// 孢子仪
				this.req = 'hide'
				this.equip_type = '7'
			} else if (typeIndex[1] == 'cbd') {
				// 测报灯
				this.req = 'hide'
				this.equip_type = '3'
			} else if (typeIndex[1] == 'scd') {
				// 杀虫灯
				this.req = 'hide'
				this.equip_type = '2'
			} else if (typeIndex[1] == 'userManger'){
				this.isTree = false
			}
			else if (typeIndex[1] == 'gkcbd') {
				// 高空测报
				this.req = 'hide'
				this.equip_type = '8'
			 } 
			else {
				this.req = ''
				this.equip_type = ''
			}
		},

		// 点击获取全部站点名称列表
		allSiteListData() {
			this.req = ''
			this.equip_type = ''
			this.siteListData()
		},
	}
}
</script>

<style scoped lang="less">
@keyframes ringing {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(15deg);
	}
	12%,
	4% {
		transform: rotate(-18deg);
	}
	14%,
	6% {
		transform: rotate(18deg);
	}
	8% {
		transform: rotate(-22deg);
	}
	10% {
		transform: rotate(22deg);
	}
	16% {
		transform: rotate(-12deg);
	}
	18% {
		transform: rotate(12deg);
	}
	20% {
		transform: rotate(0);
	}
}
.header {
	height: 189px !important;
	background: url(../assets/images/headBj.png) no-repeat center;
	background-size: 100% 100%;
	position: relative;
	.navbarBtn {
		color: #fff;
		.userinfo {
			font-size: 12px;
			text-align: right;
			margin-top: 10px;
			.userheadImg {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 6px;
			}
		}
		.caption {
			margin-top: 7px;
			text-align: center;
			font-size: 16px;
			letter-spacing: 0.5px;
			.tit {
				font-size: 26px;
				line-height: 46px;
				font-weight: 700;
				letter-spacing: 7px;
			}
		}
	}
}

// .el-header {
// 	height: 189px !important;
// 	background: url(../assets/images/headBj.png) no-repeat center;
// 	background-size: 100% 100%;
// 	position: relative;
// 	.navbarBtn {
// 		color: #fff;
// 		.userinfo {
// 			font-size: 12px;
// 			text-align: right;
// 			margin-top: 10px;
// 			.userheadImg {
// 				width: 35px;
// 				height: 35px;
// 				border-radius: 50%;
// 				vertical-align: middle;
// 				margin-right: 6px;
// 			}
// 		}
// 		.caption {
// 			margin-top: 7px;
// 			text-align: center;
// 			font-size: 16px;
// 			letter-spacing: 0.5px;
// 			.tit {
// 				font-size: 26px;
// 				line-height: 46px;
// 				font-weight: 700;
// 				letter-spacing: 7px;
// 			}
// 		}
// 	}
// }
.site {
	position: absolute;
	right: 16px;
	top: 30px;
	z-index: 888;
	font-size: 14px;
	color: #226a4d;
	span {
		// color: #333;
		color: #fff;
		letter-spacing: 1px;
		font-size: 13px;
	}
}
/deep/.el-dropdown-menu__item {
	padding: 0 10px;
}
.el-popper.newsDropdown {
	padding: 0;
	margin: 0;
	h5 {
		background: #35a478;
		color: #fff;
		padding: 15px;
		text-transform: uppercase;
		font-size: 11px;
		margin: 0;
	}
	/deep/.popper__arrow {
		border-bottom-color: #35a478;
		&::after {
			border-bottom-color: #35a478;
		}
	}
	ul {
		border: 1px solid #ddd;
		border-top: 0;
		padding: 0 10px;
		.news {
			display: block;
			margin: 0;
			float: none;
			background: none;
			padding: 5px 5px;
			border-bottom: 1px solid #eee;
			.txtContent {
				max-width: 250px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				min-width: 250px;
				// display: flex;
				a {
					color: #333;
					font-size: 12px;
					padding: 7px 10px;
					-moz-border-radius: 2px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					-moz-transition: all 0.2s ease-out 0s;
					-webkit-transition: all 0.2s ease-out 0s;
					transition: all 0.2s ease-out 0s;
				}
				a:hover {
					background: none;
					color: #428bca;
					text-decoration: none;
				}
			}
		}
	}
}
.sysAside {
	position: absolute;
	z-index: 999;
	left: 0;
	top: 60px;
	bottom: 0;
	z-index: 999;
	transition: all 0.5s;
}
.el-aside {
	// background-color: #3D4C5A;
	color: #333;
	// line-height: 200px;
	// .el-menu-item.is-active{background:#17BB89!important}
	// .el-submenu__title i{color:#fff}
	.el-menu {
		border: none;
	}
	.iconfont {
		font-size: 18px;
		margin-right: 10px;
	}
	.icon-chouchongbug {
		font-size: 22px;
	}
}
.changeHomeItem {
	text-align: center;
	img {
		width: 100%;
		height: 110px;
	}
	.tit {
		margin-top: 10px;
	}
}

// 新改
.header_ul {
	display: flex;
	justify-content: flex-end;
	margin: 0 85px 0 0;
}

.indexActive {
	border-bottom: 2px solid #fff;
}

#tree {
	margin: 15px 0 0 18px;
}

// 右键信息
#menuList {
	height: 40px;
	width: 80px;
	position: absolute;
	border-radius: 10px;
	border: 1px solid #d8d6d6;
	background-color: #fff;
	z-index: 1;
	.menu_item {
		line-height: 20px;
		text-align: center;
		margin-top: 10px;
		cursor: pointer;
	}
	li:hover {
		background-color: #14a478;
		color: white;
	}
	li {
		font-size: 15px;
	}
}

// 头部显示隐藏
.header_btn {
	position: absolute;
	color: #999;
	font-size: 14px;
	right: 20px;
	bottom: 10px;
	cursor: pointer;
}
.header_btn:hover {
	color: #fff;
}

.header2 {
	// border-bottom: 2px solid #397b0c;
	border-bottom: 2px solid #0d2c2e;
	position: relative;
	// background-color: #397b0c;
	background-color: rgb(13, 44, 46);
	color: #fff;
}
</style>