样式修改

client/src/views/OaSystem/home/components/CardItemOne.vue

@@ -49,13 +49,14 @@ const toLookDetail = (row: any): void => {
       display: flex;
       flex-direction: column;
       padding-bottom: 20px;
+      padding: 0px 10px;
       cursor: pointer;
       &:first-child {
         margin-right: var(--margin-r);
       }
       > .imgBox {
         width: 100%;
-        height: 200px;
+        height: 190px;
         overflow: hidden;
         > img {
           width: 100%;
@@ -67,7 +68,7 @@ const toLookDetail = (row: any): void => {
       }
       > .title {
         margin-top: 5px;
-        font-size: 16px;
+        font-size: 17px;
         font-weight: bold;
         height: 25px;
         text-overflow: ellipsis;
@@ -77,17 +78,20 @@ const toLookDetail = (row: any): void => {
         -webkit-line-clamp: 1;
       }
       > .time {
-        font-size: 14px;
+        font-size: 16px;
+        margin-top: 3px;
         color: #8b969c;
         display: flex;
         > .el-icon {
           margin-top: 2px;
           margin-right: 3px;
+          padding-top: 2px;
         }
       }
       > .desc {
         font-size: 14px;
         color: #626b70;
+        margin-top: 8px;
         height: 42px;
         text-overflow: ellipsis;
         overflow: hidden;

client/src/views/OaSystem/home/components/CardItemThree.vue

@@ -59,16 +59,10 @@ const clickHandle = (item: SignInterface, index: number): void => {
       padding: 10px 20px;
       border-radius: 8px;
       border: 2px solid transparent;
-      cursor: pointer;
       &:nth-child(2n + 1) {
         margin-right: 15px;
       }
       display: flex;
-      &.active,
-      &:hover {
-        border-color: #498bef;
-        background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
-      }
       > .circle {
         display: block;
         width: 66px;
@@ -81,6 +75,28 @@ const clickHandle = (item: SignInterface, index: number): void => {
         text-align: center;
         margin-right: 5px;
       }
+      &:nth-child(1),
+      &:nth-child(2) {
+        cursor: pointer;
+        &.active,
+        &:hover {
+          border-color: #498bef;
+          background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
+        }
+      }
+      &:nth-child(3),
+      &:nth-child(4) {
+        > .circle {
+          background-color: #05ce9e;
+        }
+        &.active,
+        &:hover {
+          cursor: pointer;
+          border-color: #05ce9e;
+          background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
+        }
+      }
+
       &:nth-child(5),
       &:nth-child(6) {
         > .circle {

client/src/views/OaSystem/home/header.scss

@@ -1,15 +1,15 @@
 
 .header {
   height: 56px;
-  padding: 0px 15px;
+  padding: 0px 25px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   .arrowRight {
     display: inline-block;
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     vertical-align: middle;
   }
   > ul {

client/src/views/OaSystem/home/indexOne.vue

@@ -28,8 +28,20 @@
           <CardItemThree @click="clickHandle" />
         </div>
         <div>
-          <div class="header">
-            <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
+          <div class="header" style="position: relative">
+            <span
+              class="title"
+              style="
+                font-size: 20px;
+                height: auto;
+                margin-top: 20px;
+                left: 40px;
+                position: absolute;
+                top: 20px;
+              "
+            >
+              近五年签约历史趋势
+            </span>
           </div>
           <div class="content"> <CardItemFour /></div>
         </div>

client/src/views/OaSystem/home/indexTwo.vue

@@ -28,8 +28,20 @@
           <CardItemThree />
         </div>
         <div>
-          <div class="header">
-            <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
+          <div class="header" style="position: relative">
+            <span
+              class="title"
+              style="
+                font-size: 20px;
+                height: auto;
+                margin-top: 20px;
+                left: 40px;
+                position: absolute;
+                top: 20px;
+              "
+            >
+              近五年签约历史趋势
+            </span>
           </div>
           <div class="content"> <CardItemFour /></div>
         </div>

client/src/views/OaSystem/newsCenter/newsLook/index.vue

@@ -84,7 +84,7 @@ const toLookDetail = (row: any): void => {
       border: 1px solid #dee0e3;
       border-radius: 8px;
       &:hover {
-        background-color: #e0e4eb;
+        background-color: #f2f4f8;
         position: relative;
         &::after {
           content: '';
@@ -129,6 +129,7 @@ const toLookDetail = (row: any): void => {
       > .desc {
         font-size: 14px;
         color: #626b70;
+        margin-top: 2px;
         height: 42px;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -138,8 +139,9 @@ const toLookDetail = (row: any): void => {
         -webkit-line-clamp: 2;
       }
       > .time {
-        font-size: 14px;
+        font-size: 16px;
         color: #8b969c;
+        margin-top: 3px;
         display: flex;
         > .el-icon {
           margin-top: 2px;

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

@@ -86,4 +86,8 @@
       text-align: right;
     }
   }
+  :deep(.el-radio__label),
+  :deep(.el-checkbox__label){
+      font-size: 16px;
+  }
 }

client/src/views/OaSystem/projectCenter/projectDetail/components/xmxx/index.scss

@@ -63,7 +63,6 @@
         }
       }
       >.xmxxBox {
-        display: none;
         >.tableBox {
           >h4 {
             padding: 10px 0px;
@@ -182,7 +181,6 @@
       }
       >.xmjdBox {
         margin-top: 20px;
-        display: none;
       }
     }
   }

client/src/views/OaSystem/projectCenter/projectDetail/components/xmxx/index.vue

@@ -5,18 +5,18 @@
         <li class="active">主项目</li>
       </ul>
       <ul>
-        <li>项目信息</li>
-        <li>项目成员</li>
-        <li>项目阶段</li>
+        <li @click="switchHandle(0)">项目信息</li>
+        <li @click="switchHandle(1)">项目成员</li>
+        <li @click="switchHandle(2)">项目阶段</li>
       </ul>
     </div>
     <div class="content">
-      <div class="xmxxBox">
+      <div class="xmxxBox" v-if="currentIndex === 0">
         <div class="tableBox">
           <h4><i class="icon"></i>基本信息</h4>
           <table>
             <tr>
-              <td class="th">责任部门：</td>
+              <td class="th">归属公司：</td>
               <td>自然资源部</td>
               <td class="th">立项时间：</td>
               <td>自然资源部</td>
@@ -36,8 +36,8 @@
             <tr>
               <td class="th">预估工期（天）：</td>
               <td>自然资源部</td>
-              <td class="th">归属公司：</td>
-              <td>自然资源部</td>
+              <td class="th"></td>
+              <td></td>
             </tr>
           </table>
         </div>
@@ -70,7 +70,7 @@
           </table>
         </div>
       </div>
-      <div class="xmcyBox">
+      <div class="xmcyBox" v-else-if="currentIndex === 1">
         <ul>
           <li v-for="(item, index) in 6" :key="index">
             <div class="imgBox">
@@ -92,7 +92,7 @@
           <li class="operation"> <i class="icon"></i>项目成员 </li>
         </ul>
       </div>
-      <div class="xmjdBox">
+      <div class="xmjdBox" v-else>
         <div class="tableBox">
           <el-table :data="tableData" style="width: 100%">
             <el-table-column type="index" label="序号" width="100" />
@@ -113,6 +113,10 @@
 import { onMounted } from 'vue'
 defineOptions({ name: 'XmxxComp' })
 const tableData = ref()
+const currentIndex = ref<number>(0)
+const switchHandle: (i: number) => void = (i: number) => {
+  currentIndex.value = i
+}
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>

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

@@ -37,6 +37,7 @@
             display: flex;
             align-items: center;
             >li {
+              cursor: pointer;
               padding: 3px 15px;
               border-radius: 2px;
               font-size: 18px;
@@ -209,4 +210,173 @@
       padding-bottom: 20px;
     }
   }
+  .subProjectModalBox {
+    position: fixed;
+    top: 200px;
+    right: 0px;
+    bottom: 15px;
+    width: 45vw;
+    border-radius: 10px;
+    background: #FFFFFF;
+    box-shadow: -8px 0px 23px 0px rgba(203,212,221,0.37);
+    opacity: 1;
+    padding-left: 0px;
+    padding-right: 0px;
+    >ul {
+      border-bottom: 1px solid #DEE0E3;
+      padding: 0px 10px;
+      >li {
+        display: inline-block;
+        font-size: 18px;
+        margin: 0px 20px;
+        padding: 15px 0px;
+        border-bottom: 2px solid transparent;
+        cursor: pointer;
+        &.active,
+        &:hover {
+          font-weight: bold;
+          color: #2E77E6;
+          border-bottom-color: #2E77E6;
+        }
+      }
+    }
+    >.tabContent {
+      overflow-y: auto;
+      height: calc(100% - 60px);
+      >div {
+        padding: 20px 30px;
+      }
+      >.tabContentOne {
+        padding-top: 0px;
+        h4 {
+          color: #2D333C;
+          margin: 35px 0px 5px 0px;
+        }
+      }
+      >.tabContentTwo {
+        >ul {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 10px;
+          > li {
+            border: 1px solid #DEE0E3;
+            padding: 10px;
+            &:not(.operation) {
+              position: relative;
+              >.del_icon {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                display: inline-block;
+                display: none;
+              }
+              &:hover {
+                background-color: #F2F7FF;
+                cursor: pointer;
+                >.del_icon {
+                  display: block;
+                }
+              }
+              >div {
+                display: inline-block;
+                vertical-align: top;
+              }
+              >.imgBox {
+                border: 1px solid #f00;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                position: relative;
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+                margin-right: 8px;
+                >.icon {
+                  position: absolute;
+                  width: 15px;
+                  height: 15px;
+                  right: -1px;
+                  top: -1px;
+                  border-radius: 50%;
+                  background: url("../../../../../../assets/imgs/OA/sex_icon1.png") no-repeat;
+                  background-size: 100% 100%;
+                }
+
+              }
+              >.userInfo {
+                >.titleBox {
+                  display: flex;
+                  align-items: center;
+                  >h4 {
+                    color: #2D333C;
+                    font-size: 24px;
+                  }
+                  >.tag {
+                    margin-left: 5px;
+                    display: inline-block;
+                    padding: 0px 10px;
+                    border-radius: 20px;
+                    color: #2E77E6;
+                    border: 1px solid #2E77E6;
+                    font-size: 14px;
+                  }
+                }
+                >.dept {
+                  color: #2D333C;
+                  font-size: 18px;
+                  margin-top: 15px;
+                  padding-bottom: 5px;
+                }
+                >.txt {
+                  font-size: 14px;
+                  color: #69717C;
+                  padding: 2px 0px;
+                }
+              }
+            }
+            &.operation {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 166px;
+              cursor: pointer;
+              >i {
+                width: 20px;
+                height: 20px;
+                background: url("../../../../assets/imgs/OA/add_xmcy_icon.png") no-repeat;
+                background-size: 100% 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .subProjectModalBox {
+    >.close_icon {
+      display: block;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      width: 20px;
+      height: 20px;
+      background: url("../../../../assets/imgs/OA/layout/close.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    >.tabContent {
+      :deep(.el-form-item) {
+        flex-direction: column;
+      }
+      :deep(.el-form-item__label) {
+        justify-content: flex-start;
+        color: #505A69;
+        font-size: 16px;
+      }
+      :deep(.el-form-item--default){
+        margin-bottom: 5px;
+      }
+    }
+  }
 }

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

@@ -10,7 +10,7 @@
         <ul>
           <li>编辑</li>
           <li>合同签订</li>
-          <li>添加子项目</li>
+          <li @click="addSubProject">添加子项目</li>
           <li>验收</li>
           <li>结项</li>
           <li>查看流程</li>
@@ -62,6 +62,100 @@
     <div class="detailContent">
       <component :is="currentComponent" />
     </div>
+    <div class="subProjectModalBox" v-show="subProjectShow">
+      <ul class="tab">
+        <li @click="switchTabHandle(0)" :class="[tabIndex === 0 ? 'active' : '']">项目信息</li>
+        <li @click="switchTabHandle(1)" :class="[tabIndex === 1 ? 'active' : '']">项目成员</li>
+      </ul>
+      <span class="close_icon" @click="subProjectShow = false"></span>
+      <div class="tabContent">
+        <div class="tabContentOne" v-if="tabIndex === 0">
+          <div class="formBox">
+            <el-form :model="projectForm" label-width="120px">
+              <h4>基本信息</h4>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="项目名称">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="项目经理">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="责任部门">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="项目编号">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="预估工期（天）">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <h4>产值信息</h4>
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="总合同额（元）">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="本项目产值（元）">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="利益分成（公司/部门）">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="本项目成本（元）">
+                    <el-input v-model="projectForm.xmmc" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <div class="tabContentTwo" v-else>
+          <ul>
+            <li v-for="(item, index) in 6" :key="index">
+              <div class="imgBox">
+                <img src="" />
+                <i class="icon"></i>
+              </div>
+              <div class="userInfo">
+                <div class="titleBox">
+                  <h4>泮道炬</h4>
+                  <span class="tag">项目经理</span>
+                </div>
+                <p class="dept">自然资源产品部</p>
+                <p class="txt">毕业院校：浙江水利水电职业技术学院</p>
+                <p class="txt">学历：大专</p>
+                <p class="txt">电话：15932242593</p>
+              </div>
+              <i class="del_icon"><Icon icon="ep:delete" /></i>
+            </li>
+            <li class="operation"> <i class="icon"></i>项目成员 </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -86,6 +180,17 @@ const switchComponent: (c: Component, i: number) => void = (c: Component, i: num
   currentComponent.value = c
   currentIndex.value = i
 }
+const subProjectShow = ref<boolean>(false)
+const addSubProject: () => void = () => {
+  subProjectShow.value = true
+}
+const projectForm = ref({
+  xmmc: ''
+})
+const tabIndex = ref<number>(0)
+const switchTabHandle: (i: number) => void = (i: number) => {
+  tabIndex.value = i
+}
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>