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

src/components/Email/components/setting.vue

@@ -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;
+        }
       }
     }
   }