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
| <script setup lang="ts">
|
| import { ref } from "vue";
| import { useRouter } from "vue-router";
| const router = useRouter();
| const menuList = ref([
| {
| name: "参数设置",
| icon: "bookmark-o",
| path: "/params"
| },
| {
| name: "调整截距",
| icon: "expand-o",
| path: "/adjust"
| },
| {
| name: "重量校准",
| icon: "idcard",
| path: "/weight"
| },
| {
| name: "仪器维护",
| icon: "shield-o",
| path: "/maint"
| }
| ]);
| function itemClick(page: string){
| router.push(`${page}`);
| }
| </script>
|
| <template>
| <div class="app">
| <div class="menu-box">
| <div v-for="(item,index) in menuList" class="item" :key="index" @click.stop="itemClick(item.path)">
| <span>
| <van-icon :name="item.icon" color="white" size="40"/>
| </span>
| <span class="ml-1">{{item.name}}</span>
| </div>
|
|
|
|
| </div>
|
| </div>
|
| </template>
|
| <style scoped lang="less">
| .app{
| width: 100vw;
| height: 100%;
| display: flex;
| align-items: center;
| justify-content: center;
| .menu-box{
| width: 60%;
| height: 70%;
| display: flex;
| flex-wrap: wrap;
| gap: 10px;
| row-gap: 10px;
| .item{
| width: 49%;
| height: 49%;
| border-radius: 10px;
| background: var(--base-green);
| display: flex;
| justify-content: center;
| align-items: center;
| color: white;
| font-size: 32px;
| font-weight: bold;
| }
| }
| }
|
| </style>
|
|
