项目统计页面修改

src/styles/static/project.scss

@@ -5,23 +5,30 @@
     height: calc(100vh - 320px);
     overflow-y: auto;
 }
+.card-box {
+    height: calc(100vh - 350px) !important;
+    overflow-y: auto;
+}
 .hc-card-item-sub {
     position: relative;
     padding: 20px;
+    // border: 1px solid red;
+    height: 200px;
     .item-sub-title {
-        font-size: 15px;
+        font-size: 35px;
+        // white-space:nowrap;
     }
     .item-sub-num {
         position: relative;
-        margin-top: 15px;
-        text-align: right;
+        margin-top: 30px;
+        text-align: left;
         .num {
-            font-size: 38px;
+            font-size: 60px;
             font-weight: bold;
         }
         .text {
             margin-left: 3px;
-            font-size: 15px;
+            font-size: 35px;
             color: inherit;
         }
     }
@@ -43,5 +50,29 @@
         margin-top: 8px;
     }
 }
+.project_table{
+    height: 100%;
+}
+.project_table_title {
+    // margin-top: 15px;
+    font-size: 18px;
+    font-weight:bold ;
+    color: rgb(64, 149, 229);
+    margin-bottom: 15px;
+   
+}
 
+.goback_icon {
+    font-size: 24px;
+    cursor: pointer;
+    font-weight: bolder;
+    color: var(--el-color-primary);
+}
 
+.hc-expense-total-title {
+    color: #101010;
+    font-size: 20px;
+}
+ 
+/* 设置表头的高度 */
+ 

src/views/static/project.vue

@@ -3,7 +3,7 @@
         <div class="hc-main-row">
             <el-row :gutter="14">
                 <el-col :span="6">
-                    <HcGradientCard color="purple1">
+                    <HcGradientCard color="purple1" >
                         <div class="hc-card-item-sub">
                             <div class="item-sub-title">截至目前总合同额</div>
                             <div class="item-sub-num">
@@ -47,92 +47,106 @@
                     </HcGradientCard>
                 </el-col>
             </el-row>
-    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6">
-                <template #tab-image>
-                    <div class="bg-white p-2" style="height: 100%;">
-                        <el-table :data="tableData" border style="width: 100%; "
-                                  v-if="!isProject"
-                                  :span-method="spanMethod"
-                                  :cell-style="columnStyle"
-                                  :header-cell-style="tableHeaderColor"
+
+            <HcCard class="mt-8 card-box" >
+                <template #header>
+                    <div class="hc-expense-total-title"> 列表统计</div>
+                   
+                </template>
+                <div class="bg-white p-2" style="height: 100%;">
+                    <el-table :data="tableData" border style="width: 100%;  "
+                                v-if="!isProject"
+                                :span-method="spanMethod"
+                                :cell-style="columnStyle"
+                                :header-cell-style="tableHeaderColor"
+                              
+                    >
+                        <el-table-column prop="name" label="项目名称">
+                            <template #default="scope">
+                                <div @click='rowNameClick(scope.row)'>
+                                    <span class="text-blue text-hover" @click="rowNameClick(scope.row)"> {{ scope.row.name }}</span>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="contract" label="合同额" align="center"/>
+                        <el-table-column prop="cost" label="测算成本" align="center"/>
+                        <el-table-column prop="disbursed" label="实际已支出成本" align="center"/>
+                        <el-table-column prop="receive" label="实际已回款" align="center"/>
+                        <el-table-column prop="uncollected" label="未回款" align="center"/>
+                        
+                    </el-table>
+
+                    <div class="project_table" v-else>
+                        <div class="project_table_title">
+                            <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel" v-if="isShowDetailtable===1"/> 
+                            <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail" v-if="isShowDetailtable===2"/>
+                            <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice" v-if="isShowDetailtable===3"/>
+                            <span  v-if="isShowDetailtable===1">XXX项目</span>
+                            <span v-if="isShowDetailtable===3">XXX项目>研发部</span>
+                            <span v-if="isShowDetailtable===2">XXX项目>研发部>产品-研发</span>
+                        </div>
+                        <el-table :data="protableData" border style="width: 100%; "   v-if="isShowDetailtable===3" 
+                        
+                        :header-cell-style="tableHeaderColor"
                         >
-                            <el-table-column prop="name" label="项目名称">
+                            <el-table-column prop="link" label="项目环节" align="center"/>
+                            <el-table-column prop="type" label="参与" align="center">
                                 <template #default="scope">
-                                    <div @click='rowNameClick(scope.row)'>
-                                        <span class="text-blue text-hover" @click="rowNameClick(scope.row)"> {{ scope.row.name }}</span>
+                                    <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
+                                    <HcIcon name="error-warning" class="text-red " v-else/>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="cost" label="成本支出（元）" align="center"/>
+                            <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
+                            <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
+                            <el-table-column prop="detail" label="明细">
+                                <template #default="scope">
+                                    <div @click='rowDetail(scope.row)'>
+                                        <span class="text-blue text-hover">查看明细</span>
                                     </div>
                                 </template>
                             </el-table-column>
-                            <el-table-column prop="contract" label="合同额" align="center"/>
-                            <el-table-column prop="cost" label="测算成本" align="center"/>
-                            <el-table-column prop="disbursed" label="实际已支出成本" align="center"/>
-                            <el-table-column prop="receive" label="实际已回款" align="center"/>
-                            <el-table-column prop="uncollected" label="未回款" align="center"/>
-                           
                         </el-table>
