finish search and add router redirect
This commit is contained in:
parent
e2539cd300
commit
50c75beeed
96
src/App.vue
96
src/App.vue
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="app">
|
||||
<icon class="bg" name="canary"></icon>
|
||||
<router-view/>
|
||||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./style/main";
|
||||
@import "./style/font";
|
||||
@import './style/main';
|
||||
@import './style/font';
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
@ -33,15 +33,15 @@ input,
|
||||
textarea,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: 12px/1.5tahoma, arial, \5b8b\4f53;
|
||||
font: 12px/1.5tahoma, arial, \5b8b\4f53;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
@ -49,90 +49,92 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: couriernew, courier, monospace;
|
||||
font-family: couriernew, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
sup {
|
||||
vertical-align: text-top;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
sub {
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
legend {
|
||||
color: #000;
|
||||
color: #000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
font-size: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
#app {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
color: #2c3e50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
color: #2c3e50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -100;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
z-index: -100;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
margin-top: -2.5rem;
|
||||
margin-left: -2.5rem;
|
||||
}
|
||||
.md-menu-content-bottom-start {
|
||||
left: 0.2rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,11 +9,6 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: () => import(/* webpackChunkName: "home" */ '../views/Home/Home.vue')
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
name: 'Search',
|
||||
component: () => import(/* webpackChunkName: "search" */ '../views/Search/Search.vue')
|
||||
},
|
||||
{
|
||||
path: '/add',
|
||||
name: 'Add',
|
||||
@ -44,6 +39,17 @@ const routes = [
|
||||
name: 'Unlock',
|
||||
component: () => import(/* webpackChunkName: "unlock" */ '../views/Unlock/Unlock.vue')
|
||||
},
|
||||
{
|
||||
path: '/detail',
|
||||
name: 'Detail',
|
||||
component: () => import(/* webpackChunkName: "detail" */ '../views/Detail/Detail.vue')
|
||||
},
|
||||
{
|
||||
path: '*', // 页面不存在的情况下会跳到home
|
||||
redirect: '/',
|
||||
name: 'notFound',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
1
src/svg/canary-white.svg
Normal file
1
src/svg/canary-white.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" /></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
246
src/views/Detail/Detail.vue
Normal file
246
src/views/Detail/Detail.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary toolbar">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<h3 class="md-title" style="flex: 1">{{id_cache?'Edit':'Add New Code'}}</h3>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<md-field :class="title_verify? '':'md-invalid'">
|
||||
<label>Code Title</label>
|
||||
<md-input v-model="title" required></md-input>
|
||||
<span class="md-error">Title can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field :class="user_name_verify? '':'md-invalid'">
|
||||
<label>Username</label>
|
||||
<md-input v-model="user_name" required></md-input>
|
||||
<span class="md-error">Username can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field :class="password_verify? '':'md-invalid'">
|
||||
<label>Password</label>
|
||||
<md-input v-model="password" required></md-input>
|
||||
<span class="md-error">Password can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Web address</label>
|
||||
<md-input v-model="web_address"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Node</label>
|
||||
<md-textarea v-model="node"></md-textarea>
|
||||
</md-field>
|
||||
|
||||
<md-button class="md-raised md-primary expand" @click="judgeContent()">Enter</md-button>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
user_name: '',
|
||||
password: '',
|
||||
node: '',
|
||||
web_address: '',
|
||||
id_cache: '',
|
||||
open_count_cache:'',
|
||||
title_verify: true,
|
||||
user_name_verify: true,
|
||||
password_verify: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['row_data', 'row_pwd'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setRowData', 'setRowPwd']),
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码，已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||
// 上次写入时间距离现在在五分钟之内
|
||||
// 判断是否是更新
|
||||
if (this.$route.params.modify_content) {
|
||||
// 刷新重置数据
|
||||
let content = this.$route.params.modify_content
|
||||
this.title = content.title
|
||||
this.user_name = content.user_name
|
||||
this.password = content.password
|
||||
this.node = content.node
|
||||
this.web_address = content.web_address
|
||||
this.id_cache = content.id
|
||||
this.open_count_cache = content.open_count
|
||||
}
|
||||
return
|
||||
} else {
|
||||
// 密码超时
|
||||
this.turnToHome('密码超时');
|
||||
}
|
||||
} else {
|
||||
// 没有密码
|
||||
this.turnToHome('无密码');
|
||||
}
|
||||
},
|
||||
|
||||
// 对输入框里边的内容进行判断
|
||||
judgeContent() {
|
||||
// 设置flag
|
||||
let can_continue = true
|
||||
// 处理title
|
||||
if(!(this.title = this.title.trim())) {
|
||||
can_continue = false
|
||||
this.title_verify = false
|
||||
}
|
||||
// 处理user_name
|
||||
if(!(this.user_name = this.user_name.trim())) {
|
||||
can_continue = false
|
||||
this.user_name_verify = false
|
||||
}
|
||||
// 处理password
|
||||
if(!(this.password = this.password.trim())) {
|
||||
can_continue = false
|
||||
this.password_verify = false
|
||||
}
|
||||
// 根据flag判断是否提交
|
||||
if(can_continue) this.submit()
|
||||
},
|
||||
|
||||
// 校验通过进行提交
|
||||
submit() {
|
||||
// 覆写拦截器
|
||||
if(this.id_cache) {
|
||||
console.log('覆写拦截器生效')
|
||||
this.reWrite()
|
||||
return
|
||||
}
|
||||
// 正常提交
|
||||
let data_list
|
||||
// 组织内容
|
||||
let code = {
|
||||
id: this.createId(),
|
||||
open_count:0,
|
||||
title:this.title,
|
||||
user_name:this.user_name,
|
||||
password:this.password,
|
||||
node:this.node,
|
||||
web_address: this.web_address
|
||||
}
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 判断是不是第一个
|
||||
if(this.row_data) {
|
||||
// 不是第一个需要进行加解密
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
data_list = JSON.parse(data_decrypt);
|
||||
data_list.push(code)
|
||||
} else {
|
||||
// 是第一个
|
||||
data_list = [code]
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息保存成功,返回Home');
|
||||
this.back()
|
||||
},
|
||||
|
||||
reWrite() {
|
||||
let data_list
|
||||
// 组织内容
|
||||
let code = {
|
||||
id: this.id_cache,
|
||||
open_count:this.open_count_cache,
|
||||
title:this.title,
|
||||
user_name:this.user_name,
|
||||
password:this.password,
|
||||
node:this.node,
|
||||
web_address: this.web_address
|
||||
}
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
data_list = JSON.parse(data_decrypt);
|
||||
// 遍历所有密码
|
||||
for(let i in data_list) {
|
||||
// 找到该密码
|
||||
if(data_list[i].id == code.id) {
|
||||
// 覆写
|
||||
data_list[i] = code
|
||||
}
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息覆写成功,返回详情');
|
||||
this.back()
|
||||
},
|
||||
//返回上一页
|
||||
back() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
|
||||
// 强制返回Home
|
||||
turnToHome(msg) {
|
||||
console.log(msg)
|
||||
this.$router.replace('/')
|
||||
},
|
||||
|
||||
// 创建唯一失败码
|
||||
createId() {
|
||||
// 获取时间戳
|
||||
let time = new Date().getTime()
|
||||
// 获取随机数
|
||||
let random = Math.floor(Math.random()*100);
|
||||
// 小于10填0
|
||||
random < 10 ? random = '0' + random.toString() : random = random.toString()
|
||||
// 拼接
|
||||
let id = time.toString() + random
|
||||
return id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import '../../style/main';
|
||||
.add {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.expand {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
min-height: 1.2rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,7 +17,7 @@
|
||||
</md-menu>
|
||||
</div>
|
||||
<div class="md-toolbar-row" v-if="search_start">
|
||||
<md-autocomplete class="search" v-model="selectedEmployee" :md-options="employees" md-layout="box"><label>Search...</label></md-autocomplete>
|
||||
<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box"><label>Search...</label></md-autocomplete>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
@ -102,12 +102,14 @@ export default {
|
||||
clientHeight: '',
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
// 搜索暂存list
|
||||
cache_list: [],
|
||||
unlock: false,
|
||||
show_snackbar: false,
|
||||
snakebar_msg: '',
|
||||
web_addr: 'https://codebook.canary.moe',
|
||||
employees: [],
|
||||
selectedEmployee: null,
|
||||
titles: [],
|
||||
search_content: '',
|
||||
search_start: false
|
||||
};
|
||||
},
|
||||
@ -144,7 +146,10 @@ export default {
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// 刷新显示内容
|
||||
this.show_list = JSON.parse(data_decrypt);
|
||||
let data_list = JSON.parse(data_decrypt);
|
||||
this.show_list = data_list
|
||||
// 抽离title
|
||||
this.separateTitle(data_list)
|
||||
} else {
|
||||
// 空密码本
|
||||
this.show_list = [];
|
||||
@ -236,15 +241,48 @@ export default {
|
||||
|
||||
// 复制成功
|
||||
onCopyUrl(e) {
|
||||
this.snakebar_msg = '复制成功';
|
||||
this.snakebar_msg = 'Copy successful';
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
// 复制失败
|
||||
onErrorUrl(e) {
|
||||
this.snakebar_msg = '复制失败，夸克等浏览器复制成功仍会显示失败';
|
||||
this.snakebar_msg = 'Failed to copy, but failed in some cases. Try to paste';
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 分离数据title
|
||||
separateTitle(data_list) {
|
||||
let title_list = []
|
||||
for(let i in data_list) {
|
||||
title_list.push(data_list[i].title)
|
||||
}
|
||||
this.titles = title_list
|
||||
console.log('数据头部分离完成')
|
||||
},
|
||||
|
||||
// 模糊搜索
|
||||
fuzzySearch(cache_list) {
|
||||
// 空内容拦截器，显示全部密码
|
||||
if(!this.search_content.trim()) {
|
||||
this.show_list = cache_list
|
||||
return
|
||||
}
|
||||
let data_list = []
|
||||
for (let i in cache_list) {
|
||||
if(this.generReg(this.search_content.trim()).test(cache_list[i].title)) {
|
||||
data_list.push(cache_list[i])
|
||||
}
|
||||
}
|
||||
this.show_list = data_list
|
||||
},
|
||||
|
||||
generReg(val) {
|
||||
let head = '(.*)('
|
||||
let tail = ')(.*)'
|
||||
let body = val.split('').join(')(.*)(')
|
||||
return new RegExp(head + body + tail, 'i')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 重置row_pwd
|
||||
@ -264,6 +302,21 @@ export default {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
},
|
||||
// 如果 `search_start` 发生改变，这个函数就会运行
|
||||
search_start: function() {
|
||||
if(this.search_start) {
|
||||
this.cache_list = JSON.parse(JSON.stringify(this.show_list))
|
||||
console.log('搜索阵列展开，缓存设置完成')
|
||||
} else {
|
||||
this.show_list = JSON.parse(JSON.stringify(this.cache_list))
|
||||
this.cache_list = []
|
||||
console.log('搜索阵列关闭，缓存清空完成')
|
||||
}
|
||||
},
|
||||
// 如果 `search_content` 发生改变，这个函数就会运行
|
||||
search_content: function() {
|
||||
this.fuzzySearch(this.cache_list)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
@ -284,6 +337,7 @@ export default {
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
@ -1,188 +0,0 @@
|
||||
<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>
|
||||
Loading…
x
Reference in New Issue
Block a user