111 lines
2.8 KiB
Vue
111 lines
2.8 KiB
Vue
<!--
|
|
* @Author: your name
|
|
* @Date: 2023-01-05 16:04:29
|
|
* @LastEditTime: 2023-01-30 15:44:49
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: \lz_web_new\src\views\lz\home\layout\dialogModular.vue
|
|
-->
|
|
<template>
|
|
<div class="modelDialogBox">
|
|
<el-dialog v-model="dialogVisible" title="系统模块" width="800px" :show-close="false" :center="true"
|
|
:before-close="handleClose">
|
|
<ul class="modularList">
|
|
<li @click="gotoPage('/serviceManagement')">
|
|
<div class="itemBG">
|
|
<div>
|
|
<img src="@/assets/images/ydImg/qwzx.png" />
|
|
</div>
|
|
<div>勤务中心</div>
|
|
</div>
|
|
</li>
|
|
<li @click="gotoPage('/warningCenters')">
|
|
<div class="itemBG">
|
|
<div>
|
|
<img src="@/assets/images/ydImg/yjzx.png" />
|
|
</div>
|
|
<div>预警中心</div>
|
|
</div>
|
|
</li>
|
|
<li @click="gotoPage('/taskCenters')">
|
|
<div class="itemBG">
|
|
<div>
|
|
<img src="@/assets/images/ydImg/rwzx.png" />
|
|
</div>
|
|
<div>任务中心</div>
|
|
</div>
|
|
</li>
|
|
<li @click="gotoPage('/editPassword')">
|
|
<div class="itemBG">
|
|
<div>
|
|
<img src="@/assets/images/ydImg/ht.png" />
|
|
</div>
|
|
<div>前往后台</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { defineEmits } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
const emit = defineEmits(["modularShowFn"]);
|
|
const dialogVisible = ref(true);
|
|
const router = useRouter();
|
|
function handleClose() {
|
|
emit("modularShowFn", false);
|
|
}
|
|
// 跳转页面
|
|
function gotoPage(url) {
|
|
router.replace(url);
|
|
handleClose()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dialog-footer button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
ul.modularList {
|
|
overflow: hidden;
|
|
|
|
li {
|
|
text-align: center;
|
|
float: left;
|
|
width: 25%;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
height: 180px;
|
|
|
|
.itemBG {
|
|
margin: 0 auto;
|
|
width: 140px;
|
|
height: 180px;
|
|
background: url("~@/assets/images/ydImg/bg.png") no-repeat center center;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.modelDialogBox .el-dialog {
|
|
margin-top: 20vh;
|
|
}
|
|
|
|
.modelDialogBox .el-dialog__header {
|
|
border-bottom: 2px solid;
|
|
border-top: 2px solid;
|
|
border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #2FD5FE 50%, rgba(0, 216, 247, 0) 99%) 2 2 2 2;
|
|
background: linear-gradient(90deg, rgba(7, 28, 76, .3), rgba(3, 70, 156, .9), rgba(7, 28, 76, .3));
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|