diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index 58d4fed..73c35b7 100644
--- a/src/layout/Index.vue
+++ b/src/layout/Index.vue
@@ -1,11 +1,14 @@
 <template>
-    <div class="wrapper">
+    
+    <div class="wrapper" style="overflow:hidden; ">
+        <el-scrollbar >
         <header>
             <img src="/imgs/bg_web.png" alt="" />
         </header>
         <main>
             <router-view />
         </main>
+    </el-scrollbar>
     </div>
 </template>
 <script setup>
diff --git a/src/router/index.js b/src/router/index.js
index 99889be..4904b1a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/layout/Index.vue'
 import Home from '@/views/Home.vue'
 import Write from '@/views/Write.vue'
-
+import MailEvaluate from '@/views/MailEvaluate.vue'
+import MailDetail from '@/views/MailDetail.vue'
 import NotFound from '@/views/error/404.vue'
 
 const routes = [
@@ -18,7 +19,15 @@ const routes = [
             {
                 path: '/mail/write',
                 component: Write,
-            }
+            },
+            {
+                path: '/mail/evaluate',
+                component: MailEvaluate
+            },
+            {
+                path: '/mail/:id',
+                component: MailDetail
+            },
         ]
     },
     {
diff --git a/src/util/request.js b/src/util/request.js
index dd540e1..d95ad86 100644
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -47,7 +47,16 @@ export function del(url) {
 export function upload(data) {
     return post('/file/upload/base64', data)
 }
-
+export function uploadfile(url,data) {
+    return request(url, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": 'multipart/form-data',
+            "Authorization": getToken()
+        }
+    })
+}
 function request(url, options) {
     return new Promise((resolve, reject) => {
         fetch(`${basePath}${url}`, {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 189e4e2..ebccf8a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,26 +1,29 @@
 <template>
-    <div class="flex gap-10 center mt-20">
+    <div class="flex gap-10 center mt-20" style="align:center;">
         <a
             class="flex v-center center gap-16"
             @click="router.push('/mail/write')"
+            style="right: 13px;"   
         >
-            <div style="width: 48px">
+            <div>
                 <img src="/imgs/write.png" alt="" />
             </div>
             <span>我要写信</span>
         </a>
+         
         <a
             class="flex v-center center gap-16"
-            @click="router.push('/mail?active=my')"
-        >
-            <div style="width: 48px">
+            @click="router.push('/mail/write?active=my')"
+            style="left: 13px;"  
+            >
+            <div>
                 <img src="/imgs/search.png" alt="" />
             </div>
             <span>回复查询</span>
         </a>
     </div>
 
-    <Loading :loading="loading" />
+    
 </template>
 <script setup>
 import { useRoute, useRouter } from "vue-router";
@@ -34,42 +37,87 @@ const userStore = UserStore();
 
 const loading = ref(false);
 
-if (!getToken()) {
-    if (route.query.openid) {
-        // 自定义登录
-        authOpenid(route.query.openid).then((data) => {
+
+authOpenid('oWL3NwzZ9LbOxRse4uiPisbzYTI4').then((data) => {
             setToken(data.token);
             userStore.user = data.user;
             loading.value = false;
-
-            wxStore.initSign();
+            console.log(userStore.user)
+            // wxStore.initSign();
         });
-    }
-} else {
-    loading.value = false;
+// if (!getToken()) {
+//     if (route.query.openid) {
+//         // 自定义登录
+//         authOpenid(route.query.openid).then((data) => {
+//             setToken(data.token);
+//             userStore.user = data.user;
+//             loading.value = false;
 
-    wxStore.initSign();
-}
+//             wxStore.initSign();
+//         });
+//     }
+// } else {
+//     loading.value = false;
+
+//     wxStore.initSign();
+// }
 </script>
 <style lang="scss" scoped>
+
 .wrapper {
     background-color: #fff;
 }
 header {
+    
     img {
-        width: 100%;
+        width: 1199px;
+        height: 321px;
     }
 }
+.mt-20{
+    margin-top: 3%;
+} 
+.flex div{
+    width: 580px;
+height: 219px;
+     
+    
+}
+.flex  div img{
+    position: absolute; 
+    width: 156px;
+    height: 156px;
+    left:5.4%;
+    top:14.4%;  
+
+}
+ span{
+    
+    position: absolute; 
+    left: 52%;
+    top: 39.9%;
+    width: 128px;
+height: 45px;
+font-family: PingFang-SC-Heavy;
+font-size: 32px;
+color: #0E5A98;
+text-align: center;
+font-weight: 800;
+}
 a {
-    width: 45.2%;
-    height: 84px;
-    text-decoration: none;
-    border: 1px solid var(--primary-color);
-    color: var(--primary-color);
+    display: block;
+    
+    position: relative;
+    width: 580px;
+height: 219px;
+background: #F3FAFF;
+border: 1px solid rgba(32,119,192,1);
     font-weight: bold;
     font-size: 18px;
     &:hover {
         cursor: pointer;
     }
+    
 }
+
 </style>
\ No newline at end of file
diff --git a/src/views/Write.vue b/src/views/Write.vue
index d7eb11c..a4e3fb0 100644
--- a/src/views/Write.vue
+++ b/src/views/Write.vue
@@ -1,78 +1,92 @@
 <template>
-    <el-form :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker
-            v-model="form.date1"
-            type="date"
-            placeholder="Pick a date"
-            style="width: 100%"
-          />
-        </el-col>
-        <el-col :span="2" class="text-center">
-          <span class="text-gray-500">-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-time-picker
-            v-model="form.date2"
-            placeholder="Pick a time"
-            style="width: 100%"
-          />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button>Cancel</el-button>
-      </el-form-item>
-    </el-form>
+ 
+    <el-tabs v-model="pageStore.mailTabActive" class="demo-tabs" 
+        :stretch="false" style="margin-top: 1%; width: 1200px;" @tab-change="handleClickOfWrite">
+    <el-tab-pane label="我要写信" name="write" ref="cab1" style="min-height: 1100px;"  ><WriteInfo @childWriter-msg="getChildWriteMsg" /></el-tab-pane>
+    <el-tab-pane label="我的信件" name="my"   @tab-click="handleClick">
+      <MyMail v-if="chooseTab=='isList'" @child-msg="getChildMsg" />
+      <MailDetail :message="message" v-else/>
+    </el-tab-pane>
+    <el-tab-pane label="草稿箱" name="draft">
+      <MailDraft :message_draft="message_draft" @child-msg="getMailDraftChildMsg"/>
+    </el-tab-pane>
+    </el-tabs>
+  
   </template>
   
-  <script lang="ts" setup>
-  import { reactive } from 'vue'
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { ref } from 'vue'
+import WriteInfo from './components/WriteInfo.vue';
+import MyMail from './components/MyMail.vue';
+import MailDraft from './components/MailDraft.vue';
+import MailDetail from '../views/MailDetail.vue';
+import type { TabsPaneContext } from 'element-plus'
+import { useRoute } from "vue-router";
+import PageStore from '../store/page';
+
+const chooseTab = ref('isList');
+const route = useRoute();
+
+const pageStore = PageStore()
+if(route.query.active){
+  pageStore.mailTabActive = route.query.active 
+}else{
+  pageStore.mailTabActive = "write"
+
+}
+
+const message = ref("1");
+const message_draft = ref("1");
+const activeName = ref('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
   
-  // do not use same name with ref
-  const form = reactive({
-    name: '',
-    region: '',
-    date1: '',
-    date2: '',
-    delivery: false,
-    type: [],
-    resource: '',
-    desc: '',
-  })
+}
+const handleClickOfWrite = (name) => {
+  console.log(chooseTab.value)
+    
+    chooseTab.value = 'isList'
+    
+}
+
+function getChildMsg(msg) {
+                console.log("这就是子组件传过来的msg" + msg)
+                chooseTab.value = 'isDetail'
+                message.value = msg
+                console.log("aaa"+message.value)
+                
+}
+function getChildWriteMsg(msg) {
+                // console.log("这就是子组件传过来的msg" + msg)
+                activeName.value = msg
+                // console.log("aaa"+activeName.value)
+}
+function getMailDraftChildMsg(msg) {
+                activeName.value = "first"
+                console.log("这就是子组件传过来的msg" + msg)
+                message_draft.value = msg
+                console.log("message_draft"+message_draft.value)
+}
+</script>
+<style lang="scss" scoped>
+
+  ::v-deep .el-tabs__item {
+    width: 400px;
+    height: 33px;
+    font-family: PingFang SC;
+    font-size: 24px;
+    color: #333333 100%;
+    text-align: center;
+    font-weight: 400;
+    margin-bottom: 1.2%;
+}
   
-  const onSubmit = () => {
-    console.log('submit!')
-  }
-  </script>
-  
\ No newline at end of file
+::v-deep .el-tabs__item .is-active {
+    color: #0E5A98 100%;
+}
+::v-deep .el-tabs__active-bar {
+    
+    background-color: #0E5A98 100%;
+}
+</style>
\ No newline at end of file