.gitignore
@@ -6,6 +6,8 @@ /public/sryx /public/mx bigScreen # local env files .env.local .env.*.local README.md
@@ -1 +1,11 @@ 备注 # 快速开始 node:16 # 安装依赖 npm install # 运行 npm run serve # 打包 npm run build public/check/big-sk.pngBinary files differ
public/check/big-skAc.pngBinary files differ
public/check/bxjc.pngBinary files differ
public/check/bxjcAc.pngBinary files differ
public/check/db.pngBinary files differ
public/check/dbAc.pngBinary files differ
public/check/mid-sk.pngBinary files differ
public/check/mid-skAc.pngBinary files differ
public/check/monitoring.pngBinary files differ
public/check/monitoringAc.pngBinary files differ
public/check/rain.pngBinary files differ
public/check/rainAc.pngBinary files differ
public/check/small-sk.pngBinary files differ
public/check/small-skAc.pngBinary files differ
public/check/waterL.pngBinary files differ
public/check/waterLAc.pngBinary files differ
public/check/ylyb.pngBinary files differ
public/check/ylybAc.pngBinary files differ
public/check/zhjc.pngBinary files differ
public/check/zhjcAc.pngBinary files differ
public/check/变形@2x.pngBinary files differ
public/check/变形@3x.pngBinary files differ
public/check/大坝@2x.pngBinary files differ
public/check/大坝@3x.pngBinary files differ
public/check/应变@2x.pngBinary files differ
public/check/应变@3x.pngBinary files differ
public/check/水库水位.pngBinary files differ
public/check/水库水位@2x.pngBinary files differ
public/check/水库水位@3x.pngBinary files differ
public/check/渗流.pngBinary files differ
public/check/渗流@2x.pngBinary files differ
public/check/渗流@3x.pngBinary files differ
public/check/监控.pngBinary files differ
public/check/监控@2x.pngBinary files differ
public/check/监控@3x.pngBinary files differ
public/check/监测 拷贝.pngBinary files differ
public/check/监测 拷贝@3x.pngBinary files differ
public/check/监测.pngBinary files differ
public/check/监测@3x.pngBinary files differ
public/check/降雨量_面.pngBinary files differ
public/check/降雨量_面@2x.pngBinary files differ
public/check/降雨量_面@3x.pngBinary files differ
public/images/Right-down右下 (7) 拷贝 2.pngBinary files differ
public/images/Right-down右下 (7) 拷贝 2@2x.pngBinary files differ
public/images/Right-down右下 (7) 拷贝.pngBinary files differ
public/images/Right-down右下 (7) 拷贝@2x.pngBinary files differ
public/images/YX.pngBinary files differ
public/images/icon/水库.pngBinary files differ
public/images/icon/水库@2x.pngBinary files differ
public/images/pro-bg.pngBinary files differ
public/images/压暗@2x.pngBinary files differ
public/images/水位站.pngBinary files differ
public/images/水位站@2x.pngBinary files differ
public/images/水库水位.pngBinary files differ
public/images/水库水位@2x.pngBinary files differ
public/images/水质监测站.pngBinary files differ
public/images/水质监测站@2x.pngBinary files differ
public/images/综合信息展现.pngBinary files differ
public/images/综合信息展现@2x.pngBinary files differ
public/images/缺省页_空白页-通用.pngBinary files differ
public/images/缺省页_空白页-通用@2x.pngBinary files differ
public/images/降雨量_面.pngBinary files differ
public/images/降雨量_面@2x.pngBinary files differ
public/images/雨量站.pngBinary files differ
public/images/雨量站@2x.pngBinary files differ
public/videos/monitor-test.mp4Binary files differ
src/styles/login.scss
@@ -2,6 +2,7 @@ height: 100%; margin: 0; padding: 0; overflow: hidden; } .login-container { @@ -9,24 +10,29 @@ align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; width: 100vw; height: 100vh; background-image: url("/images/pro-bg.png"); background-size: cover; background-position: center; min-width: 320px; min-height: 480px; } .login-weaper { display: flex; width: 800px; width: 90%; max-width: 800px; min-width: 320px; box-shadow: -4px 5px 20px rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; margin: 20px; } .login-left, .login-border { min-height: 450px; min-height: 400px; display: flex; align-items: center; } @@ -45,24 +51,24 @@ .login-time { position: absolute; top: 30px; left: 30px; top: 20px; left: 20px; color: rgba(255, 255, 255, 0.9); font-weight: 300; font-size: 16px; font-size: clamp(12px, 2vw, 16px); } .login-left .img { width: 120px; margin-bottom: 20px; width: clamp(80px, 25vw, 120px); margin-bottom: 15px; } .login-left .title { text-align: center; color: #fff; font-weight: 400; letter-spacing: 3px; font-size: 22px; letter-spacing: 2px; font-size: clamp(16px, 4vw, 22px); margin: 0; } @@ -71,7 +77,7 @@ border-bottom-right-radius: 8px; background-color: #fff; width: 55%; padding: 40px 30px; padding: 30px; box-sizing: border-box; } @@ -83,16 +89,16 @@ color: #333; margin-bottom: 8px; font-weight: 500; font-size: 20px; font-size: clamp(16px, 4vw, 20px); text-align: center; letter-spacing: 2px; } .login-title-child { color: #999; margin-bottom: 30px; margin-bottom: 25px; font-weight: 300; font-size: 12px; font-size: clamp(10px, 2.5vw, 12px); text-align: center; letter-spacing: 1px; } @@ -101,16 +107,19 @@ margin: 0; .el-form-item { margin-bottom: 20px; margin-bottom: 18px; } .el-input { width: 100%; input { padding: 12px 15px; padding: clamp(10px, 3vw, 12px) clamp(12px, 3vw, 15px); border: 1px solid #e4e7ed; border-radius: 6px; font-size: 14px; font-size: clamp(12px, 3vw, 14px); transition: border-color 0.3s; box-sizing: border-box; &:focus { border-color: #409eff; @@ -121,7 +130,7 @@ .el-input__prefix { i { color: #909399; font-size: 16px; font-size: clamp(14px, 3vw, 16px); } } @@ -136,11 +145,11 @@ .login-submit { width: 100%; height: 42px; height: clamp(36px, 8vw, 42px); background: linear-gradient(135deg, #409eff 0%, #67b8ff 100%); border: none; border-radius: 6px; font-size: 16px; font-size: clamp(14px, 3vw, 16px); letter-spacing: 2px; color: #fff; cursor: pointer; @@ -154,4 +163,48 @@ &:active { opacity: 0.8; } } @media screen and (max-width: 640px) { .login-weaper { flex-direction: column; width: 95%; } .login-left, .login-border { width: 100%; min-height: auto; border-radius: 0; } .login-left { border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 25px 20px; } .login-border { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 25px 20px; } .login-time { position: static; margin-bottom: 15px; text-align: center; } } @media screen and (max-height: 500px) { .login-weaper { transform: scale(0.9); } } @media screen and (max-height: 450px) { .login-weaper { transform: scale(0.85); } } src/views/layout/index.vue
@@ -10,6 +10,10 @@ --> <template> <div class="wrapper"> <div class="logout-btn" @click="handleLogout"> <i class="el-icon-logout"></i> <span>退出登录</span> </div> <map-box ref="modalForm" :curMap="curMap" @getsearchSKValList="getsearchSKValList($event)"> <!-- 主体内容区域 --> <div slot="mainContent" class="main-content" id="MainContent"> @@ -125,7 +129,7 @@ :before-close="handleVideoClose" custom-class="monitor-player-dialog" :modal-append-to-body="false"> <div class="video-box"> <Video id="myVideo" class="自定义" controls autoplay="true" loop poster="../assets/img/E0531.jpg"> <source src="../../../public/videos/monitor-test.mp4" type="video/mp4"> <!-- <source src="../../../public/videos/monitor-test.mp4" type="video/mp4"> --> </Video> </div> </el-dialog> @@ -134,6 +138,7 @@ <script> import { getSignSituationList, getExamScoreList, getExamList, getLatestExam } from "@/api/home/index" import { logout } from "@/api/user" import { EventBus } from "@/utils/EventBus" @@ -453,6 +458,28 @@ handleVideoClose () { this.$store.commit("SET_ISSHOWVIDEODIALOG", false) }, handleLogout () { this.$confirm('确定要退出登录吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { logout().then(() => { this.$store.commit('SET_TOKEN', '') this.$store.commit('SET_USER_INFO', {}) localStorage.removeItem('token') localStorage.removeItem('userInfo') this.$router.push({ path: '/login' }) }).catch(() => { this.$store.commit('SET_TOKEN', '') this.$store.commit('SET_USER_INFO', {}) localStorage.removeItem('token') localStorage.removeItem('userInfo') this.$router.push({ path: '/login' }) }) }).catch(() => {}) } } } @@ -463,7 +490,38 @@ position: relative; width: 100vw; height: 100vh; // border: 1px solid white; .logout-btn { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; color: #fff; font-size: 14px; cursor: pointer; transition: all 0.3s ease; &:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); } &:active { transform: translateY(0); } i { font-size: 16px; } } #MainContent { position: absolute;