调整自动登录的样式效果

src/components/JsonEditor.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="container">
+  <div :class="loginType == 'AUTO' ? 'container-auto': 'container'">
     <JsonEditorVue
       v-model="localData"
       :mode="'code'"
       @update:modelValue="onJsonChange"
     />
   </div>
-  <div class="btn-box">
+  <div :class="loginType == 'AUTO' ? 'btn-box-auto': 'btn-box'">
     <span style="padding: 0 10px;" @click="copyJson"><span class="btn-text">复制</span></span>
     <span style="padding: 0 10px;" @click="saveJson"><span class="btn-text">保存</span></span>
     <span style="padding: 0 10px;" @click="closeJson"><span class="btn-text">关闭</span></span>
@@ -30,7 +30,8 @@
     data() {
       return {
         hasJsonFlag:true,  // json是否验证通过
-        localData: this.editDataList
+        localData: this.editDataList,
+        loginType: sessionStorage.getItem("gisLoginType") || '',
       }
     },
     watch: {
@@ -154,6 +155,15 @@
   background: #fff;
   transition: left 0.5s ease; /* 添加过渡效果 */
 }
+.container-auto{
+   position: fixed;
+    width: 500px;
+    top: 12px;
+    right: 0px;
+    z-index: 9999;
+    background: #fff;
+    transition: left 0.5s ease; /* 添加过渡效果 */
+}
 .btn-box{
   position: fixed;
   top: 72px;
@@ -172,6 +182,24 @@
     }
   }
 }
+.btn-box-auto{
+  position: fixed;
+  top: 12px;
+  height: 32px;
+  line-height: 30px;
+  cursor: pointer;
+  right: 10px;
+  color: #fff;
+  z-index: 9999;
+  transition: left 0.5s ease;
+  display: flex;
+  justify-content: space-between;
+  >span{
+    &:hover{
+      background: #e2f4f83d;
+    }
+  }
+}
 // .btn-text{
 //   font-size: 12px;
 //   // padding: 2px;