diff --git a/src/components/Email/components/setting.vue b/src/components/Email/components/setting.vue
new file mode 100644
index 0000000..5282802
--- /dev/null
+++ b/src/components/Email/components/setting.vue
@@ -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>
+              每页显示 &nbsp;
+              <el-select v-model="commonForm.number">
+                <el-option label="25" value="25" />
+                <el-option label="50" value="50" />
+              </el-select>
+              &nbsp;封邮件
+            </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>
+              所在地： &nbsp;
+              <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>
diff --git a/src/components/Email/index.vue b/src/components/Email/index.vue
index 2481ae6..39b2148 100644
--- a/src/components/Email/index.vue
+++ b/src/components/Email/index.vue
@@ -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)',