[Feat 0000]新增三维模型

src/router/routes/index.ts

@@ -38,9 +38,9 @@ export const LoginRoute: AppRouteRecordRaw = {
   path: '/login',
   name: 'Login',
   //新版后台登录，如果想要使用旧版登录放开即可
-  // component: () => import('/@/views/sys/login/Login.vue'),
+  component: () => import('/@/views/sys/login/Login.vue'),
   //数据中心登录
-  component: () => import('/@/views/sys/login/LoginDataCenter.vue'),
+  // component: () => import('/@/views/sys/login/LoginDataCenter.vue'),
   // 内页登录
   // component: () => import('/@/views/sys/login/LoginNeiye.vue'),
   // component: () => import('/@/views/system/loginmini/MiniLogin.vue'),

src/utils/threejs/useThree.ts

@@ -544,6 +544,7 @@ class UseThree {
       (this.camera as THREE.PerspectiveCamera).aspect = this.canvasContainer.clientWidth / this.canvasContainer.clientHeight;
       // 刷新相机矩阵
       this.camera?.updateProjectionMatrix();
+      this.orbitControls?.update();
     }
     // 设置场景尺寸
     this.renderer?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);

src/views/monitor/mynews/DynamicNotice.vue

@@ -11,8 +11,7 @@
   const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
   const formData = ref<any>(props.formData);
 
