gs-bim-air 3.0.3 → 3.0.5

package/src/viewerWrapper/panels/setting/interfaceSettingPanel.vue

@@ -1,909 +0,0 @@
-<template>
-  <div class="showSetting">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="交互设置" name="first">
-        <el-row>
-          <el-col :span="8">右键菜单：</el-col>
-          <el-col :span="16">
-            <el-radio-group v-model="rightClickMenu" @change="rightClickMenuChange">
-              <el-radio :label="true">开启</el-radio>
-              <el-radio :label="false">关闭</el-radio>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">帧率：</el-col>
-          <el-col :span="16">
-            <el-radio-group v-model="frameRateClickMenu" @change="frameRateClickMenuChange">
-              <el-radio :label="true">开启</el-radio>
-              <el-radio :label="false">关闭</el-radio>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">鼠标习惯：</el-col>
-          <el-col :span="16">
-            <el-radio-group v-model="mouseHabits" @change="mouseHabitsChange">
-              <el-radio label="left">左键旋转</el-radio>
-              <el-radio label="right">右键旋转</el-radio>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-        <!-- <el-row>
-          <el-col :span="8"> 鼠标悬停：</el-col>
-          <el-col :span="16">
-            <el-checkbox v-model="mouseHover"
-              >构件鼠标悬停效果</el-checkbox
-            ></el-col
-          >
-        </el-row> -->
-        <el-row>
-          <el-col :span="8">鼠标滚动：</el-col>
-          <el-col :span="16">
-            <el-checkbox v-model="reverseMouseWheelDirection" @change="mouseWheelDirectionChange">
-              反转鼠标缩放方向
-            </el-checkbox>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane label="效果设置" name="second">
-        <!-- <el-row>
-          <el-col :span="8">线框：</el-col>
-          <el-col :span="16">
-            <el-select v-model="showBorder" size="mini" placeholder="线框状态" @change="showBorderChange">
-              <el-option
-                v-for="item in showBorderOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"></el-option>
-            </el-select>
-          </el-col>
-        </el-row> -->
-        <!-- <el-row>
-          <el-col :span="8"> 投影：</el-col>
-          <el-col :span="16">
-            <el-checkbox v-model="shadow">启用平行光投影</el-checkbox></el-col
-          >
-        </el-row> -->
-        <el-row>
-          <el-col :span="8">直射光强度：</el-col>
-          <el-col :span="16">
-            <el-slider
-              v-model="intensity"
-              :min="0"
-              :max="15"
-              :step="0.01"
-              :marks="marks015"
-              :show-tooltip="false"
-              @change="intensityChange"></el-slider>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="8">直射光颜色：</el-col>
-          <el-col :span="16">
-            <!-- <el-slider
-              v-model="diffuse"
-              :min="0"
-              :max="15"
-              :step="0.1"
-              :marks="marks"
-              :show-tooltip="false"
-              @change="diffuseChange"></el-slider> -->
-            <el-color-picker color-format="hex" v-model="diffuse" @input="diffuseChange"></el-color-picker>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="8">环境光强度：</el-col>
-          <el-col :span="16">
-            <el-slider
-              v-model="environmentIntensity"
-              :min="0"
-              :max="1"
-              :step="0.01"
-              :marks="marks01"
-              :show-tooltip="false"
-              @change="environmentIntensityChange"></el-slider>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="8">高亮光强度：</el-col>
-          <el-col :span="16">
-            <el-slider
-              v-model="directIntensity"
-              :min="0"
-              :max="1"
-              :step="0.01"
-              :marks="marks01"
-              :show-tooltip="false"
-              @change="directIntensityChange"></el-slider>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="8">相机投影方式：</el-col>
-          <el-col :span="16">
-            <el-radio-group v-model="currentProjectionType" @change="projectionTypeChange">
-              <el-radio :label="ProjectionType.Perspective">透视投影</el-radio>
-              <el-radio :label="ProjectionType.Orthographic">正交投影</el-radio>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">移动速度：</el-col>
-          <el-col :span="16">
-            <el-slider
-              v-model="moveSpeed"
-              :min="0"
-              :max="100"
-              :step="1"
-              :marks="speedMarks"
-              @change="moveSpeedChange"></el-slider>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">加载精度：</el-col>
-          <el-col :span="16">
-            <el-slider
-              v-model="screenError"
-              :min="0"
-              :max="64"
-              :step="1"
-              :marks="screenErrorMarks"
-              @change="screenErrorChange"></el-slider>
-          </el-col>
-        </el-row>
-        <div>
-          <el-collapse accordion v-model="anySelection">
-            <el-collapse-item title="更多选项" name="open">
-              <div style="padding-bottom: 15px">
-                <el-row>
-                  <el-col :span="8">背景：</el-col>
-                  <el-col :span="16">
-                    <!-- <div class="bgList">
-                      <div
-                        v-for="(item, index) in bgList"
-                        :key="index"
-                        @click="selectBgClick(index)"
-                        class="bgImg"
-                        :title="item.hint"
-                        :style="{
-                          border: activeBgIndex === index ? '1px solid #6659FF' : '1px',
-                          background: item.css ? item.css : '#fff',
-                        }"
-                        style="
-                          background-position: center center;
-                          background-repeat: no-repeat;
-                          background-size: cover;
-                        "></div>
-                    </div> -->
-                    <div class="bgList">
-                      <!-- <div
-                        v-for="(item, index) in skyboxList"
-                        :key="index"
-                        @click="selectSkyboxClick(item, index)"
-                        class="bgImg"
-                        :title="item.hint"
-                        :style="{
-                          border:
-                            activeBgIndex === index + bgList.length
-                              ? '1px solid #6659FF'
-                              : '1px',
-                          background: item.css ? item.css : '#fff',
-                        }"
-                        style="
-                          background-position: center center;
-                          background-repeat: no-repeat;
-                          background-size: cover;
-                        "></div> -->
-                      <img
-                        v-for="(item, index) in skyboxList"
-                        :key="index"
-                        :style="{
-                          borderColor: currentSkyBox == item.value ? '#6659FF' : 'transparent',
-                        }"
-                        :src="require(`../../../assets/images/${item.img}`)"
-                        @click="skyBoxClick(item)" />
-                    </div>
-                    <!-- <div class="bgList">
-                      <div
-                        class="bgImg"
-                        :style="{
-                          border: activeBgIndex === bgList.length + skyboxList.length ? '1px solid #6659FF' : '1px',
-                        }">
-                        <div class="upload-wrapper" @click="$refs.upload.click()" v-show="showAddIcon">
-                          <i class="el-icon-plus"></i>
-                          <input
-                            type="file"
-                            ref="upload"
-                            accept="image/*"
-                            v-show="false"
-                            @change="uploadFileChange()" />
-                        </div>
-
-                        <el-image
-                          @click="$refs.upload.click()"
-                          v-show="!showAddIcon"
-                          fit="cover"
-                          :src="imageUrl"></el-image>
-                      </div>
-
-                      <div
-                        class="bgImg"
-                        :style="{
-                          border: activeBgIndex === bgList.length + skyboxList.length + 1 ? '1px solid #6659FF' : '1px',
-                        }">
-                        <el-color-picker show-alpha color-format="rgb" v-model="color" @input="colorInput">
-                        </el-color-picker>
-                      </div>
-                    </div> -->
-                  </el-col>
-                </el-row>
-                <!-- <el-row>
-                  <el-col :span="8">主题：</el-col>
-                  <el-col :span="16">
-                    <div class="themeList">
-                      <div
-                        v-for="(item, index) in themeList"
-                        :key="index"
-                        @click="selectThemeClick(index)"
-                        class="bgImg"
-                        :style="{
-                          border: activeThemeIndex === index ? '1px solid #6659FF' : '1px',
-                          background: item ? item : '#fff',
-                        }"
-                        style="
-                          background-position: center center;
-                          background-repeat: no-repeat;
-                          background-size: cover;
-                        ">
-                      </div>
-                    </div>
-                  </el-col>
-                </el-row> -->
-                <!-- <el-row>
-                  <el-col :span="8">环境光照：</el-col>
-                  <el-col :span="16">
-                    <el-checkbox v-model="lighting"
-                      >启用环境光照</el-checkbox
-                    ></el-col
-                  >
-                </el-row>
-                <el-row>
-                  <el-col :span="8">选择贴图：</el-col>
-                  <el-col :span="16">
-                    <div class="bgImgList">
-                      <div
-                        v-for="(item, index) in bgImgList"
-                        :key="index"
-                        @click="selectMapping(index)"
-                        class="bgImg"
-                        :style="{
-                          border:
-                            activeMapping === index
-                              ? '1px solid #6659FF'
-                              : 'none',
-                        }"
-                      >
-                        <img :src="item" width="36px" height="26px" />
-                      </div>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-row>
-                  <el-checkbox v-model="mapping">显示环境贴图</el-checkbox>
-                </el-row> -->
-              </div>
-            </el-collapse-item>
-          </el-collapse>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="精度设置" name="third">
-        <el-row>
-          <el-col :span="8">测量精度：</el-col>
-          <el-col :span="16">
-            <el-select v-model="measureAccuracy" popper-class="dark-select" @change="accuracyChange" size="mini">
-              <el-option
-                v-for="item in accuracyOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"></el-option>
-            </el-select>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="10">最大显存值(GB)：</el-col>
-          <el-col :span="12">
-            <el-input
-              v-model="maxMemorySize_GB"
-              type="number"
-              size="mini"
-              :min="1"
-              :max="16"
-              style="width: 80%"
-              @change="maxMemorySizeChange"></el-input>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
-    <div class="bottom">
-      <el-button type="info" round size="mini" @click="resetConfigClick">恢复默认设置</el-button>
-      <!-- <el-button type="text" @click="saveConfigClick">保存设置</el-button> -->
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-import { defaultViewerOptions, ShowBorder, Theme, traverseConfig } from "gs-bim-air-core/gsDevFx/options/viewerOptions";
-import { Component, Inject, Prop, Vue } from "vue-property-decorator";
-import { LButtonState } from "gs-longan";
-import { SkyboxType } from "gs-bim-air-core/sdk/animation/skyboxEffect/skyboxEffect";
-import { ProjectionType } from "gs-longan";
-import { hexToRgb, rgbToHex } from "gs-bim-air-core/gsDevFx/utils/utility";
-import { Process } from "gs-longan";
-import { defaultSceneOptions } from "gs-bim-air-core/gsDevFx/options/sceneOptions";
-import SettingPanel from "./settingPanel";
-@Component({
-  components: {},
-})
-export default class ShowSetting extends Vue {
-  @Prop() componentData;
-
-  @Inject() getViewer;
-
-  activeName = "first";
-  anySelection = "";
-  rightClickMenu = this.viewer.options.components.contextMenu.visible;
-  frameRateClickMenu = this.viewer.options.components.frameRate.visible;
-  mouseHabits = this.viewer.options.events.lButtonState === LButtonState.select ? "right" : "left";
-  mouseHover = false;
-  reverseMouseWheelDirection = !this.viewer.options.events.mouseWheelDirection;
-  mapping = true;
-  lighting = false;
-  activeBgIndex: number = 5;
-  activeMapping = "";
-  intensity = this.viewer.options.displayEffect.intensity;
-  diffuse = rgbToHex(this.viewer.options.displayEffect.diffuse);
-  environmentIntensity = this.viewer.options.displayEffect.environmentIntensity;
-  directIntensity = this.viewer.options.displayEffect.directIntensity;
-
-  marks015 = {
-    0: "0",
-    // 1: "1",
-    5: "5",
-    10: "10",
-    15: "15",
-  };
-  marks01 = {
-    0: "0",
-    0.5: "0.5",
-    1: "1",
-  };
-  speedMarks = {
-    0: "0",
-    100: "100",
-  };
-  screenErrorMarks = {
-    0: "0",
-    16: "16",
-  };
-  // showBorder = this.viewer.options.displayEffect.showBorder;
-  showBorderOptions = [
-    {
-      value: ShowBorder.On,
-      label: "显示",
-    },
-    {
-      value: ShowBorder.Off,
-      label: "隐藏",
-    },
-    {
-      value: ShowBorder.Default,
-      label: "默认",
-    },
-  ];
-  shadow = false;
-
-  bgList = [
-    {
-      css: "linear-gradient(#e3fcfc, #f6ffff)",
-      value: [246, 255, 255],
-      hint: "默认",
-    },
-    {
-      css: "",
-      value: [255, 255, 255],
-      hint: "白色",
-    },
-    {
-      css: "#5c5c5c",
-      value: [92, 92, 92],
-      hint: "浅灰",
-    },
-    {
-      css: "#272727",
-      value: [39, 39, 39],
-      hint: "深灰",
-    },
-    {
-      css: "#32475b",
-      value: [50, 71, 91],
-      hint: "蓝色",
-    },
-  ];
-
-  currentSkyBox = SkyboxType.Normal;
-  skyboxList = [
-    { name: "默认", img: "DaylightBoxIcon.jpg", value: SkyboxType.Normal },
-    { name: "日落", img: "sunsetSkyboxIcon.jpg", value: SkyboxType.Sunset },
-    { name: "秋天", img: "autumnSkyboxIcon.jpg", value: SkyboxType.Autumn },
-    // {
-    //   css: `url(${sunnySkyboxIcon}) no-repeat center center / cover`,
-    //   value: SkyboxType.Sunny,
-    //   hint: "晴空天空盒",
-    // },
-    // {
-    //   css: `url(${cloudySkyboxIcon}) no-repeat center center / cover`,
-    //   value: SkyboxType.Cloudy,
-    //   hint: "多云天空盒",
-    // },
-    // {
-    //   css: `url(${duskSkyboxIcon}) no-repeat center center / cover`,
-    //   value: SkyboxType.Dusk,
-    //   hint: "黄昏天空盒",
-    // },
-    // {
-    //   css: `url(${nightSkyboxIcon}) no-repeat center center / cover`,
-    //   value: SkyboxType.Night,
-    //   hint: "黑夜天空盒",
-    // },
-    // {
-    //   css: `url(${require("../../../assets/images/desertSkyboxIcon.jpg")}) no-repeat center center / cover`,
-    //   value: SkyboxType.Desert,
-    //   hint: "沙漠天空盒",
-    // },
-    // {
-    //   css: `url(${require("../../../assets/images/sunsetSkyboxIcon.jpg")}) no-repeat center center / cover`,
-    //   value: SkyboxType.Sunset,
-    //   hint: "日落天空盒",
-    // },
-  ];
-
-  showAddIcon = true;
-  imageUrl = "";
-
-  themeList = ["#101825", "#B8CFE2", "#2B5379"];
-  themeValList: Theme[] = [Theme.primary, Theme.tint, Theme.dark];
-  // currentTheme = this.viewer.options.theme;
-  color = "";
-  ProjectionType = ProjectionType;
-  currentProjectionType = this.viewer.options.projectionType;
-  moveSpeed = this.viewer.options.moveSpeed;
-  screenError = this.viewer.options.screenError;
-  accuracyOptions = [
-    {
-      label: "0",
-      value: 0,
-    },
-    {
-      label: "0.0",
-      value: 1,
-    },
-    {
-      label: "0.00",
-      value: 2,
-    },
-    {
-      label: "0.000",
-      value: 3,
-    },
-  ];
-  measureAccuracy = this.viewer.options.measureAccuracy;
-  activeThemeIndex = 0;
-  maxMemorySize_GB = Process.maxMemorySize_GB;
-
-  get viewer(): Viewer {
-    return this.getViewer();
-  }
-
-  handleClick(tab) {
-    this.setData();
-  }
-
-  rightClickMenuChange(visible) {
-    this.viewer.options.components.contextMenu.visible = visible;
-    this.saveLocalConfig();
-  }
-  frameRateClickMenuChange(visible) {
-    this.viewer.options.components.frameRate.visible = visible;
-    this.saveLocalConfig();
-  }
-  mouseHabitsChange(model) {
-    if (model === "left") {
-      this.viewer.options.events.lButtonState = LButtonState.rotation;
-    } else {
-      this.viewer.options.events.lButtonState = LButtonState.select;
-    }
-    this.saveLocalConfig();
-  }
-
-  mouseWheelDirectionChange(val) {
-    this.viewer.options.events.mouseWheelDirection = !val;
-    this.saveLocalConfig();
-  }
-
-  // showBorderChange(val) {
-  //   this.viewer.options.displayEffect.showBorder = val;
-  //   this.saveLocalConfig();
-  // }
-
-  intensityChange(val: number) {
-    this.viewer.options.displayEffect.intensity = val;
-    this.saveLocalConfig();
-  }
-
-  diffuseChange(val: string) {
-    let color = hexToRgb(val);
-    this.viewer.options.displayEffect.diffuse = color.slice(0, 3);
-    this.saveLocalConfig();
-  }
-
-  environmentIntensityChange(val: number) {
-    this.viewer.options.displayEffect.environmentIntensity = val;
-    this.saveLocalConfig();
-  }
-
-  directIntensityChange(val: number) {
-    this.viewer.options.displayEffect.directIntensity = val;
-    this.saveLocalConfig();
-  }
-
-  selectBgClick(index) {
-    this.viewer.options.background = this.bgList[index].value;
-    this.activeBgIndex = index;
-    this.saveLocalConfig();
-  }
-
-  selectSkyboxClick(item, index) {
-    this.viewer.options.background = this.skyboxList[index].value;
-    this.activeBgIndex = index + this.bgList.length;
-    // let skybox = new SkyboxSysEffect(this.viewer);
-    // skybox.showSkyByType(item.value);
-    this.saveLocalConfig();
-  }
-
-  skyBoxClick(item) {
-    this.currentSkyBox = item.value;
-    this.viewer.sceneOptions.skyBox.type = this.currentSkyBox;
-  }
-
-  colorInput(color) {
-    if (color) {
-      color = color.replace("rgba(", "").replace(")", "");
-      color = color.split(",").map((item) => Number(item));
-      this.viewer.options.background = color;
-      this.saveLocalConfig();
-      this.activeBgIndex = this.bgList.length + this.skyboxList.length + 1;
-    }
-  }
-
-  // colorChange(color) {
-  //   if (color) {
-  //     color = color.replace("rgba(", "").replace(")", "");
-  //     color = color.split(",").map((item) => Number(item));
-  //     this.viewer.options.background = color;
-  //     this.saveLocalConfig();
-  //   }
-  // }
-
-  selectBgImg(index) {
-    console.log(index);
-  }
-
-  selectThemeClick(index) {
-    this.activeThemeIndex = index;
-    let theme = this.themeValList[index];
-    this.viewer.options.theme = theme;
-    this.saveLocalConfig();
-
-    // window.document.documentElement.setAttribute("data-theme", theme);
-  }
-
-  handleTheme(val) {
-    // this.theme = val;
-    // window.document.documentElement.setAttribute("data-theme", val);
-  }
-
-  selectMapping(index) {
-    console.log(index);
-    this.activeMapping = index;
-  }
-
-  // 恢复默认设置
-  resetConfigClick() {
-    this.maxMemorySize_GB = 4; // 恢复最大显存值
-    let paramOptions = localStorage.getItem(this.viewer.container.id + "-paramOptions");
-    console.log(" paramOptions", paramOptions);
-    traverseConfig(this.viewer.options, defaultViewerOptions);
-    if (paramOptions) {
-      traverseConfig(this.viewer.options, JSON.parse(paramOptions));
-
-      console.log("this.viewer.options", this.viewer.options);
-    }
-    this.viewer.options.isShowLoading = false;
-    this.saveLocalConfig();
-
-    this.rightClickMenu = this.viewer.options.components.contextMenu.visible;
-    this.frameRateClickMenu = this.viewer.options.components.frameRate.visible;
-    this.mouseHabits = this.viewer.options.events.lButtonState === LButtonState.select ? "right" : "left";
-    this.reverseMouseWheelDirection = !this.viewer.options.events.mouseWheelDirection;
-
-    this.intensity = this.viewer.options.displayEffect.intensity;
-    // this.showBorder = this.viewer.options.displayEffect.showBorder;
-    this.moveSpeed = this.viewer.options.moveSpeed;
-    this.screenError = this.viewer.options.screenError;
-    this.currentProjectionType = this.viewer.options.projectionType;
-
-    this.measureAccuracy = this.viewer.options.measureAccuracy;
-    this.viewer.measureManager.measureObjects.render();
-
-    this.viewer.sceneOptions.skyBox.type = defaultSceneOptions.skyBox.type;
-  }
-
-  uploadFileChange() {
-    this.showAddIcon = false;
-    let images: any = (this.$refs.upload as any).files;
-
-    let reader = new FileReader();
-    reader.readAsDataURL(images[0]);
-    reader.onload = (e) => {
-      this.imageUrl = (e.target as any).result;
-      this.viewer.options.background = this.imageUrl;
-      this.saveLocalConfig();
-      this.activeBgIndex = this.bgList.length + this.skyboxList.length;
-    };
-  }
-  projectionTypeChange(val) {
-    this.viewer.options.projectionType = val;
-    this.saveLocalConfig();
-  }
-
-  moveSpeedChange(val) {
-    this.viewer.options.moveSpeed = val;
-    this.saveLocalConfig();
-  }
-
-  screenErrorChange(val) {
-    this.viewer.options.screenError = val;
-    this.saveLocalConfig();
-  }
-
-  accuracyChange(val) {
-    // console.log("accuracyChange setting");
-    this.viewer.options.measureAccuracy = val;
-    this.saveLocalConfig();
-    this.viewer.measureManager.measureObjects.render();
-  }
-
-  maxMemorySizeChange(val) {
-    Process.maxMemorySize_GB = val;
-  }
-
-  saveLocalConfig() {
-    // localStorage.setItem(this.viewer.container.id + "-localOptions", JSON.stringify(this.viewer.options));
-    this.viewer.panelManager.getPanelByName<SettingPanel>("SettingPanel").saveLocalConfig();
-  }
-
-  setData() {
-    this.$emit("setData", {
-      icon: "a-shezhi1x",
-      title: "设置",
-      bottom: "10px",
-      right: "10px",
-      width: "340px",
-    });
-  }
-
-  mounted() {
-    this.setData();
-    this.activeName = "first";
-    try {
-      let optionsStr = localStorage.getItem(this.viewer.container.id + "-localOptions");
-      if (optionsStr) {
-        let options = JSON.parse(optionsStr);
-        if (options) {
-          let currentTheme = options?.theme;
-          if (currentTheme) {
-            for (let i = 0; i < this.themeValList.length; i++) {
-              if (currentTheme == this.themeValList[i]) {
-                this.activeThemeIndex = i;
-                break;
-              }
-            }
-          }
-        }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-
-    // let skyboxEffectConfig = new BimAir.Animation.SkyboxEffectConfig(
-    //   this.viewer
-    // );
-    // let skyboxEffect = new BimAir.Animation.SkyboxEffect(skyboxEffectConfig);
-    // skyboxEffect.createSkybox();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../../assets/scss/site";
-@import "../../../assets/theme/handle.scss";
-.showSetting {
-  height: 100%;
-  font-size: 14px;
-  .el-row {
-    line-height: 36px;
-    .el-col:nth-child(2) {
-      text-align: left;
-    }
-  }
-  .bottom {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px;
-    border-top: 1px solid #aaa;
-    // background: $gs-primary-background;
-  }
-  .bgList,
-  .themeList {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 36px;
-    div {
-      width: 36px;
-      height: 26px;
-      margin-right: 8px;
-      // border: 1px;
-      /* 背景图垂直、水平均居中 */
-      background-position: center center;
-      /* 背景图不平铺 */
-      background-repeat: no-repeat;
-      /* 让背景图基于容器大小伸缩 */
-      background-size: cover;
-      cursor: pointer;
-    }
-
-    img {
-      width: 32px;
-      height: 32px;
-      padding: 2px;
-      border: 1px solid transparent;
-      border-radius: 5px;
-      margin: 0 2px 2px 0;
-      cursor: pointer;
-    }
-  }
-  .bgImgList {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 36px;
-    .bgImg {
-      width: 38px;
-      height: 28px;
-      padding: 1px;
-      margin-right: 8px;
-      cursor: pointer;
-    }
-  }
-}
-:deep(.el-tabs) {
-  height: calc(100% - 49px);
-  overflow: auto;
-  .el-tabs__nav {
-    width: 100%;
-  }
-  .el-tabs__active-bar {
-    width: 33.3% !important;
-    background-color: $gs-primary-active;
-  }
-  .el-tabs__item {
-    padding: 0;
-    width: 33.3%;
-    color: $gs-primary-fontColor;
-  }
-  .el-tabs__item.is-active {
-    color: $gs-primary-active;
-  }
-}
-:deep(.el-select) {
-  width: 80%;
-}
-:deep(.el-radio) {
-  color: $gs-primary-fontColor;
-  .el-radio__input.is-checked .el-radio__inner {
-    border-color: $gs-primary-active;
-    background: $gs-primary-active;
-  }
-  .el-radio__input.is-checked .el-radio__label {
-    color: $gs-primary-active;
-  }
-}
-:deep(.el-checkbox__label) {
-  color: $gs-primary-fontColor;
-}
-:deep(.el-slider__runway) {
-  width: 80%;
-  height: 6px;
-  margin: 8px 0;
-  .el-slider__marks-text {
-    margin-top: 2px;
-  }
-  .el-slider__button {
-    width: 10px;
-    height: 10px;
-  }
-}
-:deep(.el-collapse) {
-  border: none;
-  .el-collapse-item__header {
-    height: 37px;
-    line-height: 37px;
-    justify-content: flex-end;
-    background-color: transparent;
-    color: $gs-primary-fontColor;
-    border-bottom: none;
-    padding-right: 10px;
-  }
-  .el-collapse-item__arrow {
-    margin: 0 8px;
-  }
-  .el-collapse-item__wrap {
-    background: transparent;
-  }
-  .el-collapse-item__content {
-    padding-bottom: 0px;
-    font-size: 13px;
-    color: $gs-primary-fontColor;
-    line-height: 1.7692307692;
-    // background: $gs-primary-background2;
-  }
-}
-.el-button--text {
-  color: $gs-primary-active;
-}
-.el-slider__bar {
-  background-color: $gs-primary-active;
-}
-.el-slider__button {
-  border-color: $gs-primary-active;
-}
-.upload-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border: 1px solid #999;
-  cursor: pointer;
-  i {
-    padding: 5px 10px;
-  }
-}
-
-:deep(.el-color-picker) {
-  .el-color-picker__trigger {
-    border: 1px solid #999;
-    border-radius: 0;
-    width: 38px;
-    height: 28px;
-  }
-}
-:deep(input::-webkit-outer-spin-button),
-:deep(input::-webkit-inner-spin-button) {
-  -webkit-appearance: none !important;
-}
-</style>