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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
| <meta name="HandheldFriendly" content="true" />
| <meta name="MobileOptimized" content="320" />
| <title>新凯迪制造云平台</title>
|
| <!-- 引入样式文件 -->
| <link rel="stylesheet" href="../css/vant.css" />
| <!-- 引入 Vue 和 Vant 的 JS 文件 -->
| <script src="../js/vue.min.js"></script>
| <script src="../js/vant.min.js"></script>
|
| <script type="text/javascript" src="../js/jquery-1.6.4.min.js"></script>
| <script type="text/javascript" src="../js/axios.min.js"></script>
| <script type="text/javascript" src="../js/http.js"></script>
|
| <script type="text/javascript" src="../js/global.js"></script>
|
| </head>
| <body>
| <div id="app">
|
| <div class="body">
|
|
| <van-sticky>
| <van-nav-bar style="z-index: 1000;" :left-arrow='isLeftArrow' :title="title" @click-right="onClickRight">
| <template #right>
| <van-popover placement="bottom-end" :offset="[13,8]" v-model="showPopover" trigger="click"
| :actions="actions" @select="onSelect">
| <template #reference>
| <van-badge :content="10" max="99">
| <van-icon name="bars" size='20' color='#fff' />
| </van-badge>
| </template>
| </van-popover>
| </template>
| </van-nav-bar>
| </van-sticky>
|
|
| </div>
|
|
| <van-overlay :show="overlayShow" @click="overlayShow=false" />
|
|
| </div>
| </body>
| <script>
| var app = new Vue({
| el: '#app',
| props: {
| isLeftArrow: {
| type: Boolean,
| default: true,
| },
| title: {
| type: String,
| default: '标题',
| },
| },
| data: function() {
| return {
|
| sheetShow: false,
| overlayShow: false,
| showPopover: false,
| actions: [{
| icon: 'comment-o',
| text: '安灯响应'
| },
| {
| icon: 'description',
| text: '操作指导'
| },
| {
| icon: 'award-o',
| text: '成品追溯'
| }, {
| icon: 'revoke',
| text: '退出登录'
| },
| ],
|
| }
| },
| created() {
|
| },
| mounted() {
|
| },
| methods: {
| // 顶部右图标点击
| onClickRight() {
| this.overlayShow = true
| },
| // 顶部右图标下拉选择
| onSelect(action) {
| if (action.text === '操作指导') {
| topPopoverClick('操作指导')
| } else if (action.text === '成品追溯') {
| topPopoverClick('成品追溯')
| } else if (action.text === '退出登录') {
| topPopoverClick('退出登录')
| }
| this.overlayShow = false
| },
| }
| })
| </script>
| <style type="text/css">
|
| .van-nav-bar__arrow {
| color: #fff !important;
| }
|
| .van-nav-bar__content {
| background-color: #2651d8;
| height: 44px;
| }
|
| .van-nav-bar__title {
| color: #fff;
| letter-spacing: 2px;
| }
|
| .van-nav-bar__right {
| padding: 0;
| margin-right: 16px;
| }
| </style>
|
| </html>
|
|
