微信模板调整

app/wechat/view/api/review/main.html

@@ -11,6 +11,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
     <link rel="shortcut icon" href="{:sysconf('site_icon')}">
+    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css">
     <link rel="stylesheet" href="__ROOT__/static/theme/css/mobile.css">
     {block name='style'}{/block}
     <script src="__ROOT__/static/plugs/jquery/pace.min.js"></script>

app/wechat/view/api/review/music.html

@@ -4,30 +4,43 @@
 <div class="header"><span>{:date('H:i')}</span></div>
 <div class="container">
     <div class="logo">Ta</div>
-    <div class="content arrow">
+    <div class="content arrow" style="white-space:nowrap">
+        <div style="display:inline-block;overflow:hidden;text-overflow: ellipsis">
             <div class="content-title">{$title|default=''}</div>
             <div class="content-content">{$desc|default=''}</div>
-        <a href="javascript:void(0)" id="audio_btn" class="content-button icon icon-play"></a>
+        </div>
-        <div style="clear:both"></div>
+        <a href="javascript:void(0)" id="AudioBtn" class="content-button icon icon-play"></a>
-        <audio id="audio">
-            <source src="{$url|default=''}">
-        </audio>
-        <script>
-            var audio = document.getElementById('audio');
-            var button = document.getElementById('audio_btn');
-            setInterval(function () {
-                button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
-            }, 500);
-            button.onclick = function () {
-                audio.paused ? audio.play() : audio.pause()
-            }
-        </script>
     </div>
 </div>
+<audio style="display:none" id="AudioSrc">
+    <source src="{$url|default=''}">
+</audio>
+<script>
+    (function (audio, button) {
+        audio.onerror = function () {
+            button.className = 'icon icon-play';
+        };
+        button.onclick = function () {
+            audio.paused ? audio.play() : audio.pause()
+        };
+        button.onapply = function () {
+            button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
+        };
+        setInterval(button.onapply, 500), button.onapply();
+    })(document.getElementById('AudioSrc'), document.getElementById('AudioBtn'));
+</script>
 {/block}
 
 {block name='style'}
 <style>
+    .content {
+        color: #fff;
+        width: 58vw !important;
+        border: none !important;
+        background: #080 !important;
+        white-space: nowrap !important
+    }
+
     .content-title {
         width: 7.5rem;
         overflow: hidden;
@@ -50,24 +63,16 @@
         text-overflow: ellipsis;
     }
 
-    .icon {
+    .content .icon {
         color: #fff;
-        font-size: 1.5rem
+        top: -.5rem;
+        font-size: 1.5rem;
+        position: relative;
     }
 
-    .container .content {
+    .container .content:after,
-        width: 58vw !important;
+    .container .content:before {
-        border: none !important;
-        background: #080 !important;
-        white-space: nowrap !important
-    }
-
-    .container .content:after, .container .content:before {
         border-color: transparent #080 transparent transparent !important
     }
-
-    .container .content {
-        color: #fff
-    }
 </style>
 {/block}

app/wechat/view/api/review/news.html

@@ -63,7 +63,7 @@
         max-height: 5em;
         overflow: hidden;
         position: absolute;
-        line-height: 1.5em;
+        line-height: 2em;
         white-space: nowrap;
         margin: 0 -1px 0 -1px;
         text-overflow: ellipsis;

app/wechat/view/api/review/voice.html

@@ -6,22 +6,26 @@
     <div class="logo">A</div>
     <div class="content arrow">
         <a class="icon icon-volume left-text"></a>
-        <a href="javascript:void(0)" id="audio_btn" class="icon icon-pause"></a>
+        <a href="javascript:void(0)" id="AudioBtn" class="icon icon-pause"></a>
-        <audio id="audio">
+        <audio id="AudioSrc">
             <source src="{$url|default=''}">
         </audio>
-        <script>
-            var audio = document.getElementById('audio');
-            var button = document.getElementById('audio_btn');
-            setInterval(function () {
-                button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
-            }, 500);
-            button.onclick = function () {
-                audio.paused ? audio.play() : audio.pause()
-            }
-        </script>
     </div>
 </div>
+<script>
+    (function (audio, button) {
+        audio.onerror = function () {
+            button.className = 'icon icon-play';
+        };
+        button.onclick = function () {
+            audio.paused ? audio.play() : audio.pause()
+        };
+        button.onapply = function () {
+            button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
+        };
+        setInterval(button.onapply, 500), button.onapply();
+    })(document.getElementById('AudioSrc'), document.getElementById('AudioBtn'));
+</script>
 {/block}
 
 {block name='style'}

public/static/theme/css/console.custom.less

@@ -6,7 +6,7 @@
   line-height: 22px;
   border-radius: 5px;
   letter-spacing: 6px;
-  border: 1px solid #DDD;
+  border: 1px solid #DCDCDC;
   background-color: #f2f2f2;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
 }
@@ -965,7 +965,7 @@
         color: #333;
         width: 33px;
         height: 30px;
-        border: 1px solid #dcdcdc;
+        border: 1px solid #DCDCDC;
         display: inline-block;
         margin-left: -1px;
         text-align: center;
@@ -973,13 +973,13 @@
       }
 
       > span {
-        background: #dcdcdc;
+        background: #DCDCDC;
         cursor: default
       }
 
       > a:hover {
-        background: #dcdcdc;
+        background: #DCDCDC;
-        border-color: #dcdcdc
+        border-color: #DCDCDC
       }
     }
   }

