shayu/cai-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
dute7liang
2024-01-29 22:51:12 +08:00
parent 1fb2d171c2
commit 19bcf0345a
2 changed files with 107 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/PreviewInMobileClient/index.vue
View File

@@ -11,21 +11,21 @@
</div>
<div class="item" v-if="data.type === 1">
<div class="msg" style="width: 100%">
<div class="word-title" v-if="data.title">
<div class="word-title pd_0_12" v-if="data.title">
{{ data.title }}
</div>
<div class="word-time">
2024-01-29 10:10:11
</div>
<div class="word" v-if="data.textText1">
<div class="word pd_0_12" v-if="data.textText1">
{{ data.textText1 }}
</div>
<div class="word" v-if="textContext">
<div class="word pd_0_12" v-if="textContext">
<div v-for="val in textContext">
{{val.n}} : {{val.v}}
</div>
</div>
<div class="word" v-if="data.textText2">
<div class="word pd_0_12" v-if="data.textText2">
{{ data.textText2 }}
</div>
</div>
@@ -33,15 +33,19 @@
<div class="item" v-if="data.type === 2">
<div class="msg" style="width: 100%">
<div class="miniprogram">
<div style="position: relative;">
<img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
<span style="position: absolute; bottom: 0; left: 0;">添加文字...添加文字...添加文字...</span>
<div class='img_panel' style="position: relative;">
<div class="img_title">
<span>测试文字title</span>
</div>
<div class="img-box">
<img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
</div>
</div>
<div class="word-title" v-if="data.title">
{{ data.title }}
<div class="word-title" style="margin-top: 10px;font-weight: bold;">
测试数据标题
</div>
<div class="word" v-if="data.oneImageText && data.oneImageTitleType === 0">
{{ data.oneImageText }}
<div class="word">
测试数据文本
</div>
</div>
</div>
@@ -49,30 +53,38 @@
<div class="item" v-if="data.type === 3">
<div class="msg" style="width: 100%">
<div class="miniprogram" >
<div class="mini-img" :style="{'background-image': 'https://nono-1257812345.cos.ap-shanghai.myqcloud.com/images/avatar/woman.png'}">
</div>
<div>
<div>12231231</div>
<img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
</div>
<div>
<div>12231231</div>
<img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
<div class='img_panel' style="position: relative;">
<div class="img-box" style="position: relative;">
<img class="mini-img" src="" alt="">
<div class="img_desc">3211</div>
</div>
<div class="msg-list">
<div class="msg-list_item" v-for="item in 2">
<div class="text">123</div>
<div class="img"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item" v-if="data.type === 4">
<div class="msg" style="width: 100%">
<div class="msg">
<div class="miniprogram">
<img class="mini-img" :src="imageFunc(data.onlyImage)"/>
<div class='img_panel' style="position: relative;">
<img class="mini-img" src="https://nono-1257812345.cos.ap-shanghai.myqcloud.com/cai/2024/01/29/4c8a98ad0de14341a5fbf1a4787e45dd.png" alt="">
<!-- <div class="img-box" style="position: relative;">
<img class="mini-img" src="" alt="">
</div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!--cursor: pointer;-->
<script>
export default {
name: 'PreviewClient',
@@ -111,6 +123,22 @@ export default {
}
</script>
<style lang="scss" scoped>
.pd_12 {
padding: 12px!important;
}
.pd_0_12 {
padding: 0 12px!important;
}
.pd_l_12 {
padding-left: 12px!important;
}
.pd_r_12 {
padding-left: 12px!important;
}
.preview {
margin: 0 auto;
position: relative;
@@ -122,7 +150,7 @@ export default {
.title {
position: absolute;
top: 37px;
top: 28px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
@@ -190,14 +218,16 @@ export default {
.word-title {
font-weight: bold;
padding: 4px 12px;
padding: 4px 0;
font-size: 14px;
color: #000;
}
.word-time{
color: #99a9bf;
padding: 0px 12px;
}
.word {
padding: 5px 12px;
margin-top: 3px;
}
.image {
@@ -211,10 +241,59 @@ export default {
.miniprogram {
padding: 12px;
.mini-img {
margin: 10px 0;
.img-box {
border-radius: 6px;
width: 100%;
height: 120px;
background: #DCDFE6;
overflow: hidden;
.mini-img {
height: 100%;
width: 100%;
}
.img_desc {
position: absolute;
left: 18px;
bottom: 18px;
color: #fff;
font-size: 14px;
}
}
.img_panel {
.img_title {
padding: 0 10px;
border-radius: 20px;
line-height: 20px;
position: absolute;
right: 18px;
top: 10px;
background: #000000;
opacity: 0.4;
span {
opacity: 1;
color: #fff;
}
}
}
.msg-list {
&_item {
height: 80px;
padding: 10px;
line-height: 60px;
box-sizing: border-box;
display: flex;
border-bottom: 1px solid #E4E7ED;
.text {
color: #000;
flex-grow: 1;
}
.img {
width: 60px;
height: 60px;
background: #99a9bf;
}
}
}
}
}

5
src/views/cai/sysPush/add-sys-push-dialog.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog title="新增系统推送" :close-on-click-modal="false" :visible.sync="open" width="900px" append-to-body>
<el-row>
<el-row :gutter="`10`">
<el-col style="width: 550px">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="群体类型" prop="groupId">
@@ -157,9 +157,6 @@
</el-form-item>
</el-form>
</el-col>
<el-col style="width: 10px">
<div style="width: 100%"></div>
</el-col>
<el-col style="width: 200px;">
<preview-client :data="form" :textContext="textContext" :imageContext="imageContext"></preview-client>
</el-col>