|
@@ -0,0 +1,88 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="full-security" v-if="data">
|
|
|
|
+ <div class="btns">
|
|
|
|
+ <span v-for="v in views" @click="active = v" class="fun-ctrl">
|
|
|
|
+ {{ v.name }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="view" v-if="active">
|
|
|
|
+ <ui-icon type="close" ctrl class="close" @click="active = void 0" />
|
|
|
|
+ <h2>{{ active.name }}</h2>
|
|
|
|
+ <component :is="active.view" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import { reactive, ref } from "vue";
|
|
|
|
+import { data } from "./store";
|
|
|
|
+import Duty from "./duty.vue";
|
|
|
|
+import Job from "./job.vue";
|
|
|
|
+import Site from "./site.vue";
|
|
|
|
+
|
|
|
|
+const views = reactive([
|
|
|
|
+ { name: "职责要求", view: Job },
|
|
|
|
+ { name: "场所情况", view: Site },
|
|
|
|
+ { name: "勤务要求", view: Duty },
|
|
|
|
+]);
|
|
|
|
+const active = ref<typeof views[0]>();
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.full-security {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ inset: 0;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+
|
|
|
|
+ > * {
|
|
|
|
+ pointer-events: all;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.btns {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ transform: translate(-50%, 0);
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin: 0 35px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.9);
|
|
|
|
+ width: 110px;
|
|
|
|
+ height: 85px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 85px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.view {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 24px;
|
|
|
|
+ top: 24px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.9);
|
|
|
|
+ bottom: 24px;
|
|
|
|
+ width: 536px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ padding: 30px;
|
|
|
|
+
|
|
|
|
+ .close {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 15px;
|
|
|
|
+ right: 15px;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ > h2 {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|