admin/Mars3D-screen_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BUG修改

Browse Source
This commit is contained in:
kun 2023-11-15 11:58:29 +08:00
parent 9d8ac11456
commit 22f4aa108b
30 changed files with 272 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/Mars3DIcon/Rectangle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 713 B

BIN
src/assets/images/Mars3DIcon/RectangleBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/Mars3DIcon/headBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 462 KiB

BIN
src/assets/images/Mars3DIcon/no-select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/Mars3DIcon/selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/login/login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
src/assets/images/login/login-title-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 287 KiB

BIN
src/assets/images/login/mailliekai.png
View File

Binary file not shown.

14
src/assets/json/dynamicRouter.json
View File

@ -1,20 +1,6 @@
{
"code": 200,
"result": [
{
"path": "/frontLargeScreen",
"name": "frontLargeScreen",
"component": "/goverment/frontLargeScreen/index",
"meta": {
"icon": "leftGover",
"title": "前台首页",
"isLink": "",
"isHide": false,
"isFull": true,
"isAffix": true,
"isKeepAlive": true
}
},
{
"path": "/largeScreen",
"name": "largeScreen",

60
src/components/layoutTop/index.scss
View File

@ -1,14 +1,31 @@
@mixin selected {
background-image: url("@/assets/images/Mars3DIcon/selected.png");
background-size: cover;
background-repeat: no-repeat;
span {
font-size: 24px;
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
font-weight: 400;
line-height: 28px;
letter-spacing: 4px;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
background: linear-gradient(180deg, #ffffff 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.back-model {
.el-header {
box-sizing: border-box;
display: flex;
align-items: center;
height: 72px;
padding: 0 15px 0 0;
padding: 0;
background-color: rgba(23, 49, 71, 0.8);
background-image: url("@/assets/images/Mars3DIcon/headBg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 4px;
position: relative;
z-index: 100;
.header-lf {
@ -17,7 +34,7 @@
overflow: hidden;
white-space: nowrap;
cursor: pointer;
height: 76px;
height: 100%;
width: 460px;
// background-image: url("@/assets/images/topHeader/heade-title-bg.png");
// background-size: 100% 100%;
@ -45,27 +62,54 @@
}
}
}
.angel {
width: 28px;
height: 38px;
}
.header-menu {
height: 100%;
display: flex;
align-items: center;
margin-right: auto;
> div {
height: 100%;
width: 184px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
cursor: pointer;
background-image: url("@/assets/images/Mars3DIcon/no-select.png");
background-size: cover;
background-repeat: no-repeat;
span {
color: white;
font-size: 18px;
margin-left: 3px;
white-space: nowrap;
font-size: 24px;
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
font-weight: 400;
line-height: 28px;
letter-spacing: 4px;
text-shadow: 0px 1px 0px rgba(30, 96, 169, 0.6);
background: linear-gradient(180deg, #ffffff 0%, #d7e9fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
> div:hover {
background-color: rgba(0, 138, 255, 0.2);
@include selected();
}
.selected-class {
@include selected();
}
}
.tool-bar-ri {
width: 260px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("@/assets/images/Mars3DIcon/RectangleBox.png");
background-size: cover;
background-repeat: no-repeat;
}
}
}

16
src/components/layoutTop/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="back-model" v-if="false">
<div class="back-model">
<el-header>
<div class="header-lf">
<div @click="goHome" class="logo flx-center">
@ -10,20 +10,22 @@
<span>佳信捷3D综合态势展示系统</span>
</div>
</div>
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
<div class="header-menu">
<div @click="backCenter">
<div @click="router.push('/largeScreen')" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
<span>首页</span>
</div>
<div @click="router.push('/config')">
<div @click="router.push('/config')" :class="route.path == '/config' ? 'selected-class' : ''">
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
<span>信息展示</span>
</div>
</div>
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
<ToolBarRight />
</el-header>
</div>
<div class="front-model">
<div class="front-model" v-if="false">
<el-header>
<div class="date-content">
<span>2023-10-25</span>
@ -42,14 +44,10 @@ import { useRoute, useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
import { HOME_URL } from "@/enums/Home";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
const emits = defineEmits(["toCenter"]);
const route = useRoute();
const router = useRouter();
const globalStore = GlobalStore();
const moduleTitle = globalStore.moduleName;
const backCenter = () => {
emits("toCenter");
router.push("/largeScreen");
};
const goHome = () => {
router.push(HOME_URL[globalStore.accountType - 1]);
};

2
src/enums/Home/index.ts
View File

@ -1 +1 @@
export const HOME_URL: string[] = ["/frontLargeScreen", "/home", "/home", "/home"];
export const HOME_URL: string[] = ["/largeScreen", "/home", "/home", "/home"];

92
src/layouts/LayoutClassic/index.scss
View File

@ -1,3 +1,19 @@
@mixin selected {
background-image: url("@/assets/images/Mars3DIcon/selected.png");
background-size: cover;
background-repeat: no-repeat;
span {
font-size: 24px;
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
font-weight: 400;
line-height: 28px;
letter-spacing: 4px;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
background: linear-gradient(180deg, #ffffff 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.el-container {
width: 100%;
height: 100%;
@ -6,11 +22,12 @@
display: flex;
align-items: center;
height: 72px;
padding: 0 15px 0 0;
padding: 0;
background-color: rgba(23, 49, 71, 0.8);
background-image: url("@/assets/images/topHeader/header-bg.png");
background-size: 100% 100%;
background-image: url("@/assets/images/Mars3DIcon/headBg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 4px;
position: relative;
z-index: 100;
.header-lf {
@ -19,14 +36,13 @@
overflow: hidden;
white-space: nowrap;
cursor: pointer;
height: 76px;
height: 100%;
width: 460px;
background-image: url("@/assets/images/topHeader/heade-title-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background-image: url("@/assets/images/topHeader/heade-title-bg.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
color: #fff;
text-shadow: 0px 2px 6px #123756;
margin-right: auto;
.logo {
flex-shrink: 0;
@ -48,26 +64,54 @@
}
}
}
:deep(.tool-bar-lf) {
color: #ffffff;
.el-breadcrumb__inner.is-link {
color: #e5eaf3;
&:hover {
color: var(--el-color-primary);
.angel {
width: 28px;
height: 38px;
}
.header-menu {
height: 100%;
display: flex;
align-items: center;
margin-right: auto;
> div {
width: 184px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
cursor: pointer;
background-image: url("@/assets/images/Mars3DIcon/no-select.png");
background-size: cover;
background-repeat: no-repeat;
span {
font-size: 24px;
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
font-weight: 400;
line-height: 28px;
letter-spacing: 4px;
text-shadow: 0px 1px 0px rgba(30, 96, 169, 0.6);
background: linear-gradient(180deg, #ffffff 0%, #d7e9fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
color: #cfd3dc;
> div:hover {
@include selected();
}
.selected-class {
@include selected();
}
}
:deep(.tool-bar-ri) {
// display: flex;
// align-items: center;
.toolBar-icon,
.username {
color: #e5eaf3;
}
.tool-bar-ri {
width: 260px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("@/assets/images/Mars3DIcon/RectangleBox.png");
background-size: cover;
background-repeat: no-repeat;
}
}
.el-aside {

12
src/layouts/LayoutClassic/index.vue
View File

@ -11,6 +11,18 @@
<span>佳信捷3D综合态势展示系统</span>
</div>
</div>
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
<div class="header-menu">
<div @click="router.push('/largeScreen')" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
<span>首页</span>
</div>
<div @click="router.push('/config')" :class="route.path == '/config' ? 'selected-class' : ''">
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
<span>信息展示</span>
</div>
</div>
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
<ToolBarRight />
</el-header>
<el-container class="classic-content">

20
src/layouts/components/Header/components/Avatar.vue
View File

@ -10,11 +10,6 @@
<!-- <el-dropdown-item @click="openDialog('infoRef')">
<el-icon><User /></el-icon>{{ $t("header.personalData") }}
</el-dropdown-item> -->
<el-dropdown-item @click="openDocument">
<!-- <el-icon><Edit /></el-icon> -->
<!-- {{ $t("header.changePassword") }} -->
<span>文档地址</span>
</el-dropdown-item>
<el-dropdown-item @click="openDialog('passwordRef')">
<!-- <el-icon><Edit /></el-icon> -->
<!-- {{ $t("header.changePassword") }} -->
@ -48,14 +43,7 @@ const router = useRouter();
const globalStore = GlobalStore();
const account = globalStore.account;
const openDropdown = ref(false);
const documentUrl = ref("");
// 获取系统配置文档地址
const getConfigMarker = async () => {
const { result } = await getSystemConfig({ configKey: "system_doc" });
documentUrl.value = result[0].configValue;
console.log(result);
};
// 退出登录
const logout = () => {
ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
@ -94,13 +82,7 @@ const onEdit = () => {
globalStore.seteditPassword(true);
console.log(globalStore.editPassword);
};
// 跳转到文档地址
const openDocument = () => {
window.open(documentUrl.value, "_blank");
};
onMounted(() => {
// getConfigMarker();
});
onMounted(() => {});
</script>
<style scoped lang="scss">

6
src/routers/modules/staticRouter.ts
View File

@ -21,9 +21,9 @@ export const staticRouter: RouteRecordRaw[] = [
}
},
{
path: "/home",
name: "home",
component: () => import("@/views/home/index.vue"),
path: "/frontLargeScreen",
name: "frontLargeScreen",
component: () => import("@/views/goverment/frontLargeScreen/index.vue"),
meta: {
title: "首页",
showSidebar: false

26
src/views/goverment/frontLargeScreen/index.vue
View File

@ -1,5 +1,5 @@
<template>
<layoutTop @toCenter="toCenter"></layoutTop>
<layoutTop></layoutTop>
<div class="map-content" id="map-content">
<div id="mars3dContainer" class="mars3d-container"></div>
<!-- 搜索框 -->
@ -494,9 +494,7 @@ const data = [
}
];
// 再次点击首页到中心点
const toCenter = () => {
map.flyHome();
};
const toCenter = () => {};
// 清除分屏对比
const clearScreenComparison = () => {
if (mapScreenSplit) {
@ -590,11 +588,15 @@ const showWidget = (name: string) => {
if (name == "底图") {
basicMapShow.value = true;
layersShow.value = false;
toolListShow.value = false;
} else if (name == "图层") {
basicMapShow.value = false;
layersShow.value = true;
basicMapShow.value = false;
toolListShow.value = false;
} else if (name == "工具") {
toolListShow.value = !toolListShow.value;
basicMapShow.value = false;
layersShow.value = false;
}
console.log(666);
};
@ -831,6 +833,8 @@ const initMars3d = (option: any) => {
getPointPosition();
// 查询配置线效果
getLineEffect();
// 飞到地图中心
map.flyHome();
};
// 取区域内的随机点
const randomPoint = (position: any) => {
@ -1476,10 +1480,12 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: white;
color: #0089fe;
margin-right: auto;
}
:deep() {
@ -1555,10 +1561,12 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: white;
color: #0089fe;
margin-right: auto;
}
:deep() {

4
src/views/goverment/largeScreen/components/coordinatePicking.vue
View File

@ -293,7 +293,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

4
src/views/goverment/largeScreen/components/flyRoam.vue
View File

@ -402,7 +402,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

4
src/views/goverment/largeScreen/components/mapMark.vue
View File

@ -582,7 +582,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

28
src/views/goverment/largeScreen/components/mapMeasurement.vue
View File

@ -6,7 +6,7 @@
</div>
<div class="main-content-menu">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
<div><img class="icon" src="@/assets/images/icon/fire.png" alt="" srcset="" /></div>
<div><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div>
</div>
</div>
@ -54,15 +54,15 @@ const formData = ref({
distanceVal: 0
});
const menuList = ref([
{ name: "空间距离" },
{ name: "贴地距离" },
{ name: "剖面" },
{ name: "水平面积" },
{ name: "贴地面积" },
{ name: "角度" },
{ name: "三角测量" },
{ name: "坐标测量" },
{ name: "高度差" }
{ name: "空间距离", icon: new URL("../../../../assets/images/Mars3DIcon/kjjl.png", import.meta.url).href },
{ name: "贴地距离", icon: new URL("../../../../assets/images/Mars3DIcon/tdjl.png", import.meta.url).href },
{ name: "剖面", icon: new URL("../../../../assets/images/Mars3DIcon/pm.png", import.meta.url).href },
{ name: "水平面积", icon: new URL("../../../../assets/images/Mars3DIcon/spmj.png", import.meta.url).href },
{ name: "贴地面积", icon: new URL("../../../../assets/images/Mars3DIcon/tdmj.png", import.meta.url).href },
{ name: "角度", icon: new URL("../../../../assets/images/Mars3DIcon/jd.png", import.meta.url).href },
{ name: "三角测量", icon: new URL("../../../../assets/images/Mars3DIcon/sjcl.png", import.meta.url).href },
{ name: "坐标测量", icon: new URL("../../../../assets/images/Mars3DIcon/zbcl.png", import.meta.url).href },
{ name: "高度差", icon: new URL("../../../../assets/images/Mars3DIcon/gdc.png", import.meta.url).href }
]);
let map: any = props.mapInstance;
let measure: any;
@ -213,7 +213,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;
@ -241,8 +243,8 @@ onUnmounted(() => {
font-size: 12px;
color: white;
.icon {
width: 65px;
height: 60px;
width: 50px;
height: 50px;
padding: 1px;
}
}

4
src/views/goverment/largeScreen/components/mapPrint.vue
View File

@ -83,7 +83,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

4
src/views/goverment/largeScreen/components/myTags.vue
View File

@ -343,7 +343,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

4
src/views/goverment/largeScreen/components/regionalNavigation.vue
View File

@ -206,7 +206,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

4
src/views/goverment/largeScreen/components/routeNavigation.vue
View File

@ -394,7 +394,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

28
src/views/goverment/largeScreen/components/spaceAnalysis.vue
View File

@ -6,7 +6,7 @@
</div>
<div class="main-content-menu" v-if="mainMenuShow">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
<div><img class="icon" src="@/assets/images/icon/fire.png" alt="" srcset="" /></div>
<div><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div>
</div>
</div>
@ -328,15 +328,15 @@ const allProperty = ref<any>({
});
const selectedName = ref("");
const menuList = ref([
{ name: "日照分析" },
{ name: "可视域" },
{ name: "方量分析" },
{ name: "地形开挖" },
{ name: "地表透明" },
{ name: "坡度坡向" },
{ name: "模型剖切" },
{ name: "模型压平" },
{ name: "限高分析" }
{ name: "日照分析", icon: new URL("../../../../assets/images/Mars3DIcon/rzfx.png", import.meta.url).href },
{ name: "可视域", icon: new URL("../../../../assets/images/Mars3DIcon/ksy.png", import.meta.url).href },
{ name: "方量分析", icon: new URL("../../../../assets/images/Mars3DIcon/flfx.png", import.meta.url).href },
{ name: "地形开挖", icon: new URL("../../../../assets/images/Mars3DIcon/dxkw.png", import.meta.url).href },
{ name: "地表透明", icon: new URL("../../../../assets/images/Mars3DIcon/dbtm.png", import.meta.url).href },
{ name: "坡度坡向", icon: new URL("../../../../assets/images/Mars3DIcon/pdpx.png", import.meta.url).href },
{ name: "模型剖切", icon: new URL("../../../../assets/images/Mars3DIcon/mxpq.png", import.meta.url).href },
{ name: "模型压平", icon: new URL("../../../../assets/images/Mars3DIcon/mxyp.png", import.meta.url).href },
{ name: "限高分析", icon: new URL("../../../../assets/images/Mars3DIcon/xgfx.png", import.meta.url).href }
]);
let map: any = props.mapInstance;
let measure: any;
@ -981,7 +981,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;
@ -1011,8 +1013,8 @@ onUnmounted(() => {
font-size: 12px;
color: white;
.icon {
width: 65px;
height: 60px;
width: 50px;
height: 50px;
padding: 1px;
}
}

4
src/views/goverment/largeScreen/components/viewBookmark.vue
View File

@ -140,7 +140,9 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;

18
src/views/goverment/largeScreen/index.vue
View File

@ -590,11 +590,15 @@ const showWidget = (name: string) => {
if (name == "底图") {
basicMapShow.value = true;
layersShow.value = false;
toolListShow.value = false;
} else if (name == "图层") {
basicMapShow.value = false;
layersShow.value = true;
basicMapShow.value = false;
toolListShow.value = false;
} else if (name == "工具") {
toolListShow.value = !toolListShow.value;
basicMapShow.value = false;
layersShow.value = false;
}
console.log(666);
};
@ -1476,10 +1480,12 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: white;
color: #0089fe;
margin-right: auto;
}
:deep() {
@ -1555,10 +1561,12 @@ onUnmounted(() => {
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: white;
color: #0089fe;
margin-right: auto;
}
:deep() {

68
src/views/login/index.scss
View File

@ -5,7 +5,7 @@
width: 100%;
height: 100%;
background: #333c52;
background-image: url("@/assets/images/login/login-bg-color.png");
background-image: url("@/assets/images/login/login-bg.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
user-select: none;
@ -13,38 +13,44 @@
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
> img {
width: 67%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.login-title {
display: flex;
flex-direction: column;
align-items: center;
.login-title-content {
width: 1047px;
height: max-content;
position: relative;
width: 754px;
height: 96px;
margin: auto;
padding: 18px 107px;
color: #fff;
font-weight: 700;
font-size: 36px;
text-align: center;
letter-spacing: 0.1em;
background-image: url("@/assets/images/login/login-title-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
.login-title {
width: 613px;
height: 62px;
font-size: 48px;
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
font-weight: 400;
line-height: 56px;
letter-spacing: 4px;
background: linear-gradient(180deg, #ffffff 0%, #2ebafb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 100px;
}
.login-title-bg {
width: 1047px;
height: 589px;
background-image: url("@/assets/images/login/login-title-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
// top: -40px;
// left: 430px;
// top: -4%;
// left: 5%;
top: -60px;
left: 0;
}
}
// .login-title::before {
// content: "";
// width: 54px;
// height: 44px;
// position: relative;
// top: 10px;
// display: inline-block;
// background-image: url("@/assets/images/login/login-title-logo.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
.login-pannel {
width: 380px;
height: 500px;

13
src/views/login/index.vue
View File

@ -1,8 +1,10 @@
<template>
<div class="login-container">
<img src="@/assets/images/login/login-bg-earth.png" alt="" srcset="" />
<div class="login-title">佳信捷3D综合态势展示系统</div>
<div class="login-pannel">
<div class="login-title-content">
<div class="login-title">佳信捷30综合态势展示系统</div>
<div class="login-title-bg"></div>
</div>
<!-- <div class="login-pannel">
<p class="login-pannel_text">欢迎登录！</p>
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
<el-form-item prop="account">
@ -21,7 +23,6 @@
autocomplete="new-password"
>
<template #prefix>
<!-- <el-icon class="el-input__icon"><lock /></el-icon> -->
<img src="@/assets/images/login/lockIcon.png" alt="" />
</template>
</el-input>
@ -30,7 +31,7 @@
<div class="login-btn">
<el-button @click="login(loginFormRef)" type="primary" size="large"> 登录 </el-button>
</div>
</div>
</div> -->
</div>
</template>
@ -66,7 +67,7 @@ const login = (formEl: FormInstance | undefined) => {
if (!valid) return;
loading.value = true;
try {
const arr = ref(["/frontLargeScreen", "/home", "/home", "/home"]);
const arr = ref(["/largeScreen", "/home", "/home", "/home"]);
// 1.执行登录接口
const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword });
console.log(result);