Merge remote-tracking branch 'origin/wuhuyancao' into wuhuyancao

doum

2025-10-15 2b287056e2f59518888d05a1bbc7e5a55fbd84d5

 admin/src/components/common/ImageCropper.vue

@@ -13,13 +13,13 @@
              :canMove="options.canMove"
              :output-size="options.outputSize"
              :centerBox="options.centerBox"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
              :autoCropWidth="autoCrop.width || options.autoCropWidth"
              :autoCropHeight="autoCrop.height || options.autoCropHeight"
              @realTime="realTime"
          ></vue-cropper>
        </div>
        <div class="previews">
          <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
          <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
        </div>
      </div>
    </div>
@@ -28,7 +28,7 @@

<script>
import { VueCropper } from 'vue-cropper'
import {upload} from "@/api/system/common";
import { upload } from '@/api/system/common'
export default {
  name: 'ImageCropper',
  components: { VueCropper },
@@ -36,6 +36,12 @@
    imgSrc: {
      type: String,
      default: ''
    },
    autoCrop: {
      type: Object,
      default () {
        return { width: 500, height: 500 }
      }
    },
    // 回显上次保存的截图的位置
    location: {
@@ -74,11 +80,11 @@
        autoCrop: true,
        canMove: false,
        centerBox: true,
        height: 300,
        width: 300,
        outputSize:{width: 300, height: 300},
        autoCropWidth: 300,
        autoCropHeight: 300,
        height: 500,
        width: 500,
        outputSize: 1,
        autoCropWidth: 500,
        autoCropHeight: 500,
        fixed: true,
        fixedNumber: [1, 1]
      },
@@ -94,8 +100,8 @@
  watch: {
  },
  methods: {
    getImagecropper(){
      return  this.$refs.cropper
    getImagecropper () {
      return this.$refs.cropper
    },
    // 学习截图框变化事件
    realTime (data) {
@@ -171,10 +177,12 @@
.iconShot {
  .icon-dialog {
    .clip {
      display: flex;
      .img {
        height: 400px;
        flex: 7.5;
        height: 500px;
        //float: left;
        // display: inline-block;

        .vue-cropper {
          background-image: none;
        }
@@ -187,13 +195,15 @@

      }
      .previews {
        width: 100%;
        height: 100px;
        position: relative;
        //width: 100px;
        flex: 2.5;
        //float: right;
        height: 200px;
        //position: relative;
        >img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          //position: absolute;
          //left: 50%;
          transform: translate(35%, 50px);
          max-height: 100%;
        }
      }