From 5b157bf2f8c4b5631988e41012d999b7a8554ffd Mon Sep 17 00:00:00 2001 From: wanggang <76527413@qq.com> Date: Wed, 8 Jan 2020 17:36:36 +0800 Subject: [PATCH] update Former-commit-id: 593344b9f449c4807b819e056a428a7c8d722496 --- projects/IoTCenter/wwwroot/home.js | 2 +- projects/WebUI/HomeController.cs | 9 +- projects/WebUI/Views/Home/Index.cshtml | 88 --- projects/WebUI/wwwroot/css/pc.css | 718 +++++++++++++++++++++++++ projects/WebUI/wwwroot/home.html | 41 ++ projects/WebUI/wwwroot/home.js | 20 + projects/WebUI/wwwroot/login.html | 33 ++ projects/WebUI/wwwroot/login.js | 43 ++ projects/WebUI/wwwroot/pc.html | 32 ++ projects/WebUI/wwwroot/pc.js | 79 +++ 10 files changed, 972 insertions(+), 93 deletions(-) delete mode 100644 projects/WebUI/Views/Home/Index.cshtml create mode 100644 projects/WebUI/wwwroot/css/pc.css create mode 100644 projects/WebUI/wwwroot/home.html create mode 100644 projects/WebUI/wwwroot/home.js create mode 100644 projects/WebUI/wwwroot/login.html create mode 100644 projects/WebUI/wwwroot/login.js create mode 100644 projects/WebUI/wwwroot/pc.html create mode 100644 projects/WebUI/wwwroot/pc.js diff --git a/projects/IoTCenter/wwwroot/home.js b/projects/IoTCenter/wwwroot/home.js index a07ffcbc..1e13aa89 100644 --- a/projects/IoTCenter/wwwroot/home.js +++ b/projects/IoTCenter/wwwroot/home.js @@ -1,4 +1,4 @@ -function IoTCenter_home() { +function home() { return Vue.component('IoTCenter_index', function (resolve, reject) { axios.get("/IoTCenter/home.html").then(function (response) { resolve({ diff --git a/projects/WebUI/HomeController.cs b/projects/WebUI/HomeController.cs index 700f4cca..78488c4d 100644 --- a/projects/WebUI/HomeController.cs +++ b/projects/WebUI/HomeController.cs @@ -9,18 +9,19 @@ namespace WebUI private readonly IWebHostEnvironment _env; private readonly IConfiguration _cfg; - public HomeController(IWebHostEnvironment env,IConfiguration cfg) + public HomeController(IWebHostEnvironment env, IConfiguration cfg) { this._env = env; this._cfg = cfg; } + public IActionResult Index() { - if(this._cfg.GetValue("FrontEnd")) + if (this._cfg.GetValue("FrontEnd")) { return File("~/index.html", "text/html"); } - return View(); + return File("~/pc.html", "text/html"); } } -} +} \ No newline at end of file diff --git a/projects/WebUI/Views/Home/Index.cshtml b/projects/WebUI/Views/Home/Index.cshtml deleted file mode 100644 index d14881c2..00000000 --- a/projects/WebUI/Views/Home/Index.cshtml +++ /dev/null @@ -1,88 +0,0 @@ -@{ - Layout = null; -} - - - - - - - - - - 首页 - - -
-
-
-
- -
-
- -
- -
- -
-

用户中心

- - -
- -
-

物联网中心

- - -
- -
-

学习中心

- - -
- -
-

管理中心

- -
-
-
- - @if (!User.Identity.IsAuthenticated) - { - 登录 - } - else - { -

@User.Identity.Name

- } -
-
-
- - -

消息

- - - -

应用

- - - -

我的

- -
-
-
- - - - - - - - \ No newline at end of file diff --git a/projects/WebUI/wwwroot/css/pc.css b/projects/WebUI/wwwroot/css/pc.css new file mode 100644 index 00000000..a94a1030 --- /dev/null +++ b/projects/WebUI/wwwroot/css/pc.css @@ -0,0 +1,718 @@ +body, html { + height: 100%; + background-color: #f8f8f8 +} + +body { + font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif +} + +.item { + padding: 10px 0 +} + +.item__title { + margin-bottom: 5px; + padding-left: 15px; + padding-right: 15px; + color: #999; + font-weight: 400; + font-size: 14px +} + +.item__ctn { + padding: 0 15px +} + +.page_feedback { + padding: 15px; + overflow: auto; + background-color: #fff +} + +label > * { + pointer-events: none +} +/*mint ui*/ +/*weui*/ +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 +} + +.page { + box-sizing: border-box +} + +.link { + color: #07c160 +} + +.container { + overflow: hidden +} + +.container, .page { + position: absolute; + 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) +} + +.page.loadmore { + background-color: #fff +} + +.page.layers { + overflow-x: hidden; + -webkit-perspective: 1000px; + perspective: 1000px +} + +@media only screen and (max-width:320px) { + .page.layers .page__hd { + padding-left: 20px; + padding-right: 20px + } +} + +.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 + } +} +/*mint ui*/ +/* 覆盖mint-ui的primary颜色，改为微信UI的绿色 */ + +.mint-header { + background-color: #1aad19; +} + +.mint-button:not(.is-disabled):active::after { + opacity: .2 /* .6 */ +} + +.mint-button--primary { + background-color: #1aad19; +} + + .mint-button--primary.is-plain { + border: 1px solid #1aad19; + color: #1aad19 + } + +.mint-badge.is-primary { + background-color: #1aad19 +} + +.mint-switch-input:checked + .mint-switch-core { + border-color: #1aad19; + background-color: #1aad19; +} + +.mint-navbar .mint-tab-item.is-selected { + border-bottom: 3px solid #1aad19; + color: #1aad19; +} + +.mint-tabbar > .mint-tab-item.is-selected { + color: #1aad19; +} + +.mint-searchbar-cancel { + color: #1aad19; +} + +.mint-checkbox-input:checked + .mint-checkbox-core { + background-color: #1aad19; + border-color: #1aad19; +} + +.mint-radio-input:checked + .mint-radio-core { + background-color: #1aad19; + border-color: #1aad19; +} + +.mt-range-progress { + background-color: #1aad19; +} + +.mt-progress-progress { + background-color: #1aad19; +} + +.mint-msgbox-confirm { + color: #1aad19; +} + + .mint-msgbox-confirm:active { + color: #1aad19; + } + +.mint-datetime-action { + color: #1aad19; +} +/*header*/ +.mint-header .ion { + font-size: 24px; + line-height: 40px; +} +.weui-toptips{ + top:0; + left:0; + right:0; + border-radius:unset; +} \ No newline at end of file diff --git a/projects/WebUI/wwwroot/home.html b/projects/WebUI/wwwroot/home.html new file mode 100644 index 00000000..a95d6656 --- /dev/null +++ b/projects/WebUI/wwwroot/home.html @@ -0,0 +1,41 @@ +
+
+
+ +
+
+ +
+ +
+ +
+

用户中心

+ + +
+ +
+

物联网中心

+ +
+
+
+ +
+
+
+ + +

消息

+ + + +

应用

+ + + +

我的

+ +
+
\ No newline at end of file diff --git a/projects/WebUI/wwwroot/home.js b/projects/WebUI/wwwroot/home.js new file mode 100644 index 00000000..38173846 --- /dev/null +++ b/projects/WebUI/wwwroot/home.js @@ -0,0 +1,20 @@ +function home() { + return Vue.component('home', function (resolve, reject) { + axios.get("/home.html").then(function (response) { + resolve({ + template: response.data, + data() { + return { + name: 'home' + }; + }, + mounted: function () { + console.log('mounted:home'); + weui.tab('#tab', { defaultIndex: 1 }); + }, + methods: { + } + }) + }); + }); +} \ No newline at end of file diff --git a/projects/WebUI/wwwroot/login.html b/projects/WebUI/wwwroot/login.html new file mode 100644 index 00000000..7012cc38 --- /dev/null +++ b/projects/WebUI/wwwroot/login.html @@ -0,0 +1,33 @@ +
+ + +
+
+

登录

+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+ 确定 +
+
+
+

Copyright © 2020

+
+
\ No newline at end of file diff --git a/projects/WebUI/wwwroot/login.js b/projects/WebUI/wwwroot/login.js new file mode 100644 index 00000000..74672473 --- /dev/null +++ b/projects/WebUI/wwwroot/login.js @@ -0,0 +1,43 @@ +function login() { + return Vue.component('login', function (resolve, reject) { + axios.get("/login.html").then(function (response) { + resolve({ + template: response.data, + data() { + return { + name: 'login' + }; + }, + mounted: function () { + console.log('mounted:login'); + weui.form.checkIfBlur('#form', this.regexp); + }, + computed: { + regexp: function () { + return { + regexp: { + userName: /^[^\s]+/, + password: /^[^\s]+$/ + } + }; + } + }, + methods: { + submit: function () { + weui.form.validate('#form', function (error) { + console.log(error); + if (!error) { + var loading = weui.loading('提交中...'); + $(this).parent('form').submit(); + setTimeout(function () { + loading.hide(); + weui.toast('提交成功', 3000); + }, 1500); + } + }, this.regexp); + } + } + }) + }); + }); +} \ No newline at end of file diff --git a/projects/WebUI/wwwroot/pc.html b/projects/WebUI/wwwroot/pc.html new file mode 100644 index 00000000..3821e744 --- /dev/null +++ b/projects/WebUI/wwwroot/pc.html @@ -0,0 +1,32 @@ + + + + + + + + + + 首页 + + +
+ +
+
+
+
+ +

加载中

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/projects/WebUI/wwwroot/pc.js b/projects/WebUI/wwwroot/pc.js new file mode 100644 index 00000000..49ca30b7 --- /dev/null +++ b/projects/WebUI/wwwroot/pc.js @@ -0,0 +1,79 @@ +var userAgent = navigator.userAgent; +var isApp = userAgent.indexOf('isapp') !== -1; +var hubUrl = "/IoTCenter/hub?group=page"; +var connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build(); +connection.on('Connected', function (id) { + connectionId = id; + console.log(connectionId); +}); +connection.on("ServerToClient", function (method, json, to, from) { + console.log(method + ':' + json); +}); +function connect() { + if (connection.state === signalR.HubConnectionState.Disconnected) { + connection.start().then(function () { + console.log('客户端与服务器连接成功！'); + }).catch(function (err) { + console.log(err); + setTimeout(connect, 15 * 1000); + }); + } +} + +/// +var token=localStorage.getItem('accessToken'); +var refreshToken= localStorage.getItem('refreshToken'); +const routes = [ +]; +var routeList = routes.concat(); +const router = new VueRouter({ + routes +}); +router.beforeEach((to, from, next) => { + if (!token && to.path !== '/login') { + router.push('/login'); + return; + } + if (token) { + connect(); + } + var route; + for (var i = 0; i < routeList.length; i++) { + if (routeList[i].path == to.path) { + route = routeList[i]; + } + } + if (!route) { + var path = to.path === '/' ? '/home' : to.path; + var url = path + '.js'; + var method = path.replace(/\//g, '_').substr(1) + "()"; + console.log('preRoute:'+path+ '|'+url+'|' + method); + $.getScript(url, function () { + var route = { + path: to.path, + component: eval(method), + }; + router.addRoutes([route]); + routeList.push(route); + router.push(to.fullPath); + }); + } + else { + console.log('route from:'+from.path +' to:'+to.path); + next(); + } + +}); + +/// +const app = new Vue({ + router, + data: { + }, + mounted: function () { + console.log('mounted:app'); + $('#loadingToast').fadeOut(100); + }, + methods: { + } +}).$mount('#app');