Skip to content
GitLab
"ve-admin/vscode:/vscode.git/clone" did not exist on "71dd8c4480676ceeb99a130c2ad4c2cedaf6e62a"
Unverified Commit b67f6a0f authored by 若依's avatar 若依 Committed by Gitee
Browse files

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

Merge pull request !604 from 也曾为你、像超人/master
parents 42d81045 b6153d1a
Hide whitespace changes
Inline Side-by-side
ruoyi-ui/src/assets/styles/ruoyi.scss
View file @ b67f6a0f
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 { .pr5 {
padding-right: 5px; padding-right: 5px;
} }
.pb5 { .pb5 {
padding-bottom: 5px; padding-bottom: 5px;
} }
.mt5 { .mt5 {
margin-top: 5px; margin-top: 5px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mb5 { .mb5 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mb8 { .mb8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml5 { .ml5 {
margin-left: 5px; margin-left: 5px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
line-height: 1.1; line-height: 1.1;
color: inherit; color: inherit;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 70vh; max-height: 70vh;
padding: 10px 20px 0; padding: 10px 20px 0;
} }
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { th {
word-break: break-word; word-break: break-word;
background-color: #f8f8f9; background-color: #f8f8f9;
color: #515a6e; color: #515a6e;
height: 40px; height: 40px;
font-size: 13px; font-size: 13px;
} }
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-button [class*="el-icon-"] + span { .el-button [class*="el-icon-"] + span {
margin-left: 1px; margin-left: 1px;
} }
} }
} }
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size:15px; font-size:15px;
color:#6379bb; color:#6379bb;
border-bottom:1px solid #ddd; border-bottom:1px solid #ddd;
margin:8px 10px 25px 10px; margin:8px 10px 25px 10px;
padding-bottom:5px padding-bottom:5px
} }
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { .pagination-container {
position: relative; position: relative;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
padding: 10px 20px !important; padding: 10px 20px !important;
} }
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #FFFFFF none; background: #FFFFFF none;
border-radius:4px; border-radius:4px;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; position: absolute;
} }
@media ( max-width : 768px) { @media ( max-width : 768px) {
.pagination-container .el-pagination > .el-pagination__jump { .pagination-container .el-pagination > .el-pagination__jump {
display: none !important; display: none !important;
} }
.pagination-container .el-pagination > .el-pagination__sizes { .pagination-container .el-pagination > .el-pagination__sizes {
display: none !important; display: none !important;
} }
} }
.el-table .fixed-width .el-button--mini { .el-table .fixed-width .el-button--mini {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
width: inherit; width: inherit;
} }
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link { .el-table .el-dropdown-link {
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409EFF;
margin-left: 5px; margin-left: 5px;
} }
.el-table .el-dropdown, .el-icon-arrow-down { .el-table .el-dropdown, .el-icon-arrow-down {
font-size: 12px; font-size: 12px;
} }
.el-tree-node__content > .el-checkbox { .el-tree-node__content > .el-checkbox {
margin-right: 8px; margin-right: 8px;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 14px 15px 7px;
min-height: 40px; min-height: 40px;
} }
.el-card__body { .el-card__body {
padding: 15px 20px 20px 20px; padding: 15px 20px 20px 20px;
} }
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20B2AA; background: #20B2AA;
border-color: #20B2AA; border-color: #20B2AA;
color: #FFFFFF; color: #FFFFFF;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48D1CC; background: #48D1CC;
border-color: #48D1CC; border-color: #48D1CC;
color: #FFFFFF; color: #FFFFFF;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20B2AA; background-color: #20B2AA;
border-color: #20B2AA; border-color: #20B2AA;
color: #FFFFFF; color: #FFFFFF;
} }
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
} }
.text-primary { .text-primary {
color: inherit; color: inherit;
} }
.text-success { .text-success {
color: #1c84c6; color: #1c84c6;
} }
.text-info { .text-info {
color: #23c6c8; color: #23c6c8;
} }
.text-warning { .text-warning {
color: #f8ac59; color: #f8ac59;
} }
.text-danger { .text-danger {
color: #ed5565; color: #ed5565;
} }
.text-muted { .text-muted {
color: #888888; color: #888888;
} }
/* image */ /* image */
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.img-lg { .img-lg {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.avatar-upload-preview { .avatar-upload-preview {
position: absolute; position: relative;
top: 50%; top: 50%;
transform: translate(50%, -50%); left: 50%;
width: 200px; transform: translate(-50%, -50%);
height: 200px; width: 200px;
border-radius: 50%; height: 200px;
box-shadow: 0 0 4px #ccc; border-radius: 50%;
overflow: hidden; box-shadow: 0 0 4px #ccc;
} overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost{ /* 拖拽列样式 */
opacity: .8; .sortable-ghost{
color: #fff!important; opacity: .8;
background: #42b983!important; color: #fff!important;
} background: #42b983!important;
}
.top-right-btn {
position: relative; .top-right-btn {
float: right; position: relative;
} float: right;
}
ruoyi-ui/src/views/system/user/profile/userAvatar.vue
View file @ b67f6a0f
<template> <template>
<div> <div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper <vue-cropper
ref="cropper" ref="cropper"
:img="options.img" :img="options.img"
:info="true" :info="true"
:autoCrop="options.autoCrop" :autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth" :autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight" :autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox" :fixedBox="options.fixedBox"
@realTime="realTime" @realTime="realTime"
v-if="visible" v-if="visible"
/> />
</el-col> </el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview"> <div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" /> <img :src="previews.url" :style="previews.img" />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row> <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-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small"> <el-button size="small">
选择 选择
<i class="el-icon-upload el-icon--right"></i> <i class="el-icon-upload el-icon--right"></i>
</el-button> </el-button>
</el-upload> </el-upload>
</el-col> </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-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col> </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-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col> </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-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col> </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-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col> </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-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import store from "@/store"; import store from "@/store";
import { VueCropper } from "vue-cropper"; import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user"; import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'
export default {
components: { VueCropper }, export default {
props: { components: { VueCropper },
user: { props: {
type: Object user: {
} type: Object
}, }
data() { },
return { data() {
// 是否显示弹出层 return {
open: false, // 是否显示弹出层
// 是否显示cropper open: false,
visible: false, // 是否显示cropper
// 弹出层标题 visible: false,
title: "修改头像", // 弹出层标题
options: { title: "修改头像",
img: store.getters.avatar, //裁剪图片的地址 options: {
autoCrop: true, // 是否默认生成截图框 img: store.getters.avatar, //裁剪图片的地址
autoCropWidth: 200, // 默认生成截图框宽度 autoCrop: true, // 是否默认生成截图框
autoCropHeight: 200, // 默认生成截图框高度 autoCropWidth: 200, // 默认生成截图框宽度
fixedBox: true // 固定截图框大小 不允许改变 autoCropHeight: 200, // 默认生成截图框高度
}, fixedBox: true // 固定截图框大小 不允许改变
previews: {} },
}; previews: {},
}, resizeHandler: null
methods: { };
// 编辑头像 },
editCropper() { methods: {
this.open = true; // 编辑头像
}, editCropper() {
// 打开弹出层结束时的回调 this.open = true;
modalOpened() { },
this.visible = true; // 打开弹出层结束时的回调
}, modalOpened() {
// 覆盖默认的上传行为 this.visible = true;
requestUpload() { if (!this.resizeHandler) {
}, this.resizeHandler = debounce(() => {
// 向左旋转 this.refresh()
rotateLeft() { }, 100)
this.$refs.cropper.rotateLeft(); }
}, window.addEventListener("resize", this.resizeHandler)
// 向右旋转 },
rotateRight() { // 刷新组件
this.$refs.cropper.rotateRight(); refresh() {
}, this.$refs.cropper.refresh();
// 图片缩放 },
changeScale(num) { // 覆盖默认的上传行为
num = num || 1; requestUpload() {
this.$refs.cropper.changeScale(num); },
}, // 向左旋转
// 上传预处理 rotateLeft() {
beforeUpload(file) { this.$refs.cropper.rotateLeft();
if (file.type.indexOf("image/") == -1) { },
this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"); // 向右旋转
} else { rotateRight() {
const reader = new FileReader(); this.$refs.cropper.rotateRight();
reader.readAsDataURL(file); },
reader.onload = () => { // 图片缩放
this.options.img = reader.result; changeScale(num) {
}; num = num || 1;
} this.$refs.cropper.changeScale(num);
}, },
// 上传图片 // 上传预处理
uploadImg() { beforeUpload(file) {
this.$refs.cropper.getCropBlob(data => { if (file.type.indexOf("image/") == -1) {
let formData = new FormData(); this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
formData.append("avatarfile", data); } else {
uploadAvatar(formData).then(response => { const reader = new FileReader();
this.open = false; reader.readAsDataURL(file);
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; reader.onload = () => {
store.commit('SET_AVATAR', this.options.img); this.options.img = reader.result;
this.$modal.msgSuccess("修改成功"); };
this.visible = false; }
}); },
}); // 上传图片
}, uploadImg() {
// 实时预览 this.$refs.cropper.getCropBlob(data => {
realTime(data) { let formData = new FormData();
this.previews = data; formData.append("avatarfile", data);
}, uploadAvatar(formData).then(response => {
// 关闭窗口 this.open = false;
closeDialog() { this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
this.options.img = store.getters.avatar store.commit('SET_AVATAR', this.options.img);
this.visible = false; this.$modal.msgSuccess("修改成功");
} this.visible = false;
} });
}; });
</script> },
<style scoped lang="scss"> // 实时预览
.user-info-head { realTime(data) {
position: relative; this.previews = data;
display: inline-block; },
height: 120px; // 关闭窗口
} closeDialog() {
this.options.img = store.getters.avatar
.user-info-head:hover:after { this.visible = false;
content: '+'; window.removeEventListener("resize", this.resizeHandler)
position: absolute; }
left: 0; }
right: 0; };
top: 0; </script>
bottom: 0; <style scoped lang="scss">
color: #eee; .user-info-head {
background: rgba(0, 0, 0, 0.5); position: relative;
font-size: 24px; display: inline-block;
font-style: normal; height: 120px;
-webkit-font-smoothing: antialiased; }
-moz-osx-font-smoothing: grayscale;
cursor: pointer; .user-info-head:hover:after {
line-height: 110px; content: '+';
border-radius: 50%; position: absolute;
} left: 0;
</style> right: 0;
\ No newline at end of file top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment