更新样式

src/views/qa/DetailTestDescription.vue

 <template>
   <div>
-    <el-card>
-      <div style="font-size:18px;color:303133">提测说明详情</div>
-
-      <el-button type="primary" size="medium" icon="el-icon-edit" style="margin-left:1250px;font-size:15px;"
-        @click="editDetail">编辑</el-button>
+    <div class="header">
+      <span>【{{this.projectName}}】提测说明</span>
+      <el-button type="primary" size="medium" icon="el-icon-edit" @click="editDetail">编辑</el-button>
+    </div>
     <!-- 详情页面展示 -->
     <div v-show='isShowDetail' class="divStyle">
-        <el-form label-width="90px">
-          <el-form-item label="Jira项目:" style="width:300px">
-            <el-input v-model="jiraProjectName" :disabled="true"></el-input>
+      <el-form label-position="right">
+        <el-form-item label="项目名称:">
+          <span>{{projectName}}</span>
         </el-form-item>
-          <el-form-item label="项目名称:" style="width:300px">
-            <el-input v-model="projectName" :disabled="true"></el-input>
+        <el-form-item label="所属项目:">
+          <span>{{jiraProjectName}}</span>
         </el-form-item>
-          <el-form-item label="服务及分支:">
-            <el-table :data="serviceAndBranch" border style="width:95%">
+        <el-form-item label="服务与分支:">
+          <el-table :data="serviceAndBranch" border style="width:80%">
             <el-table-column label="服务名称" prop="serviceName" width="200px"></el-table-column>
             <el-table-column label="服务分支" prop="branch"></el-table-column>
             <el-table-column label="开发负责人" prop="developer" width="120px"></el-table-column>
           </el-table>
         </el-form-item>
         <el-form-item label="apollo变更:">
-            <el-table :data="apollo" border style="width:95%">
+          <el-table :data="apollo" border style="width:80%">
             <el-table-column label="项目名称" prop="projectName"></el-table-column>
             <el-table-column label="apollo Key" prop="key"></el-table-column>
             <el-table-column label="apollo value" prop="value">
             </el-table-column>
           </el-table>
         </el-form-item>
-          <el-form-item label="数据库变更:" style="width:95%">
-            <el-table :data="database" border>
+        <el-form-item label="数据库变更:">
+          <el-table :data="database" style="width:80%" border>
             <el-table-column label="数据库名称" prop="db" width="200"></el-table-column>
             <el-table-column label="sql">
               <template slot-scope="scope">
@@ -41,14 +40,14 @@
             </el-table-column>
           </el-table>
         </el-form-item>
-          <el-form-item label="需求地址:">
+        <el-form-item label="需求地址:" style="width:80%">
           <a :href="requirement">{{requirement}}</a>
         </el-form-item>
-          <el-form-item label="接口地址:">
+        <el-form-item label="接口地址:" style="width:80%">
           <a :href="api">{{api}}</a>
         </el-form-item>
         <el-form-item label="备注:">
-            <el-input type="textarea" v-model="scope" style="width:95%" autosize :disabled="true"></el-input>
+          <el-input type="textarea" v-model="scope" style="width:83%" autosize :disabled="true"></el-input>
         </el-form-item>
       </el-form>
     </div>
@@ -70,7 +69,7 @@
           <el-table :data="serviceAndBranchList" border class="table-style" style="width:95%">
             <el-table-column label="服务名称" width="250">
               <template slot-scope="scope">
-                  <el-select v-model="scope.row.serviceName" filterable placeholder="请选择服务"
+                <el-select v-model="scope.row.serviceName" filterable allow-create placeholder="请选择服务"
                   @change="selectServiceModel(scope.row.serviceName)" clearable style="width:220px">
                   <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
                   </el-option>
@@ -79,7 +78,7 @@
             </el-table-column>
             <el-table-column label="分支名称">
               <template slot-scope="scope">
-                  <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" clearable
+                <el-select v-model="scope.row.branch" filterable allow-create placeholder="请选择分支" clearable
                   @focus="focusevent(scope.row.serviceName)" style="width:650px">
                   <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name"
                     :value="item2.name"></el-option>
@@ -168,16 +167,13 @@
         <el-form-item label="备注:" class="input-style" style="width:95%">
           <el-input v-model="addTestDescriptionForm.scope" type="textarea" autosize></el-input>
         </el-form-item>
-          <el-form-item>
-            <div style="margin-left:1000px">
-              <el-button @click="cancelBtn">取 消</el-button>
-              <el-button type="primary" @click="saveTestDescription">确 定</el-button>
-            </div>
-          </el-form-item>
       </el-form>
+      <div class="footer" v-show="!isShowDetail">
+        <el-button type="primary" size="small" @click="cancelBtn">取 消</el-button>
+        <el-button type="primary" size="small" @click="saveTestDescription">确 定</el-button>
+      </div>
     </div>
 
-    </el-card>
   </div>
 </template>
 <script>
@@ -436,16 +432,29 @@ export default {
   }
 }
 </script>
