fix: 解决二级标题无法高亮问题，编写标准版和沈阳合盈定制版菜单栏
This commit is contained in:
cjp
parent
41bf46ebcc
commit
7dba8854f2
@ -3,10 +3,11 @@ NODE_ENV = "production"
|
||||
|
||||
# 线上环境接口地址(easymock)
|
||||
# VITE_API_URL = "http://139.9.66.234:6688"
|
||||
# VITE_API_URL = "http://182.90.224.147:6688"
|
||||
# VITE_API_URL = "http://182.90.224.147:6688"
|
||||
VITE_API_URL = 'http://182.90.224.147:100'
|
||||
# VITE_API_URL = "http://jxj.zhgdyun.com:6688"
|
||||
# 沈阳合盈线上
|
||||
# VITE_API_URL = "http://101.43.164.214:45022"
|
||||
VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
|
||||
# 打包
|
||||
VITE_ULD_API_URL = 'http://182.90.224.147:8012/onlinePreview?url='
|
||||
VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
|
||||
|
||||
|
||||
@ -45,3 +45,8 @@ export const logoutApi = () => {
|
||||
// export const jumpLoginApi = () => {
|
||||
// return http.post(BASEURL + ``);
|
||||
// };
|
||||
|
||||
// * 免登录用户信息
|
||||
export const jumpLargeUserInfoApi = (params?: any) => {
|
||||
return http.post(BASEURL + `/xmgl/base/getLoginInfoByToken`, params, { headers: { "Content-Type": "application/json" } });
|
||||
};
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<Card title="今日报警统计">
|
||||
<div class="num">{{ totalAlarm }}</div>
|
||||
<div class="styleImg"></div>
|
||||
<div id="echartsTest" style="width: 100%; height: 100%"></div>
|
||||
<div class="top-bg">
|
||||
<div class="num">{{ totalAlarm }}</div>
|
||||
<div class="styleImg"></div>
|
||||
<div id="echartsTest" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@ -366,13 +368,13 @@ let option = ref({
|
||||
// for (let j = 0; j < cont; j++) {
|
||||
// stringArr += "";
|
||||
// }
|
||||
num =name + stringArr + totalData.value[i].value;
|
||||
num = name + stringArr + totalData.value[i].value;
|
||||
}
|
||||
}
|
||||
return num;
|
||||
},
|
||||
data: ["噪声报警", "PM2.5超标报警", "PM10超标报警", "TSP报警", "温度报警", "湿度报警", "风速报警"],
|
||||
top:20,
|
||||
top: 20,
|
||||
right: 300,
|
||||
left: 280,
|
||||
bottom: 10,
|
||||
@ -460,13 +462,13 @@ const getList = async () => {
|
||||
totalData.value[i].value = res.result.windspeedNum;
|
||||
}
|
||||
}
|
||||
console.log("获取今日报警统计",totalData.value)
|
||||
console.log("获取今日报警统计", totalData.value);
|
||||
draw();
|
||||
}
|
||||
};
|
||||
|
||||
function draw() {
|
||||
console.log("绘图数据",option.value)
|
||||
console.log("绘图数据", option.value);
|
||||
let echartsTest = echarts.init(document.getElementById("echartsTest"));
|
||||
echartsTest.setOption(option.value);
|
||||
}
|
||||
@ -482,23 +484,26 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-family: sadigitalNumber;
|
||||
font-size:24px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 59%;
|
||||
right: 19%;
|
||||
z-index: 9;
|
||||
.top-bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.num {
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 23%;
|
||||
z-index: 9;
|
||||
}
|
||||
.styleImg {
|
||||
left: 5%;
|
||||
top: 17%;
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
height: 75%;
|
||||
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.styleImg {
|
||||
left: 75.5%;
|
||||
top: 53%;
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
height: 18%;
|
||||
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -83,6 +83,36 @@ const store = GlobalStore();
|
||||
let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||
let showUserBox = ref(false as any);
|
||||
let adminName = ref("" as any);
|
||||
// let menuList = ref([
|
||||
// {
|
||||
// moduleName: "工程概况",
|
||||
// modulePath: "/projectOverview"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "智慧党建",
|
||||
// modulePath: "/smartPartyBuilding"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "扬尘噪声",
|
||||
// modulePath: "/headNoise"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "劳务管理",
|
||||
// modulePath: "/laborManagement"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "视频管理",
|
||||
// modulePath: "/videoManagement"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "配电箱监测",
|
||||
// modulePath: "/distributionMonitoring"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "AI预警",
|
||||
// modulePath: "/aIEarlyWarning"
|
||||
// }
|
||||
// ]);
|
||||
let menuList = ref([
|
||||
{
|
||||
moduleName: "综合管理",
|
||||
@ -190,7 +220,7 @@ let menuList = ref([
|
||||
},
|
||||
{
|
||||
moduleName: "绿色施工",
|
||||
modulePath: "/electricityMonitor",
|
||||
modulePath: "/headNoise",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "扬尘噪声",
|
||||
@ -259,6 +289,7 @@ const navigateTo = (path, type) => {
|
||||
console.log("点击的路由---", path, type);
|
||||
if (type == 1) {
|
||||
activeTab.value = path.modulePath;
|
||||
activeTab2.value = path.modulePath;
|
||||
itemList.value = path.menuList;
|
||||
router.push(path.modulePath);
|
||||
} else {
|
||||
@ -269,6 +300,7 @@ const navigateTo = (path, type) => {
|
||||
onMounted(async () => {
|
||||
// await getAllModelMenu();
|
||||
activeTab.value = menuList.value[0].modulePath;
|
||||
activeTab2.value = menuList.value[0].modulePath;
|
||||
itemList.value = menuList.value[0].menuList;
|
||||
//数据看板跳转免登录
|
||||
if (window.location.href.indexOf("token") != -1) {
|
||||
|
||||
583
src/views/sevenLargeScreen/indexL_biaoZhun.vue
Normal file
583
src/views/sevenLargeScreen/indexL_biaoZhun.vue
Normal file
@ -0,0 +1,583 @@
|
||||
<template>
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||||
<div class="largeScreen" ref="dataScreenRef">
|
||||
<div class="header">
|
||||
<div class="hearderIcon"><img src="@/assets/images/headerLeftIcon.png" alt="" /></div>
|
||||
<span class="projectTitle">
|
||||
<p>数字化项目监管平台</p>
|
||||
</span>
|
||||
<div class="rightIcon" @click.stop>
|
||||
<div class="time">{{ nowTime }}</div>
|
||||
<!-- <div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/ysbfIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/sjzxIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
|
||||
</div> -->
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon" @click="showUserBox = !showUserBox">
|
||||
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- <el-dropdown trigger="click">
|
||||
|
||||
<template #dropdown>
|
||||
<div class="userDialog" @click="loginOut">退出登录</div>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
<div class="userBox" v-show="showUserBox">
|
||||
<div class="userItem">
|
||||
<div class="sanJiao"></div>
|
||||
<div class="userIcon">
|
||||
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
|
||||
<div class="userName">{{ adminName }}</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="jumpBgd">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
|
||||
<div class="userName">项目后台</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="loginOut">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
|
||||
<div class="userName">退出登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div v-for="(item, index) in menuList" :key="index" style=":nth-child(5):margin-left: 35%;" class="menStyle">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
|
||||
<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
|
||||
<span :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentDate">
|
||||
<span>自2022.02.28起开始计算，至今日2023.04.16为<span class="numColor">412</span>个日历天</span>
|
||||
</div>
|
||||
<div class="dataBoardContent">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ScaleBox from "vue3-scale-box";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||
let showUserBox = ref(false as any);
|
||||
let adminName = ref("" as any);
|
||||
let menuList = ref([
|
||||
{
|
||||
moduleName: "综合管理",
|
||||
modulePath: "/projectOverview",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "工程概况",
|
||||
companyPath: "/projectOverview"
|
||||
},
|
||||
{
|
||||
menuName: "智慧党建",
|
||||
companyPath: "/smartPartyBuilding"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "数字工地",
|
||||
modulePath: "/videoManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "视频管理",
|
||||
companyPath: "/videoManagement"
|
||||
},
|
||||
{
|
||||
menuName: "AI预警",
|
||||
companyPath: "/aIEarlyWarning"
|
||||
},
|
||||
{
|
||||
menuName: "地磅管理",
|
||||
companyPath: "/loadometerManage"
|
||||
},
|
||||
{
|
||||
menuName: "车辆管理",
|
||||
companyPath: "/vehicleManagement"
|
||||
},
|
||||
{
|
||||
menuName: "配电箱监测",
|
||||
companyPath: "/distributionMonitoring"
|
||||
},
|
||||
{
|
||||
menuName: "标养室监测",
|
||||
companyPath: "/standardCureRoom"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement"
|
||||
},
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/securityManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "安全管理",
|
||||
companyPath: "/securityManagement"
|
||||
},
|
||||
{
|
||||
companyPath: "/foundationPitMonitor",
|
||||
menuName: "基坑监测"
|
||||
},
|
||||
{
|
||||
menuName: "隧道定位监测",
|
||||
companyPath: "/tunnelPosition"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection"
|
||||
},
|
||||
{
|
||||
menuName: "有毒气体监测",
|
||||
companyPath: "/toxicGasMonitor"
|
||||
},
|
||||
{
|
||||
menuName: "高支模监测",
|
||||
companyPath: "/highFormwork"
|
||||
},
|
||||
{
|
||||
menuName: "高边坡监测",
|
||||
companyPath: "/highSlope"
|
||||
},
|
||||
{
|
||||
menuName: "烟感监测",
|
||||
companyPath: "/smokeSensor"
|
||||
},
|
||||
{
|
||||
menuName: "安全教育",
|
||||
companyPath: "/safeEducation"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "质量管理",
|
||||
modulePath: "/qualityManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "质量管理",
|
||||
companyPath: "/qualityManagement"
|
||||
},
|
||||
{
|
||||
menuName: "混凝土测温",
|
||||
companyPath: "/concreteMonitor"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "绿色施工",
|
||||
modulePath: "/electricityMonitor",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "扬尘噪声",
|
||||
companyPath: "/headNoise"
|
||||
},
|
||||
{
|
||||
companyPath: "/electricityMonitor",
|
||||
menuName: "用电监测"
|
||||
},
|
||||
{
|
||||
companyPath: "/waterMonitor",
|
||||
menuName: "用水监测"
|
||||
},
|
||||
{
|
||||
companyPath: "/sewageMonitor",
|
||||
menuName: "污水监测"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "大型机械",
|
||||
modulePath: "/towerCraneMonitoring",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "塔吊监测",
|
||||
companyPath: "/towerCraneMonitoring"
|
||||
},
|
||||
{
|
||||
menuName: "升降机监测",
|
||||
companyPath: "/elevatorMonitoring"
|
||||
},
|
||||
{
|
||||
menuName: "卸料平台",
|
||||
companyPath: "/unloadPlatform"
|
||||
},
|
||||
{
|
||||
menuName: "混凝土拌合站",
|
||||
companyPath: "/concreteMixingPlant"
|
||||
},
|
||||
{
|
||||
menuName: "龙门吊监测",
|
||||
companyPath: "/gantryCrane"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{ moduleName: "BIM模型", modulePath: "/bImModel" }
|
||||
]);
|
||||
const itemList = ref([]);
|
||||
const activeTab = ref(0);
|
||||
const activeTab2 = ref(0);
|
||||
const router = useRouter();
|
||||
|
||||
//获取动态tab
|
||||
const getAllModelMenu = () => {
|
||||
let half = store.projectDateAuth.moduleList;
|
||||
half.forEach((item: any) => {
|
||||
if (item.moduleType == 4) {
|
||||
menuList.value.push(item);
|
||||
return;
|
||||
}
|
||||
});
|
||||
console.log("筛选出的数据看板路由", menuList.value);
|
||||
};
|
||||
const navigateTo = (path, type) => {
|
||||
console.log("点击的路由---", path, type);
|
||||
if (type == 1) {
|
||||
activeTab.value = path.modulePath;
|
||||
itemList.value = path.menuList;
|
||||
router.push(path.modulePath);
|
||||
} else {
|
||||
activeTab2.value = path.companyPath;
|
||||
router.push(path.companyPath);
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
// await getAllModelMenu();
|
||||
activeTab.value = menuList.value[0].modulePath;
|
||||
itemList.value = menuList.value[0].menuList;
|
||||
//数据看板跳转免登录
|
||||
if (window.location.href.indexOf("token") != -1) {
|
||||
const token = window.location.href.split("token=")[1];
|
||||
const res = await fetch(import.meta.env.VITE_API_URL + "/xmgl/base/getLoginInfoByToken", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ token: token })
|
||||
});
|
||||
store.setSN(data.result.sn);
|
||||
store.setToken(data.result.token);
|
||||
store.setAccount(data.result.account);
|
||||
store.setAccountType(data.result.accountType);
|
||||
store.setProjectDateAuth(data.menuAuthority);
|
||||
// const data = await res.json();
|
||||
// console.log("调用免登录接口返回的数据", data);
|
||||
// let arr = data.result.menuAuthority.moduleList;
|
||||
// arr.forEach((item: any) => {
|
||||
// if (item.moduleType == 4) {
|
||||
// menuList.value.push(item);
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
// console.log("当前项目的看板数据：：", moduleListData.value);
|
||||
}
|
||||
|
||||
// console.log("进入页面， ");
|
||||
adminName.value = store.account;
|
||||
// console.log("store数据", store.account);
|
||||
// menuClick(menuList.value[0], activeIndex.value);
|
||||
getNowTime();
|
||||
document.addEventListener("click", bodyCloseMenus);
|
||||
const subMenus = document.querySelectorAll(".menStyle");
|
||||
if (subMenus.length >= 5) {
|
||||
subMenus[4].style.marginLeft = "30%";
|
||||
}
|
||||
});
|
||||
|
||||
let timer = ref(null as any);
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer);
|
||||
document.removeEventListener("click", bodyCloseMenus);
|
||||
});
|
||||
|
||||
function bodyCloseMenus() {
|
||||
if (showUserBox.value === true) {
|
||||
showUserBox.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getNowTime() {
|
||||
let speed = 1000;
|
||||
let theNowTime = function () {
|
||||
nowTime.value = timeNumber();
|
||||
};
|
||||
timer.value = setInterval(theNowTime, speed);
|
||||
}
|
||||
function timeNumber() {
|
||||
let today = new Date();
|
||||
let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
|
||||
let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
|
||||
return date + " " + time;
|
||||
}
|
||||
function twoDigits(val: any) {
|
||||
if (val < 10) return "0" + val;
|
||||
return val;
|
||||
}
|
||||
|
||||
function loginOut() {
|
||||
localStorage.removeItem("GlobalState");
|
||||
location.reload();
|
||||
router.push("/login");
|
||||
}
|
||||
//跳转后台
|
||||
function jumpBgd() {
|
||||
window.location.replace("http://jxj.zhgdyun.com:100");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-popper__arrow {
|
||||
background-color: #112d59;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.largeScreen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/bigImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/headerImg.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.projectTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 42px;
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 30%;
|
||||
left: 70%;
|
||||
color: #fff;
|
||||
top: 1%;
|
||||
.time {
|
||||
font-size: 13px;
|
||||
font-family: sadigitalNumber;
|
||||
margin: 1% 40% 0 10%;
|
||||
}
|
||||
.Icon {
|
||||
margin-right: 2%;
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuList {
|
||||
display: flex;
|
||||
height: 6%;
|
||||
color: #ccc;
|
||||
line-height: 55px;
|
||||
margin: -4% auto 0 2%;
|
||||
font-family: pmzd;
|
||||
div {
|
||||
position: relative;
|
||||
margin-top: 1%;
|
||||
height: 60%;
|
||||
width: 10%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
|
||||
span {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
margin-left: 2%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subMenuList {
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: 4%;
|
||||
display: flex;
|
||||
margin-top: 5%;
|
||||
font-size: 14px;
|
||||
font-family: none;
|
||||
background: url("@/assets/images/subTabImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: -1%;
|
||||
.subItem {
|
||||
width: 100px;
|
||||
margin-top: -1.5%;
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(1) {
|
||||
margin-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentDate {
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: 2%;
|
||||
font-size: 14px;
|
||||
.numColor {
|
||||
color: #82fbea;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dataBoardContent {
|
||||
height: 81%;
|
||||
// height: calc(100% - 15px - 50px - 60px - 20px);
|
||||
margin: 75px auto 16px auto;
|
||||
width: calc(100% - 40px);
|
||||
// background-color: #01131F;
|
||||
// opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.active2 {
|
||||
color: #fff;
|
||||
font-family: none;
|
||||
}
|
||||
.userDialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
background-color: #112d59;
|
||||
color: #5d75a0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userBox {
|
||||
.userItem {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
right: 2%;
|
||||
top: 4%;
|
||||
background: #112d59;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 0px solid #405e97;
|
||||
z-index: 9;
|
||||
.sanJiao {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: 0%;
|
||||
top: -10%;
|
||||
border-left: 6px solid transparent; /* 左边框透明 */
|
||||
border-right: 6px solid transparent; /* 右边框透明 */
|
||||
border-bottom: 6px solid #405e97; /* 底部边框颜色 */
|
||||
transform: rotate(0deg); /* 旋转45度 */
|
||||
}
|
||||
.userIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #405e97;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.userName {
|
||||
width: 40px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #a9bce6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.loginOut {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
.loginOutIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.userName {
|
||||
width: 50px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #a9bce6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.loginOut:hover {
|
||||
background-color: #2758c0;
|
||||
}
|
||||
.hearderIcon {
|
||||
left: 1%;
|
||||
top: 1%;
|
||||
height: 5%;
|
||||
width: 12%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
620
src/views/sevenLargeScreen/indexL_syhy.vue
Normal file
620
src/views/sevenLargeScreen/indexL_syhy.vue
Normal file
@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||||
<div class="largeScreen" ref="dataScreenRef">
|
||||
<div class="header">
|
||||
<!-- 顶部左上角图片 -->
|
||||
<!-- <div class="hearderIcon"><img src="@/assets/images/headerLeftIcon.png" alt="" /></div> -->
|
||||
<span class="projectTitle">
|
||||
<!-- <p>数字化项目监管平台</p> -->
|
||||
<p>盘锦西环66千伏变电站新建工程</p>
|
||||
</span>
|
||||
<div class="rightIcon" @click.stop>
|
||||
<div class="time">{{ nowTime }}</div>
|
||||
<!-- <div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/ysbfIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/sjzxIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
|
||||
</div> -->
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon" @click="showUserBox = !showUserBox">
|
||||
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- <el-dropdown trigger="click">
|
||||
|
||||
<template #dropdown>
|
||||
<div class="userDialog" @click="loginOut">退出登录</div>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
<div class="userBox" v-show="showUserBox">
|
||||
<div class="userItem">
|
||||
<div class="sanJiao"></div>
|
||||
<div class="userIcon">
|
||||
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
|
||||
<div class="userName">{{ adminName }}</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="jumpBgd">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
|
||||
<div class="userName">项目后台</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="loginOut">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
|
||||
<div class="userName">退出登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div v-for="(item, index) in menuList" :key="index" style=":nth-child(3):margin-left: 35% !important;" class="menStyle">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subMenuList" v-show="itemList != null && itemList.length >= 1">
|
||||
<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
|
||||
<span :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentDate" v-show="itemList != null && itemList.length >= 1">
|
||||
<span>自2022.02.28起开始计算，至今日2023.04.16为<span class="numColor">412</span>个日历天</span>
|
||||
</div>
|
||||
<div class="dataBoardContent">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ScaleBox from "vue3-scale-box";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { jumpLargeUserInfoApi } from "@/api/modules/login";
|
||||
const store = GlobalStore();
|
||||
let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||
let showUserBox = ref(false as any);
|
||||
let adminName = ref("" as any);
|
||||
//标准版页面
|
||||
// let menuList = ref([
|
||||
// {
|
||||
// moduleName: "综合管理",
|
||||
// modulePath: "/projectOverview",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "工程概况",
|
||||
// companyPath: "/projectOverview"
|
||||
// },
|
||||
// {
|
||||
// menuName: "智慧党建",
|
||||
// companyPath: "/smartPartyBuilding"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// moduleName: "数字工地",
|
||||
// modulePath: "/aIEarlyWarning",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "视频管理",
|
||||
// companyPath: "/videoManagement"
|
||||
// },
|
||||
// {
|
||||
// menuName: "AI预警",
|
||||
// companyPath: "/aIEarlyWarning"
|
||||
// },
|
||||
// {
|
||||
// menuName: "地磅管理",
|
||||
// companyPath: "/loadometerManage"
|
||||
// },
|
||||
// {
|
||||
// menuName: "车辆管理",
|
||||
// companyPath: "/vehicleManagement"
|
||||
// },
|
||||
// {
|
||||
// menuName: "配电箱监测",
|
||||
// companyPath: "/distributionMonitoring"
|
||||
// },
|
||||
// {
|
||||
// menuName: "标养室监测",
|
||||
// companyPath: "/standardCureRoom"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// moduleName: "劳务管理",
|
||||
// modulePath: "/laborManagement"
|
||||
// },
|
||||
// {
|
||||
// moduleName: "安全管理",
|
||||
// modulePath: "/securityManagement",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "安全管理",
|
||||
// companyPath: "/securityManagement"
|
||||
// },
|
||||
// {
|
||||
// companyPath: "/foundationPitMonitor",
|
||||
// menuName: "基坑监测"
|
||||
// },
|
||||
// {
|
||||
// menuName: "隧道定位监测",
|
||||
// companyPath: "/tunnelPosition"
|
||||
// },
|
||||
// {
|
||||
// menuName: "临边防护",
|
||||
// companyPath: "/edgeProtection"
|
||||
// },
|
||||
// {
|
||||
// menuName: "有毒气体监测",
|
||||
// companyPath: "/toxicGasMonitor"
|
||||
// },
|
||||
// {
|
||||
// menuName: "高支模监测",
|
||||
// companyPath: "/highFormwork"
|
||||
// },
|
||||
// {
|
||||
// menuName: "高边坡监测",
|
||||
// companyPath: "/highSlope"
|
||||
// },
|
||||
// {
|
||||
// menuName: "烟感监测",
|
||||
// companyPath: "/smokeSensor"
|
||||
// },
|
||||
// {
|
||||
// menuName: "安全教育",
|
||||
// companyPath: "/safeEducation"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// moduleName: "质量管理",
|
||||
// modulePath: "/qualityManagement",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "质量管理",
|
||||
// companyPath: "/qualityManagement"
|
||||
// },
|
||||
// {
|
||||
// menuName: "混凝土测温",
|
||||
// companyPath: "/concreteMonitor"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// moduleName: "绿色施工",
|
||||
// modulePath: "/electricityMonitor",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "扬尘噪声",
|
||||
// companyPath: "/headNoise"
|
||||
// },
|
||||
// {
|
||||
// companyPath: "/electricityMonitor",
|
||||
// menuName: "用电监测"
|
||||
// },
|
||||
// {
|
||||
// companyPath: "/waterMonitor",
|
||||
// menuName: "用水监测"
|
||||
// },
|
||||
// {
|
||||
// companyPath: "/sewageMonitor",
|
||||
// menuName: "污水监测"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// moduleName: "大型机械",
|
||||
// modulePath: "/towerCraneMonitoring",
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "塔吊监测",
|
||||
// companyPath: "/towerCraneMonitoring"
|
||||
// },
|
||||
// {
|
||||
// menuName: "升降机监测",
|
||||
// companyPath: "/elevatorMonitoring"
|
||||
// },
|
||||
// {
|
||||
// menuName: "卸料平台",
|
||||
// companyPath: "/unloadPlatform"
|
||||
// },
|
||||
// {
|
||||
// menuName: "混凝土拌合站",
|
||||
// companyPath: "/concreteMixingPlant"
|
||||
// },
|
||||
// {
|
||||
// menuName: "龙门吊监测",
|
||||
// companyPath: "/gantryCrane"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// { moduleName: "BIM模型", modulePath: "/bImModel" }
|
||||
// ]);
|
||||
//沈阳和盈项目模块
|
||||
let menuList = ref([
|
||||
{
|
||||
moduleName: "工程概况",
|
||||
modulePath: "/projectOverview"
|
||||
},
|
||||
{
|
||||
moduleName: "智慧党建",
|
||||
modulePath: "/smartPartyBuilding"
|
||||
},
|
||||
{
|
||||
moduleName: "扬尘噪声",
|
||||
modulePath: "/headNoise"
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement"
|
||||
},
|
||||
{
|
||||
moduleName: "视频管理",
|
||||
modulePath: "/videoManagement"
|
||||
},
|
||||
{
|
||||
moduleName: "配电箱监测",
|
||||
modulePath: "/distributionMonitoring"
|
||||
},
|
||||
{
|
||||
moduleName: "AI预警",
|
||||
modulePath: "/aIEarlyWarning"
|
||||
}
|
||||
]);
|
||||
const itemList = ref([]);
|
||||
const activeTab = ref(0);
|
||||
const activeTab2 = ref(0);
|
||||
const router = useRouter();
|
||||
|
||||
//获取动态tab
|
||||
const getAllModelMenu = () => {
|
||||
let half = store.projectDateAuth.moduleList;
|
||||
half.forEach((item: any) => {
|
||||
if (item.moduleType == 4) {
|
||||
menuList.value.push(item);
|
||||
return;
|
||||
}
|
||||
});
|
||||
console.log("筛选出的数据看板路由", menuList.value);
|
||||
};
|
||||
const navigateTo = (path, type) => {
|
||||
console.log("点击的路由---", path, type);
|
||||
if (type == 1) {
|
||||
activeTab.value = path.modulePath;
|
||||
itemList.value = path.menuList;
|
||||
router.push(path.modulePath);
|
||||
} else {
|
||||
activeTab2.value = path.companyPath;
|
||||
router.push(path.companyPath);
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
//这里是跳转过来后免登录的操作，接收token 登录 懂了
|
||||
//数据看板跳转免登录
|
||||
if (window.location.href.indexOf("token") != -1) {
|
||||
console.log("跳转进来了吗----", window.location.href.indexOf("token"));
|
||||
|
||||
const newToken = window.location.href.split("token=")[1];
|
||||
const data = await jumpLargeUserInfoApi({ token: newToken });
|
||||
console.log("跳转请求的数据----", data.result);
|
||||
store.setSN(data.result.sn);
|
||||
store.setToken(data.result.token);
|
||||
store.setAccount(data.result.account);
|
||||
store.setAccountType(data.result.accountType);
|
||||
store.setProjectDateAuth(data.menuAuthority);
|
||||
// const data = await res.json();
|
||||
// console.log("调用免登录接口返回的数据", data);
|
||||
// let arr = data.result.menuAuthority.moduleList;
|
||||
// arr.forEach((item: any) => {
|
||||
// if (item.moduleType == 4) {
|
||||
// menuList.value.push(item);
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
// console.log("当前项目的看板数据：：", moduleListData.value);
|
||||
}
|
||||
// await getAllModelMenu();
|
||||
navigateTo(menuList.value[0], 1);
|
||||
activeTab.value = menuList.value[0].modulePath;
|
||||
itemList.value = menuList.value[0].menuList;
|
||||
|
||||
// console.log("进入页面， ");
|
||||
adminName.value = store.account;
|
||||
// console.log("store数据", store.account);
|
||||
// menuClick(menuList.value[0], activeIndex.value);
|
||||
getNowTime();
|
||||
document.addEventListener("click", bodyCloseMenus);
|
||||
const subMenus = document.querySelectorAll(".menStyle");
|
||||
if (subMenus.length >= 5) {
|
||||
subMenus[4].style.marginLeft = "30%";
|
||||
}
|
||||
});
|
||||
|
||||
let timer = ref(null as any);
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer);
|
||||
document.removeEventListener("click", bodyCloseMenus);
|
||||
});
|
||||
|
||||
function bodyCloseMenus() {
|
||||
if (showUserBox.value === true) {
|
||||
showUserBox.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getNowTime() {
|
||||
let speed = 1000;
|
||||
let theNowTime = function () {
|
||||
nowTime.value = timeNumber();
|
||||
};
|
||||
timer.value = setInterval(theNowTime, speed);
|
||||
}
|
||||
function timeNumber() {
|
||||
let today = new Date();
|
||||
let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
|
||||
let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
|
||||
return date + " " + time;
|
||||
}
|
||||
function twoDigits(val: any) {
|
||||
if (val < 10) return "0" + val;
|
||||
return val;
|
||||
}
|
||||
|
||||
function loginOut() {
|
||||
localStorage.removeItem("GlobalState");
|
||||
location.reload();
|
||||
router.push("/login");
|
||||
}
|
||||
//跳转后台
|
||||
function jumpBgd() {
|
||||
// window.location.replace("http://192.168.34.226:8080/#/projectIndex");
|
||||
window.location.replace("http://101.43.164.214:45020/#/projectIndex"); //沈阳和盈
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-popper__arrow {
|
||||
background-color: #112d59;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.largeScreen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/bigImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/headerImg.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.projectTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 38px;
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 30%;
|
||||
left: 70%;
|
||||
color: #fff;
|
||||
top: 1%;
|
||||
.time {
|
||||
font-size: 13px;
|
||||
font-family: sadigitalNumber;
|
||||
margin: 1% 40% 0 10%;
|
||||
}
|
||||
.Icon {
|
||||
margin-right: 2%;
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuList {
|
||||
display: flex;
|
||||
height: 6%;
|
||||
color: #ccc;
|
||||
line-height: 55px;
|
||||
margin: -4% auto 0 2%;
|
||||
font-family: pmzd;
|
||||
div {
|
||||
position: relative;
|
||||
margin-top: 1%;
|
||||
height: 60%;
|
||||
width: 9%; //二级
|
||||
// width: 10%;//一级
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
|
||||
span {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
margin-left: 2%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subMenuList {
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: 4%;
|
||||
display: flex;
|
||||
margin-top: 5%;
|
||||
font-size: 14px;
|
||||
font-family: none;
|
||||
background: url("@/assets/images/subTabImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: -1%;
|
||||
.subItem {
|
||||
width: 100px;
|
||||
margin-top: -1.5%;
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(1) {
|
||||
margin-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentDate {
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: 2%;
|
||||
font-size: 14px;
|
||||
.numColor {
|
||||
color: #82fbea;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dataBoardContent {
|
||||
// height: 81%;//二级
|
||||
height: 85%; //一级
|
||||
// height: calc(100% - 15px - 50px - 60px - 20px);
|
||||
// margin: 75px auto 16px auto;//二级
|
||||
margin: 30px auto 16px auto; //一级
|
||||
width: calc(100% - 40px);
|
||||
// background-color: #01131F;
|
||||
// opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.active2 {
|
||||
color: #fff;
|
||||
font-family: none;
|
||||
}
|
||||
.userDialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
background-color: #112d59;
|
||||
color: #5d75a0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userBox {
|
||||
.userItem {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
right: 2%;
|
||||
top: 4%;
|
||||
background: #112d59;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 0px solid #405e97;
|
||||
z-index: 9;
|
||||
.sanJiao {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: 0%;
|
||||
top: -10%;
|
||||
border-left: 6px solid transparent; /* 左边框透明 */
|
||||
border-right: 6px solid transparent; /* 右边框透明 */
|
||||
border-bottom: 6px solid #405e97; /* 底部边框颜色 */
|
||||
transform: rotate(0deg); /* 旋转45度 */
|
||||
}
|
||||
.userIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #405e97;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.userName {
|
||||
width: 40px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #a9bce6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.loginOut {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
.loginOutIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.userName {
|
||||
width: 50px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #a9bce6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.loginOut:hover {
|
||||
background-color: #2758c0;
|
||||
}
|
||||
.hearderIcon {
|
||||
left: 1%;
|
||||
top: 1%;
|
||||
height: 5%;
|
||||
width: 12%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user