update

Former-commit-id: 480d39e39aebb14d9ce683086c2c832a16c32ec3

projects/IoTCenter/wwwroot/index.html

@@ -1,23 +1,27 @@
-<div class="page js_show">
-    <div class="page__bd" style="height: 100%;">
-        <div class="weui-tab">
-            <div class="weui-tab__panel">
-                <router-link to="/">首页</router-link>
-            </div>
-            <div class="weui-tabbar">
-                <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">产品</p>
-                </a>
-                <a href="javascript:;" class="weui-tabbar__item">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">节点</p>
-                </a>
-                <a href="javascript:;" class="weui-tabbar__item">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">我的</p>
-                </a>
-            </div>
+<div class="weui-tab" id="tab">
+    <div class="weui-tab__panel">
+        <div class="weui-tab__content page_feedback">
+            <router-link to="/">首页</router-link>
         </div>
+        <div class="weui-tab__content">
+            <router-link to="/">2</router-link>
+        </div>
+        <div class="weui-tab__content">
+            <router-link to="/">3</router-link>
+        </div>
+    </div>
+    <div class="weui-tabbar">
+        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">产品</p>
+        </a>
+        <a href="javascript:;" class="weui-tabbar__item">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">节点</p>
+        </a>
+        <a href="javascript:;" class="weui-tabbar__item">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">我的</p>
+        </a>
     </div>
 </div>

projects/IoTCenter/wwwroot/index.js

@@ -9,9 +9,8 @@
                     };
                 },
                 mounted: function () {
-                    $('.weui-tabbar__item').on('click', function () {
-                        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
-                    });
+                    console.log('mounted');
+                    weui.tab('#tab');
                 },
                 methods: {
                 }

projects/gateway/src/main/resources/static/css/app.css

