ydui移动端框架
# ydui
一只基于Vue2.x的移动端&微信UI。 - YDUI Touch (opens new window)
# 示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<title>首页</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- 使用rem，需另外引入ydui.flexible.js自适应类库 -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css">
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.rem.js"></script>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div id="app" style="height: 100%;">
<yd-layout>
<yd-navbar slot="navbar" bgcolor="#000">
<a slot="left" @click="showNav=true" >
<yd-icon name="type"></yd-icon>
</a>
<img slot="center" src="images/logo.png"/>
<a href="tel:02061396139" slot="right">
<yd-icon name="phone2"></yd-icon>
</a>
</yd-navbar>
<img src="images/1.jpg" style="width:100%;"/>
<yd-popup v-model="showNav" position="left" width="60%">
<div style="display:flex; justify-content:center;margin-top:10px; ">
<yd-icon name="error-outline" @click.native="showNav = false"></yd-icon>
</div>
<yd-cell-group>
<yd-cell-item arrow="true" type="a" href="./quanli2.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">美丽权利</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./pinpai3.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">品牌历程</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./youshi3.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">品牌优势</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./rongyu4.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">医院荣誉</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./fencai6.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">品牌丰采</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./teise7.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">特色技术</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./jianjie8.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">品牌简介</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./doctor9.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">三好医生团</span>
<span slot="right"></span>
</yd-cell-item>
<yd-cell-item arrow="true" type="a" href="./contact10.html">
<yd-icon slot="icon" name="checkoff" size=".42rem"></yd-icon>
<span slot="left">联系我们</span>
<span slot="right"></span>
</yd-cell-item>
</yd-cell-group>
</yd-popup>
<div style="display:flex;justify-content: center; color:#000;">
<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备10106524号</a> |
<a href="https://beian.miit.gov.cn/" target="_blank">粤卫网审(2012)120号</a>
</div>
<yd-backtop></yd-backtop>
<yd-tabbar slot="tabbar">
<yd-tabbar-item title="首页" link="/" type="a" active>
<yd-icon name="home" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="在线咨询" type="a" link="javascript:openZoosUrl();">
<yd-icon name="weixin" slot="icon"></yd-icon>
</yd-tabbar-item>
<yd-tabbar-item title="拨打电话" type="a" link="tel:02061396139">
<yd-icon name="phone1" slot="icon"></yd-icon>
</yd-tabbar-item>
</yd-tabbar>
</yd-layout>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
showNav: false, // 显示侧边导航
},
created() {
this.loading();
},
mounted() {
this.closeLoading();
},
methods: {
loading: function () {
this.$dialog.loading.open('加载中...');
console.log("loading");
},
closeLoading() {
this.$dialog.loading.close();
console.log("closeLoading");
},
}
})
</script>
<script language="javascript" type="text/javascript" src="https://gmzx.zoosnet.net/JS/LsJS.aspx?siteid=LGU31671888&float=0"></script>
</body>
</html>
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
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