From 4cb6e54aed6acea56050ff6feb5c831f00ab9ded Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 10 Oct 2022 20:01:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E7=94=A8vue=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/app.vue | 32 ++++++++++++++ src/components/sidebar.vue | 86 ++++++++++++++++++++++++++++++++++++++ src/css/app.css | 2 +- src/css/app.scss | 71 ------------------------------- src/js/app.js | 4 -- src/store.js | 3 +- vue.live.js | 2 +- 8 files changed, 123 insertions(+), 79 deletions(-) create mode 100644 src/components/sidebar.vue diff --git a/index.html b/index.html index 8adc561..175683f 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ -
+
\ No newline at end of file diff --git a/src/app.vue b/src/app.vue index 0bc67fd..307189a 100644 --- a/src/app.vue +++ b/src/app.vue @@ -1,11 +1,43 @@ + + diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue new file mode 100644 index 0000000..a74816a --- /dev/null +++ b/src/components/sidebar.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/css/app.css b/src/css/app.css index c1a1754..50aac0f 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -html{width:840px;height:540px}body{width:100%;height:100%;font-size:14px;color:var(--color-dark-1)}.app{display:flex;width:100%;height:100%;background:#f7f8fb}.holder{flex:1}.aside{flex-shrink:0;display:flex;flex-direction:column;width:128px;box-shadow:4px 0 12px rgba(0,0,0,.03)}.aside .logo{width:64px;height:64px;margin:16px auto;background:url(../icons/128x128.png) no-repeat;background-size:100%}.aside .nav-list{display:flex;flex-direction:column;width:100%;padding:0 16px}.aside .nav-list .item{width:100%;height:32px;margin-top:16px;line-height:32px;border-radius:16px;text-align:center;cursor:pointer;transition:color .2s linear,background .2s linear}.aside .nav-list .item:hover{color:var(--color-blue-1)}.aside .nav-list .item.active{color:#fff;background:var(--color-blue-1)}.aside .version{line-height:36px;text-align:center}.tab-content{flex:1;flex-shrink:0;display:flex;flex-direction:column;height:540px;padding:16px}.tab-content .field{display:flex;align-items:center;width:100%;height:36px;margin-top:12px}.tab-content .field .label{width:128px;font-weight:bold;color:var(--color-grey-3)}.tab-content .field .full{flex:1}.tab-content.configs{width:49%;margin-left:1%}.tab-content.remote wc-button,.tab-content.rules wc-button{width:64px;min-width:64px;margin-left:16px}.tab-content.remote .scroll,.tab-content.rules .scroll{overflow:hidden;flex:1;margin-top:24px}.tab-content.remote .card,.tab-content.rules .card{margin:0 auto}.tab-content.remote .list,.tab-content.rules .list{word-break:break-all}.tab-content.remote .list .item,.tab-content.rules .list .item{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 16px;border-bottom:1px solid var(--color-plain-1);font-family:Menlo,"Courier New",Courier,monospace;transition:background .2s linear}.tab-content.remote .list .item:hover,.tab-content.rules .list .item:hover{background-color:var(--color-plain-1)}.tab-content.remote .list span.type,.tab-content.rules .list span.type{padding:2px 3px;border-radius:2px;background-color:var(--color-blue-1);color:#fff}.card{flex:1;flex-shrink:0;display:flex;flex-direction:column;flex-wrap:wrap;width:100%;max-height:100%;padding:12px;margin:0 auto 24px;border:0;border-radius:4px;background-color:#fff;box-shadow:0 0 8px rgba(0,0,0,.075)}.card legend{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--color-blue-1);font-weight:bold} \ No newline at end of file +.tab-content{flex:1;flex-shrink:0;display:flex;flex-direction:column;height:540px;padding:16px}.tab-content .field{display:flex;align-items:center;width:100%;height:36px;margin-top:12px}.tab-content .field .label{width:128px;font-weight:bold;color:var(--color-grey-3)}.tab-content .field .full{flex:1}.tab-content.configs{width:49%;margin-left:1%}.tab-content.remote wc-button,.tab-content.rules wc-button{width:64px;min-width:64px;margin-left:16px}.tab-content.remote .scroll,.tab-content.rules .scroll{overflow:hidden;flex:1;margin-top:24px}.tab-content.remote .card,.tab-content.rules .card{margin:0 auto}.tab-content.remote .list,.tab-content.rules .list{word-break:break-all}.tab-content.remote .list .item,.tab-content.rules .list .item{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 16px;border-bottom:1px solid var(--color-plain-1);font-family:Menlo,"Courier New",Courier,monospace;transition:background .2s linear}.tab-content.remote .list .item:hover,.tab-content.rules .list .item:hover{background-color:var(--color-plain-1)}.tab-content.remote .list span.type,.tab-content.rules .list span.type{padding:2px 3px;border-radius:2px;background-color:var(--color-blue-1);color:#fff}.card{flex:1;flex-shrink:0;display:flex;flex-direction:column;flex-wrap:wrap;width:100%;max-height:100%;padding:12px;margin:0 auto 24px;border:0;border-radius:4px;background-color:#fff;box-shadow:0 0 8px rgba(0,0,0,.075)}.card legend{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color-blue-1);font-weight:bold} \ No newline at end of file diff --git a/src/css/app.scss b/src/css/app.scss index 0849d9d..3eaa862 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,74 +1,3 @@ -html { - width: 840px; - height: 540px; -} - -body { - width: 100%; - height: 100%; - font-size: 14px; - color: var(--color-dark-1); -} - -.app { - display: flex; - width: 100%; - height: 100%; - background: #f7f8fb; -} - -.holder { - flex: 1; -} - -.aside { - flex-shrink: 0; - display: flex; - flex-direction: column; - width: 128px; - box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03); - - .logo { - width: 64px; - height: 64px; - margin: 16px auto; - background: url(../icons/128x128.png) no-repeat; - background-size: 100%; - } - - .nav-list { - display: flex; - flex-direction: column; - width: 100%; - padding: 0 16px; - - .item { - width: 100%; - height: 32px; - margin-top: 16px; - line-height: 32px; - border-radius: 16px; - text-align: center; - cursor: pointer; - transition: color 0.2s linear, background 0.2s linear; - - &:hover { - color: var(--color-blue-1); - } - - &.active { - color: #fff; - background: var(--color-blue-1); - } - } - } - - .version { - line-height: 36px; - text-align: center; - } -} - .tab-content { flex: 1; flex-shrink: 0; diff --git a/src/js/app.js b/src/js/app.js index a5defbc..ce0359b 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -64,10 +64,6 @@ Anot({ }, methods: { - changeTab(idx) { - this.tab = idx - Anot.ls('tab', idx) - }, getVersion() { fetch('/version').then(r => { this.version = r.version diff --git a/src/store.js b/src/store.js index 23173d7..84337b1 100644 --- a/src/store.js +++ b/src/store.js @@ -7,7 +7,8 @@ import { reactive } from 'vue' const store = reactive({ - foo: 'bar' + foo: 'bar', + version: '1.1.4' }) export default function (app) { diff --git a/vue.live.js b/vue.live.js index 1666eaa..24c4d02 100644 --- a/vue.live.js +++ b/vue.live.js @@ -7,7 +7,7 @@ export default { pages: { index: { entry: resolve('./src/main.js'), - title: '' + title: 'blabla' } }, imports: {