修改邮件通知
This commit is contained in:
parent
a58602d8d9
commit
da449209ef
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user