样式

src/views/projectManage/projectList/projectViewDetails.vue

@@ -3,7 +3,7 @@
     <el-container>
       <el-header
         class="bgborder"
-        style=" margin: 1%;height: 7vh;display: flex; justify-content: space-between; align-items: center;"
+        style=" margin: 1.7%;height: 9vh;display: flex; justify-content: space-between; align-items: center;"
       >
         <span style="display: flex; justify-content: space-between; align-items: center;">
           <el-tooltip effect="dark" :content="form_query.name" placement="bottom">
@@ -44,11 +44,12 @@
         </span>
       </el-header>
       <el-container>
-        <el-aside class="bgborder" style=" margin:0 1%;minWidth: 55%;">
+        <el-aside class="bgborder" style=" margin:0 1.7%;minWidth: 55%;">
           <el-row :gutter="20">
             <el-col :span="20">
-              <div style="margin: 1%; font-weight: 600; white-space: nowrap;">
-                <b style="color: #409EFF;margin: 0 0.5%; font-size: 20px; ">I</b>数据统计
+              <div style="display:flex;align-items: center;margin-bottom:20px;margin: 20px 0 50px 20px;">
+                <div style="width:4px;height:17px;background:rgba(64,158,255,1);border-radius:1px;" />
+                <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">数据统计</div>
               </div>
             </el-col>
           </el-row>
@@ -79,50 +80,59 @@
         </el-aside>
         <el-container>
           <el-main class="bgborder" style="margin: 0 2.1% 0 0;min-height: 50vh;overflow-x: hidden;">
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <div style="margin: 2.5%; font-weight: 600; white-space: nowrap;">
-                  <b style="color: #409EFF;margin: 0 0.5%; font-size: 20px; ">I</b>基础信息
-                </div>
-              </el-col>
-              <el-col :span="12" :push="7">
-                <div style="margin: 3%; font-weight: 600; white-space: nowrap;">
-                  <el-button size="mini" type="primary" @click="project_modifica(form_query)">修改</el-button>
-                </div>
-              </el-col>
-            </el-row>
+            <div style="display:flex;align-items: center;margin-bottom:20px;margin: 20px 0 20px 20px;">
+              <div style="width:4px;height:17px;background:rgba(64,158,255,1);border-radius:1px;" />
+              <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">基础信息</div>
+            </div>
             <el-form
               label-position="left"
               label-width="100px"
-              style="margin: 0 8%"
+              style="margin: 0 4%;font-size: 14px;color: rgb(102, 102, 102);"
               :model="form_query"
             >
-              <el-row :gutter="20">
-                <el-col :span="24" style="word-break: break-all;">
-                  <el-form-item label="项目类型：">{{ form_query.priorityStr }}</el-form-item>
+              <el-row>
+                <el-col :span="6">项目类型:</el-col>
+                <el-col :span="18">
+                  <div>{{ form_query.priorityStr }}</div>
+                  <el-button
+                    style="position: absolute;top: 5px;right: 0"
+                    type="primary"
+                    size="mini"
+                    @click="project_modifica(form_query)"
+                  >修改</el-button>
                 </el-col>
               </el-row>
-              <el-row :gutter="20">
-                <el-col :span="12" style="word-break: break-all;">
-                  <el-form-item label="业务线：">{{ form_query.bizStr }}</el-form-item>
-                </el-col>
-                <el-col :span="12" style="word-break: break-all;">
-                  <el-form-item label="优先级：">{{ form_query.projectTypeStr }}</el-form-item>
-                </el-col>
+              <el-row>
+                <el-col :span="6">业务线:</el-col>
+                <el-col :span="18">{{ form_query.bizStr }}</el-col>
               </el-row>
-              <el-row :gutter="20">
-                <el-col :span="12" style="word-break: break-all;">
-                  <el-form-item label="项目负责人：">{{ form_query.projectOwner }}</el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="产品负责人：">{{ form_query.pmOwner }}</el-form-item>
-                </el-col>
+              <el-row>
+                <el-col :span="6">优先级:</el-col>
+                <el-col :span="18">{{ form_query.projectTypeStr }}</el-col>
               </el-row>
