【新增】邮箱模块-增加设置（常规）
This commit is contained in:
maghny@126.com
211
src/components/Email/components/setting.vue
Normal file
211
src/components/Email/components/setting.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="setting-page">
|
||||
<p class="title">邮箱设置</p>
|
||||
<div class="tabs-line">
|
||||
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane label="常规" name="common" />
|
||||
<el-tab-pane label="账户" name="account" />
|
||||
<el-tab-pane label="换肤" name="skin" />
|
||||
<el-tab-pane label="收信规则" name="rules" />
|
||||
<el-tab-pane label="反垃圾" name="spam" />
|
||||
<el-tab-pane label="文件夹和标签" name="folders" />
|
||||
<el-tab-pane label="其他邮箱" name="other" />
|
||||
<el-tab-pane label="我的订阅" name="subscribe" />
|
||||
<el-tab-pane label="信纸" name="letter" />
|
||||
<el-tab-pane label="体验室" name="trial" />
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div v-if="activeName === 'common'" class="common content">
|
||||
<div class="form-title">显示</div>
|
||||
<el-form :model="commonForm" label-width="200px">
|
||||
<el-form-item label="语言：" prop="language">
|
||||
<el-select v-model="commonForm.language">
|
||||
<el-option label="自动选择" value="anto " />
|
||||
<el-option label="中文" value="zh_cn" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小：" prop="size">
|
||||
<el-radio-group v-model="commonForm.size">
|
||||
<el-radio :label="0">标准</el-radio>
|
||||
<el-radio :label="1">中号</el-radio>
|
||||
<el-radio :label="2">大号</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="在邮件列表中：">
|
||||
<div>
|
||||
每页显示
|
||||
<el-select v-model="commonForm.number">
|
||||
<el-option label="25" value="25" />
|
||||
<el-option label="50" value="50" />
|
||||
</el-select>
|
||||
封邮件
|
||||
</div>
|
||||
<el-checkbox-group v-model="commonForm.checkList">
|
||||
<el-checkbox label="main">显示邮件摘要</el-checkbox>
|
||||
<el-checkbox label="size">显示邮件大小</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="在首页上：">
|
||||
<el-checkbox v-model="commonForm.checked1">显示天气</el-checkbox>
|
||||
<div>
|
||||
所在地：
|
||||
<el-select v-model="commonForm.addr">
|
||||
<el-option label="25" value="25" />
|
||||
<el-option label="50" value="50" />
|
||||
</el-select>
|
||||
<p style="color: #b4b4b4;">（自动选择，系统将根据你的IP自动显示你所在的城市的今明两天天气情况。）</p>
|
||||
</div>
|
||||
<el-checkbox v-model="commonForm.checked2">在首页显示好友的生日提醒</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="activeName === 'account'" class="account content"> 222 </div>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="btn-line">
|
||||
<div class="flex">
|
||||
<el-button type="info">保存更改</el-button>
|
||||
<el-button type="info">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeName = ref('common')
|
||||
const handleClick = (tab: any) => {
|
||||
activeName.value = tab.paneName.name
|
||||
}
|
||||
|
||||
const commonForm = ref({
|
||||
language: '',
|
||||
size: 0,
|
||||
number: '25',
|
||||
checkList: [],
|
||||
checked1: false,
|
||||
addr: '',
|
||||
checked2: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.tabs-line {
|
||||
height: 50px;
|
||||
background: #cacaca;
|
||||
padding: 0 10px;
|
||||
:deep(.el-tabs) {
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
.el-tabs__content {
|
||||
display: none;
|
||||
}
|
||||
.el-tabs__header {
|
||||
background-color: #cacaca;
|
||||
border: none;
|
||||
.el-tabs__item {
|
||||
margin-top: 0;
|
||||
background-color: #cacaca;
|
||||
color: #082a4e;
|
||||
font-weight: 500;
|
||||
}
|
||||
.is-active {
|
||||
background-color: #ebebeb;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.main) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ebebeb;
|
||||
overflow: auto;
|
||||
.content {
|
||||
padding: 20px 30px 0;
|
||||
.form-title {
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-form {
|
||||
margin-top: 20px;
|
||||
.el-form-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.el-select {
|
||||
width: auto;
|
||||
.el-select__wrapper {
|
||||
width: 100px;
|
||||
}
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.el-radio {
|
||||
.is-checked .el-radio__inner {
|
||||
background: #909399;
|
||||
border-color: #909399;
|
||||
}
|
||||
.el-radio__input.is-checked + .el-radio__label {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.el-checkbox {
|
||||
.is-checked .el-checkbox__inner {
|
||||
background: #909399;
|
||||
border-color: #909399;
|
||||
}
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
.btn-line {
|
||||
width: 100%;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-button {
|
||||
height: 24px;
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="text">
|
||||
<p style="font-size: 12px">demo(123456@qq.com)</p>
|
||||
<div style="font-size: 12px; margin-top: 5px">
|
||||
<span style="cursor: pointer;">邮箱首页</span> | <span style="cursor: pointer;">设置-换肤</span>
|
||||
<span style="cursor: pointer;">邮箱首页</span> | <span style="cursor: pointer;" @click="setting">设置-换肤</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,6 +69,7 @@
|
||||
</div>
|
||||
<div class="operation">
|
||||
<Home v-if="selectSidebar === 'home'" />
|
||||
<Setting v-if="selectSidebar === 'setting'" />
|
||||
<Write v-if="selectSidebar === '写信'" />
|
||||
<Sent v-if="selectSidebar === '已发送'" />
|
||||
</div>
|
||||
@@ -80,6 +81,7 @@
|
||||
import { ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import Home from './components/home.vue'
|
||||
import Setting from './components/setting.vue'
|
||||
import Write from './components/write.vue'
|
||||
import Sent from './components/sent.vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
@@ -140,6 +142,10 @@ const goHome = () => {
|
||||
selectSidebar.value = 'home'
|
||||
}
|
||||
|
||||
const setting = () => {
|
||||
selectSidebar.value = 'setting'
|
||||
}
|
||||
|
||||
const exitEmail = () => {
|
||||
ElMessageBox.confirm('确认要退出QQ邮箱吗？', '询问', {
|
||||
confirmButtonText: '是(Y)',
|
||||
|
||||
Reference in New Issue
Block a user