-  const componentType = {
-  };
+  const componentType = {};
 
   /**
    * 跟换组件和传值事件

src/views/sys/login/Login.vue

@@ -9,7 +9,8 @@
     <div class="top-header">
       <div class="top-bg"></div>
       <div class="login-icon"></div>
-      <div class="title">{{ title }}</div>
+      <!-- <div class="title">{{ title }}</div> -->
+      <div class="title">注气驱替监管系统</div>
     </div>
 
     <div class="flex center">

src/views/system/user/user.data.ts

@@ -27,9 +27,10 @@ export const columns: BasicColumn[] = [
     width: 100,
     customRender: ({ value }) => {
       const nameList = [];
-      value.forEach((item) => {
-        nameList.push(item['roleName']);
-      });
+      if (value)
+        value.forEach((item) => {
+          nameList.push(item['roleName']);
+        });
       return nameList.toString();
     },
   },

src/views/vent/home/configurable/components/gasInject/navMenu.vue

@@ -2,120 +2,125 @@
   <div class="nav-menu">
     <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handlerClick(index, item)">
       <div
-        :class="{ 'menu-item-label': index != menuList.length - 1, 'menu-item-label-1': index == menuList.length - 1, 'bg-position': index == menuList.length - 1, 'active-menu': activeIndex == index, 'unactive-menu': activeIndex != index }">
-        {{ item.name }}</div>
+        :class="{
+          'menu-item-label': index != menuList.length - 1,
+          'menu-item-label-1': index == menuList.length - 1,
+          'bg-position': index == menuList.length - 1,
+          'active-menu': activeIndex == index,
+          'unactive-menu': activeIndex != index,
+        }"
+      >
+        {{ item.name }}</div
+      >
       <div v-if="index != menuList.length - 1" class="menu-item-icon"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
-let menuList = ref([
-  { name: '设备监测', code: 'device' },
-  { name: '试验区', code: 'syq' },
-  { name: '主界面', code: 'zjm' },
-  { name: '注气系统', code: 'zqxt' },
-  { name: '抽采系统', code: 'ccxt' },
-])
-let activeIndex = ref<number>(2)
-let $emit = defineEmits(['toggleMenu'])
-
-
-//选项切换
-function handlerClick(index, item) {
-  activeIndex.value = index
-  $emit('toggleMenu', item.code)
-}
-
+  import { ref } from 'vue';
+
+  let menuList = ref([
+    // { name: '设备监测', code: 'device' },
+    { name: '试验区', code: 'syq' },
+    { name: '主界面', code: 'zjm' },
+    { name: '注气系统', code: 'zqxt' },
+    { name: '抽采系统', code: 'ccxt' },
+  ]);
+  let activeIndex = ref<number>(1);
+  let $emit = defineEmits(['toggleMenu']);
+
+  //选项切换
+  function handlerClick(index, item) {
+    activeIndex.value = index;
+    $emit('toggleMenu', item.code);
+  }
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
-  .nav-menu {
-    --image-menu-center: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-5.png');
-    --image-menu-bg-L: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-4.png');
-    --image-menu-bg-R: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-3.png');
+  @{theme-deepblue} {
+    .nav-menu {
+      --image-menu-center: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-5.png');
+      --image-menu-bg-L: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-4.png');
+      --image-menu-bg-R: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-3.png');
+    }
   }
-}
-
-.nav-menu {
-  --image-menu-center: url('@/assets/images/gasInjection/1-5.png');
-  --image-menu-bg-L: url('@/assets/images/gasInjection/1-4.png');
-  --image-menu-bg-R: url('@/assets/images/gasInjection/1-3.png');
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  padding: 9px 0px 0px 35px;
-  box-sizing: border-box;
-
-  .menu-item {
-    width: 20%;
-    height: 100%;
-    display: flex;
-    cursor: pointer;
 
-    &:nth-child(1) {
-      .menu-item-icon {
-        background: var(--image-menu-bg-R) no-repeat center;
+  .nav-menu {
+    --image-menu-center: url('@/assets/images/gasInjection/1-5.png');
+    --image-menu-bg-L: url('@/assets/images/gasInjection/1-4.png');
+    --image-menu-bg-R: url('@/assets/images/gasInjection/1-3.png');
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    padding: 9px 0px 0px 35px;
+    box-sizing: border-box;
+
+    .menu-item {
+      width: 20%;
+      height: 100%;
+      display: flex;
+      cursor: pointer;
+
+      &:nth-child(1) {
+        .menu-item-icon {
+          background: var(--image-menu-bg-R) no-repeat center;
+        }
       }
-    }
 
-    &:nth-child(2) {
-      .menu-item-icon {
-        background: var(--image-menu-bg-R) no-repeat center;
+      &:nth-child(2) {
+        .menu-item-icon {
+          background: var(--image-menu-bg-R) no-repeat center;
+        }
       }
-    }
 
-    &:nth-child(3) {
-      .menu-item-icon {
-        background: var(--image-menu-bg-L) no-repeat center;
+      &:nth-child(3) {
+        .menu-item-icon {
+          background: var(--image-menu-bg-L) no-repeat center;
+        }
       }
-    }
 
-    &:nth-child(4) {
-      .menu-item-icon {
-        background: var(--image-menu-bg-L) no-repeat center;
+      &:nth-child(4) {
+        .menu-item-icon {
+          background: var(--image-menu-bg-L) no-repeat center;
+        }
       }
     }
-  }
 
-  .menu-item-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: calc(100% - 33px);
-    font-size: 13px;
-    font-family: 'douyuFont';
-  }
+    .menu-item-label {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(100% - 33px);
+      font-size: 13px;
+      font-family: 'douyuFont';
+    }
 
-  .menu-item-label-1 {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    font-size: 13px;
-    padding-left: 15px;
-    font-family: 'douyuFont';
-  }
+    .menu-item-label-1 {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      font-size: 13px;
+      padding-left: 15px;
+      font-family: 'douyuFont';
+    }
 
-  .menu-item-icon {
-    width: 33px;
-  }
+    .menu-item-icon {
+      width: 33px;
+    }
 
-  .active-menu {
-    height: 100%;
-    background: var(--image-menu-center) no-repeat bottom;
-    background-size: 100% 100%;
-  }
+    .active-menu {
+      height: 100%;
+      background: var(--image-menu-center) no-repeat bottom;
+      background-size: 100% 100%;
+    }
 
-  .bg-position {
-    background-position: -2px 0;
-    background-size: 78% 100%;
+    .bg-position {
+      background-position: -2px 0;
+      background-size: 78% 100%;
+    }
   }
-
-}
 </style>

src/views/vent/home/configurable/components/three3D.vue

@@ -7,7 +7,6 @@
   import UseThree from '/@/utils/threejs/useThree';
   import { animateCamera } from '/@/utils/threejs/util';
   import * as THREE from 'three';
-  import useEvent from '/@/utils/threejs/useEvent';
 
   const props = defineProps<{
     modalName: string;
@@ -36,11 +35,11 @@
           newP: { x: -2.211555197992825, y: 27.130029732875393, z: 2.3018919451652007 },
           newT: { x: -2.211555197992825, y: -8.604453425019353, z: 2.301856157557903 },
         },
-        jdds: {
+        zhuqi: {
           render: null,
           group: modalGroup ? modalGroup : null,
-          newP: { x: 0.22197787154285728, y: 29.010792085965782, z: 2.477736279196267 },
-          newT: { x: 0.22197787154285728, y: -8.604453177192061, z: 2.477698375233975 },
+          newP: { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 },
+          newT: { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 },
         },
       };
       await initModal();
@@ -58,11 +57,8 @@
   };
 
   const customModal = () => {
-    if (props.modalName == 'workFace11') {
-      const DiXing = modalGroup.getObjectByName('PouMian01')?.getObjectByName('DiXing')?.getObjectByName('DiXing_1');
-      if (DiXing) {
-        DiXing.visible = false;
-      }
+    if (props.modalName == 'zhuqi') {
+      //
     }
   };
 
@@ -86,6 +82,14 @@
     });
   };
 
+  const resizeRenderer = () => {
+    if (modal) modal.resizeRenderer();
+  };
+
+  const getModal = () => {
+    return modal;
+  };
+
   watch(
     () => props.modalName,
     async (val) => {
@@ -112,6 +116,8 @@
     modalGroup = null;
     modal = null;
   });
+
+  defineExpose({ resizeRenderer, getModal });
 </script>
 <style lang="less" scoped>
   #three3D {

src/views/vent/home/configurable/gasInjection.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="company-home">
-    <div v-if="menuName !== 'syq'" :class="menuName == 'zjm' ?  'vent-modal' : 'vent-modal-1'">
-      <!-- <VentModal /> -->
-    </div>
-    <div v-if="menuName === 'syq'" class="syq-modal">
-      <!-- <VentModal /> -->
-    </div>
     <div class="top-bg">
       <div class="main-title">{{ mainTitle }}</div>
     </div>
@@ -14,215 +8,253 @@
         <navMenu @toggleMenu="toggleMenu"></navMenu>
       </div>
       <template v-if="menuName == 'zjm'">
-        <div class="main-status">
-          运行中
-        </div>
-        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-          :visible="true" :visible-detail="cfg.showDetail" />
+        <div class="main-status"> 运行中 </div>
+        <ModuleGasInject
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+          :visible-detail="cfg.showDetail"
+        />
       </template>
       <template v-else>
-        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-          :visible="true" :visible-detail="cfg.showDetail" />
+        <ModuleGasInject
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+          :visible-detail="cfg.showDetail"
+        />
       </template>
-
+      <div :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
+        <div class="modal-box">
+          <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" />
+        </div>
+      </div>
+      <!-- <div v-if="menuName === 'syq'" class="syq-modal">
+        </div> -->
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, computed } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleGasInject from './components/ModuleGasInject.vue';
-import navMenu from './components/gasInject/navMenu.vue'
-// import { useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getHomeData } from './configurable.api';
-// import { useRoute } from 'vue-router';
-import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
-const { configs, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
-// const route = useRoute();
-let interval: number | undefined;
-let menuName = ref('zjm')
-
-//选项切换
-function toggleMenu(param) {
-  menuName.value = param
-  switch (menuName.value) {
-    case 'zjm':
-      configs.value = testConfigGasInject;
-      break;
-    case 'syq':
-      configs.value = testConfigGasInjectSy;
-      break;
-    case 'zqxt':
-      configs.value = testConfigGasInjectZq;
-      break;
-    case 'ccxt':
-      configs.value = testConfigGasInjectCc
-      break;
+  import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleGasInject from './components/ModuleGasInject.vue';
+  import navMenu from './components/gasInject/navMenu.vue';
+  import Three3D from './components/three3D.vue';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  // import { useRoute } from 'vue-router';
+  import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
+  // const route = useRoute();
+  const three3D = ref(null);
+  let interval: number | undefined;
+  let menuName = ref('zjm');
+
+  //选项切换
+  function toggleMenu(param) {
+    menuName.value = param;
+    switch (menuName.value) {
+      case 'zjm':
+        configs.value = testConfigGasInject;
+        break;
+      case 'syq':
+        configs.value = testConfigGasInjectSy;
+        break;
+      case 'zqxt':
+        configs.value = testConfigGasInjectZq;
+        break;
+      case 'ccxt':
+        configs.value = testConfigGasInjectCc;
+        break;
+    }
+
+    // 刷新/
+    nextTick(() => {
+      three3D.value?.resizeRenderer();
+    });
   }
-}
-onMounted(() => {
-  // fetchConfigs('vent_new').then(() => {
-  configs.value = testConfigGasInject;
-  // updateEnhancedConfigs(configs.value);
-
-  getHomeData({}).then(updateData);
-  // });
-  setInterval(() => {
+  onMounted(() => {
+    // fetchConfigs('vent_new').then(() => {
+    configs.value = testConfigGasInject;
+    // updateEnhancedConfigs(configs.value);
+
     getHomeData({}).then(updateData);
-  }, 60000);
-});
+    // });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
+  });
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
+      --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
+      --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
+    }
+  }
 
-@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
     --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
     --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
-  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
-  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-  .top-bg {
     width: 100%;
-    height: 66px;
-    background: var(--image-modal-top) no-repeat center;
-    background-size: 100% 100%;
-    position: absolute;
-    z-index: 1;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
 
-    .main-title {
+    .top-bg {
+      width: 100%;
       height: 66px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
+      background: var(--image-modal-top) no-repeat center;
+      background-size: 100% 100%;
+      position: absolute;
+      z-index: 1;
+
+      .main-title {
+        height: 66px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .top-nav {
+        position: absolute;
+        top: 0;
+        width: 880px;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
+    }
+
+    .main-container {
+      position: absolute;
+      top: 66px;
+      width: 100%;
+      height: calc(100% - 66px);
+      padding: 0px 10px;
+      box-sizing: border-box;
+    }
+
+    .main-status {
       display: flex;
       justify-content: center;
       align-items: center;
+      width: 440px;
+      height: 80px;
+      font-size: 18px;
+      font-family: 'douyuFont';
+      margin: 10px 0px;
+      background: var(--image-modal-status);
+      background-size: 100% 100%;
     }
 
-    .top-nav {
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      top: 0;
-      width: 880px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      top: 70px;
+      right: 460px;
     }
-  }
 
-  .main-container {
-    position: absolute;
-    top: 66px;
-    width: 100%;
-    height: calc(100% - 66px);
-    padding: 0px 10px;
-    box-sizing: border-box;
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
+
+    .nav-cards {
+      position: absolute;
+      left: 50%;
+      top: 0px;
+      transform: translate(-50%, 0);
+      width: 691px;
+      height: 58px;
+      background: var(--image-modal-center) no-repeat;
+      background-size: 100% 100%;
+    }
   }
 
-  .main-status {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 440px;
-    height: 80px;
-    font-size: 18px;
-    font-family: 'douyuFont';
-    margin: 10px 0px;
-    background: var(--image-modal-status);
-    background-size: 100% 100%;
+  :deep(.loading-box) {
+    position: unset;
   }
 
+  .modal-box {
+    width: 100%; height: 100%; position: relative; pointer-events: auto, padding: 20px;
+  }
 
-  .module-dropdown {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
+  // 试验区模型区域样式
+  .syq-modal {
     position: absolute;
-    top: 70px;
-    right: 460px;
+    top: 135px;
+    right: 20px;
+    width: calc(100% - 510px);
+    height: 515px;
+    background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+    background-size: 100% 100%;
   }
 
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
+  .vent-modal {
     position: absolute;
     top: 70px;
-    right: 460px;
-  }
-
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
+    left: 50%;
+    transform: translate(-50%, 0px);
+    width: calc(100% - 920px);
+    height: 505px;
+    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+    background-size: 100% 100%;
+    pointer-events: auto;
+    background-color: transparent !important;
   }
-
-  .nav-cards {
+  .vent-modal-1 {
     position: absolute;
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, 0);
-    width: 691px;
-    height: 58px;
-    background: var(--image-modal-center) no-repeat;
+    top: 70px;
+    left: 460px;
+    width: calc(100% - 470px);
+    height: 505px;
+    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
     background-size: 100% 100%;
+    pointer-events: auto;
+    background-color: transparent !important;
+  }
+  .modal-3d {
+    padding: 10px;
+    width: calc(100% - 20px) !important;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
-
-// 试验区模型区域样式
-.syq-modal {
-  position: absolute;
-  top: 135px;
-  right: 20px;
-  width: calc(100% - 510px);
-  height: 515px;
-  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.vent-modal {
-  position: absolute;
-  top: 134px;
-  left: 50%;
-  transform: translate(-50%, 0px);
-  width: calc(100% - 920px);
-  height: 505px;
-  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-  background-size: 100% 100%;
-}
-.vent-modal-1 {
-  position: absolute;
-  top: 134px;
-  left: 460px;
-  width: calc(100% - 470px);
-  height: 505px;
-  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-  background-size: 100% 100%;
-}
 </style>