finish home page
This commit is contained in:
parent
92c0c6c3a6
commit
b77dab7f08
34
package-lock.json
generated
34
package-lock.json
generated
@ -3361,6 +3361,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"crc-32": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
|
||||
"integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
|
||||
"requires": {
|
||||
"exit-on-epipe": "~1.0.1",
|
||||
"printj": "~1.1.0"
|
||||
}
|
||||
},
|
||||
"create-ecdh": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.3.tgz",
|
||||
@ -4354,6 +4363,11 @@
|
||||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"exit-on-epipe": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
|
||||
"integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
|
||||
},
|
||||
"expand-brackets": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
|
||||
@ -6945,6 +6959,11 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"material-design-icons": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
|
||||
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
|
||||
@ -8803,6 +8822,11 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"printj": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
|
||||
"integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
|
||||
},
|
||||
"private": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
|
||||
@ -9435,6 +9459,11 @@
|
||||
"inherits": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"roboto-fontface": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.6.1.tgz",
|
||||
"integrity": "sha1-vVarPtTkovKaG9IPv1+S6eTPNUA="
|
||||
},
|
||||
"run-queue": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
|
||||
@ -11186,6 +11215,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-material": {
|
||||
"version": "1.0.0-beta-11",
|
||||
"resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-11.tgz",
|
||||
"integrity": "sha512-1+dIVkQafMIA/zNONb7OwGaTjAxaWk/JhUA2/FInQvbArxf1ToKB+yIdeSfzopQ1KICnBTAmk9E0Vdr5p4MWNA=="
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.5.tgz",
|
||||
|
||||
@ -8,13 +8,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.4",
|
||||
"crc-32": "^1.2.0",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"roboto-fontface": "^0.6.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-material": "^1.0.0-beta-11",
|
||||
"vue-router": "^3.1.5",
|
||||
"vuex": "^3.1.2",
|
||||
"roboto-fontface": "^0.6.0",
|
||||
"material-design-icons": "^3.0.1"
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.2.0",
|
||||
|
||||
@ -21,6 +21,10 @@ function setHtmlFontSize() {
|
||||
}
|
||||
setHtmlFontSize();
|
||||
|
||||
// 剪切板
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
Vue.use(VueClipboard);
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
const linkActiveClass = 'my-link-active-class'
|
||||
|
||||
// // pass custom class to Vue Material
|
||||
// Vue.material.router.linkActiveClass = linkActiveClass
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
@ -44,12 +39,17 @@ const routes = [
|
||||
name: 'Settings',
|
||||
component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
|
||||
},
|
||||
{
|
||||
path: '/unlock',
|
||||
name: 'Unlock',
|
||||
component: () => import(/* webpackChunkName: "unlock" */ '../views/Unlock/Unlock.vue')
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@ -4,12 +4,50 @@ import Vuex from 'vuex'
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
state: {
|
||||
// 用户信息
|
||||
user_info: '',
|
||||
// aes化的密码信息
|
||||
row_data: '',
|
||||
// aes化的用户主密码
|
||||
row_pwd: '',
|
||||
},
|
||||
mutations: {
|
||||
// 设置用户信息
|
||||
SET_USERINFO(state, user_info) {
|
||||
state.user_info = user_info;
|
||||
},
|
||||
// 设置aes化的密码信息
|
||||
SET_ROWDATA(state, row_data) {
|
||||
state.row_data = row_data;
|
||||
},
|
||||
// 设置aes化的用户主密码
|
||||
SET_ROWPWD(state, row_pwd) {
|
||||
state.row_pwd = row_pwd;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置用户信息
|
||||
setUserInfo({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_USERINFO', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
// 设置aes化的密码信息
|
||||
setRowData({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_ROWDATA', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
// 设置aes化的用户主密码
|
||||
setRowPwd({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_ROWPWD', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
},
|
||||
modules: {}
|
||||
})
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@ -13,7 +13,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@ -22,7 +22,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@ -31,7 +31,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@ -40,7 +40,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@ -49,7 +49,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@ -58,10 +58,9 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Material Icons';
|
||||
// font-style: normal;
|
||||
|
||||
48
src/utils/aes.js
Normal file
48
src/utils/aes.js
Normal file
@ -0,0 +1,48 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
import CRC32 from 'crc-32'
|
||||
|
||||
// aes加密
|
||||
export function encrypt(code, json_row) {
|
||||
// 循环冗余校验
|
||||
let aesKey = CRC32.str(code)
|
||||
// 取八位
|
||||
aesKey = aesKey.toString().slice(0,8)
|
||||
// 字符串化
|
||||
let json_str = JSON.stringify(json_row)
|
||||
// 加密
|
||||
return CryptoJS.AES.encrypt(json_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString();
|
||||
}
|
||||
|
||||
// aes解密
|
||||
export function decrypt(code, encrypt_str) {
|
||||
// 循环冗余校验
|
||||
let aesKey = CRC32.str(code)
|
||||
// 取八位
|
||||
aesKey = aesKey.toString().slice(0,8)
|
||||
// 解密
|
||||
return CryptoJS.AES.decrypt(encrypt_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString(CryptoJS.enc.Utf8);
|
||||
}
|
||||
|
||||
// aes加密用户密码
|
||||
export function encryptMainCode(code) {
|
||||
let default_key = 'e08b44a351a3'
|
||||
return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString();
|
||||
}
|
||||
|
||||
// aes解密用户密码
|
||||
export function decryptMainCode(row_code) {
|
||||
let default_key = 'e08b44a351a3'
|
||||
return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString(CryptoJS.enc.Utf8);
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-menu md-align-trigger>
|
||||
<md-button md-menu-trigger class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item>Alphabetically</md-menu-item>
|
||||
<md-menu-item>Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<p class="md-title">{{code.title}}</p>
|
||||
<p class="md-caption">{{code.user_name}}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
@ -1,188 +1,291 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-menu md-align-trigger>
|
||||
<md-button md-menu-trigger class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item>Alphabetically</md-menu-item>
|
||||
<md-menu-item>Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible"><md-icon>menu</md-icon></md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button" @click="turnToSearch()"><md-icon>search</md-icon></md-button>
|
||||
<md-menu md-align-trigger>
|
||||
<md-button md-menu-trigger class="md-icon-button"><md-icon>more_vert</md-icon></md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item @click="changeSortType('Alphabetically')">Alphabetically</md-menu-item>
|
||||
<md-menu-item @click="changeSortType('Recently Used')">Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">{{ user_info.user_name }}</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
<md-list>
|
||||
<md-list-item @click="turnToPage('/account')">
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
<md-list-item @click="turnToPage('/faq')">
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
<md-list-item @click="turnToPage('/feedback')">
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
<md-list-item @click="turnToPage('/settings')">
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="show_list.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised" @click="turnToAdd()">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<p class="md-title">{{code.title}}</p>
|
||||
<p class="md-caption">{{code.user_name}}</p>
|
||||
</div>
|
||||
<div class="code-card" v-for="(code, index) in show_list" :key="index">
|
||||
<p class="md-title">{{ code.title }}</p>
|
||||
<p class="md-caption">{{ code.user_name }}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
|
||||
<md-speed-dial-target><md-icon>add</md-icon></md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
<md-button class="md-primary" @click="show_snackbar = false" v-if="snakebar_msg=='复制失败'">重试</md-button>
|
||||
</md-snackbar>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
// 显示抽屉开关
|
||||
menuVisible: false,
|
||||
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||||
clientHeight: '',
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
unlock: false,
|
||||
show_snackbar: false,
|
||||
snakebar_msg: '',
|
||||
web_addr: 'https://codebook.canary.moe'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user_info', 'row_data', 'row_pwd'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 初始化
|
||||
this.initUserInfo();
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码，已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||
// 上次写入时间距离现在在五分钟之内
|
||||
this.unlock = true;
|
||||
// 判断有无密码本
|
||||
if (this.row_data) {
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// 刷新显示内容
|
||||
this.show_list = JSON.parse(data_decrypt);
|
||||
} else {
|
||||
// 空密码本
|
||||
this.show_list = [];
|
||||
}
|
||||
} else {
|
||||
// 跳转到解锁界面
|
||||
this.turnToUnlock('密码超时');
|
||||
}
|
||||
} else {
|
||||
// 没有密码，留存本页
|
||||
this.show_list = [];
|
||||
this.unlock = false;
|
||||
}
|
||||
console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
|
||||
console.log(this.unlock ? '已解锁' : '未解锁');
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
user_name: 'A Little Canary',
|
||||
user_avatar: null
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log('用户信息覆写完成');
|
||||
}
|
||||
console.log('用户信息初始化完成');
|
||||
},
|
||||
|
||||
// 修改排序
|
||||
changeSortType(type) {
|
||||
// 没有内容拦截器
|
||||
if (this.show_list.length == 0) {
|
||||
console.log('修改排序无内容拦截');
|
||||
return;
|
||||
}
|
||||
// 排序
|
||||
if (type == 'Alphabetically') {
|
||||
// 按首字母排序
|
||||
this.show_list = this.show_list.sort((a, b) => a['title'].localeCompare(b['title']));
|
||||
} else {
|
||||
// 按使用频率排序
|
||||
this.show_list = this.show_list.sort((a, b) => a['open_count'] - b['open_count']);
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到解锁界面
|
||||
turnToUnlock(type) {
|
||||
console.log(type);
|
||||
let main_code = '10aeff';
|
||||
let main_code_aes = encryptMainCode(main_code);
|
||||
let row_pwd = {
|
||||
main_code: main_code_aes,
|
||||
create_time: new Date().getTime()
|
||||
};
|
||||
this.setRowPwd([row_pwd, this]);
|
||||
console.log('主密码设置完成，返回init');
|
||||
this.init();
|
||||
},
|
||||
|
||||
// 跳转到搜索界面
|
||||
turnToSearch() {
|
||||
// 没有内容拦截器
|
||||
if (this.show_list.length == 0) {
|
||||
console.log('点击搜索无内容拦截');
|
||||
return;
|
||||
}
|
||||
this.$router.push({ name: 'Search', params: { list: this.show_list } });
|
||||
},
|
||||
|
||||
// 跳转到添加界面
|
||||
turnToAdd() {
|
||||
// 未解锁拦截器
|
||||
if (!this.unlock) {
|
||||
this.turnToUnlock('点击新增未解锁拦截');
|
||||
return;
|
||||
}
|
||||
this.$router.push('/add');
|
||||
},
|
||||
|
||||
// 跳转到某页面
|
||||
turnToPage(url) {
|
||||
this.$router.push(url);
|
||||
},
|
||||
|
||||
// 复制成功
|
||||
onCopyUrl(e) {
|
||||
this.snakebar_msg = '复制成功';
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
// 复制失败
|
||||
onErrorUrl(e) {
|
||||
this.snakebar_msg = '复制失败';
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 重置row_pwd
|
||||
// this.setRowPwd(['', this])
|
||||
// this.setUserInfo(['', this])
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
@import '../../style/main';
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-menu md-align-trigger>
|
||||
<md-button md-menu-trigger class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item>Alphabetically</md-menu-item>
|
||||
<md-menu-item>Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<p class="md-title">{{code.title}}</p>
|
||||
<p class="md-caption">{{code.user_name}}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
188
src/views/Unlock/Unlock.vue
Normal file
188
src/views/Unlock/Unlock.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-menu md-align-trigger>
|
||||
<md-button md-menu-trigger class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item>Alphabetically</md-menu-item>
|
||||
<md-menu-item>Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<p class="md-title">{{code.title}}</p>
|
||||
<p class="md-caption">{{code.user_name}}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
41
src/views/test.js
Normal file
41
src/views/test.js
Normal file
@ -0,0 +1,41 @@
|
||||
this.show_list = [
|
||||
{
|
||||
open_count: 1,
|
||||
title: 'QQ',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 2,
|
||||
title: '微信',
|
||||
user_name: '15143211127',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 3,
|
||||
title: 'WIFI',
|
||||
user_name: 'admin',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 4,
|
||||
title: 'WeGame',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
}
|
||||
];
|
||||
test() {
|
||||
//
|
||||
// let main_code = '10aeff'
|
||||
// let data_aes = encrypt(main_code, this.show_list);
|
||||
// if(!this.row_data) this.setRowData([data_aes, this])
|
||||
// let main_code_aes = encryptMainCode(main_code)
|
||||
// if(!this.row_pwd) this.setRowPwd([main_code_aes, this])
|
||||
// let main_code_decrpt = decryptMainCode(main_code_aes)
|
||||
// let data_decrpt = decrypt(main_code_decrpt, data_aes)
|
||||
// console.log(data_aes, main_code_aes, main_code_decrpt,data_decrpt)
|
||||
},
|
||||
Loading…
x
Reference in New Issue
Block a user