<!--
 * @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>
