feat: 调理UI

src/views/setting/index.vue

@@ -14,8 +14,16 @@
         <ui-icon
           ctrl
           :type="setting?.openCompass ? 'eye-s' : 'eye-n'"
-          @click="changeBack(setting!.back, setting!.backType, !setting!.openCompass, setting!.mapOpen, setting!.mapType, 
-          {scale: setting!.scale!, rotate: setting?.rotate!})"
+          @click="
+            changeBack(
+              setting!.back,
+              setting!.backType,
+              !setting!.openCompass,
+              setting!.mapOpen,
+              setting!.mapType,
+              { scale: setting!.scale!, rotate: setting?.rotate! }
+            )
+          "
         />
       </template>
     </ui-group>
@@ -25,7 +33,16 @@
         <ui-icon
           ctrl
           :type="setting?.mapOpen ? 'eye-s' : 'eye-n'"
-          @click="changeBack(setting!.back, setting!.backType, setting!.openCompass, !setting!.mapOpen, setting!.mapType, {scale: setting!.scale!, rotate: setting?.rotate!})"
+          @click="
+            changeBack(
+              setting!.back,
+              setting!.backType,
+              setting!.openCompass,
+              !setting!.mapOpen,
+              setting!.mapType,
+              { scale: setting!.scale!, rotate: setting?.rotate! }
+            )
+          "
         />
       </template>
       <ui-group-option v-if="setting?.mapOpen">
@@ -62,7 +79,17 @@
             :key="back.resource"
             class="back-item"
             :class="{ [back.backType]: true, active: setting!.back === back.resource }"
-            @click="setting!.back !== back.resource && changeBack(back.resource, back.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, {scale: setting!.scale!, rotate: setting?.rotate!})"
+            @click="
+              setting!.back !== back.resource &&
+                changeBack(
+                  back.resource,
+                  back.backType,
+                  setting!.openCompass,
+                  setting!.mapOpen,
+                  setting!.mapType,
+                  { scale: setting!.scale!, rotate: setting?.rotate! }
+                )
+            "
           >
             <img
               :src="back.covre || back.resource"
@@ -74,13 +101,8 @@
               v-else-if="back.backType === 'icon'"
             />
             <span :style="{ background: back.resource }" v-else></span>