-<style lang="sss" scoped>
-.col-style {
-  margin-top: 20px;
-  margin-left: 40px;
-}
-.col2-style {
-  margin-top: 20px;
-  margin-left: -55px;
+<style lang="less" scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > .el-button {
+    margin-right: 80px;
+  }
 }
 .divStyle {
-  margin-left: 20px;
+  margin: 20px 0 0 30px;
+}
+.footer {
+  display: flex;
+  position: fixed;
+  bottom: 0px;
+  // width: 80%;
+  // justify-content: flex-end;
+  right: 90px;
+  padding-right: 90px;
+  // background-color: rgb(111, 8, 8);
+  // background-color: #f1f3f4;
+  // left: 0;
+  box-sizing: border-box;
 }
 </style>

src/views/qa/TestDescription.vue

 <template>
+  <div style="margin-left:10px">
     <div>
-    <el-card>
-      <div>
-        JIRA项目:
-        <el-select v-model="queryModuleInfo.jiraProjectKey" placeholder="请选择JIRA项目" filterable clearable>
+      所属项目:
+      <el-select v-model="queryModuleInfo.jiraProjectKey" placeholder="请选择所属项目" filterable clearable>
         <el-option v-for="item in jiraProjectList" :key="item.key" :label="item.name" :value="item.key"></el-option>
       </el-select>
       项目名称:
@@ -13,22 +12,22 @@
       <el-button type="primary" icon="el-icon-circle-plus" @click="addTestDesc"
         v-permission="('qa:testDescription:add')">新增</el-button>
     </div>
-      <el-table :data="testDescriptionList" border style="width: 100%;margin-top:20px">
-        <el-table-column type='index' width="40px">
+    <el-table :data="testDescriptionList" border style="width: 100%;margin-top:20px" cell-style="height:10px">
+      <el-table-column type='index' width="40px" label="#">
         <template slot-scope="scope">
           <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
         </template>
       </el-table-column>
-        <el-table-column prop="projectName" label="项目名" width="150px"></el-table-column>
-        <el-table-column label="服务->分支->负责人">
+      <el-table-column prop="projectName" label="项目名称" width="300px"></el-table-column>
+      <el-table-column label="服务->分支">
         <template slot-scope="scope">
           <div v-for="item in JSON.parse(scope.row.serviceAndBranch)" :key="item.serviceName">
             <b>{{ item.serviceName }}</b> ->
-              {{ item.branch }}<b> ->{{ item.developer }}</b>
+            {{ item.branch }}<b></b>
           </div>
         </template>
       </el-table-column>
-        <el-table-column label="apollo变更" width="200px">
+      <!-- <el-table-column label="apollo变更" width="200px">
           <template slot-scope="scope">
             <div v-for="item in JSON.parse(scope.row.apollo)" :key="item.projectName">
               <div v-if="item.value.length<=200">
@@ -44,8 +43,8 @@
 
             </div>
           </template>
-        </el-table-column>
-        <el-table-column label="数据库变更" width="150px">
+        </el-table-column> -->
+      <!-- <el-table-column label="数据库变更" width="150px">
           <template slot-scope="scope">
             <div v-for="item in JSON.parse(scope.row.database)" :key="item.db">
               <el-popover placement="top-start" title="sql" width="250" trigger="hover" :content="item.sql">
@@ -53,15 +52,16 @@
               </el-popover>
             </div>
           </template>
-        </el-table-column>
-        <el-table-column prop="jiraProjectName" label="Jira项目" width="95px"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="165px"></el-table-column>
+        </el-table-column> -->
+      <el-table-column prop="jiraProjectName" label="所属项目" width="300px"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
       <el-table-column label="操作" width="300px">
         <slot slot-scope="scope">
-            <el-button type="primary" icon="el-icon-view" @click="openPreviewDialog(scope.row)">预览</el-button>
-            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
+          <el-button type="primary" icon="el-icon-view" size="small" @click="openPreviewDialog(scope.row)">预览
+          </el-button>
+          <el-button type="warning" icon="el-icon-edit" size="small" @click="openEditDialog(scope.row)"
             v-permission="('qa:testDescription:edit')" style="margin-left:1px">编辑</el-button>
-            <el-button type="danger" icon="el-icon-delete" @click="delTestDescription(scope.row)"
+          <el-button type="danger" icon="el-icon-delete" size="small" @click="delTestDescription(scope.row)"
             v-permission="('qa:testDescription:del')" style="margin-left:1px">删除</el-button>
         </slot>
       </el-table-column>
@@ -71,7 +71,6 @@
       :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
       layout="total, prev, pager, next" :total="totalNum">
     </el-pagination>
-    </el-card>
     <!-- 新增页面 -->
     <el-dialog title="新增提测文档" :visible.sync="DialogAddVisible" width="70%" @close="closeAddDialog">
       <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="88px"
@@ -90,7 +89,7 @@
           <el-table :data="serviceAndBranchList" border class="table-style">
             <el-table-column label="服务" width="310">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.serviceName" filterable placeholder="请选择服务"
+                <el-select v-model="scope.row.serviceName" filterable allow-create placeholder="请选择服务"
                   @change="selectServiceModel(scope.row.serviceName)" clearable style="width:280px">
                   <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
                   </el-option>
@@ -99,7 +98,7 @@
             </el-table-column>
             <el-table-column label="分支">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" clearable
+                <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" allow-create clearable
                   @focus="focusevent(scope.row.serviceName)" style="width:400px">
                   <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name"
                     :value="item2.name"></el-option>