@@ -1,30 +1,599 @@
-/*page init*/
-body{
-    marin:0;
-    padding:0;
+body, html {
+    height: 100%;
+    -webkit-tap-highlight-color: transparent
+}
+
+body {
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif
+}
+
+ul {
+    list-style: none
+}
+
+.page, body {
+    background-color: #ededed
 }
-#loading {
-    background-color: lightblue;
+
+.page {
+    box-sizing: border-box
+}
+
+.link {
+    color: #07c160
+}
+
+.container {
+    overflow: hidden
+}
+
+.container, .page {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 10000;
-    color: #fff;
-    font-size: 30px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.page {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    opacity: 0;
+    z-index: 1
+}
+
+    .page.js_show {
+        opacity: 1
+    }
+
+.page__hd {
+    padding: 40px
+}
+
+.page__bd_spacing {
+    padding: 0 16px
+}
+
+.page__ft {
+    padding-top: 40px;
+    padding-bottom: 10px;
+    padding-bottom: calc(10px + constant(safe-area-inset-bottom));
+    padding-bottom: calc(10px + env(safe-area-inset-bottom));
+    text-align: center
+}
+
+    .page__ft img {
+        height: 19px
+    }
+
+    .page__ft.j_bottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0
+    }
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400
+}
+
+.page__desc {
+    margin-top: 4px;
+    color: rgba(0,0,0,.5);
+    text-align: left;
+    font-size: 14px
+}
+
+.weui-cell_example:before {
+    left: 52px
+}
+
+.page.progress {
+    background-color: #fff
+}
+
+.page.home .page__intro-icon {
+    margin-top: -.2em;
+    margin-left: 5px;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle
+}
+
+.page.home .page__title {
+    font-size: 0;
+    margin-bottom: 15px
+}
+
+.page.home .page__bd img {
+    width: 30px;
+    height: 30px
+}
+
+.page.home .page__bd li {
+    margin: 8px 0;
+    background-color: #fff;
+    overflow: hidden;
+    border-radius: 2px;
+    cursor: pointer
+}
+
+    .page.home .page__bd li.js_show .weui-flex {
+        opacity: .5
+    }
+
+    .page.home .page__bd li.js_show .page__category {
+        height: auto
+    }
+
+    .page.home .page__bd li.js_show .page__category-content {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0)
+    }
+
+    .page.home .page__bd li:first-child {
+        margin-top: 0
+    }
+
+.page.home .page__category {
+    height: 0;
+    overflow: hidden
+}
+
+.page.home .page__category-content {
+    opacity: 0;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    -webkit-transition: .3s;
+    transition: .3s
+}
+
+.page.home .weui-flex {
+    padding: 20px;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-transition: .3s;
+    transition: .3s
+}
+
+.page.home .weui-cells {
+    margin-top: 0
+}
+
+    .page.home .weui-cells:after, .page.home .weui-cells:before {
+        display: none
+    }
+
+.page.home .weui-cell {
+    padding-left: 20px;
+    padding-right: 20px
+}
+
+    .page.home .weui-cell:before {
+        left: 20px;
+        right: 20px
+    }
+
+.page.form .weui-label {
+    width: 3.1em
+}
+
+.page.form_page .weui-label {
+    width: 4.1em
+}
+
+.page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select {
+    width: 3.1em
+}
+
+[class*=" form_"].page, [class^=form_].page {
+    padding: 0
+}
+
+.page.form_input_status .weui-label, .page.form_select .weui-label, .page.form_select_primary .weui-label, .page.form_vcode .weui-label {
+    width: 3.1em
+}
+
+.page.button {
+    background-color: #ededed
+}
+
+    .page.button .weui-btn_mini {
+        vertical-align: middle
+    }
+
+    .page.button .page__bd {
+        padding: 0
+    }
+
+    .page.button .button-sp-area {
+        margin: 15px auto;
+        padding: 15px;
+        text-align: center
+    }
+
+        .page.button .button-sp-area.cell {
+            padding: 15px 0
+        }
+
+.page.cell .page__bd {
+    padding-bottom: 30px
+}
+
+.page.form {
+    background-color: #fff
+}
+
+    .page.form .page__bd {
+        padding-bottom: 30px
+    }
+
+.page.actionsheet, .page.dialog {
+    background-color: #fff
+}
+
+    .page.dialog .page__bd {
+        padding: 0 15px
+    }
+
+.page.msg, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.toast {
+    background-color: #fff
+}
+
+.page.panel .page__bd {
+    padding-bottom: 20px
+}
+
+.page.article {
+    background-color: #fff
+}
+
+.page.icons, .page.icons-svg {
+    text-align: center
+}
+
+    .page.icons-svg .page__bd, .page.icons .page__bd {
+        padding: 0 40px;
+        text-align: left
+    }
+
+    .page.icons-svg .icon-box, .page.icons .icon-box {
+        margin-bottom: 25px;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center
+    }
+
+        .page.icons-svg .icon-box i, .page.icons .icon-box i {
+            margin-right: 18px
+        }
+
+    .page.icons-svg .icon-box__ctn, .page.icons .icon-box__ctn {
+        -webkit-flex-shrink: 100;
+        flex-shrink: 100
+    }
+
+    .page.icons-svg .icon-box__title, .page.icons .icon-box__title {
+        font-weight: 400
+    }
+
+    .page.icons-svg .icon-box__desc, .page.icons .icon-box__desc {
+        margin-top: 6px;
+        font-size: 12px;
+        color: #888
+    }
+
+    .page.icons-svg .icon_sp_area, .page.icons .icon_sp_area {
+        margin-top: 10px;
+        text-align: left
+    }
+
+        .page.icons-svg .icon_sp_area i:before, .page.icons .icon_sp_area i:before {
+            margin-bottom: 5px
+        }
+
+.page.flex .placeholder {
+    margin: 5px;
+    padding: 0 10px;
+    background-color: #f7f7f7;
+    height: 2.3em;
+    line-height: 2.3em;
     text-align: center;
+    color: rgba(0,0,0,.3)
 }
