!604 修复小屏幕上修改头像界面布局错位的问题

Merge pull request !604 from 也曾为你、像超人/master

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -250,9 +250,10 @@
 }
 
 .avatar-upload-preview {
-	position: absolute;
+	position: relative;
 	top: 50%;
-	transform: translate(50%, -50%);
+	left: 50%;
+	transform: translate(-50%, -50%);
 	width: 200px;
 	height: 200px;
 	border-radius: 50%;

ruoyi-ui/src/views/system/user/profile/userAvatar.vue

@@ -24,7 +24,7 @@
       </el-row>
       <br />
       <el-row>
-        <el-col :lg="2" :md="2">
+        <el-col :lg="2" :sm="3" :xs="3">
           <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
             <el-button size="small">
               选择
@@ -32,19 +32,19 @@
             </el-button>
           </el-upload>
         </el-col>
-        <el-col :lg="{span: 1, offset: 2}" :md="2">
+        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
           <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
         </el-col>
-        <el-col :lg="{span: 2, offset: 6}" :md="2">
+        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
           <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
         </el-col>
       </el-row>
@@ -56,6 +56,7 @@
 import store from "@/store";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
+import { debounce } from '@/utils'
 
 export default {
   components: { VueCropper },
@@ -79,7 +80,8 @@ export default {
         autoCropHeight: 200, // 默认生成截图框高度
         fixedBox: true // 固定截图框大小 不允许改变
       },
-      previews: {}
+      previews: {},
+      resizeHandler: null
     };
   },
   methods: {
@@ -90,6 +92,16 @@ export default {
     // 打开弹出层结束时的回调
     modalOpened() {
       this.visible = true;
+      if (!this.resizeHandler) {
+        this.resizeHandler = debounce(() => {
+          this.refresh()
+        }, 100)
+      }
+      window.addEventListener("resize", this.resizeHandler)
+    },
+    // 刷新组件
+    refresh() {
+      this.$refs.cropper.refresh();
     },
     // 覆盖默认的上传行为
     requestUpload() {
@@ -141,6 +153,7 @@ export default {
     closeDialog() {
       this.options.img = store.getters.avatar
       this.visible = false;
+      window.removeEventListener("resize", this.resizeHandler)
     }
   }
 };