<!-- 电子邮箱 -->
|
<template>
|
<div class="c">
|
<div class="bg">
|
<div class="main">
|
<div class="main-title">
|
<p>电子邮箱</p>
|
<div
|
class="back"
|
@click="goBack"
|
><svg
|
t="1651823534392"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
content-inquire
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="1892"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M896 544H250.4l242.4 242.4L448 832 173.6 557.6 128 512l45.6-45.6L448 192l45.6 45.6L250.4 480H896v64z"
|
p-id="1893"
|
fill="#515151"
|
></path>
|
</svg></div>
|
</div>
|
<div class="content">
|
<template class="flex">
|
<el-tabs tab-position="left">
|
<el-tab-pane label="收件箱(123)">
|
<MailManagenment />
|
</el-tab-pane>
|
<el-tab-pane label="已发送"></el-tab-pane>
|
<el-tab-pane label="重要信息"></el-tab-pane>
|
<el-tab-pane label="草稿箱"></el-tab-pane>
|
<el-tab-pane label="回收站"></el-tab-pane>
|
</el-tabs>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import MailManagenment from "../../../components/MailManagement/index.vue";
|
export default {
|
components: { MailManagenment },
|
methods: {
|
// 返回上一个页面
|
goBack() {
|
this.$router.back();
|
},
|
},
|
};
|
</script>
|
<style scoped lang="scss">
|
.flex {
|
display: flex;
|
// flex-wrap: wrap;
|
// justify-content: space-around;
|
}
|
// 内容
|
.content {
|
width: 1262px;
|
margin-bottom: 80px;
|
background-color: #fff;
|
padding: 20px 40px;
|
border-radius: 10px;
|
}
|
|
.main {
|
&-title {
|
border-left: 5px solid rgb(16, 71, 247);
|
padding-left: 10px;
|
margin: 50px 0;
|
position: relative;
|
& p {
|
font-weight: 700;
|
}
|
}
|
}
|
.back {
|
position: absolute;
|
top: 0px;
|
left: -30px;
|
}
|
</style>
|
