填报工时页面显示效果修改

src/views/timesheet/timesheet/index.vue

@@ -24,20 +24,23 @@
           </el-row>
         </div>
         <div class="back" >
-
           <div class="cards-container">
             <!--  表单样式  -->
-            <el-card class="card"
-                     shadow="never"
-                     v-loading="loading"
+            <el-row :gutter="20">
+              <el-col :span="12"
                       v-for="(project, index) in personalTimesheetList"
                       :key="index">
+                <el-card class="card"
+                         shadow="never"
+                         v-loading="loading">
                   <template #header>
                     <div class="card-header" >
                       <p>
                         <label class="writedate1">{{ project.projectName }}</label>
                         <lable class="manager">项目经理：{{ project.managerName }}</lable>
                         <lable class="depart">事业部负责人：{{ project.departmentLeaderName }}</lable>
+                      </p>
+                      <p>
                         <label v-if="project.approvalState === 1 " class="state">已通过</label>
                         <label v-if="project.approvalState === 0 " class="state2">被驳回</label>
                         <label v-if="project.approvalState === 2 " class="state">待填报</label>
@@ -81,8 +84,10 @@
                   </div>
                   <template #footer>
                     <div class="foot" >
+                      <div>
                         <label class="foot1">项目总工时：</label>
                         <label class="foot2">{{ project.totalHours }}</label>
+                      </div>
                       <el-button class="button-submit"
                                  type="primary"
                                  plain
@@ -94,6 +99,8 @@
                     </div>
                   </template>
                 </el-card>
+              </el-col>
+            </el-row>
 
             <!--  提交弹出框-->
             <el-dialog class="dia-tip"   v-model="dialogSubmit" title="提示" >
@@ -445,15 +452,19 @@ function handleExport() {
 
 <style scoped>
 .card{
-  min-width: 770px;
+  width: 770px;
   height: 350px;
   background: #F9F9FA;
   border: 1px solid #E1E1E1;
-  margin-left: 28px;
-  margin-right: 43px;
+  margin-left: 10px;
   margin-top: 18px;
 }
 
+.card-header{
+  display: flex;
+  justify-content: space-between;
+}
+
 .writedate1{
   margin-left: 28px;
   margin-top: 22px;
@@ -513,6 +524,11 @@ tbody td {
   font-size: 18px; /* 单元格内容字号设为18px */
 }
 
+.foot{
+  display: flex;
+  justify-content: space-between;
+}
+
 .foot1{
   margin-left: 28px;
   margin-top: auto;
@@ -550,26 +566,21 @@ tbody td {
   background: #F2F6FF;
   box-shadow: 0 2px 4px 0 #00000021;
   border-radius: 2px;
-  margin-left: 490px;
 }
 
 /*审批状态*/
 .state{
-  margin-left: 217px;
   font-family: PingFangSC-Regular;
   font-weight: 400;
   font-size: 18px;
   color: #FF9F0D;
-  letter-spacing: 0;
   line-height: 12px;
 }
 .state2{
-  margin-left: 217px;
   font-family: PingFangSC-Regular;
   font-weight: 400;
   font-size: 18px;
   color: #FF0000;
-  letter-spacing: 0;
   line-height: 12px;
 }
 .note{
@@ -635,10 +646,15 @@ tbody td {
   display: flex;
   flex-wrap: wrap;
   overflow-y: auto;
+  overflow-x: hidden;
   height: 780px;
   width: 100%;
 }
 
+.cards-container::-webkit-scrollbar {
+  display: none;
+}
+
 /*底部*/
 .back{
   display: flex;
@@ -763,7 +779,7 @@ th, td {
 
 .d1-1{
   display: flex;
-  width: 143px;
+  width: 138px;
   height: 70px;
   margin-left: 6px;
   background: #F0F0F0;
@@ -776,7 +792,7 @@ th, td {
   justify-content: center;
   align-items: center;
   margin-left: 6px;
-  width: 143px;
+  width: 138px;
   height: 60px;
   background: #F9F9FA;
   border: 1px solid #DEDEDE;