-.field-validation-valid, .field-validation-error {
-    height: 1em;
-    font-size: .8em;
+
+.page.loadmore {
+    background-color: #fff
+}
+
+.page.layers {
+    overflow-x: hidden;
+    -webkit-perspective: 1000px;
+    perspective: 1000px
 }
 
-    .field-validation-error span {
-        color: red;
+@media only screen and (max-width:320px) {
+    .page.layers .page__hd {
+        padding-left: 20px;
+        padding-right: 20px
     }
+}
 
-.page {
-    /*background-color: white;*/
+.page.layers .page__bd {
+    position: relative
+}
+
+.page.layers .page__desc {
+    min-height: 4.8em
+}
+
+.page.layers .layers__layer {
+    position: absolute;
+    left: 50%;
+    width: 150px;
+    height: 266px;
+    margin-left: -75px;
+    box-sizing: border-box;
+    -webkit-transition: .5s;
+    transition: .5s;
+    background: url(images/layers/transparent.gif) no-repeat 50%;
+    background-size: contain;
+    font-size: 14px;
+    color: #fff
+}
+
+    .page.layers .layers__layer span {
+        position: absolute;
+        bottom: 5px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        -webkit-transition: .5s;
+        transition: .5s
+    }
+
+    .page.layers .layers__layer:last-child span {
+        color: #aaa
+    }
+
+    .page.layers .layers__layer.j_hide {
+        opacity: 0
+    }
+
+    .page.layers .layers__layer.j_pic span {
+        color: transparent
+    }
+
+@media only screen and (min-width:375px) and (min-height:603px) {
+    .page.layers .layers__layer {
+        width: 180px;
+        height: 320px;
+        margin-left: -90px
+    }
+}
+
+@media only screen and (min-width:414px) and (min-height:640px) {
+    .page.layers .layers__layer {
+        width: 200px;
+        height: 355px;
+        margin-left: -100px
+    }
+}
+
+.page.layers .layers__layer_popout {
+    border: 1px solid hsla(0,0%,80%,.5);
+    z-index: 4
+}
+
+    .page.layers .layers__layer_popout.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)
+    }
+
+@media only screen and (max-width:320px) {
+    .page.layers .layers__layer_popout.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)
+    }
+}
+
+.page.layers .layers__layer_popout.j_pic {
+    border-color: transparent;
+    background-image: url(images/layers/popout.png)
+}
+
+.page.layers .layers__layer_mask {
+    background-color: rgba(0,0,0,.5);
+    z-index: 3
+}
+
+    .page.layers .layers__layer_mask.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)
+    }
+
+@media only screen and (max-width:320px) {
+    .page.layers .layers__layer_mask.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)
+    }
+}
+
+.page.layers .layers__layer_navigation {
+    background-color: rgba(40,187,102,.5);
+    z-index: 2
+}
+
+    .page.layers .layers__layer_navigation.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)
+    }
+
+@media only screen and (max-width:320px) {
+    .page.layers .layers__layer_navigation.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)
+    }
+}
+
+.page.layers .layers__layer_navigation.j_pic {
+    background-color: transparent;
+    background-image: url(images/layers/navigation.png)
 }
