完成快应用界面展示部分

This commit is contained in:
7YHong 2022-01-11 22:22:30 +08:00
parent 49b4db9759
commit 46e457b3bc
3 changed files with 86 additions and 9 deletions

View File

@ -1,5 +1,6 @@
<import name="msg-text" src="./msg-text"></import>
<import name="msg-markdown" src="./msg-text"></import>
<import name="msg-image" src="./msg-image"></import>
<import name="msg-markdown" src="./msg-markdown"></import>
<template>
<div class="wrapper">
<div class="header">
@ -31,7 +32,7 @@
export default {
data: {
collapsed: false,
supportType: ['text', 'markdown'],
supportType: ['text', 'image', 'markdown'],
input: '',
msgs: [
{
@ -41,15 +42,13 @@ export default {
长按可以复制文本内容。左滑显示删除。`
},
{
name: "Default", created_at: "5分钟前", type: "text",
text: `纯文本的效果。长文字需要自动换行。
长文字需要自动换行。行间距24。
长按可以复制文本内容。左滑显示删除。`
name: "推送Key的名字", created_at: "5分钟前", type: "markdown",
text: `<p>支持Markdown语法。比如可以插入<a href="https://www.baidu.com/">链接</a>
点击后使用系统浏览器直接打开。</p>`
},
{
name: "推送Key的名字", created_at: "5分钟前", type: "markdown",
text: `支持Markdown语法。比如可以插入链接
点击后使用系统浏览器直接打开。`
name: "Default", created_at: "5分钟前", type: "image",
text: `https://wikipic.ftqq.com/wp-content/uploads/2021/08/jessy-smith-zFOm6KzA-7g-unsplash.jpg`
},
],
},

View File

@ -0,0 +1,34 @@
<import name="msg-header" src="./msg-header"></import>
<template>
<div class="card">
<msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
<image class="image" src="{{msg.text}}"></image>
</div>
</template>
<script>
import clipboard from '@system.clipboard'
export default {
props: ['msg'],
onInit() {
// console.log('msg-text',this.msg)
}
}
</script>
<style lang="less">
@import '../../../assets/styles/style.less';
.card {
.flex-box-mixins(column, flex-start, center);
margin: 24px 0;
width: 100%;
.image {
width: 100%;
margin-top: 32px;
}
}
</style>

View File

@ -0,0 +1,44 @@
<import name="msg-header" src="./msg-header"></import>
<template>
<div class="card">
<msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
<div class="markdown">
<richtext type="html" >{{msg.text}}</richtext>
</div>
</div>
</template>
<script>
import clipboard from '@system.clipboard'
export default {
props: ['msg'],
onInit() {
// console.log('msg-text',this.msg)
}
}
</script>
<style lang="less">
@import '../../../assets/styles/style.less';
.card {
.flex-box-mixins(column, flex-start, center);
margin: 24px 0;
width: 100%;
.markdown {
width: 80%;
margin-top: 32px;
color: #535353;
font-size: 24px;
line-height: 48px;
padding: 24px;
border-width: 2px;
border-radius: 8px;
border-color: @primary-color;
background-color: #ffffff;
}
}
</style>