ホーム エクスプローラ ヘルプ
登録 サインイン
chenzhiguang
/
SZGD
1
0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

upload

tremble 3 年 前
コミット
5ea6dc540e
78 ファイル変更、2443 行追加、0 行削除
分割表示 差分情報を表示
  1. 159 0
      index.html
  2. 787 0
      static/css/app.css
  3. 772 0
      static/css/app.less
  4. BIN
      static/images/adds/1.jpg
  5. BIN
      static/images/adds/2.jpg
  6. BIN
      static/images/adds/3.jpg
  7. BIN
      static/images/adds/4.jpg
  8. BIN
      static/images/adds/4dart.jpg
  9. BIN
      static/images/adds/4dart2.jpg
  10. BIN
      static/images/adds/5.jpg
  11. BIN
      static/images/back.png
  12. BIN
      static/images/btn-pic-list.png
  13. BIN
      static/images/btn-pic-take.png
  14. BIN
      static/images/icon/1保存成功.png
  15. BIN
      static/images/icon/error.png
  16. BIN
      static/images/icon/face-1.png
  17. BIN
      static/images/icon/face-2.png
  18. BIN
      static/images/icon/face-3.png
  19. BIN
      static/images/icon/face-4.png
  20. BIN
      static/images/icon/fail.png
  21. BIN
      static/images/icon/touch-close.png
  22. BIN
      static/images/icon/touch-save.png
  23. BIN
      static/images/icon/used-stop.png
  24. BIN
      static/images/icon/used-timeout.png
  25. BIN
      static/images/icon/used.png
  26. BIN
      static/images/icon/从有人控制到获得控制.png
  27. BIN
      static/images/mypic.png
  28. BIN
      static/images/styles-flag/1.png
  29. BIN
      static/images/styles-flag/2.png
  30. BIN
      static/images/styles-flag/3.png
  31. BIN
      static/images/styles-flag/4.png
  32. BIN
      static/images/styles-flag/5.png
  33. BIN
      static/images/styles/1-active.png
  34. BIN
      static/images/styles/1.png
  35. BIN
      static/images/styles/2-active.png
  36. BIN
      static/images/styles/2.png
  37. BIN
      static/images/styles/3-active.png
  38. BIN
      static/images/styles/3.png
  39. BIN
      static/images/styles/4-active.png
  40. BIN
      static/images/styles/4.png
  41. BIN
      static/images/styles/5-active.png
  42. BIN
      static/images/styles/5.png
  43. BIN
      static/images/styles1/1-active.png
  44. BIN
      static/images/styles1/1.png
  45. BIN
      static/images/styles1/10-active.png
  46. BIN
      static/images/styles1/10.png
  47. BIN
      static/images/styles1/11-active.png
  48. BIN
      static/images/styles1/11.png
  49. BIN
      static/images/styles1/12-active.png
  50. BIN
      static/images/styles1/12.png
  51. BIN
      static/images/styles1/13-active.png
  52. BIN
      static/images/styles1/13.png
  53. BIN
      static/images/styles1/2-active.png
  54. BIN
      static/images/styles1/2.png
  55. BIN
      static/images/styles1/3-active.png
  56. BIN
      static/images/styles1/3.png
  57. BIN
      static/images/styles1/4-active.png
  58. BIN
      static/images/styles1/4.png
  59. BIN
      static/images/styles1/5-active.png
  60. BIN
      static/images/styles1/5.png
  61. BIN
      static/images/styles1/6-active.png
  62. BIN
      static/images/styles1/6.png
  63. BIN
      static/images/styles1/7-active.png
  64. BIN
      static/images/styles1/7.png
  65. BIN
      static/images/styles1/8-active.png
  66. BIN
      static/images/styles1/8.png
  67. BIN
      static/images/styles1/9-active.png
  68. BIN
      static/images/styles1/9.png
  69. BIN
      static/images/switch1.png
  70. BIN
      static/images/switch1_active.png
  71. BIN
      static/images/test.png
  72. 633 0
      static/js/app.js
  73. 52 0
      static/js/config.js
  74. 11 0
      static/public/animate.min.css
  75. 2 0
      static/public/flexible.min.js
  76. 2 0
      static/public/jquery.min.js
  77. 12 0
      static/public/swiper-4.3.5.min.css
  78. 13 0
      static/public/swiper-4.3.5.min.js

+ 159 - 0
index.html
ファイルの表示 

@@ -0,0 +1,159 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+  <meta content="yes" name="apple-mobile-web-app-capable">
 
+  <meta content="yes" name="apple-touch-fullscreen">
 
+  <meta content="black" name="apple-mobile-web-app-status-bar-style">
 
+  <meta content="telephone=no" name="format-detection">
 
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
 
+  <title>苏州广电</title>
 
+  <link rel="stylesheet" type="text/css" href="static/public/animate.min.css" />
 
+  <link rel="stylesheet" type="text/css" href="static/public/swiper-4.3.5.min.css" />
 
+  <link rel="stylesheet" type="text/css" href="static/css/app.css" />
 
+  <script>
 
+    </script>
 
+  <script src="static/public/flexible.min.js" async></script>
 
+
 
+</head>
 
+
 
+<body>
 
+  <div class="app-main">
 
+    <div class="ads-swiper swiper-container">
 
+      <div class="swiper-wrapper"></div>
 
+      <div class="swiper-pagination"></div>
 
+    </div>
 
+    <nav class="nav-menu">
 
+      <ul>
 
+        <li><a href="javascript:;" class="btn-pic-take"></a></li>
 
+        <li><a href="javascript:;" class="btn-pic-list"></a></li>
 
+      </ul>
 
+    </nav>
 
+  </div>
 
+  <div class="app-switch">
 
+    <nav class="swt-style clearfix">
 
+      <a href="javascript:;" data-id='1' class="switch active"></a>
 
+      <div></div>
 
+    </nav>
 
+    <div class="stl-swiper swiper-container">
 
+      <div class="swiper-wrapper">
 
+        <div data-msg="1" class="swiper-slide style-1"></div>
 
+        <div data-msg="2" class="swiper-slide style-2"></div>
 
+        <div data-msg="3" class="swiper-slide style-3"></div>
 
+        <div data-msg="4" class="swiper-slide style-4"></div>
 
+        <div data-msg="5" class="swiper-slide style-5"></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+  <div class="my-pic-list">
 
+    <header>
 
+      <div class="home-nav">
 
+        <a class="btn-back"></a>
 
+      </div>
 
+      <div class="tips">
 
+        相片将于您退出后删除，请尽快保存
 
+      </div>
 
+    </header>
 
+    <article>
 
+      <div class="pic-swiper swiper-container">
 
+        <div class="swiper-wrapper">
 
+          <div class="swiper-slide">
 
+            <!-- <div class="img">
 
+              <img src="static/images/test.png">
 
+            </div>
 
+            <div class="info">
 
+              <div class="time">
 
+                2010年10月10日 18:00:00
 
+              </div>
 
+              <div class="style style-1"></div>
 
+            </div> -->
 
+          </div>
 
+        </div>
 
+        <div class="swiper-scrollbar"></div>
 
+      </div>
 
+    </article>
 
+  </div>
 
+  <div class="app-mask"></div>
 
+  <div class="app-alert">
 
+    <div class="tips"></div>
 
+    <div class="btns">
 
+      <a class="btn-use" href="javascript:;">再次使用</a>
 
+      <a class="btn-link" href="javascript:;">刷新页面</a>
 
+    </div>
 
+  </div>
 
+  <div class="app-view">
 
+    <div class="img"></div>
 
+    <div class="tip">
 
+      <div>
 
+        <div>长按图片保存</div>
 
+        <div>关闭后可在【我的相片】中查看</div>
 
+      </div>
 
+      <span class="close"></span>
 
+    </div>
 
+  </div>
 
+  <div class="app-action-tips">
 
+    <div class="content loading">
 
+      <div class="lds-spinner">
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+      </div>
 
+      <div class="tips"></div>
 
+    </div>
 
+    <div class="content loading-switch">
 
+      <div class="lds-spinner">
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+      </div>
 
+      <div class="tips">正在切换画风</div>
 
+    </div>
 
+    <div class="content face-4">
 
+      <div class="tips">
 
+        将于1秒后拍摄
 
+      </div>
 
+    </div>
 
+    <div class="content face-3">
 
+      <div class="tips">
 
+        将于2秒后拍摄
 
+      </div>
 
+    </div>
 
+    <div class="content face-2">
 
+      <div class="tips">
 
+        将于3秒后拍摄
 
+      </div>
 
+    </div>
 
+    <div class="content face-1">
 
+      <div class="tips">
 
+        快望向你身前的艺术<br>照设备，准备拍照啦
 
+      </div>
 
+    </div>
 
+  </div>
 
+  <script src="static/public/swiper-4.3.5.min.js"></script>
 
+  <script src="static/public/jquery.min.js"></script>
 
+  <script src="static/js/config.js"></script>
 
+  <script src="static/js/app.js"></script>
 
+  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
+</body>
 
+
 
+</html>

+ 787 - 0
static/css/app.css
ファイルの表示 

@@ -0,0 +1,787 @@
 
+/* 静态资源地址 */
 
+*,
 
+*::before,
 
+*::after {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+  outline: 0;
 
+  -webkit-tap-highlight-color: transparent;
 
+}
 
+.clearfix::after {
 
+  content: " ";
 
+  visibility: hidden;
 
+  display: block;
 
+  font-size: 0;
 
+  line-height: 0;
 
+  height: 0;
 
+  clear: both;
 
+}
 
+html,
 