public/static/theme/css/console.layui.less

@@ -1,13 +1,13 @@
 fieldset {
   margin: 0 0 10px 0;
-  border: 1px solid #DDD;
+  border: 1px solid #DCDCDC;
   padding: 10px 20px 5px 20px;
   background: #fff;
   border-radius: 5px;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
 
   legend {
-    color: #333;
+    color: #666;
     padding: 0 10px;
     font-size: 14px;
   }
@@ -53,26 +53,31 @@ fieldset {
   }
 
   &-disabled {
-    border: 1px solid #DDD;
+    border: 1px solid #DCDCDC;
   }
 
   & + .layui-btn {
     margin-left: 8px;
   }
-}
 
-.layui-btn-group {
+  &-group {
-  .layui-btn:last-child {
+    overflow: hidden;
-    border-radius: 0 5px 5px 0;
+    border-radius: 5px;
+    background: #009688;
+    border: 1px solid #009688 !important;
+
+    .layui-btn {
+      border-width: 0 !important;
+
+      + .layui-btn {
+        margin-left: 1px !important;
       }
 
-  .layui-btn:first-child {
+      &-primary:hover {
-    border-radius: 5px 0 0 5px;
-  }
-
-  .layui-btn-primary:hover {
         border-color: #009688;
       }
+    }
+  }
 }
 
 .layui-badge {
@@ -157,7 +162,6 @@ fieldset {
 }
 
 /** 自定义表单样式 */
-
 .think-box-shadow {
   padding: 20px !important;
   background: #fff !important;
@@ -166,62 +170,38 @@ fieldset {
 }
 
 /** checkbox & radio */
-label.think-checkbox, label.think-radio {
+label.think-radio, label.think-checkbox {
-  margin-right: 10px;
   display: inline-block;
 }
 
-.think-checkbox, .think-radio {
+.think-radio, .think-checkbox {
   cursor: pointer;
   margin-top: 10px;
+  margin-right: 10px;
   font-weight: 400;
   line-height: 18px;
-}
 
-.think-checkbox input[type=checkbox] {
+  input[type=radio], input[type=checkbox] {
     width: 18px;
     height: 18px;
-  border: 1px solid #dcdcdc;
+    border: 1px solid #DCDCDC;
-  cursor: pointer;
-  margin: 0 5px 0 0;
     position: relative;
-  display: inline-block !important;
     background: #fff;
-  appearance: none;
+    margin-right: 5px;
-  box-sizing: border-box !important;
-  border-radius: 1px;
     vertical-align: bottom;
+    display: inline-block !important;
+    box-sizing: border-box !important;
+    appearance: none;
     -webkit-appearance: none;
 
     &:checked:after {
-    color: #666;
-    padding: 2px;
       display: block;
-    content: "\e605";
-    font-size: 12px;
-    position: absolute;
-    font-style: normal;
-    font-weight: 700;
-    font-family: layui-icon !important;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-  }
-}
-
-.think-radio input[type=radio] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  margin: 0 5px 0 0;
       position: relative;
-  border: 1px solid #dcdcdc;
+    }
-  display: inline-block !important;
+  }
-  box-sizing: border-box !important;
+
-  appearance: none;
+  input[type=radio] {
-  background: #fff;
     border-radius: 1em;
-  vertical-align: bottom;
-  -webkit-appearance: none;
 
     &:checked:after {
       top: 4px;
@@ -229,11 +209,26 @@ label.think-checkbox, label.think-radio {
       width: 8px;
       height: 8px;
       content: '';
-    display: block;
-    position: relative;
       background: #666;
       border-radius: 1em
     }
+  }
+
+  input[type=checkbox] {
+    border-radius: 1px;
+
+    &:checked:after {
+      color: #666;
+      padding: 2px;
+      content: "\e605";
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 700;
+      font-family: layui-icon !important;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale
+    }
+  }
 }
 
 .layui-layer-content .layui-form.layui-card .layui-card-body {
@@ -254,30 +249,10 @@ label.think-checkbox, label.think-radio {
   line-height: 38px
 }
 
-.layui-btn-group {
-  > .layui-btn {
-    border-right: 0 !important;
-    border-left: 1px solid #009688 !important;
-
-    &:last-child {
-      border-right: 1px solid #009688 !important;
-    }
-
-    &.layui-btn-active {
-      border-left: 0 !important;
-      border-right: 0 !important;
-
-      + .layui-btn {
-        border-left: 0 !important;
-      }
-    }
-  }
-}
-
 .layui-table {
   overflow: hidden;
   border-width: 0;
-  border-color: #ddd;
+  border-color: #DCDCDC;
   border-radius: 5px;
   border-collapse: separate;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
@@ -291,7 +266,7 @@ label.think-checkbox, label.think-radio {
   }
 
   &[lay-skin='line'] {
-    border-color: #ddd;
+    border-color: #DCDCDC;
     border-width: 0 0 1px 0;
 
     tr {
@@ -311,7 +286,7 @@ label.think-checkbox, label.think-radio {
   tr {
     td, th {
       font-size: 12px;
-      border-color: #ddd;
+      border-color: #DCDCDC;
       border-width: 0 0 1px 1px;
 
       .text-explode {
@@ -406,7 +381,7 @@ label.think-checkbox, label.think-radio {
       color: #666;
       padding: 2px;
       font-size: 9pt;
-      border: 1px solid #DDD;
+      border: 1px solid #DCDCDC;
       text-align: center;
       line-height: 18px
     }

public/static/theme/css/mobile.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["mobile.less"],"names":[],"mappings":"4EACA,oBACE,SAAA,CACA,WAGF,0BACE,eAAA,YAGF,0BACE,qBAAA,YAGF,EACE,QAAA,CACA,SAAA,CACA,SAAA,CACA,uBAGF,KAAM,KACJ,eAGF,KACE,gBAAA,CACA,8BAGF,KACE,SAGF,KACE,cAGF,GACE,cAAA,CACA,cAGF,GACE,gBAAA,CACA,sBAAA,CACA,SAGF,IACE,aAAA,CACA,sBAGF,EACE,6BAGF,IAAI,QACF,kBAAA,CACA,yBAAA,CACA,iCAGF,EAAG,OACD,mBAGF,KAAM,IAAK,KACT,aAAA,CACA,sBAGF,MACE,cAGF,IAAK,IACH,iBAAA,CACA,uBAAA,CACA,aAAA,CACA,cAGF,IACE,eAGF,IACE,WAGF,IACE,kBAGF,OAAQ,MAAO,SAAU,OAAQ,SAC/B,QAAA,CACA,cAAA,CACA,mBAAA,CACA,iBAGF,OAAQ,MACN,iBAGF,OAAQ,OACN,oBAGF,cAAe,aAAc,cAAe,OAC1C,0BAGF,aAAa,mBAAoB,YAAY,mBAAoB,aAAa,mBAAoB,MAAM,mBACtG,SAAA,CACA,kBAGF,aAAa,gBAAiB,YAAY,gBAAiB,aAAa,gBAAiB,MAAM,gBAC7F,8BAGF,SACE,2BAGF,OACE,aAAA,CACA,qBAAA,CACA,SAAA,CACA,cAAA,CACA,aAAA,CACA,mBAGF,SACE,wBAGF,SACE,cAGF,gBAAiB,aACf,qBAAA,CACA,UAGF,aAAa,4BAA6B,aAAa,4BACrD,YAGF,cACE,mBAAA,CACA,6BAGF,aAAa,4BACX,wBAGF,6BACE,YAAA,CACA,0BAGF,QACE,cAGF,QACE,kBAGF,SAAU,SACR,aAGF,EACE,qBAGF,wBAA0C,sBAAwB,kBAChE,KACE,cAAA,aAIJ,wBAA0C,sBAAwB,kBAChE,KACE,cAAA,aAIJ,wBAA0C,sBAAwB,kBAChE,KACE,gBAAA,aAIJ,wBAA0C,sBAAwB,kBAChE,KACE,gBAAA,aAIJ,wBAA0C,sBAAwB,kBAChE,KACE,gBAAA,aAIJ,wBAA0C,iBACxC,KACE,cAAA,aAIJ,QACE,gBAAA,CACA,kBAFF,OAIE,MACE,mBAAA,CACA,mBAAA,CACA,eAAA,CACA,UAAA,CACA,gBAKJ,WACE,iBAAA,CACA,aAAA,CACA,eAAA,CACA,SAAA,CACA,UAAA,CACA,uBANF,UAQE,OACE,iBAAA,CACA,KAAA,CACA,oBAAA,CACA,YAAA,CACA,aAAA,CACA,iBAAA,CACA,eAAA,CACA,UAAA,CACA,QAAS,GAAT,CACA,iBAAA,CACA,eAAA,CACA,mBApBJ,UAuBE,UACE,iBAAA,CACA,WAAA,CACA,oBAAA,CACA,yBAAA,CACA,cAAA,CACA,qBAAA,CACA,oBAAA,CACA,eAAA,CACA,eAAA,CACA,kBAjCJ,UAoCE,OAAM,OApCR,UAoCgB,OAAM,QAClB,iBAAA,CACA,SAAA,CACA,YAAA,CACA,OAAA,CACA,QAAA,CACA,qDAAA,CACA,kBAAA,CACA,gCAAA,CACA,QAAS,IA7Cb,UAgDE,OAAM,OACJ,eAAA,CACA,sDAIJ,WACE,YAAa,UAAb,CACA,QAAS,sCAAT,CACA,QAAS,6CAA6C,OAAO,yBAAwC,8jEAA8jE,OAAO,YACtqE,uCAAuC,OAAO,gBAAwE,gDAAgD,OAAO,OAGnL,MACE,YAAa,UAAb,YACA,cAAA,CACA,iBAAA,CACA,kCAAA,CACA,kCAEA,KAAC,KAAK,QACJ,QAAS,QAGX,KAAC,MAAM,QACL,QAAS,QAGX,KAAC,OAAO,QACN,QAAS","file":"mobile.css"}

public/static/theme/css/mobile.less

@@ -0,0 +1,314 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px
+}
+
+::-webkit-scrollbar-track {
+  background: #ccc !important
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #666 !important
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: content-box
+}
+
+body, html {
+  font-size: 20px
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%
+}
+
+body {
+  margin: 0
+}
+
+main {
+  display: block
+}
+
+h1 {
+  margin: .67em 0;
+  font-size: 2em
+}
+
+hr {
+  overflow: visible;
+  box-sizing: content-box;
+  height: 0
+}
+
+pre {
+  font-size: 1em;
+  font-family: monospace
+}
+
+a {
+  background-color: transparent
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted
+}
+
+b, strong {
+  font-weight: bolder
+}
+
+code, kbd, samp {
+  font-size: 1em;
+  font-family: monospace
+}
+
+small {
+  font-size: 80%
+}
+
+sub, sup {
+  position: relative;
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0
+}
+
+sub {
+  bottom: -.25em
+}
+
+sup {
+  top: -.5em
+}
+
+img {
+  border-style: none
+}
+
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-size: 100%;
+  font-family: inherit;
+  line-height: 1.15
+}
+
+button, input {
+  overflow: visible
+}
+
+button, select {
+  text-transform: none
+}
+
+[type=button], [type=reset], [type=submit], button {
+  -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
+  padding: 0;
+  border-style: none
+}
+
+[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
+  outline: 1px dotted ButtonText
+}
+
+fieldset {
+  padding: .35em .75em .625em
+}
+
+legend {
+  display: table;
+  box-sizing: border-box;
+  padding: 0;
+  max-width: 100%;
+  color: inherit;
+  white-space: normal
+}
+
+progress {
+  vertical-align: baseline
+}
+
+textarea {
+  overflow: auto
+}
+
+[type=checkbox], [type=radio] {
+  box-sizing: border-box;
+  padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+  height: auto
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button
+}
+
+details {
+  display: block
+}
+
+summary {
+  display: list-item
+}
+
+[hidden], template {
+  display: none
+}
+
+a {
+  text-decoration: none
+}
+
+@media only screen and (min-width: 320px) and (min-height: 480px) {
+  html {
+    font-size: 20px !important
+  }
+}
+
+@media only screen and (min-width: 320px) and (min-height: 568px) {
+  html {
+    font-size: 20px !important
+  }
+}
+
+@media only screen and (min-width: 360px) and (min-height: 640px) {
+  html {
+    font-size: 22.5px !important
+  }
+}
+
+@media only screen and (min-width: 375px) and (min-height: 667px) {
+  html {
+    font-size: 23.5px !important
+  }
+}
+
+@media only screen and (min-width: 414px) and (min-height: 736px) {
+  html {
+    font-size: 25.9px !important
+  }
+}
+
+@media only screen and (min-width: 736px) {
+  html {
+    font-size: 46px !important
+  }
+}
+
+.header {
+  margin-top: .4rem;
+  text-align: center;
+
+  span {
+    padding: .1rem .2rem;
+    border-radius: .5rem;
+    background: #999;
+    color: #fff;
+    font-size: .6rem
+  }
+}
+
+
+.container {
+  position: relative;
+  display: block;
+  margin: 5vw auto;
+  width: 90%;
+  color: #333;
+  text-overflow: ellipsis;
+
+  .logo {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background: #098;
+    color: #fff;
+    content: 'A';
+    text-align: center;
+    font-size: .8rem;
+    line-height: 2.5rem
+  }
+
+  .content {
+    position: relative;
+    left: 3.4rem;
+    display: inline-block;
+    padding: .8rem .8rem .8rem;
+    max-width: 54vw;
+    border: 1px solid #ccc;
+    border-radius: .25rem;
+    background: #fff;
+    font-size: .7rem;
+    line-height: 1.5em
+  }
+
+  .arrow:after, .arrow:before {
+    position: absolute;
+    top: .8rem;
+    left: -.4rem;
+    width: 0;
+    height: 0;
+    border-color: transparent #ccc transparent transparent;
+    border-style: solid;
+    border-width: .4rem .4rem .4rem 0;
+    content: ' '
+  }
+
+  .arrow:after {
+    margin-left: 1px;
+    border-color: transparent #fff transparent transparent
+  }
+}
+
+@font-face {
+  font-family: "iconfont";
+  src: url('./icon/iconfont.eot?t=1543820027953'); /* IE9 */
+  src: url('./icon/iconfont.eot?t=1543820027953#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+  url('./icon/iconfont.ttf?t=1543820027953') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('./icon/iconfont.svg?t=1543820027953#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.icon {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &-play:before {
+    content: "\e650"
+  }
+
+  &-pause:before {
+    content: "\e629"
+  }
+
+  &-volume:before {
+    content: "\e87a"
+  }
+}