| | |
| | | <template> |
| | | <div class="login-container"> |
| | | <div class="login-container" :key="once"> |
| | | <div class="topPanel"> |
| | | <div class="topPanelCont"> |
| | | <div class="topTit"> |
| | |
| | | <div>安全风险预警监测系统</div> |
| | | </div> |
| | | <div class="userInfo"> |
| | | <div @click="onScreenfullClick" style="margin-right: 15px;cursor: pointer"> |
| | | <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | </div> |
| | | <div class="avator"> |
| | | <img src="../../assets/menu/admin.png" /> |
| | | <div>admin</div> |
| | |
| | | <img class="iconImg" src="../../assets/menu/icon8.png" /><img class="bgImg" src="../../assets/menu/card8.png" /></div |
| | | ></el-col> |
| | | <el-col :span="6"> |
| | | <div class="grid-content" v-throttle @click="render('5')"> |
| | | <div class="grid-content" v-throttle @click="toRiskPlatform"> |
| | | <div class="itemTit">安全风险综合 <br />预警预报平台</div> |
| | | <img class="iconImg" src="../../assets/menu/icon1.png" /> |
| | | <img class="bgImg" src="../../assets/menu/card1.png" /> |
| | |
| | | ></el-col> |
| | | <el-col :span="9" |
| | | ><div class="grid-content grid-content-3" @click="render('1')"> |
| | | <div class="itemTit">基础数据权限管理系统</div> |
| | | <div class="itemTit">安全基础信息系统</div> |
| | | <img class="iconImg" src="../../assets/menu/icon11.png" /><img class="bgImg" src="../../assets/menu/card11.png" /></div |
| | | ></el-col> |
| | | </el-row> |
| | |
| | | import { ElMessageBox } from 'element-plus/es'; |
| | | import { useLoginApi } from '/@/api/login'; |
| | | import { useI18n } from 'vue-i18n'; |
| | | import screenfull from 'screenfull'; |
| | | import router from '../../router' |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface LoginState { |
| | |
| | | isScan: boolean; |
| | | count: number; |
| | | projectId: string; |
| | | once: number; |
| | | } |
| | | |
| | | export default defineComponent({ |
| | |
| | | tabsActiveName: 'account', |
| | | isScan: false, |
| | | count: 0, |
| | | projectId: '1' |
| | | projectId: '1', |
| | | once: 0, |
| | | isScreenfull: false |
| | | }); |
| | | // 获取布局配置信息 |
| | | const getThemeConfig = computed(() => { |
| | |
| | | state.projectId = value; |
| | | renderMenu(); |
| | | }; |
| | | |
| | | // 全屏点击时 |
| | | const onScreenfullClick = () => { |
| | | if (!screenfull.isEnabled) { |
| | | ElMessage.warning('暂不不支持全屏'); |
| | | return false; |
| | | } |
| | | screenfull.toggle(); |
| | | screenfull.on('change', () => { |
| | | if (screenfull.isFullscreen) state.isScreenfull = true; |
| | | else state.isScreenfull = false; |
| | | }); |
| | | }; |
| | | // 去风险大屏 |
| | | const toRiskPlatform = ()=>{ |
| | | router.push({ |
| | | name: "bigDataScreen" |
| | | }); |
| | | } |
| | | const throttle = (renderMenu: any, delay: number) => { |
| | | let flag = true; |
| | | let count = 0; |
| | |
| | | // }; |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | state.once += 1; |
| | | NextLoading.done(); |
| | | // loginBg(); |
| | | // loginApp() |
| | |
| | | render, |
| | | logoMini, |
| | | onLoginOut, |
| | | toRiskPlatform, |
| | | onScreenfullClick, |
| | | loginIconTwo, |
| | | getThemeConfig, |
| | | ...toRefs(state) |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | background: url('../../assets/menu/bg_home1.jpg') no-repeat center; |
| | | background: url('../../assets/menu/bg_home.jpg') no-repeat center; |
| | | .topPanel { |
| | | position: absolute; |
| | | width: 100%; |
| | |
| | | |
| | | .grid-content { |
| | | border-radius: 10px; |
| | | height: 234px; |
| | | height: calc((100vh - 240px) / 3); |
| | | padding: 32px; |
| | | position: relative; |
| | | background-image: linear-gradient(135deg, #00c0f5, #44b1ff); |
| | | background: #007BE5; |
| | | overflow: hidden; |
| | | cursor: pointer; |
| | | transition: 0.3s; |
| | |
| | | line-height: 36px; |
| | | height: 40%; |
| | | font-family: 'PingFang SC'; |
| | | font-weight: lighter; |
| | | font-weight: bolder; |
| | | letter-spacing: 1px; |
| | | color: #fff; |
| | | margin-bottom: 25px; |
| | | } |