mirror of
https://github.com/easychen/pushdeer.git
synced 2024-12-05 08:29:22 +08:00
Key页面展示
This commit is contained in:
7YHong
parent
8ff5f19067
commit
bfea33268d
Binary file not shown.
BIN
quickapp/src/assets/images/divider.png
Normal file
BIN
quickapp/src/assets/images/divider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 B |
3
quickapp/src/assets/images/divider.svg
Normal file
3
quickapp/src/assets/images/divider.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="530" height="2" viewBox="0 0 530 2">
|
||||
<line id="直线_1" data-name="直线 1" x2="530" transform="translate(0 1)" fill="none" stroke="#d8d8d8" stroke-width="2" stroke-dasharray="10"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
@ -23,7 +23,13 @@ function showToast(message = '', duration = 0) {
|
||||
})
|
||||
}
|
||||
|
||||
function showDialog(args) {
|
||||
if (!args) return;
|
||||
prompt.showDialog(args)
|
||||
}
|
||||
|
||||
export default {
|
||||
showToast,
|
||||
showDialog,
|
||||
queryString
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"name": "system.router"
|
||||
},
|
||||
{
|
||||
"name": "system.shortcut"
|
||||
"name": "system.clipboard"
|
||||
},
|
||||
{
|
||||
"name": "system.fetch"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<import name="my-tabbar" src="./tabbar"></import>
|
||||
<import name="device" src="../Device"></import>
|
||||
<import name="key" src="./device"></import>
|
||||
<import name="device" src="../component/Device"></import>
|
||||
<import name="key" src="../component/Key"></import>
|
||||
<import name="message" src="./device"></import>
|
||||
<import name="settings" src="./device"></import>
|
||||
<template>
|
||||
|
||||
57
quickapp/src/pages/component/Device/card.ux
Normal file
57
quickapp/src/pages/component/Device/card.ux
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<image src="{{ devObj.icon}}" />
|
||||
</div>
|
||||
<text class="label">{{ devObj.name }}</text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: ['devObj', 'idx'],
|
||||
|
||||
onInit() {
|
||||
// console.log('card', this.devObj,this.idx)
|
||||
// console.log('card', 'name', this.devObj.name)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@color: #3b4789;
|
||||
|
||||
.card {
|
||||
border-color: @color;
|
||||
border-radius: 16px;
|
||||
border-width: 3px;
|
||||
padding: 32px;
|
||||
margin: 24px 0;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
/* justify-content: center;
|
||||
align-items: center; */
|
||||
|
||||
.icon {
|
||||
width: 105px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @color;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
/* .wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #212121;
|
||||
} */
|
||||
</style>
|
||||
57
quickapp/src/pages/component/Device/index.ux
Normal file
57
quickapp/src/pages/component/Device/index.ux
Normal file
@ -0,0 +1,57 @@
|
||||
<import name="dev-card" src="./card"></import>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- <text class="title">device</text>
|
||||
<text class="title">device</text> -->
|
||||
<div class="header">
|
||||
<text>设备</text>
|
||||
<image @click="onPlusBtnClick" src="/assets/images/plus.svg" />
|
||||
</div>
|
||||
<list style="width: 80%">
|
||||
<list-item type="devitem" for="{{ dev in devs}}">
|
||||
<dev-card dev-obj="{{ dev }}" idx="{{ $idx }}"></dev-card>
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: {
|
||||
devs: [
|
||||
{ icon: "/assets/images/device-ipad.svg", name: "Easy’s iPad(当前设备)" },
|
||||
{ icon: "/assets/images/device-ipad.svg", name: "备用机iPhone2" },
|
||||
],
|
||||
},
|
||||
|
||||
onPlusBtnClick() {
|
||||
// $utils.showToast('aaaaa')
|
||||
this.devs.push({ icon: "/assets/images/device-iphone.svg", name: "备用机iPhone" + (this.devs.length + 1) })
|
||||
},
|
||||
|
||||
onInit() {
|
||||
console.log('device', 'init')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
padding-top: 84px;
|
||||
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
width: 80%;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
quickapp/src/pages/component/Key/card.ux
Normal file
117
quickapp/src/pages/component/Key/card.ux
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<image style="height: 80px" src="/assets/images/avatar.svg" />
|
||||
<text class="name" @click="onKeyNameClick">{{ key.name }}</text>
|
||||
<image style="height: 36px" src="/assets/images/calander.svg" />
|
||||
<text class="date">{{ key.date }}</text>
|
||||
</div>
|
||||
<text class="value">{{ key.value }} </text>
|
||||
<!-- <div class="divider"></div> -->
|
||||
<image class="divider" src="/assets/images/divider.png"></image>
|
||||
<div class="footer">
|
||||
<text style="color: #3b4789; border-color: #3b4789">重置</text>
|
||||
<text
|
||||
style="color: #ffffff; background-color: #3b4789"
|
||||
@click="onCopyBtnClick"
|
||||
>复制</text
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from '@system.clipboard'
|
||||
export default {
|
||||
|
||||
props: ['key', 'idx'],
|
||||
|
||||
onKeyNameClick() {
|
||||
$utils.showToast('改名功能待实现')
|
||||
},
|
||||
|
||||
onCopyBtnClick() {
|
||||
clipboard.set({
|
||||
text: this.key.value,
|
||||
success: () => {
|
||||
$utils.showToast('key已经复制到剪贴板')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onInit() {
|
||||
console.log('key', this.key, this.idx)
|
||||
// console.log('card', 'name', this.devObj.name)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@primary-color: #3b4789;
|
||||
@secondry-color: #d6d6d6;
|
||||
@font-color: #a7a7a7;
|
||||
|
||||
.card {
|
||||
flex-direction: column;
|
||||
border-color: @primary-color;
|
||||
border-radius: 16px;
|
||||
border-width: 3px;
|
||||
padding: 32px;
|
||||
margin: 24px 0;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
/* justify-content: center;
|
||||
align-items: center; */
|
||||
|
||||
.header {
|
||||
align-items: flex-end;
|
||||
|
||||
.date {
|
||||
font-size: 24px;
|
||||
color: @font-color;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: @primary-color;
|
||||
font-size: 36px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 48px 0;
|
||||
padding: 16px;
|
||||
font-size: 24px;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
border-color: @secondry-color;
|
||||
color: @font-color;
|
||||
lines: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 30px;
|
||||
padding: 16px 48px;
|
||||
border-width: 2px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* .wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #212121;
|
||||
} */
|
||||
</style>
|
||||
59
quickapp/src/pages/component/Key/index.ux
Normal file
59
quickapp/src/pages/component/Key/index.ux
Normal file
@ -0,0 +1,59 @@
|
||||
<import name="key-card" src="./card"></import>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- <text class="title">device</text>
|
||||
<text class="title">device</text> -->
|
||||
<div class="header">
|
||||
<text>Key</text>
|
||||
<image @click="onPlusBtnClick" src="/assets/images/plus.svg" />
|
||||
</div>
|
||||
<list style="width: 80%">
|
||||
<list-item type="keyitem" for="{{ key in keys}}">
|
||||
<key-card key="{{ key }}" idx="{{ $idx }}"></key-card>
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: {
|
||||
keys: [
|
||||
{ name: "Default", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
|
||||
{ name: "点击改Key名", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
|
||||
],
|
||||
},
|
||||
|
||||
onPlusBtnClick() {
|
||||
// $utils.showToast('aaaaa')
|
||||
this.keys.push(
|
||||
{ name: "Default", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
|
||||
)
|
||||
},
|
||||
|
||||
onInit() {
|
||||
console.log('key', 'init', this.keys)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
padding-top: 84px;
|
||||
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
width: 80%;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user