-
-                        <div class="project_table" v-else>
-                            <div class="project_table_title">
-                                <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel" v-if="isShowDetailtable===1"/> 
-                                <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail" v-if="isShowDetailtable===2"/>
-                                <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice" v-if="isShowDetailtable===3"/>
-                                <span  v-if="isShowDetailtable===1">XXX项目</span>
-                                <span v-if="isShowDetailtable===3">XXX项目>研发部</span>
-                                <span v-if="isShowDetailtable===2">XXX项目>研发部>产品-研发</span>
-                            </div>
-                            <el-table :data="protableData" border style="width: 100%; "   v-if="isShowDetailtable===3">
-                                <el-table-column prop="link" label="项目环节" align="center"/>
-                                <el-table-column prop="type" label="参与" align="center">
-                                    <template #default="scope">
-                                        <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
-                                        <HcIcon name="error-warning" class="text-red " v-else/>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="cost" label="成本支出（元）" align="center"/>
-                                <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
-                                <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
-                                <el-table-column prop="detail" label="明细">
-                                    <template #default="scope">
-                                        <div @click='rowDetail(scope.row)'>
-                                            <span class="text-blue text-hover">查看明细</span>
-                                        </div>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                            <el-table :data="priceData" border style="width: 100%;"
-                                        v-if="isShowDetailtable===1"
-                                      :span-method="pricespanMethod"
-                                      :cell-style="pricecolumnStyle"
-                                      :header-cell-style="pricetableHeaderColor"
-                            >
-                                <el-table-column prop="pricetype" label="费用分类"/>
-                                <el-table-column prop="price" label="测算费用（元）" align="center"/>
-                                <el-table-column prop="cost" label="实际费用（元）" align="center"/>
-                                <el-table-column prop="detail" label="费用明细" align="center">
-                                    <template #default="scope">
-                                        <div @click='rowpriceDetail(scope.row)'>
-                                            <span class="text-blue text-hover">查看明细</span>
-                                        </div>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="total" label="总计" align="center"/>
-                            </el-table>
-                            <el-table :data="costData" border style="width: 100%"
-                                    v-if="isShowDetailtable===2"
-                                      :span-method="costspanMethod"
-                                      :cell-style="costcolumnStyle"
-                                      :header-cell-style="costtableHeaderColor"
-                            >
-                                <el-table-column prop="costobject" label="费用分类"/>
-                                <el-table-column prop="price" label="费用（元）" align="center"/>
-                                <el-table-column prop="total" label="总计" align="center"/>
-                            </el-table>
-                        </div>
+                        <el-table :data="priceData" border style="width: 100%;"
+                        
+                                    v-if="isShowDetailtable===1"
+                                    :span-method="pricespanMethod"
+                                    :cell-style="pricecolumnStyle"
+                                    :header-cell-style="pricetableHeaderColor"
+                                  
+                        >
+                            <el-table-column prop="pricetype" label="费用分类"/>
+                            <el-table-column prop="price" label="测算费用（元）" align="center"/>
+                            <el-table-column prop="cost" label="实际费用（元）" align="center"/>
+                            <el-table-column prop="detail" label="费用明细" align="center">
+                                <template #default="scope">
+                                    <div @click='rowpriceDetail(scope.row)'>
+                                        <span class="text-blue text-hover">查看明细</span>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="total" label="总计" align="center"/>
+                        </el-table>
+                        <el-table :data="costData" border style="width: 100%"
+                                v-if="isShowDetailtable===2"
+                                    :span-method="costspanMethod"
+                                    :cell-style="costcolumnStyle"
+                                    :header-cell-style="costtableHeaderColor"
+                        >
+                            <el-table-column prop="costobject" label="费用分类"/>
+                            <el-table-column prop="price" label="费用（元）" align="center"/>
+                            <el-table-column prop="total" label="总计" align="center"/>
+                        </el-table>
                     </div>
-                </template>
+                </div>
+            </HcCard>
+           
+        
+
+         
     
           
-            </HcTabsSimple> 
+      
          
       
         </div>
@@ -204,6 +218,9 @@ const tableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
     if (columnIndex === 6) {
         return {background: "rgba(64, 149, 229, 0.44)"};
     }
+    if (columnIndex === 1||columnIndex === 0||columnIndex === 2||columnIndex === 3||columnIndex === 4||columnIndex === 5) {
+        return {fontSize: "18px",color:"black"};
+    }
 }
 
 const protableData = ref([
@@ -308,8 +325,12 @@ const pricecolumnStyle = ({row, column, rowIndex, columnIndex}) => {
 // 更改表头样式
 const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
     if (columnIndex === 4) {
-        return {background: "rgba(64, 149, 229, 0.44)"};
+        return {background: "rgba(64, 149, 229, 0.44)",fontSize: "18px",color:"black"};
     }
+    if (columnIndex === 1||columnIndex === 0||columnIndex === 2||columnIndex === 3) {
+        return {fontSize: "18px",color:"black"};
+    }
+   
 }
 const rowpriceDetail = () => {
     isShowDetailtable.value = 3
@@ -339,7 +360,10 @@ const costcolumnStyle = ({row, column, rowIndex, columnIndex}) => {
 // 更改表头样式
 const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
     if (columnIndex === 2) {
-        return {background: "rgba(64, 149, 229, 0.44)"};
+        return {background: "rgba(64, 149, 229, 0.44)",fontSize: "18px",color:"black",lineHeight:"30px"};
+    }
+    if (columnIndex === 1||columnIndex === 0) {
+        return {fontSize: "18px",color:"black"};
     }
 }
 
@@ -347,19 +371,5 @@ const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
 </script>
 <style lang="scss" scoped>
 @import "~src/styles/static/project.scss";
-.project_table{
-    height: 100%;
-}
-.project_table_title {
-    margin-top: 15px;
-    margin-bottom: 15px;
-   
-}
 
-.goback_icon {
-    font-size: 24px;
-    cursor: pointer;
-    font-weight: bolder;
-    color: var(--el-color-primary);
-}
 </style>