优化版本页面弹窗样式

src/views/projectManage/taskList/versionsCalendar.vue

@@ -2,12 +2,6 @@
   <div style="background-color:#F2F3F6;display:flex;align-items: center;justify-content: center;">
     <el-container>
       <el-header class="bgborder" style=" margin: 1%;display:flex;align-items: center;justify-content: flex-start;">
-        <!-- <el-dropdown @command="handleCommand">
-          <span v-if="typeOpt !== []" class="el-dropdown-link drop_down" style="cursor: pointer;">{{ isCommand === '' ? defaultTypeOpt : clientType }}<i class="el-icon-arrow-down el-icon--right" /></span>
-          <el-dropdown-menu v-if="typeOpt !== []" slot="dropdown" align="center">
-            <el-dropdown-item v-for="item in typeOpt" :key="item.code" :command="{value:item.code,flag:item,flag2:1}">{{ item.msg }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown> -->
         <el-row>
           <el-col :span="20">
             <el-select
@@ -26,19 +20,13 @@
             </el-select>
           </el-col>
         </el-row>
-        <!-- <el-dropdown style="margin-left:2%;" @command="handleCommand">
-          <span v-if="versionOpt !== []" class="el-dropdown-link drop_down" style="cursor: pointer;">{{ isCommand2 === '' ? defaultVerOpt : versionType }}<i class="el-icon-arrow-down el-icon--right" /></span>
-          <el-dropdown-menu v-if="versionOpt !== []" slot="dropdown" align="center">
-            <el-dropdown-item v-for="item in versionOpt" :key="item.id" :command="{value:item.id,flag:item,flag2:2}">{{ item.version }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown> -->
       </el-header>
 
       <el-main class="bgborder" style=" margin: 0 1% 1% 1%;min-height: 120.5vh;padding:0 !important">
         <div style="display:flex;align-items: center;margin:24.094px;justify-content: space-between;">
           <div style="display:flex;align-items: center;">
             <div style="width:4px;height:17px;background:#409EFF;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 style="width:83px;height:25px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">版本日历</div>
           </div>
           <el-button type="primary" style="float:right" size="mini" @click="adds()">版本管理</el-button>
         </div>
@@ -47,82 +35,65 @@
         </full-calendar>
       </el-main>
 
-      <el-dialog :visible.sync="dialogFormVisible" width="1180px" class="bgborderNow" :close-on-click-modal="false">
-        <el-dialog width="35%" :visible.sync="dialogCraeteVisible" append-to-body :close-on-click-modal="false">
-          <div style="display:flex;align-items: center;margin: 0px 0px 34px 29px;">
-            <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-            <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">{{ dialogStatus }}</div>
-          </div>
-          <div style="margin-left:28px">
-            <el-form ref="addVersionForms" :rules="addVersionDataRules" :model="addVersionData">
-              <el-form-item label="版本号" prop="version">
-                <el-input v-model="addVersionData.version" placeholder="请填写" style="margin-left:7px;width:70%;" />
-              </el-form-item>
-            </el-form>
-          </div>
-          <div style="margin-top:10%;margin-left:58%">
-            <el-button type="info" plain size="mini" @click="dialogCraeteVisible=false">取消</el-button>
-            <el-button type="primary" size="mini" @click="addVersion(addVersionData)">确定</el-button>
-          </div>
-          <div style="margin-top:6%" />
+      <el-dialog :visible.sync="dialogFormVisible" title="版本管理" width="1180px" class="bgborderNow public_task" :close-on-click-modal="false">
+        <div class="blueStripe" />
+        <el-dialog width="35%" :title="dialogStatus" :visible.sync="dialogCraeteVisible" class="public_task" append-to-body :close-on-click-modal="false">
+          <div class="blueStripe" />
+          <el-form ref="addVersionForms" :rules="addVersionDataRules" :model="addVersionData" label-width="90px" style="margin: 0 30px;">
+            <el-form-item label="版本号" prop="version">
+              <el-input v-model="addVersionData.version" placeholder="请填写" style="width:90%;" />
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="info" plain @click="dialogCraeteVisible=false">取消</el-button>
+            <el-button type="primary" @click="addVersion(addVersionData)">确定</el-button>
+          </span>
         </el-dialog>
 
-        <el-dialog width="48%" :visible.sync="dialogEventVisible" append-to-body :close-on-click-modal="false" @opened="qiaoqiao()">
-          <div style="display:flex;align-items: center;margin: 0px 0px 34px 29px;">
-            <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-            <div style="width:150px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">{{ dialogStatus }}</div>
-          </div>
-          <div style="margin-left:30px">
-            <el-form ref="addEventForms" :rules="addEventDataRules" :model="addEventData">
-              <el-form-item label="事件名称" prop="name">
-                <el-input v-model="addEventData.name" placeholder="请输入事件名称" style="margin-left:7px;width:70%;" />
-              </el-form-item>
-              <el-form-item label="时间" prop="time">
-                <el-date-picker
-                  v-model="addEventData.time"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  style="width:70%;margin-left:6%"
-                  clearable
-                />
-              </el-form-item>
-            </el-form>
-          </div>
-          <div style="margin-top:10%;margin-left:66%">
-            <el-button type="info" plain size="mini" @click="dialogEventVisible=false">取消</el-button>
-            <el-button type="primary" size="mini" @click="addEvents(addEventData)">确定</el-button>
-          </div>
-          <div style="margin-top:6%" />
+        <el-dialog width="48%" :title="dialogStatus" :visible.sync="dialogEventVisible" class="public_task" append-to-body :close-on-click-modal="false" @opened="qiaoqiao()">
+          <div class="blueStripe" />
+          <el-form ref="addEventForms" :rules="addEventDataRules" :model="addEventData" label-width="120px">
+            <el-form-item label="事件名称" prop="name">
+              <el-input v-model="addEventData.name" placeholder="请输入事件名称" style="width:90%;" />
+            </el-form-item>
+            <el-form-item label="时间" prop="time">
+              <el-date-picker
+                v-model="addEventData.time"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width:90%;"
+                clearable
+              />
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="info" plain @click="dialogEventVisible=false">取消</el-button>
+            <el-button type="primary" @click="addEvents(addEventData)">确定</el-button>
+          </span>
         </el-dialog>
 
-        <el-dialog :visible.sync="dialogDeleteVerVisible" width="35%" style="min-width: 400px;" append-to-body :close-on-click-modal="false">
+        <el-dialog :visible.sync="dialogDeleteVerVisible" title="移除确认" width="35%" class="public_task" style="min-width: 400px;" append-to-body :close-on-click-modal="false">
+          <div class="blueStripe" />
           <div align="center" style="margin-top:2%">
             <b>是否删除当前版本？</b>
           </div>
-          <div style="margin-top:15%;margin-left:50%">
-
-            <el-button type="info" plain size="mini" @click="dialogDeleteVerVisible=false">取消</el-button>
-            <el-button type="primary" size="mini" @click="deleteBizType()">确定</el-button>
-          </div>
-          <div style="margin-top:4%" />
+          <span slot="footer" class="dialog-footer">
+            <el-button type="info" plain @click="dialogDeleteVerVisible=false">取消</el-button>
+            <el-button type="primary" @click="deleteBizType()">确定</el-button>
+          </span>
         </el-dialog>
-        <el-dialog :visible.sync="dialogDeleteEveVisible" width="30%" append-to-body :close-on-click-modal="false">
+        <el-dialog :visible.sync="dialogDeleteEveVisible" title="移除确认" class="public_task" width="30%" append-to-body :close-on-click-modal="false">
           <div align="center" style="margin-top:2%">
             <b>是否删除当前事件？</b>
           </div>
-          <div style="margin-top:15%;margin-left:50%">
+          <span slot="footer" class="dialog-footer">
             <el-button type="info" plain size="mini" @click="dialogDeleteEveVisible=false">取消</el-button>
             <el-button type="primary" size="mini" @click="deleteEventTpye()">确定</el-button>
-          </div>
-          <div style="margin-top:4%" />
+          </span>
         </el-dialog>
         <div style="padding:0 51px" class="force-button">
-          <div style="display:flex;align-items: center;margin-bottom:15px;">
-            <div style="width:4px;height:17px;background:#409EFF;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 style="display:flex;justify-content: space-between;">
             <div style="width:35%">
               <div style="display: flex;justify-content: flex-end;">
@@ -161,24 +132,9 @@
                 </div>
               </div>
               <el-table border :data="tableData1" highlight-current-row style="width: 100%;" :header-cell-style="{ background:'#F0F2F4',color:'#606266'}">
-                <el-table-column
-                  prop="name"
-                  width="80"
-                  label="事件"
-                  align="center"
-                />
-                <el-table-column
-                  prop="time"
-                  label="时间"
-                  align="center"
-                >
-                <!-- <template slot-scope="scope"><span>{{ scope.row.time }}</span></template> -->
-                </el-table-column>
-                <el-table-column
-                  label="操作"
-                  width="100"
-                  align="center"
-                >
+                <el-table-column prop="name" width="80" label="事件" align="center" />
+                <el-table-column prop="time" label="时间" align="center" />
+                <el-table-column label="操作" width="100" align="center">
                   <template slot-scope="row">
                     <el-button type="info" plain size="mini" @click="handelDeleteEvent(row)">删除</el-button>
                   </template>
@@ -186,8 +142,8 @@
               </el-table>
             </div>
           </div>
-          <div style="display: flex;justify-content: flex-end;">
-            <el-button type="info" plain size="mini" @click="getVersionList(),dialogFormVisible=false">关闭</el-button>
+          <div style="display: flex;justify-content: flex-end;margin-top:20px;">
+            <el-button type="info" @click="getVersionList(),dialogFormVisible=false">关闭</el-button>
           </div>
         </div>
       </el-dialog>
@@ -196,6 +152,7 @@
 </template>
 
 <script>
+import '@/styles/PublicStyle/index.scss'
 import { getEvent, getVersionList, showAppClientEnum, listByVersionType, createVersion, listByType, deleteVersion, createEvent, deleteEvent } from '@/api/versionsCalendar'
 import dayjs from 'dayjs'
 export default {
@@ -234,15 +191,12 @@ export default {
       dialogFormVisible: false,
       dialogDeleteVerVisible: false,
       dialogDeleteEveVisible: false,
-      formLabelWidth: '100px',
-
       eventData: [],
       dialogStatus: '',
       versionNum: '',
       versionId: '',
       vid: '',
       events: [],
-      events1: [],
       tableData: [],
       tableData1: [],
       addData: {},
@@ -609,7 +563,6 @@ export default {
   .bgborderNow .el-table .el-table__body tr:hover td { color: #409EFF; background: #EDF6FF;} /*hover时字体, 背景颜色*/
 
   .bgborderNow  .el-table .cell {
-    /* padding: 5px 0; */
     font-size: 14px;
     font-family: MicrosoftYaHei;
   }
@@ -640,13 +593,8 @@ export default {
   .drop_down {
      font-size: 14px;
      color: #333333;
-     /* white-space: nowrap; */
   }
   .events-day {
-    /* cursor: pointer;
-    flex: 1; */
     min-height: 100px !important;
-    /* overflow: hidden;
-    text-overflow: ellipsis; */
 }
 </style>