124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="g-email ">
|
||
|
|
<div class="g-email-left">
|
||
|
|
<div class="g-email-left-header flex items-center">
|
||
|
|
<slot name="header">
|
||
|
|
<div class="g-email-left-header-email">{{ email }}</div>
|
||
|
|
<slot name="main">
|
||
|
|
<span class="g-email-left-header-tip main" v-if="isMail">默认</span>
|
||
|
|
<span class="g-email-left-header-tip no-verify" v-if="!isVerify">未验证</span>
|
||
|
|
</slot>
|
||
|
|
<div class="g-email-right-text" v-if="!isVerify" @click.stop="emits('handleStar', props)">
|
||
|
|
<span class="g-email-right-text-p">重新发送邮件确认</span>
|
||
|
|
</div>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="!isMail" class="g-email-right">
|
||
|
|
<slot name="right">
|
||
|
|
<MoreList :moreOpts="moreOpts" :item="item"></MoreList>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import MoreList from '@/components/MoreList/index.vue';
|
||
|
|
const props = withDefaults(defineProps<{
|
||
|
|
id?: string
|
||
|
|
email: string
|
||
|
|
isMail?: boolean
|
||
|
|
isVerify?: boolean
|
||
|
|
hideDeleted?: boolean
|
||
|
|
hideStar?: boolean,
|
||
|
|
moreOpts?: any,
|
||
|
|
item?: any
|
||
|
|
}>(), {
|
||
|
|
id: '',
|
||
|
|
email: '',
|
||
|
|
isMail: false,
|
||
|
|
isVerify: false,
|
||
|
|
hideDeleted: false,
|
||
|
|
hideStar: false,
|
||
|
|
moreOpts: () => [],
|
||
|
|
item: () => ({
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
const emits = defineEmits(['handleStar', 'handleDeleted']);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
$g-email-border-color: var(--color-G300);
|
||
|
|
|
||
|
|
.g-email {
|
||
|
|
border: 1px solid $g-email-border-color;
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
&:last-of-type{
|
||
|
|
// border-bottom: none;
|
||
|
|
}
|
||
|
|
&-left {
|
||
|
|
align-self: center;
|
||
|
|
&-header {
|
||
|
|
&-email {
|
||
|
|
width: 300px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--color-G900);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-tip {
|
||
|
|
padding-left: 16px;
|
||
|
|
font-size: 14px;
|
||
|
|
border-left: 1px solid var(--color-G400);
|
||
|
|
&.main {
|
||
|
|
color: var(--color-Y500);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.no-verify {
|
||
|
|
color: var(--color-O500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-content {
|
||
|
|
margin-top: 8px;
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-right {
|
||
|
|
font-size: 16px;
|
||
|
|
align-self: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
:deep(.devui-button) {
|
||
|
|
border-color: $g-email-border-color;
|
||
|
|
margin-left: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-text {
|
||
|
|
align-self: center;
|
||
|
|
display: inline-block;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.devui-icon__container {
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-p {
|
||
|
|
margin-left: 4px;
|
||
|
|
color: var(--color-CG600);
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|