Jelajahi Sumber

弹窗样式

Hwf 7 bulan lalu
induk
melakukan
ad3cb9da8a

TEMPAT SAMPAH
src/assets/images/common/btn.png


TEMPAT SAMPAH
src/assets/images/common/btnPrimary.png


TEMPAT SAMPAH
src/assets/images/common/dialog-sm.png


TEMPAT SAMPAH
src/assets/images/timeAxis/timeAxis.png


+ 1 - 1
src/assets/styles/element-ui.scss

@@ -217,7 +217,7 @@
         width: 28px;
         height: 48px;
         background: url('@/assets/images/select.png') no-repeat;
-        background-size: 100% 100%;background-size: 100% 100%;
+        background-size: 100% 100%;
       }
       .el-icon {
         display: none;

+ 70 - 0
src/assets/styles/index.scss

@@ -271,3 +271,73 @@ aside {
 ::-webkit-scrollbar-track {
   background-color: transparent !important;
 }
+
+.common-dialog-sm {
+  .el-form-item__label {
+    font-size: 38px;
+    color: #fff;
+  }
+}
+
+.common-dialog-sm {
+  width: 1569px;
+  height: 1262px;
+  background: url('@/assets/images/common/dialog-sm.png') no-repeat;
+  background-size: 100% 100%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+  padding: 170px 45px 0px 45px;
+  font-size: 38px;
+  display: flex;
+  flex-direction: column;
+  .dialog-title {
+    color: transparent;
+    background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    display: inline-block;
+    font-family: 'YouSheBiaoTiHei';
+    font-size: 84px;
+    position: absolute;
+    top: 25px;
+    left: 63px;
+  }
+  .dialog-content {
+    width: 100%;
+    flex: 1;
+  }
+  .dialog-footer {
+    height: 150px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+
+.common-btn-primary {
+  width: 300px;
+  height: 120px;
+  background: url('@/assets/images/common/btnPrimary.png') no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 38px;
+}
+.common-btn {
+  width: 140px;
+  height: 56px;
+  background: url('@/assets/images/common/btn.png') no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 38px;
+}

+ 0 - 1
src/components/HeaderSection/index.vue

@@ -127,7 +127,6 @@ const clickMenu = (item) => {
     transform: translateX(-50%);
     background: url('@/assets/images/header/header.png') no-repeat;
     background-size: 100% 100%;
-    background-size: cover;
     width: 6814px;
     height: 444px;
     display: flex;

+ 1 - 1
src/components/TimeAxis/index.vue

@@ -287,7 +287,7 @@ onMounted(() => {
   }
   .time-box {
     width: 2640px;
-    height: 134px;
+    height: 158px;
     background: url('@/assets/images/timeAxis/timeAxis.png') no-repeat;
     display: flex;
   }

+ 35 - 0
src/types/components.d.ts

@@ -17,20 +17,52 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
@@ -74,4 +106,7 @@ declare module 'vue' {
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

+ 18 - 19
src/views/emergencyCommandMap/LeftSection/CloseCommand.vue

@@ -1,23 +1,22 @@
 <template>
-  <el-dialog ref="formDialogRef" :model-value="visible" :title="props.title" width="650px" append-to-body @close="closeDialog">
-    <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="灾害事件" prop="event_title">
-        <el-select v-if="!props.flag" v-model="form.event_title" placeholder="请选择事件" clearable @change="selectEvent">
-          <el-option v-for="item in events" :key="item.event_id" :label="item.event_title" :value="item.event_title"></el-option>
-        </el-select>
-        <span v-else>{{ form.event_title }}</span>
-      </el-form-item>
-      <span v-if="!props.flag" style="color: red; display: block; margin-top: 5px"
-        >注意:本次指挥未关联事件,指挥记录将不会保留,若需要保留指挥记录,请关联事件</span
-      >
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="endProcess">结束指挥</el-button>
-        <el-button @click="closeDialog">取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
+  <div class="common-dialog-sm">
+    <div class="dialog-title">{{ title ? title : '弹窗' }}</div>
+    <div class="dialog-content">
+      <el-form v-if="!props.flag" ref="eventFormRef" :model="form" :rules="rules" label-width="240px">
+        <el-form-item label="灾害事件" prop="event_title">
+          <el-select v-model="form.event_title" placeholder="请选择事件" clearable @change="selectEvent">
+            <el-option v-for="item in events" :key="item.event_id" :label="item.event_title" :value="item.event_title"></el-option>
+          </el-select>
+        </el-form-item>
+        <span style="color: red; display: block; margin-top: 5px">注意:本次指挥未关联事件,指挥记录将不会保留,若需要保留指挥记录,请关联事件</span>
+      </el-form>
+      <div v-else>{{ form.event_title }}</div>
+    </div>
+    <div class="dialog-footer">
+      <div class="common-btn" @click="closeDialog">取消</div>
+      <div class="common-btn-primary" @click="endProcess">结束指挥</div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

+ 3 - 2
src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -372,7 +372,7 @@ const deleteItem = (item) => {
           padding: 15px 8px;
           display: flex;
           flex-direction: column;
-          font-size: 32px;
+          font-size: 38px;
           color: #fbffff;
           .checked-box,
           .checked-box-half,
@@ -437,6 +437,7 @@ const deleteItem = (item) => {
       width: 579px;
       height: 421px;
       background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
+      background-size: 100% 100%;
       .select-header {
         display: flex;
         justify-content: space-between;
@@ -468,7 +469,7 @@ const deleteItem = (item) => {
           position: relative;
           .line {
             color: #fff;
-            font-size: 32px;
+            font-size: 38px;
             display: flex;
             .text1 {
               margin-right: 35px;

+ 2 - 2
src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -256,8 +256,8 @@ const handleSave = () => {
 }
 .more-btn {
   position: absolute;
-  top: 60px;
-  right: 136px;
+  top: 55px;
+  right: 25px;
   color: #00e8ff;
   font-size: 36px;
   cursor: pointer;

+ 1 - 0
src/views/emergencyCommandMap/LeftSection/index.vue

@@ -94,6 +94,7 @@
     </div>
     <VideoMonitor />
     <CloseCommand
+      v-if="closeCommandState.show"
       v-model="closeCommandState.show"
       :title="closeCommandState.title"
       :flag="closeCommandState.flag"

+ 1 - 1
src/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue

@@ -63,7 +63,7 @@ const dataList = ref([
         width: 493px;
         height: 50px;
         line-height: 50px;
-        background: url('@/assets/images/emergencyCommandMap/supervision/titleBg.png') no-repeat;
+        //background: url('@/assets/images/emergencyCommandMap/supervision/titleBg.png') no-repeat;
         margin-left: 20px;
         padding: 0 30px;
         .title2 {

+ 1 - 1
src/views/emergencyCommandMap/index.vue

@@ -29,7 +29,7 @@ onMounted(() => {
         dw: 8960,
         dh: 2520,
         el: '#dashboard-container',
-        resize: false,
+        resize: true,
         ignore: ['#aMap', '#YztMap']
       },
       false

+ 1 - 1
src/views/globalMapPage/index.vue

@@ -26,7 +26,7 @@ onMounted(() => {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: false,
+      resize: true,
       ignore: ['#aMap', '#YztMap']
     },
     false

+ 4 - 3
src/views/routineCommandMap/PositionMap.vue

@@ -445,9 +445,10 @@ function submit() {
   margin: 20px 0;
 }
 .dialog {
-  position: absolute;
-  top: 90px;
-  left: 900px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: 3000px;
   height: 2000px;
   z-index: 2000;

+ 1 - 1
src/views/routineCommandMap/index.vue

@@ -29,7 +29,7 @@ onMounted(() => {
         dw: 8960,
         dh: 2520,
         el: '#dashboard-container',
-        resize: false,
+        resize: true,
         ignore: ['#aMap', '#YztMap', '#positionMap']
       },
       false