diff --git a/projects/IoTCenter/wwwroot/index.html b/projects/IoTCenter/wwwroot/index.html index b8d5f142..649c2f4c 100644 --- a/projects/IoTCenter/wwwroot/index.html +++ b/projects/IoTCenter/wwwroot/index.html @@ -1,23 +1,27 @@ -
-
-
-
- 首页 -
- +
+
+
+ 首页
+
+ 2 +
+
+ 3 +
+
+
\ No newline at end of file diff --git a/projects/IoTCenter/wwwroot/index.js b/projects/IoTCenter/wwwroot/index.js index 60c5cecf..18415a6c 100644 --- a/projects/IoTCenter/wwwroot/index.js +++ b/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: { } diff --git a/projects/gateway/src/main/resources/static/css/app.css b/projects/gateway/src/main/resources/static/css/app.css index 222412da..677eba73 100644 --- a/projects/gateway/src/main/resources/static/css/app.css +++ b/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) +} + +.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 + } } -.toast-top-center .toast { - left: auto !important; -} \ No newline at end of file diff --git a/projects/gateway/src/main/resources/static/pages/home.html b/projects/gateway/src/main/resources/static/pages/home.html index 7141ddfd..dfeedc63 100644 --- a/projects/gateway/src/main/resources/static/pages/home.html +++ b/projects/gateway/src/main/resources/static/pages/home.html @@ -1,23 +1,27 @@ -
-
-
-
- 物联网中心 -
- +
+
+
+ 物联网中心
+
+ 物联网中心2 +
+
+ 物联网中心3 +
+
+
\ No newline at end of file diff --git a/projects/gateway/src/main/resources/static/pages/home.js b/projects/gateway/src/main/resources/static/pages/home.js index bc58f873..e6090562 100644 --- a/projects/gateway/src/main/resources/static/pages/home.js +++ b/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: { }