up

src/assets/svg/task/leave.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692344333381" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8540" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M784.947539 564.548619a229.805247 229.805247 0 0 1 229.741474 229.741474 229.42261 229.42261 0 0 1-229.741474 229.709588 229.42261 229.42261 0 0 1-229.709588-229.709588 229.42261 229.42261 0 0 1 229.709588-229.741474zM485.247315 32.842987c138.195635 0 251.902519 114.280839 251.328563 252.444587 0 112.558973-75.251892 208.760226-177.288355 240.806053 37.338968 5.83521 75.251892 15.751879 113.132929 30.323961a261.564096 261.564096 0 0 0-151.013966 237.29855 260.926368 260.926368 0 0 0 97.955005 203.498972h-558.011908a61.38131 61.38131 0 0 1-46.043954-22.161045c-11.064579-15.146038-15.146038-32.651668-11.064579-50.125412 40.814585-208.760226 201.139378-367.331268 399.982936-402.310643-98.52896-33.831465-170.273348-128.278966-170.273348-237.904391 0-137.589793 113.132929-251.902519 251.296677-251.902519z m277.188429 602.015133a26.338162 26.338162 0 0 0-26.114957 23.021977l-0.191318 3.316185v170.560325a26.338162 26.338162 0 0 0 22.734999 26.083071l3.571276 0.223205h170.560326a26.338162 26.338162 0 0 0 3.284299-52.45312l-3.284299-0.223204H788.773906v-144.190277a26.338162 26.338162 0 0 0-26.370048-26.338162z" fill="#8a8a8a" p-id="8541"></path></svg>

src/assets/svg/task/stay.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692344969101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20171" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M832 448h-64v-32c0-52.8-43.2-96-96-96H160c-52.8 0-96 43.2-96 96v288c0 140.8 115.2 256 256 256h192c125.676 0 230.947-91.783 252.115-211.627C783.825 760.793 807.11 768 832 768c70.4 0 128-57.6 128-128v-64c0-70.4-57.6-128-128-128zM352 832c-88.366 0-160-71.634-160-160 0-17.673 14.327-32 32-32s32 14.327 32 32c0 53.019 42.981 96 96 96 17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32z m544-192c0 35.2-28.8 64-64 64s-64-28.8-64-64V512h64c35.2 0 64 28.8 64 64v64zM224 256c17.6 0 32-14.4 32-32V96c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM416 256c17.6 0 32-14.4 32-32V96c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM608 256c17.6 0 32-14.4 32-32V96c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32z" p-id="20172" fill="#8a8a8a"></path></svg>

