liufan9527
2024-11-22 7ed3f40b4e8feaac97e90008649fcf047eabe1f9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
  <div class="door">
    <div class="item" v-for="(item, index) in doorList" :key="index">
      <div class="title">
        <span>
          <img src="../assets/img/home/door_icon.png" alt="" />
        </span>
        <span>{{ item.name }}</span>
      </div>
      <div
        class="ele"
        v-for="(ele, i) in item.child"
        :key="i"
        @click="routerJump(item.child, ele)"
      >
        {{ ele.name }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      doorList: [
        {
          name: "分系统运行控制",
          child: [
            {
              name: "分系统软件控制",
              url: ""
            },
            {
              name: "推演任务控制",
              url: ""
            },
            {
              name: "分系统状态监控",
              url: ""
            }
          ]
        },
        {
          name: "系统交互管理",
          child: [
            {
              name: "分系统交互管理",
              url: "/home/interactive"
            },
            {
              name: "外部系统接入",
              url: ""
            },
            {
              name: "系统接口管理",
              url: ""
            }
          ]
        },
        {
          name: "系统资源配置",
          child: [
            {
              name: "硬件资源管理",
              url: ""
            },
            {
              name: "软件资源管理",
              url: ""
            }
          ]
        }
      ]
    };
  },
  methods: {
    routerJump(arr, e) {
      if (e.url) {
        this.$router.push(e.url);
        this.$store.dispatch("Tab", arr);
      }
    }
  }
};
</script>
 
<style lang="less" scoped>
.door {
  padding: 0 60px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 554px;
    height: 830px;
    background: url("../assets/img/home/door_bg.png");
    .title {
      position: relative;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 36px;
      color: #4b96dd;
      :nth-child(2) {
        position: absolute;
        top: 4px;
        left: 50px;
      }
    }
    .ele {
      margin: 100px auto;
      width: 456px;
      height: 75px;
      text-align: center;
      line-height: 75px;
      background: url("../assets/img/home/door_item.png");
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
    }
  }
}
</style>