+body {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+html {
 
+  -webkit-text-size-adjust: none;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+body {
 
+  font-size: 14px !important;
 
+}
 
+.animated {
 
+  display: block !important;
 
+}
 
+.app-mask {
 
+  display: none;
 
+  position: fixed;
 
+  left: 0;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  z-index: 100;
 
+  background-color: rgba(0, 0, 0, 0.4);
 
+}
 
+.app-mask.white {
 
+  background-color: rgba(0, 0, 0, 0);
 
+}
 
+.app-alert {
 
+  display: none;
 
+  -webkit-animation-duration: .3s;
 
+          animation-duration: .3s;
 
+  -webkit-animation-delay: .3s;
 
+          animation-delay: .3s;
 
+  position: fixed;
 
+  width: 80vw;
 
+  left: 50%;
 
+  top: 25%;
 
+  margin-left: -40vw;
 
+  border-radius: 12px;
 
+  z-index: 101;
 
+  background: #fff no-repeat center 10%;
 
+  background-size: 20%;
 
+}
 
+.app-alert.timeout {
 
+  background-image: url("../images/icon/used-timeout.png");
 
+}
 
+.app-alert.stop {
 
+  background-image: url("../images/icon/used-stop.png");
 
+}
 
+.app-alert.used {
 
+  background-image: url("../images/icon/used.png");
 
+}
 
+.app-alert.error {
 
+  background-image: url("../images/icon/error.png");
 
+}
 
+.app-alert.fail {
 
+  background-image: url("../images/icon/fail.png");
 
+}
 
+.app-alert.timeout .btns a:last-child,
 
+.app-alert.stop .btns a:last-child,
 
+.app-alert.used .btns a:last-child {
 
+  color: #3EAFFF;
 
+}
 
+.app-alert.error .btns a:last-child,
 
+.app-alert.fail .btns a:last-child {
 
+  color: #F5615F;
 
+}
 
+.app-alert .tips {
 
+  margin-top: 30%;
 
+  margin-bottom: 5%;
 
+  text-align: center;
 
+  color: #888;
 
+  line-height: 1.5;
 
+  font-size: 16px;
 
+}
 
+.app-alert .btns {
 
+  width: 100%;
 
+  font-size: 0;
 
+  border: solid 1px #efefef;
 
+  background: #fff;
 
+  border-bottom-left-radius: 12px;
 
+  border-bottom-right-radius: 12px;
 
+}
 
+.app-alert .btns a {
 
+  display: inline-block;
 
+  width: 50%;
 
+  padding: 5%;
 
+  color: #666;
 
+  text-decoration: none;
 
+  text-align: center;
 
+  font-size: 16px;
 
+  border-right: solid 1px #efefef;
 
+}
 
+.app-view {
 
+  display: none;
 
+  padding: 16px;
 
+  -webkit-animation-duration: .3s;
 
+          animation-duration: .3s;
 
+  -webkit-animation-delay: .3s;
 
+          animation-delay: .3s;
 
+  position: fixed;
 
+  width: 86vw;
 
+  height: 36vh;
 
+  left: 50%;
 
+  top: 35%;
 
+  margin-left: -43vw;
 
+  margin-top: -18vh;
 
+  background-color: #fff;
 
+  border-radius: 12px;
 
+  z-index: 101;
 
+}
 
+.app-view.vertical {
 
+  width: 32vh;
 
+  height: 53vh;
 
+  top: 25%;
 
+  margin-left: -16vh;
 
+}
 
+.app-view.vertical .tip {
 
+  top: 53vh;
 
+}
 
+.app-view.vertical .tip .close {
 
+  bottom: 10vh;
 
+}
 
+.app-view .img,
 
+.app-view img {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.app-view .tip {
 
+  position: absolute;
 
+  top: 36vh;
 
+  left: 0;
 
+  height: 40vh;
 
+  line-height: 40vh;
 
+  width: 100%;
 
+  background: url("../images/icon/touch-save.png") no-repeat center 5%;
 
+  background-size: 20%;
 
+  text-align: center;
 
+  color: #fff;
 
+}
 
+.app-view .tip > div {
 
+  display: inline-block;
 
+  line-height: 1.5;
 
+  font-size: 16px;
 
+}
 
+.app-view .tip .close {
 
+  width: 26px;
 
+  height: 26px;
 
+  position: absolute;
 
+  left: 50%;
 
+  margin-left: -13px;
 
+  bottom: 5vh;
 
+  background: url("../images/icon/touch-close.png") no-repeat center center;
 
+  background-size: 100% 100%;
 
+}
 
+.app-action-tips {
 
+  -webkit-animation-duration: .3s;
 
+          animation-duration: .3s;
 
+  -webkit-animation-delay: .3s;
 
+          animation-delay: .3s;
 
+  display: none;
 
+  position: fixed;
 
+  width: 66vw;
 
+  height: 28vh;
 
+  left: 50%;
 
+  top: 40%;
 
+  margin-left: -33vw;
 
+  margin-top: -14vh;
 
+  z-index: 101;
 
+}
 
+.app-action-tips .content {
 
+  display: none;
 
+  position: relative;
 
+  width: 100%;
 
+  height: 100%;
 
+  color: #fff;
 
+  background-color: rgba(0, 0, 0, 0.7);
 
+  border-radius: 12px;
 
+  background-repeat: no-repeat;
 
+  background-position: 50% 25%;
 
+}
 
+.app-action-tips .content .tips {
 
+  font-size: 18px;
 
+  position: absolute;
 
+  left: 0;
 
+  bottom: 15%;
 
+  width: 100%;
 
+  text-align: center;
 
+}
 
+.app-action-tips .content.face-1 {
 
+  background-image: url("../images/icon/face-1.png");
 
+  background-size: 30%;
 
+}
 
+.app-action-tips .content.face-1 .tips {
 
+  font-size: 16px;
 
+  bottom: 10%;
 
+}
 
+.app-action-tips .content.face-2 {
 
+  background-image: url("../images/icon/face-2.png");
 
+  background-size: 30%;
 
+}
 
+.app-action-tips .content.face-3 {
 
+  background-image: url("../images/icon/face-3.png");
 
+  background-size: 30%;
 
+}
 
+.app-action-tips .content.face-4 {
 
+  background-image: url("../images/icon/face-4.png");
 
+  background-size: 30%;
 
+}
 
+.app-action-tips .content.loading {
 
+  background-color: rgba(255, 255, 255, 0.9);
 
+}
 
+.app-action-tips .content.loading .tips {
 
+  font-size: 15px;
 
+  color: #999999;
 
+}
 
+.app-action-tips .content.loading .lds-spinner {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 30%;
 
+  -webkit-transform: translate(-50%, -30%);
 
+      -ms-transform: translate(-50%, -30%);
 
+          transform: translate(-50%, -30%);
 
+}
 
+.app-action-tips .content.loading-switch .tips {
 
+  font-size: 15px;
 
+  color: #ffff;
 
+}
 
+.app-action-tips .content.loading-switch .lds-spinner {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 30%;
 
+  -webkit-transform: translate(-50%, -30%);
 
+      -ms-transform: translate(-50%, -30%);
 
+          transform: translate(-50%, -30%);
 
+}
 
+.app-main {
 
+  width: 100%;
 
+  height: 55vh;
 
+}
 
+.app-main .ads-swiper {
 
+  height: 4.5rem;
 
+}
 
+.app-main .ads-swiper .swiper-slide {
 
+  text-align: center;
 
+  font-size: 18px;
 
+  background: #fff;
 
+  /* Center slide text vertically */
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: -webkit-flex;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+  -ms-flex-pack: center;
 
+  -webkit-justify-content: center;
 
+  justify-content: center;
 
+  -webkit-box-align: center;
 
+  -ms-flex-align: center;
 
+  -webkit-align-items: center;
 
+  align-items: center;
 
+}
 
+.app-main .ads-swiper .swiper-slide img {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.app-main .ads-swiper .swiper-pagination-bullet-active {
 
+  background: #fff;
 
+}
 
+.app-main .nav-menu {
 
+  box-shadow: 0 0.03rem 10px #efefef;
 
+}
 
+.app-main .nav-menu ul {
 
+  padding: 0.3rem 0;
 
+  list-style: none;
 
+  font-size: 0;
 
+}
 
+.app-main .nav-menu li {
 
+  display: inline-block;
 
+  width: 50%;
 
+  font-size: 12px;
 
+  text-align: center;
 
+}
 
+.app-main .nav-menu li:first-child {
 
+  border-right: solid 1px #DFDFDF;
 
+}
 
+.app-main .nav-menu li a {
 
+  display: inline-block;
 
+  width: 1.3rem;
 
+  height: 1.52rem;
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-size: contain;
 
+}
 
+.app-main .nav-menu li a.btn-pic-take {
 
+  background-image: url("../images/btn-pic-take.png");
 
+}
 
+.app-main .nav-menu li a.btn-pic-list {
 
+  background-image: url("../images/btn-pic-list.png");
 
+}
 
+.app-switch {
 
+  width: 100%;
 
+  height: 45vh;
 
+}
 
+.app-switch .swt-style {
 
+  padding-top: 10%;
 
+}
 
+.app-switch .swt-style a {
 
+  float: left;
 
+  width: 1.8rem;
 
+  height: 0.7rem;
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-size: contain;
 
+}
 
+.app-switch .swt-style a:last-child {
 
+  float: right;
 
+}
 
+.app-switch .swt-style a.switch {
 
+  margin-left: 0.14rem;
 
+  background-image: url("../images/switch1.png");
 
+}
 
+
 
+.app-switch .swt-style a.active {
 
+  background-image: url("../images/switch1_active.png");
 
+}
 
+
 
+.app-switch .swt-style a.switch2 {
 
+  margin-left: 0.24rem;
 
+  background-image: url("../images/switch2.png");
 
+}
 
+
 
+.app-switch .swt-style a[data-id="2"].active {
 
+  background-image: url("../images/switch2_active.png");
 
+}
 
+
 
+.app-switch .swt-style a.logo {
 
+  margin-right: 0.1rem;
 
+  background-image: url("../images/logo.png");
 
+}
 
+.app-switch .stl-swiper {
 
+  height: 70%;
 
+}
 
+.app-switch .stl-swiper .swiper-slide {
 
+  text-align: center;
 
+  font-size: 18px;
 
+  /* Center slide text vertically */
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: -webkit-flex;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+  -ms-flex-pack: center;
 
+  -webkit-justify-content: center;
 
+  justify-content: center;
 
+  -webkit-box-align: center;
 
+  -ms-flex-align: center;
 
+  -webkit-align-items: center;
 
+  align-items: center;
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-size: contain;
 
+}
 
+.app-switch .stl-swiper .style-1 {
 
+  background-image: url("../images/styles/1.png");
 
+}
 
+.app-switch .stl-swiper .style-1.active {
 
+  background-image: url("../images/styles/1-active.png");
 
+}
 
+.app-switch .stl-swiper .style-2 {
 
+  background-image: url("../images/styles/2.png");
 
+}
 
+.app-switch .stl-swiper .style-2.active {
 
+  background-image: url("../images/styles/2-active.png");
 
+}
 
+.app-switch .stl-swiper .style-3 {
 
+  background-image: url("../images/styles/3.png");
 
+}
 
+.app-switch .stl-swiper .style-3.active {
 
+  background-image: url("../images/styles/3-active.png");
 
+}
 
+.app-switch .stl-swiper .style-4 {
 
+  background-image: url("../images/styles/4.png");
 
+}
 
+.app-switch .stl-swiper .style-4.active {
 
+  background-image: url("../images/styles/4-active.png");
 
+}
 
+.app-switch .stl-swiper .style-5 {
 
+  background-image: url("../images/styles/5.png");
 
+}
 
+.app-switch .stl-swiper .style-5.active {
 
+  background-image: url("../images/styles/5-active.png");
 
+}
 
+
 
+
 
+/* 风景 */
 
+.app-switch .stl-swiper1 .style-1 {
 
+  background-image: url("../images/styles1/1.png");
 
+}
 
+.app-switch .stl-swiper1 .style-1.active {
 
+  background-image: url("../images/styles1/1-active.png");
 
+}
 
+.app-switch .stl-swiper1 .style-2 {
 
+  background-image: url("../images/styles1/2.png");
 
+}
 
+.app-switch .stl-swiper1 .style-2.active {
 
+  background-image: url("../images/styles1/2-active.png");
 
+}
 
+.app-switch .stl-swiper1 .style-3 {
 
+  background-image: url("../images/styles1/3.png");
 
+}
 
+.app-switch .stl-swiper1 .style-3.active {
 
+  background-image: url("../images/styles1/3-active.png");
 
+}
 
+.app-switch .stl-swiper1 .style-4 {
 
+  background-image: url("../images/styles1/4.png");
 
+}
 
+.app-switch .stl-swiper1 .style-4.active {
 
+  background-image: url("../images/styles1/4-active.png");
 
+}
 
+.app-switch .stl-swiper1 .style-5 {
 
+  background-image: url("../images/styles1/5.png");
 
+}
 
+.app-switch .stl-swiper1 .style-5.active {
 
+  background-image: url("../images/styles1/5-active.png");
 
+}
 
+
 
+.my-pic-list {
 
+  display: none;
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  background: #fff;
 
+  z-index: 10;
 
+}
 
+.my-pic-list header {
 
+  padding-top: 0.16rem;
 
+  padding-left: 0.27rem;
 
+  padding-right: 0.27rem;
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  height: 1.2rem;
 
+  width: 100%;
 
+}
 
+.my-pic-list header .home-nav {
 
+  background-image: url("../images/mypic.png");
 
+  background-repeat: no-repeat;
 
+  background-position: center right;
 
+  background-size: auto 100%;
 
+}
 
+.my-pic-list header .home-nav .btn-back {
 
+  display: block;
 
+  width: 1.12rem;
 
+  height: 0.68rem;
 
+  background-image: url("../images/back.png");
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-size: 100% 100%;
 
+}
 
+.my-pic-list header .tips {
 
+  font-size: 10px;
 
+  text-align: right;
 
+  color: #00b3ec;
 
+}
 
+.my-pic-list article {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 1.21rem;
 
+  bottom: 0;
 
+  width: 100%;
 
+}
 
+.my-pic-list article ul {
 
+  list-style: none;
 
+}
 
+.my-pic-list .pic-swiper {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding-left: 0.27rem;
 
+  padding-right: 0.27rem;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide {
 
+  height: 2.52rem;
 
+  text-align: center;
 
+  background: #fff;
 
+  /* Center slide text vertically */
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: -webkit-flex;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+  -ms-flex-pack: center;
 
+  -webkit-justify-content: center;
 
+  justify-content: center;
 
+  -webkit-box-align: center;
 
+  -ms-flex-align: center;
 
+  -webkit-align-items: center;
 
+  align-items: center;
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-size: contain;
 
+  border-bottom: solid 1px #e9e9e9;
 
+  padding-top: 0.21rem;
 
+  padding-bottom: 0.21rem;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .img {
 
+  width: 40%;
 
+  height: 100%;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .img.vertical {
 
+  padding: 0 8%;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .img img {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .info {
 
+  width: 60%;
 
+  height: 100%;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .time {
 
+  margin-top: 12%;
 
+  color: #686868;
 
+  font-weight: 500;
 
+  font-size: 14px;
 
+  text-align: center;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style {
 
+  margin-top: 2%;
 
+  height: 0.7rem;
 
+  background-position: center center;
 
+  background-size: auto 100%;
 
+  background-repeat: no-repeat;
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-1 {
 
+  background-image: url("../images/styles-flag/1.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-2 {
 
+  background-image: url("../images/styles-flag/2.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-3 {
 
+  background-image: url("../images/styles-flag/3.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-4 {
 
+  background-image: url("../images/styles-flag/4.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-5 {
 
+  background-image: url("../images/styles-flag/5.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-6 {
 
+  background-image: url("../images/styles-flag/6.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-7 {
 
+  background-image: url("../images/styles-flag/7.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-8 {
 
+  background-image: url("../images/styles-flag/8.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-9 {
 
+  background-image: url("../images/styles-flag/9.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-slide .style-10 {
 
+  background-image: url("../images/styles-flag/10.png");
 
+}
 
+.my-pic-list .pic-swiper .swiper-scrollbar {
 
+  right: 0px !important;
 
+  width: 4px !important;
 
+}
 
+.my-pic-list .pic-swiper .swiper-scrollbar-drag {
 
+  background: rgba(0, 0, 0, 0.3) !important;
 
+}
 
+.lds-spinner {
 
+  color: official;
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 64px;
 
+  height: 64px;
 
+}
 
+.lds-spinner div {
 
+  -webkit-transform-origin: 32px 32px;
 
+      -ms-transform-origin: 32px 32px;
 
+          transform-origin: 32px 32px;
 
+  -webkit-animation: lds-spinner 1.2s linear infinite;
 
+          animation: lds-spinner 1.2s linear infinite;
 
+}
 
+.lds-spinner div:after {
 
+  content: " ";
 
+  display: block;
 
+  position: absolute;
 
+  top: 3px;
 
+  left: 29px;
 
+  width: 5px;
 
+  height: 14px;
 
+  border-radius: 20%;
 
+  background: #999999;
 
+}
 
+.lds-spinner div:nth-child(1) {
 
+  -webkit-transform: rotate(0deg);
 
+      -ms-transform: rotate(0deg);
 
+          transform: rotate(0deg);
 
+  -webkit-animation-delay: -1.1s;
 
+          animation-delay: -1.1s;
 
+}
 
+.lds-spinner div:nth-child(2) {
 
+  -webkit-transform: rotate(30deg);
 
+      -ms-transform: rotate(30deg);
 
+          transform: rotate(30deg);
 
+  -webkit-animation-delay: -1s;
 
+          animation-delay: -1s;
 
+}
 
+.lds-spinner div:nth-child(3) {
 
+  -webkit-transform: rotate(60deg);
 
+      -ms-transform: rotate(60deg);
 
+          transform: rotate(60deg);
 
+  -webkit-animation-delay: -0.9s;
 
+          animation-delay: -0.9s;
 
+}
 
+.lds-spinner div:nth-child(4) {
 
+  -webkit-transform: rotate(90deg);
 
+      -ms-transform: rotate(90deg);
 
+          transform: rotate(90deg);
 
+  -webkit-animation-delay: -0.8s;
 
+          animation-delay: -0.8s;
 
+}
 
+.lds-spinner div:nth-child(5) {
 
+  -webkit-transform: rotate(120deg);
 
+      -ms-transform: rotate(120deg);
 
+          transform: rotate(120deg);
 
+  -webkit-animation-delay: -0.7s;
 
+          animation-delay: -0.7s;
 
+}
 
+.lds-spinner div:nth-child(6) {
 
+  -webkit-transform: rotate(150deg);
 
+      -ms-transform: rotate(150deg);
 
+          transform: rotate(150deg);
 
+  -webkit-animation-delay: -0.6s;
 
+          animation-delay: -0.6s;
 
+}
 
+.lds-spinner div:nth-child(7) {
 
+  -webkit-transform: rotate(180deg);
 
+      -ms-transform: rotate(180deg);
 
+          transform: rotate(180deg);
 
+  -webkit-animation-delay: -0.5s;
 
+          animation-delay: -0.5s;
 
+}
 
+.lds-spinner div:nth-child(8) {
 
+  -webkit-transform: rotate(210deg);
 
+      -ms-transform: rotate(210deg);
 
+          transform: rotate(210deg);
 
+  -webkit-animation-delay: -0.4s;
 
+          animation-delay: -0.4s;
 
+}
 
+.lds-spinner div:nth-child(9) {
 
+  -webkit-transform: rotate(240deg);
 
+      -ms-transform: rotate(240deg);
 
+          transform: rotate(240deg);
 
+  -webkit-animation-delay: -0.3s;
 
+          animation-delay: -0.3s;
 
+}
 
+.lds-spinner div:nth-child(10) {
 
+  -webkit-transform: rotate(270deg);
 
+      -ms-transform: rotate(270deg);
 
+          transform: rotate(270deg);
 
+  -webkit-animation-delay: -0.2s;
 
+          animation-delay: -0.2s;
 
+}
 
+.lds-spinner div:nth-child(11) {
 
+  -webkit-transform: rotate(300deg);
 
+      -ms-transform: rotate(300deg);
 
+          transform: rotate(300deg);
 
+  -webkit-animation-delay: -0.1s;
 
+          animation-delay: -0.1s;
 
+}
 
+.lds-spinner div:nth-child(12) {
 
+  -webkit-transform: rotate(330deg);
 
+      -ms-transform: rotate(330deg);
 
+          transform: rotate(330deg);
 
+  -webkit-animation-delay: 0s;
 
+          animation-delay: 0s;
 
+}
 
+
 
+.my-bullet{
 
+  width: 10px;
 
+  height: 10px;
 
+  display: inline-block;
 
+  border-radius: 100%;
 
+  margin: 0 4px;
 
+  border: 1px solid #000;
 
+}
 
+.swiper-pagination-bullet-active{
 
+  background: #000!important;
 
+}
 
+
 
+
 
+@-webkit-keyframes lds-spinner {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+@keyframes lds-spinner {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 
+  .app-main {
 
+    height: 58vh;
 
+  }
 
+  .app-main .nav-menu ul {
 
+    padding: 1.2rem 0;
 
+  }
 
+  .app-switch {
 
+    height: 42vh;
 
+  }
 
+}
 
+@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
 
+  .app-main {
 
+    height: auto;
 
+  }
 
+  .app-main .nav-menu ul {
 
+    padding: 0.15rem 0;
 
+  }
 
+  .app-main .nav-menu li a {
 
+    width: 1rem;
 
+    height: 1.3rem;
 
+  }
 
+  .app-switch {
 
+    height: 3.5rem;
 
+  }
 
+  .app-switch .swt-style {
 
+    padding-top: 2%;
 
+  }
 
+  .app-switch .swt-style a {
 
+    width: 1.5rem;
 
+    height: 0.5rem;
 
+  }
 
+}
 
+@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
 
+  .app-main {
 
+    height: auto;
 
+  }
 
+  .app-main .nav-menu ul {
 
+    padding: 0.5rem 0;
 
+  }
 
+  .app-main .nav-menu li a {
 
+    width: 1.5rem;
 
+    height: 2rem;
 
+  }
 
+  .app-switch {
 
+    height: 4.5rem;
 
+  }
 
+  .app-switch .swt-style {
 
+    padding-top: 5%;
 
+  }
 
+}
 
+@media screen and (max-width: 320px) {
 
+  .app-main .nav-menu ul {
 
+    padding: 0.15rem 0;
 
+  }
 
+}

+ 772 - 0
static/css/app.less
ファイルの表示 

@@ -0,0 +1,772 @@
 
+/* 静态资源地址 */
 
+@staticUrl: "http://ost.4dage.com/art/artHYC/static";
 
+
 
+.style-loop(@i: 1) when (@i<11) {
 
+    .style-@{i} {
 
+        background-image: url("@{staticUrl}/images/styles/@{i}.png");
 
+
 
+        &.active {
 
+            background-image: url("@{staticUrl}/images/styles/@{i}-active.png");
 
+        }
 
+    }
 
+
 
+    .style-loop((@i+1));
 
+}
 
+
 
+.style-flag-loop(@i: 1) when (@i<11) {
 
+    .style-@{i} {
 
+        background-image: url("@{staticUrl}/images/styles-flag/@{i}.png");
 
+    }
 
+
 
+    .style-flag-loop((@i+1));
 
+}
 
+
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    outline: 0;
 
+    -webkit-tap-highlight-color: transparent;
 
+}
 
+
 
+.clearfix::after {
 
+    content: " ";
 
+    visibility: hidden;
 
+    display: block;
 
+    font-size: 0;
 
+    line-height: 0;
 
+    height: 0;
 
+    clear: both;
 
+}
 
+
 
+html,
 
+body {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+
 
+html {
 
+    -webkit-text-size-adjust: none;
 
+    -webkit-font-smoothing: antialiased;
 
+}
 
+
 
+body {
 
+    font-size: 14px !important;
 
+}
 
+
 
+.animated {
 
+    display: block !important;
 
+}
 
+
 
+.app-mask {
 
+    display: none;
 
+    position: fixed;
 
+    left: 0;
 
+    top: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    z-index: 100;
 
+    background-color: rgba(0, 0, 0, 0.4);
 
+
 
+    &.white {
 
+        background-color: rgba(0, 0, 0, 0)
 
+    }
 
+}
 
+
 
+.app-alert {
 
+    display: none;
 
+    animation-duration: .3s;
 
+    animation-delay: .3s;
 
+    position: fixed;
 
+    width: 80vw;
 
+    left: 50%;
 
+    top: 25%;
 
+    margin-left: -40vw;
 
+    border-radius: 12px;
 
+    z-index: 101;
 
+    background: #fff no-repeat center 10%;
 
+    background-size: 20%;
 
+
 
+    &.timeout {
 
+        background-image: url("@{staticUrl}/images/icon/used-timeout.png");
 
+    }
 
+
 
+    &.stop {
 
+        background-image: url("@{staticUrl}/images/icon/used-stop.png");
 
+    }
 
+
 
+    &.used {
 
+        background-image: url("@{staticUrl}/images/icon/used.png");
 
+    }
 
+
 
+    &.error {
 
+        background-image: url("@{staticUrl}/images/icon/error.png");
 
+    }
 
+
 
+    &.fail {
 
+        background-image: url("@{staticUrl}/images/icon/fail.png");
 
+    }
 
+
 
+    &.timeout,
 
+    &.stop,
 
+    &.used {
 
+        .btns {
 
+            a:last-child {
 
+                color: #3EAFFF;
 
+            }
 
+        }
 
+    }
 
+
 
+    &.error,
 
+    &.fail {
 
+        .btns {
 
+            a:last-child {
 
+                color: #F5615F;
 
+            }
 
+        }
 
+    }
 
+
 
+
 
+    .tips {
 
+        margin-top: 30%;
 
+        margin-bottom: 5%;
 
+        text-align: center;
 
+        color: #888;
 
+        line-height: 1.5;
 
+        font-size: 16px;
 
+    }
 
+
 
+    .btns {
 
+        width: 100%;
 
+        font-size: 0;
 
+        border: solid 1px #efefef;
 
+        background: #fff;
 
+        border-bottom-left-radius: 12px;
 
+        border-bottom-right-radius: 12px;
 
+
 
+        a {
 
+            display: inline-block;
 
+            width: 50%;
 
+            padding: 5%;
 
+            color: #666;
 
+            text-decoration: none;
 
+            text-align: center;
 
+            font-size: 16px;
 
+            border-right: solid 1px #efefef;
 
+        }
 
+    }
 
+}
 
+
 
+.app-view {
 
+    display: none;
 
+    padding: 16px;
 
+    animation-duration: .3s;
 
+    animation-delay: .3s;
 
+    position: fixed;
 
+    width: 86vw;
 
+    height: 36vh;
 
+    left: 50%;
 
+    top: 35%;
 
+    margin-left: -43vw;
 
+    margin-top: -18vh;
 
+    background-color: #fff;
 
+    border-radius: 12px;
 
+    z-index: 101;
 
+
 
+    &.vertical{
 
+        width: 32vh;
 
+		height: 53vh;
 
+		top: 25%;
 
+		margin-left: -16vh;
 
+        .tip {
 
+            top: 53vh;
 
+            .close {
 
+                bottom: 10vh;
 
+            }
 
+        }
 
+    }
 
+
 
+    .img,
 
+    img {
 
+        width: 100%;
 
+        height: 100%;
 
+    }
 
+
 
+    .tip {
 
+        position: absolute;
 
+        top: 36vh;
 
+        left: 0;
 
+        height: 40vh;
 
+        line-height: 40vh;
 
+        width: 100%;
 
+        background: url("@{staticUrl}/images/icon/touch-save.png") no-repeat center 5%;
 
+        background-size: 20%;
 
+        text-align: center;
 
+        color: #fff;
 
+
 
+        >div {
 
+            display: inline-block;
 
+            line-height: 1.5;
 
+            font-size: 16px;
 
+        }
 
+
 
+        .close {
 
+            width: 26px;
 
+            height: 26px;
 
+            position: absolute;
 
+            left: 50%;
 
+            margin-left: -13px;
 
+            bottom: 5vh;
 
+            background: url("@{staticUrl}/images/icon/touch-close.png") no-repeat center center;
 
+            background-size: 100% 100%;
 
+        }
 
+    }
 
+}
 
+
 
+.app-action-tips {
 
+    animation-duration: .3s;
 
+    animation-delay: .3s;
 
+    display: none;
 
+    position: fixed;
 
+    width: 66vw;
 
+    height: 28vh;
 
+    left: 50%;
 
+    top: 40%;
 
+    margin-left: -33vw;
 
+    margin-top: -14vh;
 
+    z-index: 101;
 
+
 
+    .content {
 
+        display: none;
 
+        position: relative;
 
+        width: 100%;
 
+        height: 100%;
 
+        color: #fff;
 
+        background-color: rgba(0, 0, 0, 0.7);
 
+        border-radius: 12px;
 
+        background-repeat: no-repeat;
 
+        background-position: 50% 25%;
 
+
 
+        .tips {
 
+            font-size: 18px;
 
+            position: absolute;
 
+            left: 0;
 
+            bottom: 15%;
 
+            width: 100%;
 
+            text-align: center;
 
+        }
 
+
 
+        &.face-1 {
 
+            background-image: url("@{staticUrl}/images/icon/face-1.png");
 
+            background-size: 30%;
 
+
 
+            .tips {
 
+                font-size: 16px;
 
+                bottom: 10%;
 
+            }
 
+        }
 
+
 
+        &.face-2 {
 
+            background-image: url("@{staticUrl}/images/icon/face-2.png");
 
+            background-size: 30%;
 
+        }
 
+
 
+        &.face-3 {
 
+            background-image: url("@{staticUrl}/images/icon/face-3.png");
 
+            background-size: 30%;
 
+        }
 
+
 
+        &.face-4 {
 
+            background-image: url("@{staticUrl}/images/icon/face-4.png");
 
+            background-size: 30%;
 
+        }
 
+
 
+        &.loading {
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+
 
+            .tips {
 
+                font-size: 15px;
 
+                color: #999999;
 
+            }
 
+
 
+            .lds-spinner {
 
+                position: absolute;
 
+                left: 50%;
 
+                top: 30%;
 
+                transform: translate(-50%, -30%)
 
+            }
 
+        }
 
+
 
+        &.loading-switch {
 
+            .tips {
 
+                font-size: 15px;
 
+                color: #ffff;
 
+            }
 
+
 
+            .lds-spinner {
 
+                position: absolute;
 
+                left: 50%;
 
+                top: 30%;
 
+                transform: translate(-50%, -30%)
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.app-main {
 
+    width: 100%;
 
+    height: 55vh;
 
+
 
+    .ads-swiper {
 
+
 
+        height: 4.5rem;
 
+
 
+        .swiper-slide {
 
+            text-align: center;
 
+            font-size: 18px;
 
+            background: #fff;
 
+            /* Center slide text vertically */
 
+            display: -webkit-box;
 
+            display: -ms-flexbox;
 
+            display: -webkit-flex;
 
+            display: flex;
 
+            -webkit-box-pack: center;
 
+            -ms-flex-pack: center;
 
+            -webkit-justify-content: center;
 
+            justify-content: center;
 
+            -webkit-box-align: center;
 
+            -ms-flex-align: center;
 
+            -webkit-align-items: center;
 
+            align-items: center;
 
+
 
+            img {
 
+                width: 100%;
 
+                height: 100%;
 
+            }
 
+        }
 
+
 
+        .swiper-pagination-bullet-active {
 
+            background: #fff;
 
+        }
 
+    }
 
+
 
+    .nav-menu {
 
+
 
+        box-shadow: 0 0.03rem 10px #efefef;
 
+
 
+        ul {
 
+            padding: 0.3rem 0;
 
+            list-style: none;
 
+            font-size: 0;
 
+        }
 
+
 
+        li {
 
+            display: inline-block;
 
+            width: 50%;
 
+            font-size: 12px;
 
+            text-align: center;
 
+
 
+            &:first-child {
 
+                border-right: solid 1px #DFDFDF;
 
+            }
 
+
 
+            a {
 
+                display: inline-block;
 
+                width: 1.3rem;
 
+                height: 1.52rem;
 
+                background-repeat: no-repeat;
 
+                background-position: center center;
 
+                background-size: contain;
 
+            }
 
+
 
+            a.btn-pic-take {
 
+                background-image: url("@{staticUrl}/images/btn-pic-take.png");
 
+            }
 
+
 
+            a.btn-pic-list {
 
+                background-image: url("@{staticUrl}/images/btn-pic-list.png");
 
+            }
 
+        }
 
+    }
 
+
 
+}
 
+
 
+.app-switch {
 
+    width: 100%;
 
+    height: 45vh;
 
+
 
+    .swt-style {
 
+        padding-top: 10%;
 
+
 
+        a {
 
+            float: left;
 
+            width: 2.5rem;
 
+            height: 0.7rem;
 
+            background-repeat: no-repeat;
 
+            background-position: center center;
 
+            background-size: contain;
 
+
 
+            &:last-child {
 
+                float: right;
 
+            }
 
+
 
+            &.switch {
 
+                margin-left: 0.14rem;
 
+                background-image: url("@{staticUrl}/images/switch.png");
 
+            }
 
+
 
+            &.logo {
 
+                margin-right: 0.1rem;
 
+                background-image: url("@{staticUrl}/images/logo.png");
 
+            }
 
+        }
 
+    }
 
+
 
+    .stl-swiper {
 
+         height: 70%;
 
+
 
+        .swiper-slide {
 
+            text-align: center;
 
+            font-size: 18px;
 
+            /* Center slide text vertically */
 
+            display: -webkit-box;
 
+            display: -ms-flexbox;
 
+            display: -webkit-flex;
 
+            display: flex;
 
+            -webkit-box-pack: center;
 
+            -ms-flex-pack: center;
 
+            -webkit-justify-content: center;
 
+            justify-content: center;
 
+            -webkit-box-align: center;
 
+            -ms-flex-align: center;
 
+            -webkit-align-items: center;
 
+            align-items: center;
 
+            background-repeat: no-repeat;
 
+            background-position: center center;
 
+            background-size: contain;
 
+
 
+        }
 
+
 
+        .style-loop()
 
+    }
 
+}
 
+
 
+.my-pic-list {
 
+    display: none;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: #fff;
 
+    z-index: 10;
 
+
 
+    header {
 
+        padding-top: 0.16rem;
 
+        padding-left: 0.27rem;
 
+        padding-right: 0.27rem;
 
+        position: absolute;
 
+        left: 0;
 
+        top: 0;
 
+        height: 1.2rem;
 
+        width: 100%;
 
+
 
+        .home-nav {
 
+            background-image: url("@{staticUrl}/images/mypic.png");
 
+            background-repeat: no-repeat;
 
+            background-position: center right;
 
+            background-size: auto 100%;
 
+
 
+            .btn-back {
 
+                display: block;
 
+                width: 1.12rem;
 
+                height: 0.68rem;
 
+                background-image: url("@{staticUrl}/images/back.png");
 
+                background-repeat: no-repeat;
 
+                background-position: center center;
 
+                background-size: 100% 100%;
 
+            }
 
+        }
 
+
 
+        .tips {
 
+            font-size: 10px;
 
+            text-align: right;
 
+            color: #00b3ec;
 
+        }
 
+    }
 
+
 
+    article {
 
+        position: absolute;
 
+        left: 0;
 
+        top: 1.21rem;
 
+        bottom: 0;
 
+        width: 100%;
 
+        ul {
 
+            list-style: none;
 
+        }
 
+    }
 
+
 
+    .pic-swiper {
 
+        width: 100%;
 
+        height: 100%;
 
+        padding-left: 0.27rem;
 
+        padding-right: 0.27rem;
 
+
 
+        .swiper-slide {
 
+            height: 2.52rem;
 
+            text-align: center;
 
+            background: #fff;
 
+            /* Center slide text vertically */
 
+            display: -webkit-box;
 
+            display: -ms-flexbox;
 
+            display: -webkit-flex;
 
+            display: flex;
 
+            -webkit-box-pack: center;
 
+            -ms-flex-pack: center;
 
+            -webkit-justify-content: center;
 
+            justify-content: center;
 
+            -webkit-box-align: center;
 
+            -ms-flex-align: center;
 
+            -webkit-align-items: center;
 
+            align-items: center;
 
+            background-repeat: no-repeat;
 
+            background-position: center center;
 
+            background-size: contain;
 
+            border-bottom: solid 1px #e9e9e9;
 
+            padding-top: 0.21rem;
 
+            padding-bottom: 0.21rem;
 
+
 
+            .img {
 
+                width: 40%;
 
+                height: 100%;
 
+                &.vertical{
 
+                    padding: 0 8%;
 
+                }
 
+
 
+                img {
 
+                    width: 100%;
 
+                    height: 100%;
 
+                }
 
+            }
 
+
 
+            .info {
 
+                width: 60%;
 
+                height: 100%;
 
+            }
 
+
 
+            .time {
 
+                margin-top: 12%;
 
+                color: #686868;
 
+                font-weight: 500;
 
+                font-size: 14px;
 
+                text-align: center;
 
+
 
+            }
 
+
 
+            .style {
 
+                margin-top: 2%;
 
+                height: 0.7rem;
 
+                background-position: center center;
 
+                background-size: auto 100%;
 
+                background-repeat: no-repeat;
 
+            }
 
+
 
+            .style-flag-loop()
 
+        }
 
+
 
+        .swiper-scrollbar {
 
+            right: 0px !important;
 
+            width: 4px !important;
 
+        }
 
+
 
+        .swiper-scrollbar-drag {
 
+            background: rgba(0, 0, 0, .3) !important;
 
+        }
 
+    }
 
+}
 
+
 
+.lds-spinner {
 
+    color: official;
 
+    display: inline-block;
 
+    position: relative;
 
+    width: 64px;
 
+    height: 64px;
 
+}
 
+
 
+.lds-spinner div {
 
+    transform-origin: 32px 32px;
 
+    animation: lds-spinner 1.2s linear infinite;
 
+}
 
+
 
+.lds-spinner div:after {
 
+    content: " ";
 
+    display: block;
 
+    position: absolute;
 
+    top: 3px;
 
+    left: 29px;
 
+    width: 5px;
 
+    height: 14px;
 
+    border-radius: 20%;
 
+    background: #999999;
 
+}
 
+
 
+.lds-spinner div:nth-child(1) {
 
+    transform: rotate(0deg);
 
+    animation-delay: -1.1s;
 
+}
 
+
 
+.lds-spinner div:nth-child(2) {
 
+    transform: rotate(30deg);
 
+    animation-delay: -1s;
 
+}
 
+
 
+.lds-spinner div:nth-child(3) {
 
+    transform: rotate(60deg);
 
+    animation-delay: -0.9s;
 
+}
 
+
 
+.lds-spinner div:nth-child(4) {
 
+    transform: rotate(90deg);
 
+    animation-delay: -0.8s;
 
+}
 
+
 
+.lds-spinner div:nth-child(5) {
 
+    transform: rotate(120deg);
 
+    animation-delay: -0.7s;
 
+}
 
+
 
+.lds-spinner div:nth-child(6) {
 
+    transform: rotate(150deg);
 
+    animation-delay: -0.6s;
 
+}
 
+
 
+.lds-spinner div:nth-child(7) {
 
+    transform: rotate(180deg);
 
+    animation-delay: -0.5s;
 
+}
 
+
 
+.lds-spinner div:nth-child(8) {
 
+    transform: rotate(210deg);
 
+    animation-delay: -0.4s;
 
+}
 
+
 
+.lds-spinner div:nth-child(9) {
 
+    transform: rotate(240deg);
 
+    animation-delay: -0.3s;
 
+}
 
+
 
+.lds-spinner div:nth-child(10) {
 
+    transform: rotate(270deg);
 
+    animation-delay: -0.2s;
 
+}
 
+
 
+.lds-spinner div:nth-child(11) {
 
+    transform: rotate(300deg);
 
+    animation-delay: -0.1s;
 
+}
 
+
 
+.lds-spinner div:nth-child(12) {
 
+    transform: rotate(330deg);
 
+    animation-delay: 0s;
 
+}
 
+
 
+@keyframes lds-spinner {
 
+    0% {
 
+        opacity: 1;
 
+    }
 
+
 
+    100% {
 
+        opacity: 0;
 
+    }
 
+}
 
+
 
+// @media only screen
 
+// and (min-device-width: 320px)
 
+// and (max-device-width: 568px)
 
+// and (-webkit-min-device-pixel-ratio: 2) {
 
+//     .app-main {
 
+//         .nav-menu {
 
+//             ul {
 
+//                 padding: 0.15rem 0;
 
+//             }
 
+//         }
 
+//     }
 
+// }
 
+
 
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 
+    .app-main {
 
+        height: 58vh;
 
+        .nav-menu {
 
+            ul {
 
+                padding: 1.2rem 0;
 
+            }
 
+        }
 
+    }
 
+    .app-switch {
 
+        height: 42vh;
 
+    }
 
+}
 
+
 
+@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2){ 
+    .app-main {
 
+        height: auto;
 
+        .nav-menu {
 
+            ul {
 
+                padding: 0.15rem 0;
 
+            }
 
+            li{
 
+                a{
 
+                    width: 1rem;
 
+                    height: 1.3rem;
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .app-switch {
 
+        height: 3.5rem;
 
+        .swt-style {
 
+            padding-top: 2%;
 
+            a {
 
+                width: 1.5rem;
 
+                height: 0.5rem;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2){ 
+    .app-main {
 
+        height: auto;
 
+        .nav-menu {
 
+            ul {
 
+                padding: 0.5rem 0;
 
+            }
 
+            li{
 
+                a{
 
+                    width: 1.5rem;
 
+                    height: 2rem;
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .app-switch {
 
+        height: 4.5rem;
 
+        .swt-style {
 
+            padding-top: 5%;
 
+        }
 
+    }
 
+}
 
+
 
+@media screen and (max-width:320px) {
 
+    .app-main {
 
+        .nav-menu {
 
+            ul {
 
+                padding: 0.15rem 0;
 
+            }
 
+        }
 
+    }
 
+}
 
+

BIN
static/images/adds/1.jpg
ファイルの表示


BIN
static/images/adds/2.jpg
ファイルの表示


BIN
static/images/adds/3.jpg
ファイルの表示


BIN
static/images/adds/4.jpg
ファイルの表示


BIN
static/images/adds/4dart.jpg
ファイルの表示


BIN
static/images/adds/4dart2.jpg
ファイルの表示


BIN
static/images/adds/5.jpg
ファイルの表示


BIN
static/images/back.png
ファイルの表示


BIN
static/images/btn-pic-list.png
ファイルの表示


BIN
static/images/btn-pic-take.png
ファイルの表示


BIN
static/images/icon/1保存成功.png
ファイルの表示


BIN
static/images/icon/error.png
ファイルの表示


BIN
static/images/icon/face-1.png
ファイルの表示


BIN
static/images/icon/face-2.png
ファイルの表示


BIN
static/images/icon/face-3.png
ファイルの表示


BIN
static/images/icon/face-4.png
ファイルの表示


BIN
static/images/icon/fail.png
ファイルの表示


BIN
static/images/icon/touch-close.png
ファイルの表示


BIN
static/images/icon/touch-save.png
ファイルの表示


BIN
static/images/icon/used-stop.png
ファイルの表示


BIN
static/images/icon/used-timeout.png
ファイルの表示


BIN
static/images/icon/used.png
ファイルの表示


BIN
static/images/icon/从有人控制到获得控制.png
ファイルの表示


BIN
static/images/mypic.png
ファイルの表示


BIN
static/images/styles-flag/1.png
ファイルの表示


BIN
static/images/styles-flag/2.png
ファイルの表示


BIN
static/images/styles-flag/3.png
ファイルの表示


BIN
static/images/styles-flag/4.png
ファイルの表示


BIN
static/images/styles-flag/5.png
ファイルの表示


BIN
static/images/styles/1-active.png
ファイルの表示


BIN
static/images/styles/1.png
ファイルの表示


BIN
static/images/styles/2-active.png
ファイルの表示


BIN
static/images/styles/2.png
ファイルの表示


BIN
static/images/styles/3-active.png
ファイルの表示


BIN
static/images/styles/3.png
ファイルの表示


BIN
static/images/styles/4-active.png
ファイルの表示


BIN
static/images/styles/4.png
ファイルの表示


BIN
static/images/styles/5-active.png
ファイルの表示


BIN
static/images/styles/5.png
ファイルの表示


BIN
static/images/styles1/1-active.png
ファイルの表示


BIN
static/images/styles1/1.png
ファイルの表示


BIN
static/images/styles1/10-active.png
ファイルの表示


BIN
static/images/styles1/10.png
ファイルの表示


BIN
static/images/styles1/11-active.png
ファイルの表示


BIN
static/images/styles1/11.png
ファイルの表示


BIN
static/images/styles1/12-active.png
ファイルの表示


BIN
static/images/styles1/12.png
ファイルの表示


BIN
static/images/styles1/13-active.png
ファイルの表示


BIN
static/images/styles1/13.png
ファイルの表示


BIN
static/images/styles1/2-active.png
ファイルの表示


BIN
static/images/styles1/2.png
ファイルの表示


BIN
static/images/styles1/3-active.png
ファイルの表示


BIN
static/images/styles1/3.png
ファイルの表示


BIN
static/images/styles1/4-active.png
ファイルの表示


BIN
static/images/styles1/4.png
ファイルの表示


BIN
static/images/styles1/5-active.png
ファイルの表示


BIN
static/images/styles1/5.png
ファイルの表示


BIN
static/images/styles1/6-active.png
ファイルの表示


BIN
static/images/styles1/6.png
ファイルの表示


BIN
static/images/styles1/7-active.png
ファイルの表示


BIN
static/images/styles1/7.png
ファイルの表示


BIN
static/images/styles1/8-active.png
ファイルの表示


BIN
static/images/styles1/8.png
ファイルの表示


BIN
static/images/styles1/9-active.png
ファイルの表示


BIN
static/images/styles1/9.png
ファイルの表示


BIN
static/images/switch1.png
ファイルの表示


BIN
static/images/switch1_active.png
ファイルの表示


BIN
static/images/test.png
ファイルの表示


+ 633 - 0
static/js/app.js
ファイルの表示 

@@ -0,0 +1,633 @@
 
+$.fn.extend({
 
+    animateCss: function (animationName, callback) {
 
+        var animationEnd = (function (el) {
 
+            var animations = {
 
+                animation: 'animationend',
 
+                OAnimation: 'oAnimationEnd',
 
+                MozAnimation: 'mozAnimationEnd',
 
+                WebkitAnimation: 'webkitAnimationEnd',
 
+            };
 
+
 
+            for (var t in animations) {
 
+                if (el.style[t] !== undefined) {
 
+                    return animations[t];
 
+                }
 
+            }
 
+        })(document.createElement('div'));
 
+
 
+        this.addClass('animated ' + animationName).one(animationEnd, function () {
 
+            //$(this).removeClass('animated ' + animationName);
 
+            callback && callback.call(this, $(this), animationName);
 
+        });
 
+
 
+        return this;
 
+    },
 
+});
 
+
 
+var app = {
 
+    /**
 
+     * 请求id
 
+     */
 
+    id: location.search.substring(1).replace(/ID=|\&pic=1/gi, ''),
 
+    /**
 
+     * 切换画风id
 
+     */
 
+    switchId: 0,
 
+    /**
 
+     * 切换风景id
 
+     */
 
+    bgId: 0,
 
+    /**
 
+     * 切换风格类型
 
+     */
 
+    type: 1,
 
+    /**
 
+     * 我的相片列表
 
+     */
 
+    imgList: [],
 
+    /**
 
+     * 广告切换
 
+     */
 
+    adsSwiper: function () {
 
+        var html = [];
 
+        var $elem = $('.ads-swiper')
 
+
 
+        __config.adsPath && __config.adsPath.forEach(function (item) {
 
+            html.push('<div class="swiper-slide"><a href="' + (item.link || '#') + '"><img src="' + (item.image || 'static/images/adds/4dart.jpg') + '"><a></div>')
 
+        })
 
+
 
+        if (!html.length) {
 
+            html.push('<div class="swiper-slide"><a href="#"><img src="static/images/adds/4dart.jpg"><a></div>')
 
+        }
 
+
 
+        $elem.find('.swiper-wrapper').html(html.join(''))
 
+
 
+        new Swiper($elem[0], {
 
+            autoplay: {
 
+                delay: 3000,
 
+                stopOnLastSlide: false,
 
+                disableOnInteraction: true,
 
+            },
 
+            pagination: {
 
+                el: $elem.find('.swiper-pagination')[0],
 
+                bulletClass: 'my-bullet'
 
+            }
 
+        });
 
+    },
 
+    /**
 
+     * 画风切换
 
+     */
 
+    stlSwiper: function () {
 
+        var $elem = $('.stl-swiper')
 
+        if (this.stlSwiper.swiper) {
 
+            this.stlSwiper.swiper.destroy()
 
+        }
 
+
 
+        let html = ''
 
+
 
+        if (this.type==2) {
 
+            html = `<div class="swiper-wrapper">
 
+                <div data-msg="1" class="swiper-slide style-1"></div>
 
+                <div data-msg="2" class="swiper-slide style-2"></div>
 
+                <div data-msg="3" class="swiper-slide style-3"></div>
 
+                <div data-msg="4" class="swiper-slide style-4"></div>
 
+                <div data-msg="5" class="swiper-slide style-5"></div>
 
+            </div>`
 
+        } else{
 
+            html = `<div class="swiper-wrapper">
 
+                <div data-msg="1" class="swiper-slide style-1"></div>
 
+                <div data-msg="2" class="swiper-slide style-2"></div>
 
+                <div data-msg="3" class="swiper-slide style-3"></div>
 
+                <div data-msg="4" class="swiper-slide style-4"></div>
 
+                <div data-msg="5" class="swiper-slide style-5"></div>
 
+            </div>`
 
+        }
 
+        $elem.html(html)
 
+        this.stlSwiper.swiper = new Swiper($elem[0], {
 
+            //speed: 300,
 
+            freeMode: true,
 
+            slidesPerView: 3.5,
 
+        });
 
+        var time;
 
+        $elem.find('.swiper-slide').on('click', function () {
 
+            var $this = $(this);
 
+            var msg = $this.data('msg')
 
+
 
+            app.checkOperationTimeout()
 
+            let tmp = ''
 
+
 
+            if (app.type == 2) {
 
+                if (app.bgId == msg) {
 
+                    // 已选择的不再执行
 
+                    return;
 
+                }
 
+                tmp = 'bg '
 
+                app.bgId = msg
 
+            }else{
 
+                if (app.switchId == msg) {
 
+                    // 已选择的不再执行
 
+                    return;
 
+                }
 
+                tmp = 'switch '
 
+                app.switchId = msg
 
+                
+            }
 
+
 
+           
+
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+
 
+            if (time && (Date.now() - time < __config.switchInterval * 1000)) {
 
+                app.showLoadingSwitch(function () {
 
+                    $elem.find('.swiper-slide').removeClass('active');
 
+                    $this.addClass('active');
 
+                })
 
+            } else {
 
+                $elem.find('.swiper-slide').removeClass('active')
 
+                $this.addClass('active')
 
+            }
 
+
 
+            time = Date.now();
 
+           
+
 
+            app.send(tmp + msg)
 
+        });
 
+
 
+        $elem.find('.swiper-slide').each(function () {
 
+            var style = $(this).data('msg');
 
+            if (style) {
 
+                var img = new Image()
 
+                img.src = (__config.staticUrl || 'static') + `/images/styles${app.type==2?'1':''}/` + style + '-active.png';
 
+            }
 
+        })
 
+    },
 
+    /**
 
+     * 我的相片滚动
 
+     */
 
+    picSwiper: function () {
 
+        if (this.picSwiper.swiper) {
 
+            this.picSwiper.swiper.destroy()
 
+        }
 
+        this.picSwiper.swiper = new Swiper($('.pic-swiper')[0], {
 
+            speed: 300,
 
+            slidesPerView: 'auto',
 
+            freeMode: true,
 
+            direction: 'vertical',
 
+            setWrapperSize: true,
 
+            scrollbar: {
 
+                el: '.swiper-scrollbar',
 
+            },
 
+        });
 
+    },
 
+    events: function () {
 
+        var self = this,
 
+            $picList = $('.my-pic-list');
 
+
 
+        if (__config.link) {
 
+            $('.logo').attr('href', __config.link)
 
+        }
 
+
 
+        $picList.find('header').on('touchstart', function (event) {
 
+            event.preventDefault();
 
+        });
 
+
 
+        $picList.find('.btn-back').on('touchend', function (event) {
 
+            event.preventDefault();
 
+            $picList.hide()
 
+        });
 
+
 
+        
+
 
+        $('.swt-style').on('click','a', function (event) {
 
+            self.type = $(event.currentTarget).data('id')
 
+            $(event.currentTarget).addClass("active").siblings().removeClass("active");
 
+            self.stlSwiper()
 
+            if (self.type==2) {
 
+                $('.stl-swiper').addClass('stl-swiper1')
 
+            }else {
 
+                $('.stl-swiper').removeClass('stl-swiper1')
 
+            }
 
+            $('.swiper-wrapper').find('.swiper-slide').removeClass('active');
 
+                    $(`.swiper-slide[data-msg=${self.type==2?self.bgId:self.switchId}]`).addClass('active');
 
+        });
 
+
 
+        $('.btn-pic-list').on('click', function (event) {
 
+            app.send('close')
 
+            $picList.show()
 
+            self.renderPictures()
 
+        });
 
+
 
+        $('.btn-pic-take').on('click', function (event) {
 
+            app.checkOperationTimeout()
 
+
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+
 
+            self.send('photo empty')
 
+        });
 
+
 
+        $('.app-view .close').on('click', function (event) {
 
+            self.hideView()
 
+        });
 
+
 
+        $('.app-alert .btn-use').on('click', function () {
 
+            var $alert = $('.app-alert')
 
+            app.hideMask()
 
+            $alert.removeClass($alert.data('class') + ' animated zoomIn')
 
+            var text = $(this).text();
 
+            if (text == '尝试使用' || text == '再次使用') {
 
+                app.send('request')
 
+            }
 
+
 
+        })
 
+
 
+        $('.app-alert .btn-link').on('click', function () {
 
+            if ($(this).text() == '重新拍照') {
 
+                var $alert = $('.app-alert')
 
+                app.hideMask()
 
+                $alert.removeClass($alert.data('class') + ' animated zoomIn')
 
+                $('.btn-pic-take').click()
 
+            }
 
+        })
 
+    },
 
+    showMask: function (clazz) {
 
+        var $elem = $('.app-mask');
 
+        if (clazz) {
 
+            $elem.addClass(this.showMask._clazz = clazz)
 
+        }
 
+        $elem.css('display', 'block')
 
+    },
 
+    hideMask: function () {
 
+        var $elem = $('.app-mask');
 
+        if (this.showMask._clazz) {
 
+            $elem.removeClass(this.showMask._clazz)
 
+            this.showMask._clazz = null
 
+        }
 
+        $elem.css('display', 'none')
 
+    },
 
+    showAlert: function (msg, icon) {
 
+        this.showMask();
 
+        var $alert = $('.app-alert');
 
+        var $btns = $alert.find('.btns a');
 
+        $alert.data('class', icon).addClass(icon).animateCss('zoomIn')
 
+        $alert.find('.tips').html(msg)
 
+        if (/error|used/.test(icon)) {
 
+            $btns.eq(0).text('尝试使用')
 
+        } else if (/timeout|stop/.test(icon)) {
 
+            $btns.eq(0).text('再次使用')
 
+        } else if (/fail/.test(icon)) {
 
+            $btns.eq(0).text('重选画风')
 
+        }
 
+
 
+        if (/used|timeout|stop|error/.test(icon)) {
 
+            $btns.eq(1).text('刷新页面').attr('href', $btns.eq(1).data('href'))
 
+        } else if (/fail/.test(icon)) {
 
+            $btns.eq(1).text('重新拍照').attr('href', 'javascript:;')
 
+        }
 
+
 
+    },
 
+    showActionTips: function (delay, done) {
 
+        var $elem = $('.app-action-tips');
 
+        var flag = flag || 1;
 
+
 
+        delay = delay || 1000;
 
+
 
+        app.showMask('white')
 
+        $elem.find('.content').hide()
 
+        $elem.find('.content.face-' + flag).show()
 
+        $elem.animateCss('zoomIn', function () {
 
+            var timer = setInterval(() => {
 
+                if (++flag > 4) {
 
+                    $elem.removeClass('animated zoomIn');
 
+                    clearInterval(timer)
 
+                    if (!app.is_action) {
 
+                        app.hideMask('white')
 
+                        done && done()
 
+                    }
 
+
 
+                    return;
 
+                }
 
+
 
+                $elem.find('.content').hide()
 
+                $elem.find('.content.face-' + flag).show()
 
+            }, delay);
 
+        })
 
+    },
 
+    showLoading: function (msg) {
 
+        msg = msg || '相片正在生成中，请耐心等候'
 
+
 
+        this.showMask();
 
+        $('.app-action-tips .content').css('display', 'none');
 
+        $('.app-action-tips .content.loading').css('display', 'block').find('.tips').html(msg);
 
+        $('.app-action-tips').addClass('animated zoomIn') //.animateCss('zoomIn')
 
+    },
 
+    hideLoading: function () {
 
+        this.hideMask();
 
+        $('.app-action-tips .content.loading').css('display', 'none');
 
+        $('.app-action-tips').removeClass('animated zoomIn')
 
+    },
 
+    showLoadingSwitch: function (done) {
 
+        this.showMask();
 
+        $('.app-action-tips .content').css('display', 'none');
 
+        $('.app-action-tips .content.loading-switch').css('display', 'block')
 
+        $('.app-action-tips .content.loading-switch .tips').html('正在切换'+(app.type==2?'风景':'画风'))
 
+        $('.app-action-tips').animateCss('zoomIn', function ($elem, aname) {
 
+            setTimeout(function () {
 
+                app.hideMask();
 
+                $elem.removeClass('animated ' + aname);
 
+                done && done()
 
+            }, 1000);
 
+        })
 
+    },
 
+    renderPictures() {
 
+        var html = [];
 
+        console.log('====================================');
 
+        console.log(this.imgList);
 
+        console.log('====================================');
 
+        this.imgList.forEach(function (item) {
 
+            html.push('<div class="swiper-slide">');
 
+            html.push('    <div class="img'+(item.vertical?' vertical':'')+'">');
 
+            html.push('      <img src="' + item.url + '?v=' + Date.now() + '">');
 
+            html.push('    </div>');
 
+            html.push('    <div class="info">');
 
+            html.push('      <div class="time">');
 
+            html.push('        ' + item.datetime);
 
+            html.push('      </div>');
 
+            html.push('      <div class="style style-' + item.id + '"></div>');
 
+            html.push('    </div>');
 
+            html.push('</div>');
 
+        })
 
+
 
+        if (!html.length) {
 
+            html.push('<div class="swiper-slide" style="color:#999;border-bottom:none">暂无相片</div>');
 
+        }
 
+
 
+        $('.pic-swiper .swiper-wrapper').html(html.join(''));
 
+        $('.pic-swiper .swiper-wrapper img').click(function (e) {
 
+            wx.previewImage({
 
+                current: e.currentTarget.src.split('?v=')[0],
 
+                urls: app.imgList.map(function (item) {
 
+                    return item.url
 
+                })
 
+            });
 
+        });
 
+
 
+        this.picSwiper();
 
+    },
 
+    showView: function (json) {
 
+        this.hideLoading()
 
+        setTimeout(function () {
 
+            // app.showMask();
 
+            // $('.app-view').animateCss('zoomIn', function () {
 
+            //     app.send('close')
 
+            // }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
 
+
 
+            var img = new Image()
 
+            img.src = json.url + '?v=' + Date.now()
 
+            img.onload = img.onerror = function(){
 
+                app.showMask();
 
+                var $view = $('.app-view')
 
+                if(img.width<img.height){
 
+                    json.vertical = true
 
+                    $view.addClass('vertical')
 
+                }
 
+                app.imgList.unshift(json);
 
+                $view.animateCss('zoomIn', function () {
 
+                    app.send('close')
 
+                }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
 
+            }
 
+        }, 300);
 
+
 
+    },
 
+    hideView: function () {
 
+        this.hideMask();
 
+        $('.app-view').removeClass('animated zoomIn')
 
+    },
 
+    connection: function () {
 
+        console.log('正在尝试连接')
 
+        try {
 
+            var timer
 
+            this.websocket = new WebSocket(__config.ws);
 
+            this.websocket.onclose = function (e) {
 
+                app.is_connect = false
 
+                app.checkTimeout(true)
 
+                app.checkOperationTimeout(true)
 
+                console.error('连接失败', e)
 
+                setTimeout(function () {
 
+                    app.connection()
 
+                }, 5000)
 
+            }.bind(this);
 
+
 
+            this.websocket.onopen = function (msg) {
 
+                this.is_connect = true
 
+                this.is_connect_ok = null
 
+                this.send('request')
 
+            }.bind(this);
 
+
 
+            this.websocket.onmessage = function (msg) {
 
+                console.log(msg.data)
 
+                if (typeof msg.data == "string") {
 
+                    switch (msg.data) {
 
+                        case 'error 101':
 
+                            console.log('发送的消息有误');
 
+                            break;
 
+                        case 'error 102':
 
+                            //pop_tip('连接打印机失败<br/>请重新刷新页面');
 
+                            break;
 
+                        case 'error 302':
 
+                            app.hideLoading()
 
+                            app.showAlert('网络异常，生成失败', 'fail')
 
+                            break;
 
+                        case 'error 404':
 
+                            app.switchId = 0;
 
+                            app.showAlert('切换图片失败', 'error');
 
+                            break;
 
+                        case 'error 500':
 
+                            app.is_connect_ok = false
 
+                            if (app.is_send_msg) {
 
+                                app.hideLoading()
 
+                                app.showAlert('网络异常，请稍后再试', 'error');
 
+                            }
 
+                            break;
 
+                        case 'error 600':
 
+                            //console.log('未定义的消息');
 
+                            break;
 
+                        case 'error 707':
 
+                            app.showAlert('二维码不正确', 'error')
 
+                            break;
 
+                        case 'error 808':
 
+                            app.is_lose_used = true
 
+                            if (app.is_send_msg) {
 
+                                app.showAlert('当前画屏正在被使用，请稍后', 'used');
 
+                            }
 
+                            break;
 
+                        case 'error 202':
 
+                            break;
 
+                        case 'error 909':
 
+                            app.is_other_used = true;
 
+                            if (app.is_send_msg) {
 
+                                app.showAlert('当前画屏正在被使用，请稍后', 'used');
 
+                            }
 
+                            break;
 
+                        case 'ok 200':
 
+                            console.log('切换图片成功')
 
+                            break;
 
+                        case 'ok 201':
 
+                            console.log('操作成功')
 
+                            app.is_connect_ok = null
 
+                            app.checkTimeout(true)
 
+                            app.checkOperationTimeout(true)
 
+                            break;
 
+                        case 'ok 300':
 
+                            app.hideLoading();
 
+                            app.is_lose_used = false;
 
+                            app.is_other_used = false;
 
+                            app.is_connect_ok = true;
 
+                            app.checkTimeout()
 
+                            app.checkOperationTimeout()
 
+                            break;
 
+                        case 'ok 301':
 
+                            console.log('拍照成功,开始等待照片')
 
+                            app.is_action = false;
 
+                            app.checkTimeout(true)
 
+                            app.checkOperationTimeout(true)
 
+                            app.showActionTips(1000, function () {
 
+                                app.showLoading()
 
+                            });
 
+                            timer = setTimeout(function () {
 
+                                app.send('close')
 
+                                setTimeout(() => {
 
+                                    app.hideLoading()
 
+                                    app.showAlert('网络异常，生成失败', 'fail')
 
+                                }, 500);
 
+                            }, 20000);
 
+                            break;
 
+                        case 'ok 1000':
 
+                            app.is_lose_used = false;
 
+                            app.is_other_used = false;
 
+                            break;
 
+                        default:
 
+                            try {
 
+                                app.is_action = true;
 
+                                timer && clearTimeout(timer)
 
+                                var json = JSON.parse(msg.data)
 
+                                if (json.url) {
 
+                                    app.showView(json)
 
+                                }
 
+                            } catch (error) {
 
+                                console.error(error)
 
+                            }
 
+
 
+                            break;
 
+                    }
 
+                    app.is_send_msg = false
 
+
 
+                } else {
 
+                    console.log("error 600");
 
+                }
 
+            }.bind(this);
 
+        } catch (error) {
 
+            console.error(error)
 
+            setTimeout(function () {
 
+                app.connection()
 
+            }, 5000)
 
+        }
 
+    },
 
+    send: function (msg) {
 
+        if (msg === 'request') {
 
+            this.websocket.send(msg + ' ' + this.id)
 
+        } else if (msg === 'close') {
 
+            this.websocket.send(msg + ' 0')
 
+        } else {
 
+
 
+            if (app.is_connect_ok == null && !app.is_other_used) {
 
+                app.websocket.send('request ' + this.id)
 
+            }
 
+
 
+            setTimeout(function () {
 
+                app.websocket.send(msg)
 
+            }, 300);
 
+        }
 
+    },
 
+    sendCheck() {
 
+
 
+        if (!this.is_connect) {
 
+            app.showAlert('网络异常，请稍后再试', 'error');
 
+            return false;
 
+        } else if (this.is_other_used) {
 
+            app.showAlert('当前画屏正在被使用，请稍后', 'used');
 
+            return false;
 
+        } else if (this.is_lose_used) {
 
+            app.showAlert('当前画屏正在被使用，请稍后', 'used');
 
+            return false;
 
+        } else if (this.is_connect_ok === false) {
 
+            app.showAlert('网络异常，请稍后再试', 'error');
 
+            return false;
 
+        }
 
+
 
+        this.is_send_msg = true;
 
+
 
+        return true;
 
+    },
 
+    checkOperationTimeout(stop) {
 
+        this.operationTimer && clearTimeout(this.operationTimer)
 
+
 
+        if (stop) {
 
+            // 暂停检测
 
+            return
 
+        }
 
+
 
+        this.operationTimer = setTimeout(function () {
 
+            if (app.is_connect_ok) {
 
+                app.send('close')
 
+                app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'timeout')
 
+            }
 
+        }, (__config.noOperationTimeout || 30) * 1000);
 
+    },
 
+    checkTimeout(stop) {
 
+        this.timeoutTimer && clearTimeout(this.timeoutTimer)
 
+
 
+        if (stop) {
 
+            // 暂停检测
 
+            return
 
+        }
 
+        // 强制超时结束控制 180s
 
+        this.timeoutTimer = setTimeout(function () {
 
+            if (app.is_connect_ok) {
 
+                app.send('close')
 
+                app.showAlert('抱歉，因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
 
+            }
 
+        }, (__config.timeout || 180) * 1000);
 
+    },
 
+    render: function () {
 
+        this.connection()
 
+        this.events()
 
+        this.adsSwiper()
 
+        this.stlSwiper()
 
+        this.picSwiper()
 
+
 
+        // this.imgList.push({
 
+        //     "id": 7,
 
+        //     "url": "http://ost.4dage.com/4dart/img/31913592.jpg",
 
+        //     "datetime": "2018年10月29日 16:27:26"
 
+        // })
 
+    }
 
+}
 
+app.render()
 
+
 
+window.onbeforeunload = function () {
 
+    try {
 
+        app.websocket.close();
 
+        app.websocket = null;
 
+    } catch (ex) {}
 
+};
 
+
 
+//app.showAlert('抱歉，因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
 
+//app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'stop')
 
+//app.showAlert('当前画屏正在被使用，请稍后', 'used')
 
+//app.showAlert('网络异常，请稍后再试', 'error')
 
+//app.showAlert('网络异常，生成失败', 'fail')
 
+//app.showAlert('您已丢失使用权', 'used');

+ 52 - 0
static/js/config.js
ファイルの表示 

@@ -0,0 +1,52 @@
 
+window.__config = {
 
+    /**
 
+     * websocket地址
 
+     */
 
+    ws: 'ws://4dart.4dage.com:8013', //'ws://139.159.231.201:8011',
 
+    /**
 
+     * 静态资源地址
 
+     */
 
+    staticUrl: "",
 
+    /**
 
+     * 使用超时时间180s
 
+     */
 
+    timeout: 180,
 
+    /**
 
+     * 长时间无操作超时30s
 
+     */
 
+    noOperationTimeout: 30,
 
+
 
+    /**
 
+     * 画风切换间隔时间3s
 
+     */
 
+    switchInterval: 3,
 
+    /**
 
+     * logo链接
 
+     */
 
+    link:'',
 
+    /**
 
+     * 广告图地址
 
+     */
 
+    adsPath: [
 
+        {
 
+            link: '',
 
+            image: 'static/images/adds/1.jpg'
 
+        },
 
+        {
 
+            link: '',
 
+            image: 'static/images/adds/2.jpg'
 
+        },
 
+        {
 
+            link: '',
 
+            image: 'static/images/adds/3.jpg'
 
+        },
 
+        {
 
+            link: '',
 
+            image: 'static/images/adds/4.jpg'
 
+        },
 
+        {
 
+            link: '',
 
+            image: 'static/images/adds/5.jpg'
 
+        }
 
+    ]
 
+}

ファイルの差分が大きいため隠しています
+ 11 - 0
static/public/animate.min.css


ファイルの差分が大きいため隠しています
+ 2 - 0
static/public/flexible.min.js


ファイルの差分が大きいため隠しています
+ 2 - 0
static/public/jquery.min.js


ファイルの差分が大きいため隠しています
+ 12 - 0
static/public/swiper-4.3.5.min.css


ファイルの差分が大きいため隠しています
+ 13 - 0
static/public/swiper-4.3.5.min.js