-            <a
-              class="back-item-desc"
-              :title="
-                (settingResourceTypeDesc[back.backType] &&
-                  settingResourceTypeDesc[back.backType] + '-') + back.name
-              "
-            >
+
+            <a class="back-item-desc">
               {{
                 (settingResourceTypeDesc[back.backType] &&
                   settingResourceTypeDesc[back.backType] + "-") + back.name
@@ -113,31 +135,31 @@
     <Teleport
       to="#layout-app"
       v-if="
-        setting?.backType === SettingResourceType.bottomImage &&
-        $router.currentRoute.value.name === RoutesName.setting
+        (setting?.backType === SettingResourceType.bottomImage &&
+          $router.currentRoute.value.name === RoutesName.setting)
       "
     >
-      <div class="slider-demo-block ant-modal-root">
-        缩放
-        <Slider
-          :value="setting!.scale || 1"
-          vertical
-          :min="0.1"
-          :step="0.01"
-          :max="3"
-          @update:value="(val: any) => changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, {scale: val, rotate: setting?.rotate!})"
-        />
-      </div>
-      <div class="slider-demo-block ant-modal-root" style="margin-right: 60px">
-        旋转
-        <Slider
-          :value="setting!.rotate || 0"
-          vertical
-          :min="0.1"
-          :step="0.01"
-          :max="360"
-          @update:value="(val: any) => changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, {scale: setting!.scale!, rotate: val})"
-        />
+      <div class="slider-demo-block-group">
+        <div class="slider-demo-block ant-modal-root">
+          <span> 缩放</span>
+          <Slider
+            :value="setting!.scale || 1"
+            :min="0.1"
+            :step="0.01"
+            :max="3"
+            @update:value="(val: any) => changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, {scale: val, rotate: setting?.rotate!})"
+          />
+        </div>
+        <div class="slider-demo-block ant-modal-root">
+          <span> 旋转</span>
+          <Slider
+            :value="setting!.rotate || 0"
+            :min="0.1"
+            :step="0.01"
+            :max="360"
+            @update:value="(val: any) => changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, setting!.mapType, {scale: setting!.scale!, rotate: val})"
+          />
+        </div>
       </div>
     </Teleport>
   </RightFillPano>
@@ -146,7 +168,12 @@
     <div class="edit-hot-item">
       <h3 class="edit-title">
         背景图
-        <ui-icon type="close" ctrl @click.stop="addTemp = undefined" class="edit-close" />
+        <ui-icon
+          type="close"
+          ctrl
+          @click.stop="addTemp = undefined"
+          class="edit-close"
+        />
       </h3>
 
       <ui-input
@@ -254,7 +281,10 @@ const changeBack = (
   mapType: string,
   tb: { scale: number; rotate: number } = { scale: 1, rotate: 0 }
 ) => {
-  if (type === SettingResourceType.map && !caseProject.value!.tmProject?.latlng) {
+  if (
+    type === SettingResourceType.map &&
+    !caseProject.value!.tmProject?.latlng
+  ) {
     Dialog.alert("当前案件没绑定经纬度，无法开启地图功能");
     return;
   }
@@ -270,9 +300,8 @@ const changeBack = (
   setBackdrop(back, type, tb);
   setMap(openMap, mapType);
 
-  (document.querySelector("#direction") as HTMLDivElement)!.style.display = openCompass
-    ? "block"
-    : "none";
+  (document.querySelector("#direction") as HTMLDivElement)!.style.display =
+    openCompass ? "block" : "none";
 
   if (isFirst) {
     let isSave = false;
@@ -287,11 +316,16 @@ const changeBack = (
         setting.value!.scale = initScale;
         setting.value!.rotate = initRotate;
 
-        setBackdrop(initBack, initType, { scale: initScale, rotate: initRotate });
+        setBackdrop(initBack, initType, {
+          scale: initScale,
+          rotate: initRotate,
+        });
         setMap(initopenMap, initmapType);
         (document.querySelector(
           "#direction"
-        ) as HTMLDivElement)!.style.display = initOpenCompass ? "block" : "none";
+        ) as HTMLDivElement)!.style.display = initOpenCompass
+          ? "block"
+          : "none";
       }
       isFirst = true;
     });
@@ -469,14 +503,14 @@ const iconUpload = async (data: any) => {
     top: -10px;
     right: -10px;
     opacity: 0;
-
+    // opacity: 1;
     border-radius: 50%;
 
     &.iconfont {
       font-size: 10px;
       color: #fff;
-      outline-color: none !important;
     }
+
     &:hover {
       opacity: 1 !important;
     }
@@ -506,7 +540,9 @@ const iconUpload = async (data: any) => {
     }
   }
 }
-
+:deep(.back-item .del.iconfont) {
+  outline-style: none;
+}
 .back-item-desc {
   font-size: 14px;
   color: #fff;
@@ -579,15 +615,54 @@ const iconUpload = async (data: any) => {
     background-color: rgba(255, 255, 255, 0.16);
   }
 }
-
-.slider-demo-block {
+.slider-demo-block-group {
   position: absolute;
-
-  right: calc(var(--editor-menu-right) + var(--editor-toolbox-width)) !important;
-  top: 50%;
-  transform: translateY(-50%);
+  z-index: 10000;
+  padding: 8px 24px;
+  background-color: rgba(0, 0, 0, 0.3);
+  left: 50%;
+  border-radius: 5px;
+  bottom: 20px;
+  transform: translateX(-50%);
   margin-right: 20px;
   z-index: 99;
-  height: 300px;
+  // height: 300px;
+  width: 386px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+.slider-demo-block {
+  flex: 1 1 100%;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  span {
+    padding-right: 10px;
+  }
+  .ant-slider {
+    flex: 1;
+  }
+}
+:global(.ant-modal-root .ant-slider-track) {
+  background-color: #00c8af;
+}
+:global(.ant-modal-root .ant-slider:hover .ant-slider-track) {
+  background-color: #00c8af;
+}
+:global(.ant-modal-root .ant-slider-handle) {
+  border: solid 2px #00c8af !important;
+}
+:global(.ant-modal-root .ant-slider-handle.ant-tooltip-open) {
+  border-color: #00c8af;
+}
+:global(
+    .ant-modal-root .ant-slider-handle:focus,
+    .ant-modal-root .ant-slider-handle:hover,
+    .ant-modal-root .ant-slider-handle:active
+  ) {
+  border: solid 2px #03ad99 !important;
+  box-shadow: none;
 }
 </style>