src/views/dash/compoents/agency.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="full-width flex flex-col">
+    <div class="bold font-16 full-width text-left">{{ title }}</div>
+    <div class="flex flex-center flex-justify-between mt-15" v-for="item in 6">
+      <div>hhhhhhhhhhhhhhhhhhhhhhh dddddddfghjj</div>
+      <div class="flex flex-center">
+        <span class="mr-20 grey-9 font-13">2023-09-23 12:34</span>
+        <div class="read">已读</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'agency',
+  props: {
+    type: {
+      type: Number,
+      default: 1
+    }
+  },
+  watch: {
+    type: {
+      handler(val) {
+        if (val === 2) {
+          this.title = '内容更新'
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      title: '代办事项'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.read {
+  background: #bf863c;
+  padding: 2px;
+  color: white;
+  border-radius: 3px;
+  font-size: 12px;
+  width: 40px;
+  font-weight: 500;
+}
+</style>

src/views/dash/compoents/data_show.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="full-width flex flex-col">
+    <div class="flex flex-center flex-justify-between">
+      <span class="bold font-16">梧桐研究院</span>
+      <span class="font-13 grey-9">数据统计时间：2023年8月11日</span>
+    </div>
+    <div
+      class="flex flex-center flex-justify-between mb-15 ml-20"
+      style="margin-top: 25px"
+    >
+      <div class="flex flex-col flex-center">
+        <span class="bold">全部项目数</span>
+        <span class="mt-10 font-24 main-color"
+          >222<span class="font-13 black"> 个</span></span
+        >
+      </div>
+      <div class="flex flex-col flex-center">
+        <span class="bold">全部报告数</span>
+        <span class="mt-10 font-24 main-color"
+          >1122<span class="font-13 black"> 篇</span></span
+        >
+      </div>
+      <div class="flex flex-col flex-center">
+        <span class="bold">我的项目数</span>
+        <span class="mt-10 font-24 main-color"
+          >32<span class="font-13 black"> 个</span></span
+        >
+      </div>
+      <div class="flex flex-col flex-center mr-20">
+        <span class="bold">我的报告数</span>
+        <span class="mt-10 font-24 main-color"
+          >22<span class="font-13 black"> 篇</span></span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'data_show'
+}
+</script>
+
+<style scoped></style>

src/views/dash/compoents/profile.vue

@@ -1,10 +1,30 @@
 <template>
-  <div class="full-width flex flex-justify-start flex-col">
-    <div class="bold">我的状态</div>
-    <div>
-      <el-avatar
-        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-      ></el-avatar>
+  <div class="full-width flex">
+    <div class="flex flex-col flex-child-average text-left">
+      <div class="bold font-16" style="margin-top: -10px">我的信息</div>
+      <div class="mt-10 ml-20">
+        <el-avatar
+          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+          size="large"
+        ></el-avatar>
+      </div>
+      <div class="mt-10" style="margin-left: 33px">张三</div>
+    </div>
+    <div class="flex flex-col flex-child-average mr-20 mt-20">
+      <el-input placeholder="填写状态词" size="large" style="width: 100%">
+        <template #prepend>
+          <el-button icon="EditPen" />
+        </template>
+      </el-input>
+      <div class="flex flex-center flex-justify-between mt-10">
+        <img
+          src="../../../assets/svg/task/work.svg"
+          class="icon-task ml-10 mt-5"
+        />
+        <img src="../../../assets/svg/task/trip.svg" class="icon-task3" />
+        <img src="../../../assets/svg/task/leave.svg" class="icon-task2" />
+        <img src="../../../assets/svg/task/stay.svg" class="icon-task1 mr-5" />
+      </div>
     </div>
   </div>
 </template>
@@ -13,4 +33,25 @@
 export default {}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.icon-task {
+  width: 38px;
+  height: 45px;
+}
+
+.icon-task3 {
+  width: 35px;
+  height: 40px;
+  margin-left: -15px;
+}
+
+.icon-task1 {
+  width: 30px;
+  height: 45px;
+}
+
+.icon-task2 {
+  width: 26px;
+  height: 40px;
+}
+</style>

src/views/dash/compoents/read.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col full-width mb-20">
+    <div class="full-width text-left bold font-16">今日学习</div>
+    <div class="flex flex-center">
+      <div class="flex flex-center ml-10" style="flex: 5">
+        <div
+          class="flex flex-col flex-center border radius box-shadow mr-15 mt-15"
+          v-for="item in 4"
+        >
+          <div>
+            <img
+              src="../../../assets/img/code.png"
+              style="width: 50px; height: 120px"
+            />
+          </div>
+          <div class="bold padding">
+            文章标题文章标题文章标题文章标题文章标题文章标题文章标题
+          </div>
+          <div class="lines-2 lines-height-15 grey-9 padding">
+            文章内容文章内容文章内容文章内容文章内容文章内容
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-center flex-col" style="flex: 1">
+        <img
+          src="../../../assets/img/code.png"
+          style="width: 80px; height: 80px"
+        />
+        <span class="mt-10 font-13"
+          >微信扫描关注公众号<br />及时掌握更多资讯</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'read'
+}
+</script>
+
+<style scoped></style>

src/views/dash/index.vue

@@ -2,20 +2,41 @@
   <div>
     <el-card :shadow="hover">
       <div class="full-width flex flex-center flex-justify-start">
-        <el-icon><Bell /></el-icon>
+        <el-icon>
+          <Bell />
+        </el-icon>
         <span class="ml-10">首页</span>
       </div>
     </el-card>
-
     <div class="flex flex-center flex-justify-between">
       <el-card :shadow="hover" class="flex-child-average mt-20">
-        <profile
-      /></el-card>
+        <profile />
+      </el-card>
       <div class="padding"></div>
       <el-card :shadow="hover" class="flex-child-average mt-20">
-        <div>33</div>
+        <data_show />
+      </el-card>
+    </div>
+    <div class="flex flex-center flex-justify-between">
+      <el-card
+        :shadow="hover"
+        class="flex-child-average mt-20"
+        style="height: 300px"
+      >
+        <agency :type="1" />
+      </el-card>
+      <div class="padding"></div>
+      <el-card
+        :shadow="hover"
+        class="flex-child-average mt-20"
+        style="height: 300px"
+      >
+        <agency :type="2" />
       </el-card>
     </div>
+    <el-card :shadow="hover" class="mt-20">
+      <read />
+    </el-card>
   </div>
 </template>
 
@@ -28,9 +49,12 @@ name: '首页',
 
 <script>
 import Profile from '@/views/dash/compoents/profile.vue'
+import data_show from '@/views/dash/compoents/data_show.vue'
+import agency from '@/views/dash/compoents/agency.vue'
+import read from '@/views/dash/compoents/read.vue'
 
 export default {
-  components: { Profile }
+  components: { Profile, data_show, agency, read }
 }
 </script>