修改邮件通知

This commit is contained in:
龙运模 2024-08-02 23:04:16 +08:00
parent a58602d8d9
commit da449209ef

View File

@ -2,15 +2,25 @@
<el-container class="mainBox">
<el-aside width="340px">
<el-container>
<el-header><span class="emailTitle">邮件通知</span></el-header>
<el-header>
<span class="emailTitle">邮件通知</span>
<span class="statusBox">
<span class="item complete">已确认</span>
<span class="item notStarted">未确认</span>
<span class="item part">部分确认</span>
</span>
</el-header>
<el-main class="nopadding">
<el-scrollbar height="100%">
<div class="emailMain">
<div class="itemBox" :class="emailId == item.id?'itemTrue':''" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
<div class="itemBox" :class="[item.is_confirm===0?'notStarted':'complete', emailId == item.id?'itemTrue':'']" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
<div class="name text">{{item.from && item.from.email}}</div>
<div class="title text">{{item.subject}}</div>
<div class="msg text">{{item.text}}</div>
<div class="date">{{item.sent_at}}</div>
<div class="total">
<el-badge class="badgeItem" :value="item.total_count" :max="99" color="#eeeeee"></el-badge>
</div>
</div>
</div>
</el-scrollbar>
@ -64,7 +74,7 @@
</div>
<div class="itemBox">
<div class="leftBox">
<el-icon style="font-size: 26px;"><sc-icon-FilePdf/></el-icon>
<el-icon style="font-size: 26px;"><sc-icon-Excel/></el-icon>
</div>
<div class="rightBox">
<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
@ -282,23 +292,65 @@ export default {
<style lang="scss" scoped>
.emailTitle{font-size: 14px;font-weight: 600;}
.statusBox{
display: flex;align-items: center;justify-content: flex-end;
.item{
position: relative;
margin-left: 18px;
}
.item:after{
content: '';
position: absolute;
left: -12px;
top: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
}
}
.complete:after{
background: var(--el-color-success);
}
.notStarted:after{
background: var(--el-color-danger);
}
.part:after{
background: var(--el-color-warning);
}
.emailMain{
padding: 5px 0;
.itemBox{
box-shadow: 0 1px 1px rgba(0,0,0,0.08);
//box-shadow: 0 1px 1px rgba(0,0,0,0.08);
position: relative;
padding: 12px 0 12px 10px;
cursor: pointer;
.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark)}
.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: calc(100% - 10px);}
.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark);}
.title{margin-bottom: 6px;color: var(--el-text-color-regular)}
.msg{color: var(--el-text-color-placeholder);}
.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.msg{color: var(--el-text-color-placeholder);width: calc(100% - 40px);}
.date{
position: absolute;right: 0;top: 14px;z-index: 10;
position: absolute;right: 12px;top: 14px;z-index: 10;
color: var(--el-text-color-regular);
width: 90px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.total{
position: absolute;right: 12px;bottom: 8px;z-index: 10;
.badgeItem ::v-deep .el-badge__content{
background: #EBEBEB;
border-color: #EBEBEB;
color: #555555;
}
}
}
.itemBox:after{
content: "";
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 25px);
height: 2px;
}
.itemTrue{
background: #EFF5FF;