-.toast-top-center .toast {
-    left: auto !important;
+
+.page.layers .layers__layer_content {
+    background-color: #fff;
+    z-index: 1
+}
+
+    .page.layers .layers__layer_content.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)
+    }
+
+@media only screen and (max-width:320px) {
+    .page.layers .layers__layer_content.j_transform {
+        -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);
+        transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)
+    }
+}
+
+.page.layers .layers__layer_content.j_pic {
+    background-image: url(images/layers/content.png)
+}
+
+.page.searchbar .searchbar-result {
+    display: none;
+    margin-top: 0;
+    font-size: 14px
+}
+
+    .page.searchbar .searchbar-result .weui-cell__bd {
+        padding: 2px 0 2px 20px;
+        color: #666
+    }
+
+.page.actionsheet, .page.picker {
+    overflow: hidden
+}
+
+.page.picker {
+    background-color: #fff
+}
+
+.page.gallery {
+    overflow: hidden
+}
+
+.weui-half-screen-dialog {
+    -webkit-transition: -webkit-transform .3s;
+    transition: -webkit-transform .3s;
+    transition: transform .3s;
+    transition: transform .3s,-webkit-transform .3s;
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%)
+}
+
+.weui-half-screen-dialog_show {
+    -webkit-transform: translateY(0);
+    transform: translateY(0)
+}
+
+@-webkit-keyframes a {
+    0% {
+        -webkit-transform: translate3d(100%,0,0);
+        transform: translate3d(100%,0,0);
+        opacity: 0
+    }
+
+    to {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1
+    }
+}
+
+@keyframes a {
+    0% {
+        -webkit-transform: translate3d(100%,0,0);
+        transform: translate3d(100%,0,0);
+        opacity: 0
+    }
+
+    to {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes b {
+    0% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1
+    }
+
+    to {
+        -webkit-transform: translate3d(100%,0,0);
+        transform: translate3d(100%,0,0);
+        opacity: 0
+    }
+}
+
+@keyframes b {
+    0% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1
+    }
+
+    to {
+        -webkit-transform: translate3d(100%,0,0);
+        transform: translate3d(100%,0,0);
+        opacity: 0
+    }
+}
+
+.page.slideIn {
+    -webkit-animation: a .2s forwards;
+    animation: a .2s forwards
+}
+
+.page.slideOut {
+    -webkit-animation: b .2s forwards;
+    animation: b .2s forwards
+}
+
+@supports (top:constant(safe-area-inset-top)) {
+    .page {
+        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)
+    }
+
+        .page.navbar, .page.tabbar {
+            padding-left: 0;
+            padding-right: 0
+        }
+
+    .weui-tab__panel {
+        padding-left: constant(safe-area-inset-left);
+        padding-right: constant(safe-area-inset-right)
+    }
+}
+
+@supports (top:env(safe-area-inset-top)) {
+    .page {
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
+    }
+
+        .page.article, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.navbar, .page.tabbar {
+            padding: 0
+        }
 }

projects/gateway/src/main/resources/static/pages/home.html

@@ -1,23 +1,27 @@
-<div class="page js_show">
-    <div class="page__bd" style="height: 100%;">
-        <div class="weui-tab">
-            <div class="weui-tab__panel">
-                <router-link to="/IoTCenter/index">物联网中心</router-link>
-            </div>
-            <div class="weui-tabbar">
-                <a href="javascript:;" class="weui-tabbar__item">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">消息</p>
-                </a>
-                <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">应用</p>
-                </a>
-                <a href="javascript:;" class="weui-tabbar__item">
-                    <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
-                    <p class="weui-tabbar__label">我的</p>
-                </a>
-            </div>
+<div class="weui-tab" id="tab">
+    <div class="weui-tab__panel">
+        <div class="weui-tab__content page_feedback">
+            <router-link to="/IoTCenter/index">物联网中心</router-link>
         </div>
+        <div class="weui-tab__content">
+            <router-link to="/IoTCenter/index">物联网中心2</router-link>
+        </div>
+        <div class="weui-tab__content">
+            <router-link to="/IoTCenter/index">物联网中心3</router-link>
+        </div>
+    </div>
+    <div class="weui-tabbar">
+        <a href="javascript:;" class="weui-tabbar__item">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">消息</p>
+        </a>
+        <a href="javascript:;" class="weui-tabbar__item">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">应用</p>
+        </a>
+        <a href="javascript:;" class="weui-tabbar__item">
+            <i class="weui-icon-success weui-icon_msg weui-tabbar__icon"></i>
+            <p class="weui-tabbar__label">我的</p>
+        </a>
     </div>
 </div>

projects/gateway/src/main/resources/static/pages/home.js

@@ -10,9 +10,8 @@
                     };
                 },
                 mounted: function () {
-                    $('.weui-tabbar__item').on('click', function () {
-                        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
-                    });
+                    console.log('mounted');
+                    weui.tab('#tab');
                 },
                 methods: {
                 }