Exam/pengchen-exam-vue
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【新增】邮箱模块-增加设置（账户）

Browse Source
This commit is contained in:
maghny@126.com
2025-08-16 02:05:56 +08:00
parent 11e758058b
commit f148ea9938
1 changed files with 100 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/Email/components/setting.vue
View File

@@ -18,8 +18,8 @@
<div class="main">
<div v-if="activeName === 'common'" class="common content">
<div class="form-title">显示</div>
<el-form :model="commonForm" label-width="200px">
<div class="form-title">显示</div>
<el-form-item label="语言：" prop="language">
<el-select v-model="commonForm.language">
<el-option label="自动选择" value="anto " />
@@ -55,13 +55,75 @@
<el-option label="25" value="25" />
<el-option label="50" value="50" />
</el-select>
<p style="color: #b4b4b4;">（自动选择，系统将根据你的IP自动显示你所在的城市的今明两天天气情况。）</p>
<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 v-if="activeName === 'account'" class="account content">
<el-form :model="accountForm" label-width="200px">
<div class="form-title">显示</div>
<el-form-item label="默认账户昵称：">
<el-input v-model="accountForm.name" />
<p style="color: #b4b4b4"
>（你发出的所有邮件，发件人将显示你的邮件昵称，你还可以给每个账户单独设置昵称。）</p
>
</el-form-item>
<el-form-item label="我的生日：">
<div style="margin-bottom: 10px">
<el-select v-model="accountForm.value1" style="margin-right: 5px">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="accountForm.value2" style="margin-right: 5px">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
月
<el-select v-model="accountForm.value3">
<el-option
v-for="item in options3"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
日
</div>
<el-checkbox v-model="accountForm.checked3">好友可见我的生日</el-checkbox>
<p style="color: #b4b4b4">（快过生日时，你的好友可以在邮箱首页看到你的生日信息。）</p>
</el-form-item>
<div class="form-title">默认发信帐号</div>
<el-form-item>
<el-select v-model="accountForm.value4" class="account-select">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div class="form-title">邮箱帐号</div>
<el-form-item label="英文邮箱账号：">
<el-button>注册@qq.com英文账号…</el-button>
<p style="color: #b4b4b4"
>（你还可以注册一个英文邮箱账号，例如：chen@qq.com，并以此登录。）</p
>
</el-form-item>
</el-form>
</div>
</div>
<div class="foot">
@@ -90,8 +152,19 @@ const commonForm = ref({
checkList: [],
checked1: false,
addr: '',
checked2: false,
checked2: false
})
const accountForm = ref({
name: 'demo',
value1: '',
value2: '',
value3: '',
checked3: false,
value4: ''
})
const options1 = []
const options2 = []
const options3 = []
</script>
<style lang="scss" scoped>
@@ -103,6 +176,7 @@ const commonForm = ref({
display: flex;
flex-direction: column;
.title {
height: 28px;
padding-left: 10px;
}
.tabs-line {
@@ -133,15 +207,17 @@ const commonForm = ref({
}
:deep(.main) {
flex: 1;
flex-basis: 0;
display: flex;
flex-direction: column;
background: #ebebeb;
overflow: auto;
overflow-y: auto;
.content {
padding: 20px 30px 0;
padding: 10px 30px 0;
.form-title {
border-bottom: 1px solid #000;
font-size: 14px;
margin-bottom: 20px;
}
.el-form {
margin-top: 20px;
@@ -180,10 +256,27 @@ const commonForm = ref({
background: #909399;
border-color: #909399;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #909399;
}
}
.el-input {
width: 200px;
.el-input__wrapper.is-focus {
box-shadow: none;
}
}
.account-select {
.el-select__wrapper {
width: 200px;
}
}
.el-button {
outline: none;
background: #d5d5d5;
border-color: transparent;
color: #606266;
}
}
}
}