【新增】邮件模块-写信页面

src/components/Email/components/write.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="write-page">
+    <el-tabs v-model="activeName" type="card" class="card-tabs" @tab-click="handleClick">
+      <el-tab-pane label="普通邮件" name="common" />
+      <el-tab-pane label="群邮件" name="crowd" />
+      <el-tab-pane label="贺卡" name="greeting" />
+      <el-tab-pane label="明信片" name="postcard" />
+      <el-tab-pane label="音视频邮件" name="video" />
+    </el-tabs>
+    <div v-if="activeName === 'common'" class="common-content tab-content">
+      <div class="btn-line_top flex">
+        <el-button type="info">发送</el-button>
+        <el-button type="info">定时发送</el-button>
+        <el-button type="info">存草稿</el-button>
+        <el-button type="info">关闭</el-button>
+      </div>
+      <div class="common-main">
+        <div class="row flex" style="margin-bottom: 5px">
+          <span class="text-label">收件人</span>
+          <el-input v-model="recipient" class="row-input" />
+        </div>
+        <div
+          class="row flex"
+          style="justify-content: flex-start; padding-left: 7.5%; margin-bottom: 8px"
+        >
+          <div class="text-button" style="margin-right: 8px">添加抄送</div>
+          <div class="text-divider" style="margin-right: 8px">-</div>
+          <div class="text-button" style="margin-right: 8px">添加密送</div>
+          <div class="text-divider" style="margin-right: 8px; color: #ccc6bf">|</div>
+          <div class="text-button">分别发送</div>
+        </div>
+        <div class="row flex" style="margin-bottom: 8px">
+          <span class="text-label">主题</span>
+          <el-input v-model="recipient" class="row-input" />
+        </div>
+        <div
+          class="row flex"
+          style="justify-content: flex-start; padding-left: 7.5%; margin-bottom: 5px"
+        >
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/annex_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            添加附件
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/annex_logo__orange.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            超大附件
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/photo_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            照片
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/document_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            文档
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/screenshot_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            截屏
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/emoji_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            表情
+          </div>
+          <div class="text-button flex" style="margin-right: 10px">
+            <img src="../img/more_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            更多
+          </div>
+          <div class="text-button flex">
+            <img src="../img/format_logo.png" style="width: 14px; height: 14px; margin-right: 3px;" />
+            格式
+          </div>
+        </div>
+        <div class="row flex" style="flex: 1; align-items: flex-start; margin-bottom: 8px">
+          <span class="text-label">正文</span>
+          <el-input v-model="recipient" type="textarea" class="row-input" />
+        </div>
+        <div class="row flex" style="justify-content: flex-start; padding-left: 7%">
+          <div class="text-button" style="margin-right: 8px; color: #000; cursor: default;"
+            >发件人：{{ `demo<547090564.qq.com>` }}</div
+          >
+          <div class="text-divider" style="margin-right: 8px; color: #ccc6bf">|</div>
+          <div class="text-button">其他选项</div>
+        </div>
+      </div>
+      <div class="btn-line_bottom flex">
+        <el-button type="info">发送</el-button>
+        <el-button type="info">定时发送</el-button>
+        <el-button type="info">存草稿</el-button>
+        <el-button type="info">关闭</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const activeName = ref('common')
+const handleClick = (tab: any) => {
+  activeName.value = tab.paneName.value
+}
+
+const recipient = ref('')
+</script>
+
+<style lang="scss" scoped>
+.write-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  :deep(.el-tabs) {
+    .el-tabs__header {
+      height: 32px;
+      margin-bottom: 0;
+      border: none;
+      .el-tabs__nav {
+        border: none;
+        .el-tabs__item {
+          height: 32px;
+          margin-right: 3px;
+          border: none;
+          background: #e0e0e0;
+          color: #000;
+        }
+        .is-active {
+          background: #b8b7b6;
+        }
+        .el-tabs__item:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .tab-content {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .common-content {
+    .btn-line_top,
+    .btn-line_bottom {
+      width: 100%;
+      height: 40px;
+      background: #b8b7b6;
+      padding-left: 10px;
+      :deep(.el-button) {
+        height: 24px;
+        background: #f0f0f0;
+        border-radius: 0;
+        > span {
+          color: #000;
+          font-weight: 400;
+          line-height: 28px;
+        }
+      }
+    }
+    .btn-line_bottom {
+      border-top: 1px solid #fff;
+      background: #cdcdcd;
+    }
+    .common-main {
+      width: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: #ebebeb;
+      border-top: 1px solid #fff;
+      padding: 10px;
+      .row {
+        justify-content: flex-end;
+        .text-label {
+          font-size: 14px;
+          color: #082a4e;
+          flex-shrink: 0;
+          margin-right: 8px;
+        }
+        :deep(.el-input) {
+          width: 93%;
+          .el-input__wrapper {
+            box-shadow: none;
+            border-radius: 0;
+            border: 1px solid #707070;
+          }
+          .el-input__wrapper.is-focus {
+            box-shadow: none;
+          }
+        }
+        :deep(.el-textarea) {
+          width: 93%;
+          height: 100%;
+          .el-textarea__inner {
+            height: 100%;
+            resize: none;
+            box-shadow: none;
+            border-radius: 0;
+            border: 1px solid #707070;
+          }
+          .el-textarea__inner.is-focus {
+            box-shadow: none;
+          }
+        }
+        .text-button {
+          font-size: 14px;
+          font-weight: 400;
+          color: #082a4e;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Email/index.vue

@@ -2,8 +2,8 @@
   <div class="email-page">
     <div class="header">
       <div class="left">
-        <div class="logo">
-          <img src="./img/QQ-email_white.png" alt="" />
+        <div class="logo" @click="goHome">
+          <img src="./img/email_logo.png" alt="" />
         </div>
         <div class="text">
           <p style="font-size: 12px">demo(123456@qq.com)</p>
@@ -68,8 +68,9 @@
         </div>
       </div>
       <div class="operation">
+        <Home v-if="selectSidebar === 'home'" />
+        <Write v-if="selectSidebar === '写信'" />
         <Sent v-if="selectSidebar === '已发送'" />
-        <Home v-else />
       </div>
     </div>
   </div>
@@ -78,10 +79,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
-import Sent from './components/sent.vue'
 import Home from './components/home.vue'
+import Write from './components/write.vue'
+import Sent from './components/sent.vue'
 import { ElMessageBox } from 'element-plus'
 
+import '../Setting/style/common.scss'
+
 const searchVal = ref('')
 
 const bigList = [
@@ -127,11 +131,15 @@ const smallList = [
   }
 ]
 
-const selectSidebar = ref('')
+const selectSidebar = ref('home')
 const sidebarHandle = (name: string) => {
   selectSidebar.value = name
 }
 
+const goHome = () => {
+  selectSidebar.value = 'home'
+}
+
 const exitEmail = () => {
   ElMessageBox.confirm('确认要退出QQ邮箱吗？', '询问', {
     confirmButtonText: '是(Y)',
@@ -168,6 +176,7 @@ const exitEmail = () => {
       .logo {
         height: 100%;
         margin-right: 20px;
+        cursor: pointer;
         > img {
           width: 100px;
           height: 100%;