-              <el-row :gutter="20">
-                <el-col :span="12" style="word-break: break-all;">
-                  <el-form-item label="开发负责人：">{{ form_query.rdOwner }}</el-form-item>
+              <el-row>
+                <el-col :span="6">项目负责人:</el-col>
+                <el-col :span="18">{{ form_query.projectOwner }}</el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="6">产品负责人:</el-col>
+                <el-col :span="18">{{ form_query.pmOwner }}</el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="6">开发负责人:</el-col>
+                <el-col :span="18">{{ form_query.rdOwner }}</el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="6">测试负责人:</el-col>
+                <el-col :span="18">{{ form_query.testOwner }}</el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="6">项目描述:</el-col>
+                <el-col :span="18">
+                  <div min-height="80px" style="white-space:pre-line; color: rgb(102, 102, 102);border:1px solid #BFC6DC; border-radius:8px; padding: 0 3%;height: 80px; overflow-y: auto;min-width:100%;">{{ form_query.description }}</div>
                 </el-col>
-                <el-col :span="12" style="word-break: break-all;">
+              </el-row>
+              <!-- <el-row :gutter="20">
                   <el-form-item label="测试负责人：">{{ form_query.testOwner }}</el-form-item>
                 </el-col>
               </el-row>
@@ -132,12 +142,12 @@
                     <pre min-height="80px" style="white-space:pre-line; color: #333B4A;border:1px solid #BFC6DC; border-radius:8px; padding: 0 3%;height: 80px; overflow-y: auto; display: inline-block;min-width:100%;">{{ form_query.description }}</pre>
                   </el-form-item>
                 </el-col>
-              </el-row>
+              </el-row> -->
             </el-form>
           </el-main>
         </el-container>
       </el-container>
-      <el-header class="bgborder" style="margin: 1%;height: auto;overflow-y: hidden;">
+      <el-header class="bgborder" style="margin: 1.7%;height: auto;overflow-y: hidden;">
         <el-tabs tab-position="top">
           <el-tab-pane label="项目总目标" style="position: relative;">
             <div v-show="Addition" class="test">
@@ -217,9 +227,10 @@
         </el-tabs>
       </el-header>
       <el-container>
-        <el-aside class="bgborder" style="margin:0 1% 1% 1%;">
-          <div style="margin: 3%; font-weight: 600; white-space: nowrap;">
-            <b style="color: #409EFF;margin: 0 0.5%; font-size: 20px; ">I</b>任务筛选
+        <el-aside class="bgborder" style="margin:0 1.7% 1.7% 1.7%;">
+          <div style="display:flex;align-items: center;margin-bottom:20px;margin: 20px 0 20px 17px;">
+            <div style="width:4px;height:17px;background:rgba(64,158,255,1);border-radius:1px;" />
+            <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">任务筛选</div>
           </div>
           <div ref="all_tasks" class="aside" style="color: #333B4A;" @click="get_allTask">全部任务</div>
           <div ref="all_tasks_1" class="aside" style="color: #333B4A;" @click="show2 = !show2, AttributionDemand()">
@@ -272,9 +283,10 @@
           </div>
         </el-aside>
         <el-container>
-          <el-main class="bgborder" style=" margin: 0 1.3% 1% 0;min-height: 50vh;">
-            <div style="margin: 1%; font-weight: 600; white-space: nowrap;">
-              <b style="color: #409EFF;margin: 0 0.5%; font-size: 20px; ">I</b>任务列表
+          <el-main class="bgborder" style=" margin: 0 2% 2.3% 0;min-height: 50vh;">
+            <div style="display:flex;align-items: center;margin-bottom:20px;margin: 20px 0 20px 20px;">
+              <div style="width:4px;height:17px;background:rgba(64,158,255,1);border-radius:1px;" />
+              <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">任务列表</div>
             </div>
             <el-table
               :data="all_task"
@@ -1079,6 +1091,10 @@ export default {
   background-color: #FFFFFF !important;
 }
 
+.bgborder .el-row .el-col {
+  margin: 10px 0;
+}
+
 .bgborder {
   background-color: #FFFFFF;
   border-radius: 8px;

src/views/projectManage/requirement/details/index.vue

@@ -200,7 +200,7 @@
       </el-row>
     </el-main>
     <el-main style="margin: 2%;padding: 2% !important;" class="layout_main requirement_details_layout_main">
-      <div style="display:flex;align-items: center;">
+      <div style="display:flex;align-items: center;margin-bottom:20px">
         <div style="width:4px;height:17px;background:rgba(64,158,255,1);border-radius:1px;" />
         <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">评论</div>
       </div>