forked from click33/Sa-Admin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
231 lines (207 loc) · 6.76 KB
/
main.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #EEE;
}
.app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.content-box {
margin: 1em;
padding: 1em;
background-color: #FFF;
color: #666;
}
.el-tag{border-radius: 1px;}
/*800之下*/
@media(max-width: 800px) {
.kapian {
width: 100% !important;
margin-right: 0px !important;
}
.saoma {
display: none;
}
}
</style>
</head>
<body>
<div class="app">
<div class="content-box">
<div style="padding: 1em; border-left: 5px #2D8CF0 solid; background-color: #EEE;">
<big><big>Welcome to SA-后台模板 </big></big>
<span style="display: inline-block; margin-left: 1em; color: #888;"> —— 一个基于iframe的多窗口后台模板</span>
</div>
</div>
<div class="content-box">
<div class="saoma" style="width: 20%; float: left; margin-right: 4%;">
<el-divider content-position="left">
<big><big>移动端扫码体验</big></big>
</el-divider>
<div style="text-align: center;">
<img src="sa-resources/saoma.png" style="width: 80%; ">
</div>
</div>
<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
<el-divider content-position="left">
<big><big>SA-ADMIN</big></big>
</el-divider>
<div style="font-size: 0.9em; line-height: 1.6em;">
<p>
虽然已经用过不少优秀的后台模板，但是一直都感觉不尽完美，于是在经过激烈的思想斗争后，我决定牺牲五一假期，亲自做一个尝试一下，
一来正好给以后自己的项目中使用，二来也算是为开源界做一点自己的贡献吧
</p>
<br>
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
<b>QQ群：</b>
<el-link type="primary" href="https://jq.qq.com/?_wv=1027&k=5DHN5Ib" target="_blank">782974737 点击加入</el-link>
</li>
<li>
<b>码云地址：</b>
<el-link type="primary" href="https://gitee.com/sz6/sa-admin" target="_blank">https://gitee.com/sz6/sa-admin</el-link>
</li>
<li>
<b>GitHub地址：</b>
<el-link type="primary" href="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/shengzhang666/sa-admin" target="_blank">https://github.com/shengzhang666/sa-admin</el-link>
</li>
<li>
开源不易，求鼓励，给个star吧
</li>
</ul>
</div>
</div>
<div class="kapian" style="width: 35%; float: left;">
<el-divider content-position="left">
<big><big>技术选型</big></big>
</el-divider>
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
<el-link type="primary" href="https://cn.vuejs.org/" target="_blank">JS引擎：Vue @2.6.10</el-link>
</li>
<li>
<el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">UI框架：Element-UI @2.8.2</el-link>
</li>
<li>
<el-link type="primary" href="https://layer.layui.com/" target="_blank">web弹层框架：layer @3.1.1</el-link>
</li>
<li>
<el-link @click="meile">没了</el-link>
</li>
<li>
以上几个框架即使你都没接触过，只要你阅读以下文档，也可以快速上手
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<div class="content-box">
<el-divider content-position="left">
<big><big>功能介绍</big></big>
</el-divider>
<div class="kapian" style="font-size: 0.9em; line-height: 1.6em;">
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
架构：无后台代码，纯html模板，可以方便的适配任何后端语言
</li>
<li>
菜单树：支持一、二、三级菜单
</li>
<li>
折叠：
可以折叠或收缩菜单，在窗口变化时也会自动监听根据窗口大小折叠或收缩菜单，自动响应式
</li>
<li>
卡片：
可自动堆积卡片，与菜单双向关联，在卡片标签右击可以：刷新、关闭、关闭其它、关闭所有、新窗口打开
</li>
<li>
主题：目前保留四种主题：深蓝、墨绿、银灰、黑绿结合（切换主题时，可自动保存你的喜好，下次打开时仍然有效）
</li>
<li>
全屏：点击进入全屏/取消全屏
</li>
<li>
功能不断更新中... 你有好的想法也可以告诉我，加群一起交流吧
</li>
<li>
使用说明，
<a href="javascript:;" @click="openDoc">见文档</a>
</li>
</ul>
</div>
</div>
<div class="content-box">
<el-divider content-position="left">
<big><big>更新日志</big></big>
</el-divider>
<div class="kapian" style="font-size: 0.9em; line-height: 1.6em;">
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
<b> <el-tag size="mini">版本 v1.0.2</el-tag></b>
2019-5-14
</li>
<li>添加文章管理模板(wangEditor富文本编辑器)</li>
<li>改写了表格里按钮的样式，更鲜艳，增加点击感</li>
<li>菜单列表里可以指定is_show=false，使菜单成为隐藏菜单</li>
<li>
重写了一些接口，可以更加方便的与你的系统集成
</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.1</el-tag></b>
2019-5-5
</li>
<li>
修复周日显示周0的bug
</li>
<li>
主题更换时高亮显示，方便区分
</li>
<li>增加三级菜单支持</li>
<div><br></div>
<li>
<b><el-tag size="mini">版本 v1.0.0</el-tag></b>
2019-5-2
</li>
<li>第一个版本出炉</li>
<li>功能持续更新中...</li>
</ul>
</div>
</div>
<br><br>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el: '.app',
data: {
},
methods: {
// 没了
meile: function() {
this.$message({
message: '没了还点',
type: 'warning'
});
},
// 显示文档页面
openDoc: function() {
parent.sp.selectMenu(11);
}
}
})
</script>
</body>
</html>