feat: 添加我的档案静态界面，调整项目管理部分样式

client/src/views/OaSystem/mineCenter/components/rightBox.vue

@@ -16,9 +16,7 @@
       </ul>
     </div>
     <div class="rightContent">
-      <div class="detailContent">
-        <component :is="currentComponent" />
-      </div>
+      <component :is="currentComponent" />
     </div>
   </div>
 </template>
@@ -111,31 +109,35 @@ const rightTabsClick = (item, index) => {
   height: 100%;
   background-color: #fff;
   border-radius: 10px;
+
   .rightTabs {
     width: 100%;
     height: 114px;
     border-bottom: 1px solid #dee0e3;
+
     ul {
+      display: flex;
       width: 100%;
       height: 100%;
-      display: flex;
       align-items: center;
 
       li {
+        display: flex;
         width: 80px;
-        margin: 0 20px;
         height: 100%;
-        display: flex;
+        padding-bottom: 2px;
+        margin: 0 20px;
+        cursor: pointer;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
-        cursor: pointer;
-        padding-bottom: 2px;
+
         img {
           width: 32px;
           height: 32px;
           margin-top: 15px;
         }
+
         p {
           width: 100%;
           margin-top: -40px;
@@ -143,15 +145,18 @@ const rightTabsClick = (item, index) => {
           text-align: center;
         }
       }
+
       .liActive {
-        padding-bottom: 0px;
+        padding-bottom: 0;
         border-bottom: 2px solid #2e77e6;
+
         p {
           color: #2e77e6;
         }
       }
     }
   }
+
   .rightContent {
     width: 100%;
     height: calc(100% - 114px);

client/src/views/OaSystem/mineCenter/index.vue

@@ -13,11 +13,11 @@ onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 .mineCenter {
+  display: flex;
   width: 100%;
   height: calc(100% - 15px);
-  display: flex;
+  margin-top: 15px;
   align-items: center;
   justify-content: space-between;
-  margin-top: 15px;
 }
 </style>

client/src/views/OaSystem/mineCenter/rightChild/wdda.vue

@@ -1,13 +1,202 @@
-<template>
-  <div class="_wdda"> 我的档案 </div>
-</template>
 <script setup lang="ts">
 /** 初始化 **/
 onMounted(() => {})
+
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: '测绘质量检测技术',
+    level: '高级',
+    organization: '浙江省测绘与地理信息行业协会'
+  },
+  {
+    date: '2016-05-02',
+    name: '职称证书',
+    level: '中级',
+    organization: '浙江省测绘与地理信息行业协会'
+  }
+]
 </script>
+<template>
+  <div class="my-portrait">
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>基本信息</span>
+      </div>
+      <div class="my-portrait-card">
+        <ul>
+          <li>
+            <span>出生日期</span>
+            <span>1991-10-26</span>
+          </li>
+          <li>
+            <span>户口性质</span>
+            <span>城镇</span>
+          </li>
+          <li>
+            <span>婚姻状况</span>
+            <span>未婚</span>
+          </li>
+          <li>
+            <span>民族</span>
+            <span>汉族</span>
+          </li>
+          <li>
+            <span>参加工作时间</span>
+            <span>1991-10-26</span>
+          </li>
+          <li>
+            <span>政治面貌</span>
+            <span>党员</span>
+          </li>
+          <li>
+            <span>现居住地址</span>
+            <span>浙江省杭州市萧山区新塘街道荷源府6-2-102</span>
+          </li>
+          <li>
+            <span>户口所在地</span>
+            <span>浙江省杭州市萧山区新塘街道荷源府6-2-102</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>教育信息</span>
+      </div>
+      <div class="my-portrait-card">
+        <ul>
+          <li>
+            <span>毕业院校</span>
+            <span>浙江水利水电职业技术学院</span>
+          </li>
+          <li>
+            <span>毕业时间</span>
+            <span>2011-10-26</span>
+          </li>
+          <li>
+            <span>最高学历</span>
+            <span>本科</span>
+          </li>
+          <li>
+            <span>专业</span>
+            <span>地质工程</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>紧急联系人信息</span>
+      </div>
+      <div class="my-portrait-card">
+        <ul>
+          <li>
+            <span>紧急联系人姓名</span>
+            <span>张大帅</span>
+          </li>
+          <li>
+            <span>紧急联系人电话</span>
+            <span>15650214899</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="my-portrait-item" style="height: 200px">
+      <div class="title">
+        <i></i>
+        <span>技能证书</span>
+      </div>
+
+      <div>
+        <el-table
+          :header-cell-style="{
+            background: '#F2F4F8',
+            color: '#2D333C',
+            height: '46px'
+          }"
+          style="width: 100%; height: 100%"
+          :data="tableData"
+          height="150px"
+        >
+          <el-table-column type="index" width="50" />
+          <el-table-column prop="name" label="证书名称" />
+          <el-table-column prop="level" label="证书等级" />
+          <el-table-column prop="date" label="获得时间" />
+          <el-table-column prop="organization" label="发证机构" />
+          <el-table-column fixed="right" label="操作" width="120">
+            <template #default>
+              <el-button link type="primary" size="small">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
-._wdda {
+.my-portrait {
   width: 100%;
   height: 100%;
+  padding: 30px 30px 0;
+  overflow: auto;
+
+  .my-portrait-item {
+    margin-bottom: 30px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+
+      i {
+        display: block;
+        width: 16px;
+        height: 16px;
+        margin-right: 9px;
+        background: url('../../../../assets/imgs/OA/mine/star.png') center no-repeat;
+        background-size: 100%;
+      }
+
+      span {
+        font-size: 18px;
+        font-weight: bold;
+        color: #2d333c;
+      }
+    }
+
+    ul {
+      display: flex;
+      padding: 20px 40px;
+      background: linear-gradient(90deg, #f2f7ff 0%, rgb(245 249 255 / 0%) 100%);
+      border: 1px solid #e4e9f1;
+      border-radius: 4px;
+      flex-wrap: wrap;
+
+      li {
+        width: 50%;
+        margin: 10px 0;
+
+        span {
+          display: inline-block;
+          font-size: 16px;
+          font-weight: 400;
+
+          &:nth-child(1) {
+            width: 146px;
+            color: #455773;
+          }
+
+          &:nth-child(2) {
+            color: #2d333c;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

client/src/views/OaSystem/projectCenter/projectBook/projectBook.vue

@@ -26,13 +26,7 @@
       </div>
       <div class="form">
         <span class="formSpan">行业：</span>
-        <el-select
-          width="160px"
-          v-model="queryParams.hyId"
-          class="m-2"
-          placeholder="请选择行业"
-          size="large"
-        >
+        <el-select width="160px" v-model="queryParams.hyId" class="m-2" placeholder="请选择行业">
           <el-option
             v-for="item in industryListAll"
             :key="item.value"
@@ -260,5 +254,5 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-@import url(./projectBook.scss);
+@import url('./projectBook.scss');
 </style>

client/src/views/OaSystem/projectCenter/projectDetail/projectDetail.scss

@@ -6,47 +6,48 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  >div:not(.subModalByRightBottom) {
+  > div:not(.subModalByRightBottom) {
     background-color: #fff;
     padding: 0px 20px 0px 20px;
     &.detailHeader {
-      >div {
+      > div {
         &:first-child {
           display: flex;
           justify-content: space-between;
           padding: 20px 0px;
-          >div {
+          > div {
             display: flex;
             align-items: center;
-            >h2 {
+            > h2 {
               font-size: 22px;
               max-width: 860px;
-              >.subTitle {
-                color: #8B969C;
+              > .subTitle {
+                color: #8b969c;
                 font-size: 18px;
               }
-              >.statu {
-                background-color: #05CE9E;
+              > .statu {
+                background-color: #05ce9e;
                 color: #fff;
                 padding: 3px 12px;
                 border-radius: 2px;
                 font-size: 16px;
+                white-space: nowrap;
               }
             }
           }
-          >ul {
+          > ul {
             display: flex;
             align-items: center;
-            >li {
+            > li {
               cursor: pointer;
               padding: 5px 10px;
               border-radius: 2px;
               font-size: 16px;
               // color: #2E77E6;
               color: #fff;
-              background-color: #E3EEFF;
+              background-color: #e3eeff;
               margin-left: 10px;
-              background: #2E77E6;
+              background: #2e77e6;
               border-radius: 4px 4px 4px 4px;
             }
           }
@@ -55,16 +56,16 @@
           display: flex;
           align-items: center;
           justify-content: space-between;
-          >ul {
+          > ul {
             display: flex;
-            >li {
+            > li {
               padding: 10px 15px;
               cursor: pointer;
               display: flex;
               align-items: center;
               font-size: 16px;
               font-weight: bold;
-              >i {
+              > i {
                 display: inline-block;
                 margin-right: 5px;
                 width: 20px;
@@ -73,85 +74,85 @@
                 background-repeat: no-repeat;
               }
               &:nth-child(1) {
-                >i {
+                > i {
                   background-image: url('../../../../assets/imgs/OA/xmxx_icon.png');
                 }
               }
               &:nth-child(2) {
-                >i {
+                > i {
                   background-image: url('../../../../assets/imgs/OA/xmht_icon.png');
                 }
               }
               &:nth-child(3) {
-                >i {
+                > i {
                   background-image: url('../../../../assets/imgs/OA/xmcb_icon.png');
                 }
               }
               &:nth-child(4) {
-                >i {
+                > i {
                   background-image: url('../../../../assets/imgs/OA/fjcl_icon.png');
                 }
               }
               &.active,
               &:hover {
-                background-color: #2E77E6;
-                color: #FFF;
+                background-color: #2e77e6;
+                color: #fff;
                 &:nth-child(1) {
-                  >i {
+                  > i {
                     background-image: url('../../../../assets/imgs/OA/xmxx_active_icon.png');
                   }
                 }
                 &:nth-child(2) {
-                  >i {
+                  > i {
                     background-image: url('../../../../assets/imgs/OA/xmht_active_icon.png');
                   }
                 }
                 &:nth-child(3) {
-                  >i {
+                  > i {
                     background-image: url('../../../../assets/imgs/OA/xmcb_active_icon.png');
                   }
                 }
                 &:nth-child(4) {
-                  >i {
+                  > i {
                     background-image: url('../../../../assets/imgs/OA/fjcl_active_icon.png');
                   }
                 }
               }
             }
           }
-          >div {
+          > div {
             display: flex;
             align-items: center;
-            >p {
+            > p {
               margin-right: 40px;
               &:nth-child(1) {
-                >.title {
+                > .title {
                   &::before {
-                    background-color: #2E77E6;
+                    background-color: #2e77e6;
                   }
                 }
               }
               &:nth-child(2) {
-                >.title {
+                > .title {
                   &::before {
-                    background-color: #F9A527;
+                    background-color: #f9a527;
                   }
                 }
               }
               &:nth-child(3) {
                 margin-right: 0px;
-                >.title {
+                > .title {
                   &::before {
-                    background-color: #F83535;
+                    background-color: #f83535;
                   }
                 }
               }
-              >span {
+              > span {
                 vertical-align: middle;
                 &.title {
-                  color: #626B70;
+                  color: #626b70;
                   &::before {
-                    content: "";
+                    content: '';
                     display: inline-block;
                     width: 8px;
                     height: 8px;
@@ -176,4 +177,4 @@
       flex: 1;
     }
   }
-}
+}