添加用户管理等模板

lineCode · May 2, 2019 · 580b652 · 580b652
1 parent 9b2a20e
commit 580b652
Show file tree

Hide file tree

Showing 24 changed files with 1,116 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -153,7 +153,7 @@
 
  <!-- 第三杠 -->
  <div class="nav-right-3">
- <span v-for="page in pageList" >
+ <span v-for="page in pageList" :key="page.id">
  <!-- <iframe :src="page.url" :class=" 'iframe' + page.id " v-show="page == nativePage"></iframe> 用v-show会造成每次切换卡片进度条归零的bug -->
  <iframe :src="page.url" :class=" 'iframe' + page.id " :style="page == nativePage ? 'z-index: 101' : null"></iframe>
  </span>

diff --git a/main.html b/main.html
@@ -102,6 +102,9 @@
  <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="http:https://layer.layui.com/" target="_blank">web弹层框架：layer @3.1.1</el-link>
+ </li>
  <li>
  <el-link @click="meile">没了</el-link>
  </li>
@@ -123,18 +126,14 @@
  </li>
 
  <li>
- 一个基于iframe的多窗口后台模板
+ 架构：前后台分离模式，但并不是SPA(单页应用)，而是基于iframe，—— 一个基于iframe的多窗口后台模板 
  </li>
  <li>
  菜单树：支持一二级菜单，暂不支持更多
  </li>
  <li>
  折叠：
- 点击可以折叠或收缩菜单，在窗口变化时也会自动监听根据窗口大小折叠或收缩菜单
- </li>
- <li>
- 刷新：
- 点击可刷新当前操作的菜单页
+ 可以折叠或收缩菜单，在窗口变化时也会自动监听根据窗口大小折叠或收缩菜单，自动响应式
  </li>
  <li>
  卡片：

