Signed-off-by: 吴文峰 <kevin@lmve.net>
This commit is contained in:
Generated
+18
@@ -8,6 +8,17 @@
|
||||
"name": "ops_vue_js",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@cropper/element": "^2.1.0",
|
||||
"@cropper/element-canvas": "^2.1.0",
|
||||
"@cropper/element-crosshair": "^2.1.0",
|
||||
"@cropper/element-grid": "^2.1.0",
|
||||
"@cropper/element-handle": "^2.1.0",
|
||||
"@cropper/element-image": "^2.1.0",
|
||||
"@cropper/element-selection": "^2.1.0",
|
||||
"@cropper/element-shade": "^2.1.0",
|
||||
"@cropper/element-viewer": "^2.1.0",
|
||||
"@cropper/elements": "^2.1.0",
|
||||
"@cropper/utils": "^2.1.0",
|
||||
"@fullcalendar/core": "^6.1.19",
|
||||
"@fullcalendar/daygrid": "^6.1.19",
|
||||
"@fullcalendar/interaction": "^6.1.19",
|
||||
@@ -67,6 +78,7 @@
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@@ -1065,6 +1077,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz",
|
||||
"integrity": "sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"preact": "~10.12.1"
|
||||
}
|
||||
@@ -1533,6 +1546,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
@@ -2260,6 +2274,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.19",
|
||||
"caniuse-lite": "^1.0.30001751",
|
||||
@@ -3404,6 +3419,7 @@
|
||||
"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@bufbuild/protobuf": "^2.5.0",
|
||||
"buffer-builder": "^0.2.0",
|
||||
@@ -3950,6 +3966,7 @@
|
||||
"integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
@@ -4128,6 +4145,7 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
|
||||
"integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.24",
|
||||
"@vue/compiler-sfc": "3.5.24",
|
||||
|
||||
@@ -12,6 +12,17 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cropper/element": "^2.1.0",
|
||||
"@cropper/element-canvas": "^2.1.0",
|
||||
"@cropper/element-crosshair": "^2.1.0",
|
||||
"@cropper/element-grid": "^2.1.0",
|
||||
"@cropper/element-handle": "^2.1.0",
|
||||
"@cropper/element-image": "^2.1.0",
|
||||
"@cropper/element-selection": "^2.1.0",
|
||||
"@cropper/element-shade": "^2.1.0",
|
||||
"@cropper/element-viewer": "^2.1.0",
|
||||
"@cropper/elements": "^2.1.0",
|
||||
"@cropper/utils": "^2.1.0",
|
||||
"@fullcalendar/core": "^6.1.19",
|
||||
"@fullcalendar/daygrid": "^6.1.19",
|
||||
"@fullcalendar/interaction": "^6.1.19",
|
||||
|
||||
@@ -1,297 +1,56 @@
|
||||
<script setup>
|
||||
|
||||
|
||||
import { Modal } from "@tabler/core";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
import "@/libs/cropper.min.js"
|
||||
import Cropper from 'cropperjs';
|
||||
|
||||
|
||||
const avata_toolt=ref()
|
||||
const image = new Image();
|
||||
image.src = "https://wnfed.com/usr/uploads/2020/07/736937178.jpg";
|
||||
image.alt = 'Picture';
|
||||
|
||||
const avatar_toolt_moda=ref()
|
||||
const imagecroppert=ref()
|
||||
|
||||
const cropper=ref()
|
||||
const cropper = ref(null);
|
||||
|
||||
const image = document.getElementById('cropper-image');
|
||||
// 初始化Cropper
|
||||
function initCropper(imageSrc) {
|
||||
if (cropper.value) {
|
||||
cropper.value.destroy();
|
||||
}
|
||||
|
||||
image.src = imageSrc;
|
||||
cropper.value = new Cropper(image, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 2,
|
||||
autoCropArea: 0.8,
|
||||
zoomable: true,
|
||||
zoomOnWheel: true,
|
||||
zoomOnTouch: true,
|
||||
wheelZoomRatio: 0.1,
|
||||
//minCanvasWidth: 400,
|
||||
//minCanvasHeight: 400,
|
||||
crop: updatePreview,
|
||||
ready() {
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function inputfile(e){
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
showMessage('⚠️ 请选择有效的图片文件', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
initCropper(reader.result);
|
||||
currentScale = 1;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
//console.log(avata_toolt)
|
||||
avatar_toolt_moda.value=new Modal(avata_toolt.value)
|
||||
avatar_toolt_moda.value.show()
|
||||
})
|
||||
|
||||
cropper.value = new Cropper(image, {
|
||||
container: imagecroppert.value,
|
||||
aspectRatio: 1,
|
||||
viewMode: 2,
|
||||
|
||||
|
||||
});
|
||||
|
||||
//cropper.value.
|
||||
console.log(cropper.value)
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="modal modal-blur fade" ref="avata_toolt" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="container">
|
||||
<h1>头像裁剪工具</h1>
|
||||
<div class="cropper-container" ref="imagecroppert"></div>
|
||||
|
||||
<div class="flex-wrapper">
|
||||
<!-- 左侧裁剪区 -->
|
||||
<div class="crop-section">
|
||||
<div id="image-wrapper">
|
||||
<img id="cropper-image"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
<!-- 上传进度 -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<!-- 消息提示 -->
|
||||
<div id="message" class="alertavater"></div>
|
||||
|
||||
<div class="preview-stats">
|
||||
<!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
|
||||
<p>图片尺寸: <span id="imageSize">0 x 0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧预览区 -->
|
||||
<div class="preview-section">
|
||||
<h3>实时预览</h3>
|
||||
<div class="preview-box">
|
||||
<img id="preview-img"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<label class="btn btn-primary">
|
||||
📁 选择图片
|
||||
<input type="file" accept="image/*" @change="inputfile">
|
||||
</label>
|
||||
<button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
|
||||
<button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
|
||||
|
||||
<button class="btn btn-danger " style="margin-top: 150px;" onclick="avatar_toolt.hide()">❌ 取消</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 头像裁剪器样式*/
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
/* 改为百分比宽度 */
|
||||
margin: 20px auto;
|
||||
/* 增加上下边距 */
|
||||
max-width: 1200px;
|
||||
/* 保留最大宽度 */
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
<style lang="scss" scoped>
|
||||
.cropper-container {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
|
||||
:deep(cropper-canvas) {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.flex-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
/* 添加换行支持 */
|
||||
}
|
||||
|
||||
/* 裁剪区域 */
|
||||
.crop-section {
|
||||
flex: 1 1 60%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 300px;
|
||||
/* 降低最小宽度 */
|
||||
height: auto;
|
||||
/* 移除固定高度 */
|
||||
min-height: 400px;
|
||||
/* 设置最小高度 */
|
||||
}
|
||||
|
||||
#image-wrapper {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
/* 改用视窗单位 */
|
||||
max-height: 600px;
|
||||
/* 设置最大高度 */
|
||||
background: #f8f9fa;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 预览区域自适应 */
|
||||
.preview-section {
|
||||
flex: 1 1 35%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 250px;
|
||||
/* 设置合理最小宽度 */
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
/* 减少内边距 */
|
||||
}
|
||||
|
||||
.flex-wrapper {
|
||||
flex-direction: column;
|
||||
/* 垂直排列 */
|
||||
}
|
||||
|
||||
.crop-section,
|
||||
.preview-section {
|
||||
width: 100% !important;
|
||||
/* 强制全宽 */
|
||||
min-width: unset;
|
||||
/* 移除最小宽度 */
|
||||
}
|
||||
|
||||
#image-wrapper {
|
||||
height: 50vh;
|
||||
/* 调整移动端高度 */
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 120px;
|
||||
/* 缩小预览区域 */
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
/* 垂直排列按钮 */
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#cropper-image {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* 控制区域 */
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 预览区域 */
|
||||
.preview-section {
|
||||
flex: 1;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* border-radius: 50%; */
|
||||
border: 3px solid var(--primary-color);
|
||||
overflow: hidden;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
#preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 上传进度 */
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 消息提示 */
|
||||
.alertavater {
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alertavater-success {
|
||||
background: #dff0d8;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.alertavater-error {
|
||||
background: #f2dede;
|
||||
color: var(--error-color);
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<script setup>
|
||||
|
||||
import { Modal } from "@tabler/core";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
import "@/libs/cropper.min.js"
|
||||
|
||||
|
||||
const avata_toolt=ref()
|
||||
|
||||
const avatar_toolt_moda=ref()
|
||||
|
||||
const cropper=ref()
|
||||
|
||||
const image = document.getElementById('cropper-image');
|
||||
// 初始化Cropper
|
||||
function initCropper(imageSrc) {
|
||||
if (cropper.value) {
|
||||
cropper.value.destroy();
|
||||
}
|
||||
|
||||
image.src = imageSrc;
|
||||
cropper.value = new Cropper(image, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 2,
|
||||
autoCropArea: 0.8,
|
||||
zoomable: true,
|
||||
zoomOnWheel: true,
|
||||
zoomOnTouch: true,
|
||||
wheelZoomRatio: 0.1,
|
||||
//minCanvasWidth: 400,
|
||||
//minCanvasHeight: 400,
|
||||
crop: updatePreview,
|
||||
ready() {
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function inputfile(e){
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
showMessage('⚠️ 请选择有效的图片文件', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
initCropper(reader.result);
|
||||
currentScale = 1;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
//console.log(avata_toolt)
|
||||
avatar_toolt_moda.value=new Modal(avata_toolt.value)
|
||||
avatar_toolt_moda.value.show()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="modal modal-blur fade" ref="avata_toolt" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="container">
|
||||
<h1>头像裁剪工具</h1>
|
||||
|
||||
<div class="flex-wrapper">
|
||||
<!-- 左侧裁剪区 -->
|
||||
<div class="crop-section">
|
||||
<div id="image-wrapper">
|
||||
<img id="cropper-image"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
<!-- 上传进度 -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<!-- 消息提示 -->
|
||||
<div id="message" class="alertavater"></div>
|
||||
|
||||
<div class="preview-stats">
|
||||
<!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
|
||||
<p>图片尺寸: <span id="imageSize">0 x 0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧预览区 -->
|
||||
<div class="preview-section">
|
||||
<h3>实时预览</h3>
|
||||
<div class="preview-box">
|
||||
<img id="preview-img"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<label class="btn btn-primary">
|
||||
📁 选择图片
|
||||
<input type="file" accept="image/*" @change="inputfile">
|
||||
</label>
|
||||
<button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
|
||||
<button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
|
||||
|
||||
<button class="btn btn-danger " style="margin-top: 150px;" onclick="avatar_toolt.hide()">❌ 取消</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 头像裁剪器样式*/
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
/* 改为百分比宽度 */
|
||||
margin: 20px auto;
|
||||
/* 增加上下边距 */
|
||||
max-width: 1200px;
|
||||
/* 保留最大宽度 */
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
|
||||
}
|
||||
|
||||
.flex-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
/* 添加换行支持 */
|
||||
}
|
||||
|
||||
/* 裁剪区域 */
|
||||
.crop-section {
|
||||
flex: 1 1 60%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 300px;
|
||||
/* 降低最小宽度 */
|
||||
height: auto;
|
||||
/* 移除固定高度 */
|
||||
min-height: 400px;
|
||||
/* 设置最小高度 */
|
||||
}
|
||||
|
||||
#image-wrapper {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
/* 改用视窗单位 */
|
||||
max-height: 600px;
|
||||
/* 设置最大高度 */
|
||||
background: #f8f9fa;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 预览区域自适应 */
|
||||
.preview-section {
|
||||
flex: 1 1 35%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 250px;
|
||||
/* 设置合理最小宽度 */
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
/* 减少内边距 */
|
||||
}
|
||||
|
||||
.flex-wrapper {
|
||||
flex-direction: column;
|
||||
/* 垂直排列 */
|
||||
}
|
||||
|
||||
.crop-section,
|
||||
.preview-section {
|
||||
width: 100% !important;
|
||||
/* 强制全宽 */
|
||||
min-width: unset;
|
||||
/* 移除最小宽度 */
|
||||
}
|
||||
|
||||
#image-wrapper {
|
||||
height: 50vh;
|
||||
/* 调整移动端高度 */
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 120px;
|
||||
/* 缩小预览区域 */
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
/* 垂直排列按钮 */
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#cropper-image {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* 控制区域 */
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 预览区域 */
|
||||
.preview-section {
|
||||
flex: 1;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* border-radius: 50%; */
|
||||
border: 3px solid var(--primary-color);
|
||||
overflow: hidden;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
#preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 上传进度 */
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 消息提示 */
|
||||
.alertavater {
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alertavater-success {
|
||||
background: #dff0d8;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.alertavater-error {
|
||||
background: #f2dede;
|
||||
color: var(--error-color);
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -5,6 +5,8 @@ import imageCropper from '@/components/imageCropper.vue';
|
||||
|
||||
import croppertest from '@/components/croppertest.vue';
|
||||
|
||||
import imageCropperComponent from '@/components/imageCropperComponent.vue';
|
||||
|
||||
const user = useUserStore()
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user