|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="full-security" v-if="data">
|
|
|
+ <div class="full-security" v-if="data && !isFull">
|
|
|
<div class="btns">
|
|
|
<span v-for="v in views" @click="active = v" class="fun-ctrl">
|
|
|
{{ v.name }}
|
|
@@ -9,24 +9,54 @@
|
|
|
<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" />
|
|
|
+ <!-- <component :is="active.view" v-if="mdata" /> -->
|
|
|
+
|
|
|
+ <template v-if="mdata">
|
|
|
+ <div class="item" v-for="item in mdata.items">
|
|
|
+ <h3 class="title">{{ item.title }}</h3>
|
|
|
+ <div class="content">
|
|
|
+ <p v-for="c in item.content" :class="{ link: c.link, zk: kzs.includes(c) }">
|
|
|
+ {{ kzs.includes(c) ? c.zk : c.title }}
|
|
|
+ <Link :name="c.link" v-if="c.link" :fly-link="flyLink" />
|
|
|
+ <span
|
|
|
+ class="mspan fun-ctrl"
|
|
|
+ v-else-if="c.zk"
|
|
|
+ @click="
|
|
|
+ kzs.includes(c) ? (kzs = kzs.filter((i) => i !== c)) : kzs.push(c)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ kzs.includes(c) ? "收起" : "更多" }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</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";
|
|
|
+import { computed, reactive, ref } from "vue";
|
|
|
+import { data, flyLink as flyLinkRaw } from "./store";
|
|
|
+import Link from "./link.vue";
|
|
|
+
|
|
|
+const isFull = ref(false);
|
|
|
+const flyLink = async (name: string) => {
|
|
|
+ isFull.value = true;
|
|
|
+ await flyLinkRaw(name);
|
|
|
+ isFull.value = false;
|
|
|
+};
|
|
|
|
|
|
+const kzs = ref<any[]>([]);
|
|
|
const views = reactive([
|
|
|
- { name: "职责要求", view: Job },
|
|
|
- { name: "场所情况", view: Site },
|
|
|
- { name: "勤务要求", view: Duty },
|
|
|
+ { name: "职责要求", view: "0" },
|
|
|
+ { name: "场所情况", view: "1" },
|
|
|
+ { name: "勤务要求", view: "2" },
|
|
|
]);
|
|
|
const active = ref<typeof views[0]>();
|
|
|
+const mdata = computed(() => {
|
|
|
+ return active.value && data[Number(active.value?.view)];
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -85,4 +115,68 @@ const active = ref<typeof views[0]>();
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.c-item {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.item:not(:last-child) .content {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.jb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.89em;
|
|
|
+ color: #9e9e9e;
|
|
|
+
|
|
|
+ &.link {
|
|
|
+ color: #fff;
|
|
|
+ margin: 6px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.zk {
|
|
|
+ white-space: pre-line;
|
|
|
+ span {
|
|
|
+ float: none;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|