diff --git a/sa-html/404.html b/sa-html/404.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>404</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+ <style type="text/css">
+ *{padding: 0px;margin: 0px;}
+ html{
+ height: 100%;
+ overflow: hidden;
+ }
+ body{
+ background-color: #AAA;
+ background-size: 100% 100%;
+ background-image: url(../static/img/404.jpg);
+ }
+ .xiaoxi{
+ display: block;
+ position: absolute;
+ top: calc(75% - 20px);
+ left: calc(50% - 50px);
+ width: 100px;
+ height: 40px;
+ color: #FFF;
+ font-size: 14px;
+ text-decoration: none;
+ text-align: center;
+ line-height: 40px;
+ border-radius: 2px;
+ border: 0px #CCC solid;
+ background-color:rgba(255,255,255,0.3);
+ }
+ .xiaoxi:hover{color: #DDD;}
+
+ </style>
+ </head>
+ <body>
+ <a href="javascript: parent.sp.selectMenu(0);" class="xiaoxi">返回首页</a>
+ </body>
+</html>
diff --git a/sa-html/500.html b/sa-html/500.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>404</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+ <style type="text/css">
+ *{padding: 0px;margin: 0px;}
+ html{
+ height: 100%;
+ overflow: hidden;
+ }
+ body{
+ background-color: #AAA;
+ background-size: 100% 100%;
+ background-image: url(../static/img/500.jpg);
+ }
+ .xiaoxi{
+ display: block;
+ position: absolute;
+ top: calc(75% - 20px);
+ left: calc(50% - 50px);
+ width: 100px;
+ height: 40px;
+ color: #FFF;
+ font-size: 14px;
+ text-decoration: none;
+ text-align: center;
+ line-height: 40px;
+ border-radius: 2px;
+ border: 0px #CCC solid;
+ background-color:rgba(255,255,255,0.3);
+ }
+ .xiaoxi:hover{color: #DDD;}
+
+ </style>
+ </head>
+ <body>
+ <a href="javascript: parent.sp.selectMenu(0);" class="xiaoxi">返回首页</a>
+ </body>
+</html>
diff --git a/sa-html/data-list.js b/sa-html/data-list.js
@@ -0,0 +1,172 @@
+// 模拟数据
+var dataList = [{
+ "id": 12001,
+ "username": "省长",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/2.png?x-oss-process=style/yasuo",
+ "tell": '这人懒，啥也没有留下',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112799839261454077.jpeg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/15491128027001242326540.jpeg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112804446367923451.jpeg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112806223866151639.jpeg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/15491128087691462190017.jpeg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "账号注册",
+ "create_time": "2019-02-09",
+
+ },
+ {
+ "id": 12002,
+ "username": "小言",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/3.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486414241411760471758.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641424112923395306.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641424124307645243.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486414241301079583057.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486414241351214293219.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641424156586322884.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "账号注册",
+ "create_time": "2019-02-11",
+
+ },
+ {
+ "id": 12003,
+ "username": "旧城人凉",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/4.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/15487010332581464190738.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/15487010332521119691172.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/15487010332621622298950.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/15487010332711954721691.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/1548701033275197287565.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/1548701033277157114772.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/29/15487010332801673263633.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "账号注册",
+ "create_time": "2019-02-11",
+
+ },
+ {
+ "id": 12004,
+ "username": "苦巷深桥",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/5.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641148401699190597.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641148403368860642.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641148447490522299.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486411484491404458881.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486411484521613746711.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548641148452436812749.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "账号注册",
+ "create_time": "2019-02-13",
+
+ },
+ {
+ "id": 12005,
+ "username": "三重门",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/6.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548639217745410394722.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486392177481726898108.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486392177473938812.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486392177582114379277.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486392177631301168776.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "邮箱注册",
+ "create_time": "2019-02-13",
+
+ },
+ {
+ "id": 12006,
+ "username": "红尘几度欢颜笑",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/7.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486396582311677880214.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486396582112088482959.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486396582201751882045.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548639658226225134395.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486396582351948796029.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548639658257423792653.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548639658260413362409.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486396582701933849474.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "邮箱注册",
+ "create_time": "2019-03-13",
+ },
+ {
+ "id": 12007,
+ "username": "许你春秋",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/8.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548638841214290095149.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548638841227809145772.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548638841240270928767.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548638841244906005971.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/154863884124713283459.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "邮箱注册",
+ "create_time": "2019-03-16",
+ },
+ {
+ "id": 12008,
+ "username": "李灵涵",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/9.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486374854182024752471.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637485458718538949.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637485455211731533.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637485460724239093.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486374854672002390350.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637485473210846647.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637485471190844084.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "邮箱注册",
+ "create_time": "2019-03-18",
+ },
+ {
+ "id": 12009,
+ "username": "樱桃",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/10.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637231837487154029.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/15486372318271509628451.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637231848392706841.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637231857929283080.jpg?x-oss-process=style/yasuo",
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548637231873648635582.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "邮箱注册",
+ "create_time": "2019-03-22",
+ },
+ {
+ "id": 12010,
+ "username": "碘盐",
+ "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/1.png?x-oss-process=style/yasuo",
+ "tell": '人懒，啥也没留',
+ "sex": "女",
+ "photo_list": [
+ "http:https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548635034223276859883.jpg?x-oss-process=style/yasuo"
+ ],
+ "create_type": "手机号呢注册",
+ "create_time": "2019-03-22",
+ },
+]
diff --git a/sa-html/sa-doc.html b/sa-html/sa-doc.html
@@ -103,15 +103,14 @@
  <b>以上示例在 my-code.js中 都有相应的注释说明，如何还有不懂的地方，可以加群问我（群链接在首页）</b>
  </li>
 
- <li>
+ <!-- <li>
  <b>为什么只有个框架？没有一些具体的增删改查页面？</b>
  <p>
  一个合适的模板，如果和我们的后台接口高度匹配的情况下，确实可以大大加快我们的开发速度，
  但是考虑到每个人每个项目的代码风格千差万别，不可能做出一个能够适应所有项目的前台模板，事实上没有任何一个模板能够做到这件事，
  所以精力有限的我只能将这件吃力不讨好的事暂缓一段时间，先写出一个页面框架，可以直接上手应用在项目中（这也是框架主要对你能够起作用的地方）
-
  </p>
- </li>
+ </li> -->
 
  </ol>
  </div>