diff --git a/frontent/ops_vue_js/package-lock.json b/frontent/ops_vue_js/package-lock.json
index 2d8e6b6..c3b98da 100644
--- a/frontent/ops_vue_js/package-lock.json
+++ b/frontent/ops_vue_js/package-lock.json
@@ -67,7 +67,6 @@
       "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",
@@ -1066,7 +1065,6 @@
       "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"
       }
@@ -1535,7 +1533,6 @@
       "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"
@@ -2263,7 +2260,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -3408,7 +3404,6 @@
       "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",
@@ -3955,7 +3950,6 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4134,7 +4128,6 @@
       "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",
diff --git a/frontent/ops_vue_js/src/components/HeardMain.vue b/frontent/ops_vue_js/src/components/HeardMain.vue
index c39b319..15132c7 100644
--- a/frontent/ops_vue_js/src/components/HeardMain.vue
+++ b/frontent/ops_vue_js/src/components/HeardMain.vue
@@ -292,6 +292,17 @@ onMounted(() => {
                     {{ t("appname.schedule") }}
                   </span>
                 </router-link>
+                
+                <router-link
+                  to="/warehouse"
+                  class="nav-item nav-link"
+                  active-class="active"
+                >
+                  <span class="nav-link-title">
+                    {{ t("appname.warehouse") }}
+                  </span>
+                </router-link>
+
                 <router-link
                   to="/purchase"
                   class="nav-item nav-link"
@@ -301,6 +312,8 @@ onMounted(() => {
                     {{ t("appname.purchase") }}
                   </span>
                 </router-link>
+
+                
               </div>
 
               <div class="ms-auto">
diff --git a/frontent/ops_vue_js/src/components/croppertest.vue b/frontent/ops_vue_js/src/components/croppertest.vue
index d1ec1aa..027b312 100644
--- a/frontent/ops_vue_js/src/components/croppertest.vue
+++ b/frontent/ops_vue_js/src/components/croppertest.vue
@@ -1,3 +1,126 @@
+<script setup>
+import "cropperjs";
+import { computed, ref } from "vue";
+
+const fileObj = ref({});
+
+const croppercanvas = ref();
+const cropperimage = ref();
+const cropperselection = ref();
+
+/**
+ * 选区逻辑
+ */
+// 是否正在开始选区
+const isCropperSelection = ref(false);
+const isCropperMove = ref(true);
+
+//  判断当前是移动还是选区
+const currentType = computed(() => (isCropperMove.value ? "move" : "select"));
+
+/**
+ * 按钮方法
+ */
+// 旋转
+function handleRotate() {
+  cropperimage.value.$rotate("90deg");
+  cropperimage.value.$center("contain");
+}
+// 裁剪
+function handleCropper() {
+  isCropperMove.value = false;
+  if (isCropperMove.value) {
+    cropperselection.value.$clear();
+  } else {
+    const cropperCanvas = croppercanvas.value;
+    const cropperCanvasRect = cropperCanvas.getBoundingClientRect();
+
+    const cropperImage = cropperimage.value;
+    const cropperImageRect = cropperImage.getBoundingClientRect();
+    const maxSelection = {
+      x: cropperImageRect.left - cropperCanvasRect.left,
+      y: cropperImageRect.top - cropperCanvasRect.top,
+      width: cropperImageRect.width,
+      height: cropperImageRect.height,
+    };
+    cropperselection.value.$change(
+      maxSelection.x,
+      maxSelection.y,
+      maxSelection.width,
+      maxSelection.height
+    );
+  }
+}
+// 移动
+function handleMove() {
+  if (!isCropperMove.value) {
+    isCropperMove.value = true;
+    // 如果想要点击移动，清除选区，可以打开下面的代码注释
+    // cropperselection.value.$clear();
+  }
+}
+
+/**
+ * 监听选择区变化
+ * @param event
+ */
+function onCropperSelectionChange(event) {
+  if (event.detail.width && event.detail.height) {
+    isCropperSelection.value = true;
+  } else {
+    isCropperSelection.value = false;
+  }
+}
+
+/**
+ * 确认裁剪
+ */
+const emit = defineEmits(["success"]);
+async function handleConfirm() {
+  if (isCropperSelection.value) {
+    const res = await cropperselection.value.$toCanvas();
+
+    const dataImage = res.toDataURL("image/png");
+    const file = dataURLtoFile(dataImage, fileObj.value.name);
+    emit("success", {
+      ...fileObj.value,
+      file: file,
+      fileShow: dataImage,
+    });
+  }
+}
+// 将data:image转成新的file
+function dataURLtoFile(dataurl, filename) {
+  var arr = dataurl.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  const blob = new Blob([u8arr], { type: mime });
+  const file = new File([blob], filename, { type: mime });
+  return file;
+}
+
+/**
+ * 文件上传
+ */
+const input_form = ref();
+function handleUploadSuccess() {
+  const files = input_form.value.files;
+
+  if (files.length) {
+    fileObj.value = {
+      name: files[0].name,
+      file: files[0],
+      fileShow: URL.createObjectURL(files[0]),
+    };
+  }
+}
+</script>
+
 <template>
   <div class="basic_container">
     <div class="tool_wrap">
@@ -6,7 +129,7 @@
       </button>
       <button @click="handleRotate">旋转</button>
       <button :class="{ active: isCropperSelection }" @click="handleCropper">
-        {{ isCropperSelection ? '重置选区' : '裁剪' }}
+        {{ isCropperSelection ? "重置选区" : "裁剪" }}
       </button>
     </div>
     <div class="dialog_wrap">
@@ -21,6 +144,8 @@
             skewable
             translatable
           ></cropper-image>
+
+          
           <cropper-shade hidden ref="cropperShade"></cropper-shade>
           <cropper-handle :action="currentType" plain></cropper-handle>
           <cropper-selection
@@ -65,129 +190,6 @@
   </div>
 </template>
 
-<script setup>
-import 'cropperjs';
-import { computed, ref } from 'vue';
-
-const fileObj = ref({});
-
-const croppercanvas = ref();
-const cropperimage = ref();
-const cropperselection = ref();
-
-/**
- * 选区逻辑
- */
-// 是否正在开始选区
-const isCropperSelection = ref(false);
-const isCropperMove = ref(true);
-
-//  判断当前是移动还是选区
-const currentType = computed(() => (isCropperMove.value ? 'move' : 'select'));
-
-/**
- * 按钮方法
- */
-// 旋转
-function handleRotate() {
-  cropperimage.value.$rotate('90deg');
-  cropperimage.value.$center('contain');
-}
-// 裁剪
-function handleCropper() {
-  isCropperMove.value = false;
-  if (isCropperMove.value) {
-    cropperselection.value.$clear();
-  } else {
-    const cropperCanvas = croppercanvas.value;
-    const cropperCanvasRect = cropperCanvas.getBoundingClientRect();
-
-    const cropperImage = cropperimage.value;
-    const cropperImageRect = cropperImage.getBoundingClientRect();
-    const maxSelection = {
-      x: cropperImageRect.left - cropperCanvasRect.left,
-      y: cropperImageRect.top - cropperCanvasRect.top,
-      width: cropperImageRect.width,
-      height: cropperImageRect.height,
-    };
-    cropperselection.value.$change(
-      maxSelection.x,
-      maxSelection.y,
-      maxSelection.width,
-      maxSelection.height,
-    );
-  }
-}
-// 移动
-function handleMove() {
-  if (!isCropperMove.value) {
-    isCropperMove.value = true;
-    // 如果想要点击移动，清除选区，可以打开下面的代码注释
-    // cropperselection.value.$clear();
-  }
-}
-
-/**
- * 监听选择区变化
- * @param event
- */
-function onCropperSelectionChange(event) {
-  if (event.detail.width && event.detail.height) {
-    isCropperSelection.value = true;
-  } else {
-    isCropperSelection.value = false;
-  }
-}
-
-/**
- * 确认裁剪
- */
-const emit = defineEmits(['success']);
-async function handleConfirm() {
-  if (isCropperSelection.value) {
-    const res = await cropperselection.value.$toCanvas();
-
-    const dataImage = res.toDataURL('image/png');
-    const file = dataURLtoFile(dataImage, fileObj.value.name);
-    emit('success', {
-      ...fileObj.value,
-      file: file,
-      fileShow: dataImage,
-    });
-  }
-}
-// 将data:image转成新的file
-function dataURLtoFile(dataurl, filename) {
-  var arr = dataurl.split(','),
-    mime = arr[0].match(/:(.*?);/)[1],
-    bstr = atob(arr[1]),
-    n = bstr.length,
-    u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  const blob = new Blob([u8arr], { type: mime });
-  const file = new File([blob], filename, { type: mime });
-  return file;
-}
-
-/**
- * 文件上传
- */
-const input_form = ref();
-function handleUploadSuccess() {
-  const files = input_form.value.files;
-
-  if (files.length) {
-    fileObj.value = {
-      name: files[0].name,
-      file: files[0],
-      fileShow: URL.createObjectURL(files[0]),
-    };
-  }
-}
-</script>
-
 <style scoped>
 .dialog_wrap {
   display: flex;
diff --git a/frontent/ops_vue_js/src/components/imageCropper.vue b/frontent/ops_vue_js/src/components/imageCropper.vue
index b5bb163..250d6a6 100644
--- a/frontent/ops_vue_js/src/components/imageCropper.vue
+++ b/frontent/ops_vue_js/src/components/imageCropper.vue
@@ -1,791 +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="avatar-cropper">
-    <!-- 上传区域 -->
-    <div v-if="!imageSrc" class="upload-area" @click="triggerFileInput">
-      <div class="upload-content">
-        <div class="upload-icon">
-          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h3>点击上传图片</h3>
-        <p>支持 JPG、PNG 格式，建议尺寸 200×200 像素以上</p>
-      </div>
-      <input 
-        ref="fileInput"
-        type="file" 
-        accept="image/*" 
-        @change="handleFileSelect"
-        style="display: none"
-      >
-    </div>
 
-    <!-- 裁剪区域 -->
-    <div v-else class="cropper-container">
-      <div class="cropper-header">
-        <h3>调整头像</h3>
-        <button class="btn-close" @click="reset">×</button>
-      </div>
-      
-      <div class="cropper-content">
-        <!-- 裁剪画布 -->
-        <div class="canvas-wrapper">
-            <div class="canvas-container" ref="canvasContainer">
-              <canvas ref="canvas" class="cropper-canvas"></canvas>
-              <div 
-                class="crop-box"
-                :style="cropBoxStyle"
-                @mousedown="startDrag"
-                @touchstart="startDrag"
-              >
-                <div class="crop-box-handle" v-for="handle in handles" :key="handle.position"
-                  :class="`handle-${handle.position}`"
-                  @mousedown="startResize(handle.position, $event)"
-                  @touchstart="startResize(handle.position, $event)"
-                ></div>
-              </div>
-            </div>
-        </div>
+  <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="preview-section">
-          <div class="preview-container">
-            <div class="preview-item">
-              <h4>圆形预览</h4>
-              <div class="preview-circle">
-                <img v-if="previewUrl" :src="previewUrl" alt="头像预览" class="preview-image">
-                <div v-else class="preview-placeholder">预览</div>
-              </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="preview-item">
-              <h4>方形预览</h4>
-              <div class="preview-square">
-                <img v-if="previewUrl" :src="previewUrl" alt="头像预览" class="preview-image">
-                <div v-else class="preview-placeholder">预览</div>
-              </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 class="control-panel">
-        <div class="control-group">
-          <label>缩放: {{ Math.round(scale * 100) }}%</label>
-          <input 
-            type="range" 
-            min="10" 
-            max="200" 
-            step="1" 
-            v-model.number="scale"
-            class="zoom-slider"
-          >
-        </div>
-
-        <div class="control-group">
-          <label>旋转: {{ rotation }}°</label>
-          <input 
-            type="range" 
-            min="0" 
-            max="360" 
-            step="1" 
-            v-model.number="rotation"
-            class="rotate-slider"
-          >
-        </div>
-
-        <div class="button-group">
-          <button class="btn-secondary" @click="reset">重新选择</button>
-          <button class="btn-primary" @click="cropAvatar">确认裁剪</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-overlay">
-      <div class="loading-spinner"></div>
-      <p>处理中...</p>
     </div>
   </div>
+</div>
 </template>
 
-<script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-
-// 响应式数据
-const fileInput = ref(null)
-const canvas = ref(null)
-const canvasContainer = ref(null)
-const imageSrc = ref('')
-const previewUrl = ref('')
-const loading = ref(false)
-
-// 裁剪状态
-const state = reactive({
-  scale: 100,
-  rotation: 0,
-  position: { x: 0, y: 0 },
-  cropSize: 200,
-  isDragging: false,
-  isResizing: false,
-  resizeDirection: null,
-  dragStart: { x: 0, y: 0 }
-})
-
-// 计算属性
-const scale = computed({
-  get: () => state.scale,
-  set: (value) => {
-    state.scale = Math.max(10, Math.min(200, value))
-    redrawCanvas()
-  }
-})
-
-const rotation = computed({
-  get: () => state.rotation,
-  set: (value) => {
-    state.rotation = value % 360
-    redrawCanvas()
-  }
-})
-
-const cropBoxStyle = computed(() => ({
-  width: `${state.cropSize}px`,
-  height: `${state.cropSize}px`,
-  left: `${state.position.x}px`,
-  top: `${state.position.y}px`,
-  transform: `rotate(${state.rotation}deg)`
-}))
-
-// 控制点配置
-const handles = [
-  { position: 'nw' }, { position: 'n' }, { position: 'ne' },
-  { position: 'w' }, { position: 'e' },
-  { position: 'sw' }, { position: 's' }, { position: 'se' }
-]
-
-// 方法
-const triggerFileInput = () => {
-  fileInput.value?.click()
-}
-
-const handleFileSelect = (event) => {
-  const file = event.target.files[0]
-  if (!file) return
-
-  if (!file.type.startsWith('image/')) {
-    alert('请选择图片文件')
-    return
-  }
-
-  const reader = new FileReader()
-  reader.onload = (e) => {
-    imageSrc.value = e.target.result
-    nextTick(() => {
-      initializeCropper()
-    })
-  }
-  reader.readAsDataURL(file)
-}
-
-const initializeCropper = () => {
-  if (!canvas.value || !canvasContainer.value) return
-
-  const containerRect = canvasContainer.value.getBoundingClientRect()
-  const containerSize = Math.min(containerRect.width, containerRect.height) - 40
-  
-  // 设置画布尺寸
-  canvas.value.width = containerSize
-  canvas.value.height = containerSize
-  
-  // 初始化裁剪框位置
-  state.cropSize = Math.min(containerSize * 0.6, 300)
-  state.position.x = (containerSize - state.cropSize) / 2
-  state.position.y = (containerSize - state.cropSize) / 2
-  state.scale = 100
-  state.rotation = 0
-
-  redrawCanvas()
-}
-
-const redrawCanvas = () => {
-  if (!canvas.value || !imageSrc.value) return
-
-  const ctx = canvas.value.getContext('2d')
-  const size = canvas.value.width
-  
-  // 清空画布
-  ctx.clearRect(0, 0, size, size)
-  
-  // 绘制背景
-  ctx.fillStyle = '#f5f5f5'
-  ctx.fillRect(0, 0, size, size)
-  
-  // 创建离屏canvas用于图片变换
-  const offscreen = document.createElement('canvas')
-  const offscreenCtx = offscreen.getContext('2d')
-  
-  const img = new Image()
-  img.onload = () => {
-    // 计算缩放后的尺寸
-    const scaleFactor = state.scale / 100
-    const imgWidth = img.width * scaleFactor
-    const imgHeight = img.height * scaleFactor
-    
-    // 设置离屏canvas尺寸
-    offscreen.width = Math.max(imgWidth, imgHeight) * 2
-    offscreen.height = Math.max(imgWidth, imgHeight) * 2
-    
-    // 在离屏canvas上绘制并旋转图片
-    offscreenCtx.save()
-    offscreenCtx.translate(offscreen.width / 2, offscreen.height / 2)
-    offscreenCtx.rotate(state.rotation * Math.PI / 180)
-    offscreenCtx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight)
-    offscreenCtx.restore()
-    
-    // 在主画布上绘制
-    ctx.drawImage(offscreen, 
-      (size - offscreen.width) / 2, 
-      (size - offscreen.height) / 2
-    )
-    
-    updatePreview()
-  }
-  img.src = imageSrc.value
-}
-
-const updatePreview = () => {
-  if (!canvas.value) return
-
-  const previewCanvas = document.createElement('canvas')
-  previewCanvas.width = state.cropSize
-  previewCanvas.height = state.cropSize
-  const previewCtx = previewCanvas.getContext('2d')
-  
-  // 绘制裁剪区域到预览canvas
-  previewCtx.drawImage(
-    canvas.value,
-    state.position.x, state.position.y, state.cropSize, state.cropSize,
-    0, 0, state.cropSize, state.cropSize
-  )
-  
-  previewUrl.value = previewCanvas.toDataURL('image/png')
-}
-
-const startDrag = (e) => {
-  console.log('startDrag', e)
-  e.preventDefault()
-  state.isDragging = true
-  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
-  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
-  
-  state.dragStart.x = clientX - state.position.x
-  state.dragStart.y = clientY - state.position.y
-  
-  document.addEventListener('mousemove', onDrag)
-  document.addEventListener('mouseup', stopDrag)
-  document.addEventListener('touchmove', onDrag)
-  document.addEventListener('touchend', stopDrag)
-}
-
-const onDrag = (e) => {
-  if (!state.isDragging || !canvas.value) return
-  
-  e.preventDefault()
-  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
-  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
-  
-  const containerRect = canvas.value.getBoundingClientRect()
-  const newX = clientX - containerRect.left - state.dragStart.x
-  const newY = clientY - containerRect.top - state.dragStart.y
-  
-  // 限制在画布范围内
-  state.position.x = Math.max(0, Math.min(canvas.value.width - state.cropSize, newX))
-  state.position.y = Math.max(0, Math.min(canvas.value.height - state.cropSize, newY))
-  
-  updatePreview()
-}
-
-const stopDrag = () => {
-  state.isDragging = false
-  document.removeEventListener('mousemove', onDrag)
-  document.removeEventListener('mouseup', stopDrag)
-  document.removeEventListener('touchmove', onDrag)
-  document.removeEventListener('touchend', stopDrag)
-}
-
-const startResize = (direction, e) => {
-  e.preventDefault()
-  e.stopPropagation()
-  
-  state.isResizing = true
-  state.resizeDirection = direction
-  
-  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
-  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
-  
-  state.dragStart.x = clientX
-  state.dragStart.y = clientY
-  state.dragStart.width = state.cropSize
-  state.dragStart.position = { ...state.position }
-  
-  document.addEventListener('mousemove', onResize)
-  document.addEventListener('mouseup', stopResize)
-  document.addEventListener('touchmove', onResize)
-  document.addEventListener('touchend', stopResize)
-}
-
-const onResize = (e) => {
-  if (!state.isResizing || !canvas.value) return
-  
-  e.preventDefault()
-  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
-  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
-  
-  const deltaX = clientX - state.dragStart.x
-  const deltaY = clientY - state.dragStart.y
-  const minSize = 50
-  const maxSize = Math.min(canvas.value.width, canvas.value.height)
-  
-  let newSize = state.dragStart.width
-  let newX = state.dragStart.position.x
-  let newY = state.dragStart.position.y
-  
-  switch (state.resizeDirection) {
-    case 'e':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + deltaX))
-      break
-    case 'w':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width - deltaX))
-      newX = state.dragStart.position.x + deltaX
-      break
-    case 's':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + deltaY))
-      break
-    case 'n':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width - deltaY))
-      newY = state.dragStart.position.y + deltaY
-      break
-    case 'se':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(deltaX, deltaY)))
-      break
-    case 'sw':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(-deltaX, deltaY)))
-      newX = state.dragStart.position.x + deltaX
-      break
-    case 'ne':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(deltaX, -deltaY)))
-      newY = state.dragStart.position.y + deltaY
-      break
-    case 'nw':
-      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(-deltaX, -deltaY)))
-      newX = state.dragStart.position.x + deltaX
-      newY = state.dragStart.position.y + deltaY
-      break
-  }
-  
-  // 限制位置在画布范围内
-  state.cropSize = newSize
-  state.position.x = Math.max(0, Math.min(canvas.value.width - newSize, newX))
-  state.position.y = Math.max(0, Math.min(canvas.value.height - newSize, newY))
-  
-  updatePreview()
-}
-
-const stopResize = () => {
-  state.isResizing = false
-  state.resizeDirection = null
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', stopResize)
-  document.removeEventListener('touchmove', onResize)
-  document.removeEventListener('touchend', stopResize)
-}
-
-const cropAvatar = async () => {
-  loading.value = true
-  
-  try {
-    // 模拟处理时间
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    // 创建最终裁剪结果
-    const resultCanvas = document.createElement('canvas')
-    resultCanvas.width = 400 // 输出尺寸
-    resultCanvas.height = 400
-    const resultCtx = resultCanvas.getContext('2d')
-    
-    // 绘制圆形遮罩
-    resultCtx.beginPath()
-    resultCtx.arc(200, 200, 200, 0, Math.PI * 2)
-    resultCtx.closePath()
-    resultCtx.clip()
-    
-    // 绘制图片
-    const img = new Image()
-    img.onload = () => {
-      resultCtx.drawImage(img, 0, 0, 400, 400)
-      
-      // 触发裁剪完成事件
-      const dataUrl = resultCanvas.toDataURL('image/png')
-      emit('cropped', dataUrl)
-      
-      loading.value = false
-    }
-    img.src = previewUrl.value
-    
-  } catch (error) {
-    console.error('裁剪失败:', error)
-    loading.value = false
-  }
-}
-
-const reset = () => {
-  imageSrc.value = ''
-  previewUrl.value = ''
-  if (fileInput.value) {
-    fileInput.value.value = ''
-  }
-}
-
-// 组件挂载
-onMounted(() => {
-  window.addEventListener('resize', initializeCropper)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', initializeCropper)
-})
-
-// 监听图片源变化
-watch(imageSrc, () => {
-  if (imageSrc.value) {
-    nextTick(() => {
-      initializeCropper()
-    })
-  }
-})
-
-// 定义组件事件
-const emit = defineEmits(['cropped'])
-</script>
-
 <style scoped>
-.avatar-cropper {
-  max-width: 800px;
-  margin: 0 auto;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
+/* 头像裁剪器样式*/
 
-/* 上传区域 */
-.upload-area {
-  border: 2px dashed #d1d5db;
-  border-radius: 12px;
-  padding: 60px 20px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: #fafafa;
-}
+  .container {
+    width: 95%;
+    /* 改为百分比宽度 */
+    margin: 20px auto;
+    /* 增加上下边距 */
+    max-width: 1200px;
+    /* 保留最大宽度 */
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
 
-.upload-area:hover {
-  border-color: #3b82f6;
-  background: #f8fafc;
-}
-
-.upload-content .upload-icon {
-  color: #9ca3af;
-  margin-bottom: 16px;
-}
-
-.upload-content h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 8px;
-}
-
-.upload-content p {
-  color: #6b7280;
-  font-size: 14px;
-}
-
-/* 裁剪容器 */
-.cropper-container {
-  background: white;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.cropper-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background: #f9fafb;
-}
-
-.cropper-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.btn-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.btn-close:hover {
-  background: #f3f4f6;
-  color: #374151;
-}
-
-.cropper-content {
-  display: grid;
-  grid-template-columns: 1fr 300px;
-  gap: 24px;
-  padding: 24px;
-}
-
-/* 画布区域 */
-.canvas-wrapper {
-  position: relative;
-}
-
-.canvas-container {
-  position: relative;
-  width: 100%;
-  height: 400px;
-  background: #f9fafb;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.cropper-canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.crop-box {
-  position: absolute;
-  border: 2px solid #3b82f6;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
-  cursor: move;
-  z-index: 10;
-}
-
-.crop-box-handle {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  background: #3b82f6;
-  border: 2px solid white;
-  border-radius: 2px;
-  z-index: 20;
-}
-
-.handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
-.handle-n { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
-.handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
-.handle-w { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
-.handle-e { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }
-.handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
-.handle-s { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
-.handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
-
-/* 预览区域 */
-.preview-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.preview-container {
-  display: flex;
-  gap: 20px;
-  flex-direction: column;
-}
-
-.preview-item h4 {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #374151;
-  text-align: center;
-}
-
-.preview-circle {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  overflow: hidden;
-  background: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.preview-square {
-  width: 120px;
-  height: 120px;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.preview-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.preview-placeholder {
-  color: #9ca3af;
-  font-size: 14px;
-}
-
-/* 控制面板 */
-.control-panel {
-  grid-column: 1 / -1;
-  padding: 24px;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
-}
-
-.control-group {
-  margin-bottom: 20px;
-}
-
-.control-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-}
-
-.zoom-slider, .rotate-slider {
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: #e5e7eb;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.zoom-slider::-webkit-slider-thumb,
-.rotate-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #3b82f6;
-  cursor: pointer;
-}
-
-.button-group {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-.btn-primary, .btn-secondary {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: white;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-
-.btn-secondary:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
-}
-
-/* 加载状态 */
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  z-index: 1000;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-left: 4px solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .cropper-content {
-    grid-template-columns: 1fr;
-    gap: 20px;
   }
-  
-  .preview-container {
-    flex-direction: row;
-    justify-content: center;
+
+  .flex-wrapper {
+    display: flex;
+    gap: 30px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+    /* 添加换行支持 */
   }
-  
-  .canvas-container {
-    height: 300px;
+
+  /* 裁剪区域 */
+  .crop-section {
+    flex: 1 1 60%;
+    /* 弹性布局基础宽度 */
+    min-width: 300px;
+    /* 降低最小宽度 */
+    height: auto;
+    /* 移除固定高度 */
+    min-height: 400px;
+    /* 设置最小高度 */
   }
-  
-  .button-group {
+
+  #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>
\ No newline at end of file
diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json
index bcfebaf..4af5332 100644
--- a/frontent/ops_vue_js/src/i18n/en.json
+++ b/frontent/ops_vue_js/src/i18n/en.json
@@ -5,7 +5,8 @@
     "forgot_password": "Forgot Password",
     "register": "Register",
     "schedule":"Schedule",
-    "purchase":"Purchase"
+    "purchase":"Purchase",
+    "warehouse":"Warehouse"
   },
   "purchase":{
     "purchase_list":"Purchase List",
diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json
index 6109ad2..d1ce02b 100644
--- a/frontent/ops_vue_js/src/i18n/zh-CN.json
+++ b/frontent/ops_vue_js/src/i18n/zh-CN.json
@@ -5,7 +5,8 @@
     "forgot_password": "忘记密码",
     "register": "注册",
     "schedule":"日程",
-    "purchase":"采购"
+    "purchase":"采购",
+    "warehouse":"仓库"
   },
   "purchase":{
     "purchase_list":"采购列表",
diff --git a/frontent/ops_vue_js/src/libs/cropper.min.js b/frontent/ops_vue_js/src/libs/cropper.min.js
new file mode 100644
index 0000000..365ce8b
--- /dev/null
+++ b/frontent/ops_vue_js/src/libs/cropper.min.js
@@ -0,0 +1,10 @@
+/*!
+ * Cropper.js v1.5.12
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-06-12T08:00:17.411Z
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Cropper=e()}(this,function(){"use strict";function e(e,t){var i,a=Object.keys(e);return Object.getOwnPropertySymbols&&(i=Object.getOwnPropertySymbols(e),t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,i)),a}function B(a){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?e(Object(n),!0).forEach(function(t){var e,i;e=a,t=n[i=t],i in e?Object.defineProperty(e,i,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[i]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(n)):e(Object(n)).forEach(function(t){Object.defineProperty(a,t,Object.getOwnPropertyDescriptor(n,t))})}return a}function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function T(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(i="Object"===i&&t.constructor?t.constructor.name:i)||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,a=new Array(e);i<e;i++)a[i]=t[i];return a}var t="undefined"!=typeof window&&void 0!==window.document,h=t?window:{},o=!(!t||!h.document.documentElement)&&"ontouchstart"in h.document.documentElement,r=t&&"PointerEvent"in h,c="cropper",k="all",O="crop",E="move",W="zoom",H="e",N="w",L="s",z="n",Y="ne",X="nw",R="se",S="sw",s="".concat(c,"-crop"),d="".concat(c,"-disabled"),A="".concat(c,"-hidden"),l="".concat(c,"-hide"),p="".concat(c,"-invisible"),m="".concat(c,"-modal"),u="".concat(c,"-move"),g="".concat(c,"Action"),f="".concat(c,"Preview"),v="crop",w="move",b="none",y="crop",x="cropend",M="cropmove",C="cropstart",D="dblclick",j=r?"pointerdown":o?"touchstart":"mousedown",I=r?"pointermove":o?"touchmove":"mousemove",P=r?"pointerup pointercancel":o?"touchend touchcancel":"mouseup",U="zoom",q="image/jpeg",$=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,Q=/^data:/,K=/^data:image\/jpeg;base64,/,Z=/^img|canvas$/i,G={viewMode:0,dragMode:v,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},V=Number.isNaN||h.isNaN;function F(t){return"number"==typeof t&&!V(t)}var J=function(t){return 0<t&&t<1/0};function _(t){return void 0===t}function tt(t){return"object"===i(t)&&null!==t}var et=Object.prototype.hasOwnProperty;function it(t){if(!tt(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&et.call(i,"isPrototypeOf")}catch(t){return!1}}function at(t){return"function"==typeof t}var nt=Array.prototype.slice;function ot(t){return Array.from?Array.from(t):nt.call(t)}function ht(i,a){return i&&at(a)&&(Array.isArray(i)||F(i.length)?ot(i).forEach(function(t,e){a.call(i,t,e,i)}):tt(i)&&Object.keys(i).forEach(function(t){a.call(i,i[t],t,i)})),i}var rt=Object.assign||function(i){for(var t=arguments.length,e=new Array(1<t?t-1:0),a=1;a<t;a++)e[a-1]=arguments[a];return tt(i)&&0<e.length&&e.forEach(function(e){tt(e)&&Object.keys(e).forEach(function(t){i[t]=e[t]})}),i},st=/\.\d*(?:0|9){12}\d*$/;function ct(t,e){e=1<arguments.length&&void 0!==e?e:1e11;return st.test(t)?Math.round(t*e)/e:t}var dt=/^width|height|left|top|marginLeft|marginTop$/;function lt(t,e){var i=t.style;ht(e,function(t,e){dt.test(e)&&F(t)&&(t="".concat(t,"px")),i[e]=t})}function pt(t,e){var i;e&&(F(t.length)?ht(t,function(t){pt(t,e)}):t.classList?t.classList.add(e):(i=t.className.trim())?i.indexOf(e)<0&&(t.className="".concat(i," ").concat(e)):t.className=e)}function mt(t,e){e&&(F(t.length)?ht(t,function(t){mt(t,e)}):t.classList?t.classList.remove(e):0<=t.className.indexOf(e)&&(t.className=t.className.replace(e,"")))}function ut(t,e,i){e&&(F(t.length)?ht(t,function(t){ut(t,e,i)}):(i?pt:mt)(t,e))}var gt=/([a-z\d])([A-Z])/g;function ft(t){return t.replace(gt,"$1-$2").toLowerCase()}function vt(t,e){return tt(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-".concat(ft(e)))}function wt(t,e,i){tt(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-".concat(ft(e)),i)}var bt,yt,xt=/\s\s*/,Mt=(yt=!1,t&&(bt=!1,At=function(){},It=Object.defineProperty({},"once",{get:function(){return yt=!0,bt},set:function(t){bt=t}}),h.addEventListener("test",At,It),h.removeEventListener("test",At,It)),yt);function Ct(i,t,a,e){var n=3<arguments.length&&void 0!==e?e:{},o=a;t.trim().split(xt).forEach(function(t){var e;Mt||(e=i.listeners)&&e[t]&&e[t][a]&&(o=e[t][a],delete e[t][a],0===Object.keys(e[t]).length&&delete e[t],0===Object.keys(e).length&&delete i.listeners),i.removeEventListener(t,o,n)})}function Dt(o,t,h,e){var r=3<arguments.length&&void 0!==e?e:{},s=h;t.trim().split(xt).forEach(function(a){var t,n;r.once&&!Mt&&(t=o.listeners,s=function(){delete n[a][h],o.removeEventListener(a,s,r);for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];h.apply(o,e)},(n=void 0===t?{}:t)[a]||(n[a]={}),n[a][h]&&o.removeEventListener(a,n[a][h],r),n[a][h]=s,o.listeners=n),o.addEventListener(a,s,r)})}function Bt(t,e,i){var a;return at(Event)&&at(CustomEvent)?a=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0}):(a=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(a)}function kt(t){t=t.getBoundingClientRect();return{left:t.left+(window.pageXOffset-document.documentElement.clientLeft),top:t.top+(window.pageYOffset-document.documentElement.clientTop)}}var Ot=h.location,Tt=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function Et(t){t=t.match(Tt);return null!==t&&(t[1]!==Ot.protocol||t[2]!==Ot.hostname||t[3]!==Ot.port)}function Wt(t){var e="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+e}function Ht(t){var e=t.rotate,i=t.scaleX,a=t.scaleY,n=t.translateX,o=t.translateY,t=[];F(n)&&0!==n&&t.push("translateX(".concat(n,"px)")),F(o)&&0!==o&&t.push("translateY(".concat(o,"px)")),F(e)&&0!==e&&t.push("rotate(".concat(e,"deg)")),F(i)&&1!==i&&t.push("scaleX(".concat(i,")")),F(a)&&1!==a&&t.push("scaleY(".concat(a,")"));t=t.length?t.join(" "):"none";return{WebkitTransform:t,msTransform:t,transform:t}}function Nt(t,e){var i=t.pageX,a=t.pageY,t={endX:i,endY:a};return e?t:B({startX:i,startY:a},t)}function Lt(t,e){var i=t.aspectRatio,a=t.height,n=t.width,o=1<arguments.length&&void 0!==e?e:"contain",h=J(n),t=J(a);return h&&t?(e=a*i,"contain"===o&&n<e||"cover"===o&&e<n?a=n/i:n=a*i):h?a=n/i:t&&(n=a*i),{width:n,height:a}}var zt=String.fromCharCode;var Yt=/^data:.*,/;function Xt(t){var e,i,a,n,o,h,r,s=new DataView(t);try{if(255===s.getUint8(0)&&216===s.getUint8(1))for(var c=s.byteLength,d=2;d+1<c;){if(255===s.getUint8(d)&&225===s.getUint8(d+1)){i=d;break}d+=1}if(i&&(n=i+10,"Exif"===function(t,e,i){var a="";i+=e;for(var n=e;n<i;n+=1)a+=zt(t.getUint8(n));return a}(s,i+4,4)&&(!(r=18761===(o=s.getUint16(n)))&&19789!==o||42!==s.getUint16(n+2,r)||8<=(h=s.getUint32(n+4,r))&&(a=n+h))),a)for(var l,p=s.getUint16(a,r),m=0;m<p;m+=1)if(l=a+12*m+2,274===s.getUint16(l,r)){l+=8,e=s.getUint16(l,r),s.setUint16(l,1,r);break}}catch(t){e=1}return e}var Rt={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,e=this.options,i=this.container,a=this.cropper,n=Number(e.minContainerWidth),e=Number(e.minContainerHeight);pt(a,A),mt(t,A);e={width:Math.max(i.offsetWidth,0<=n?n:200),height:Math.max(i.offsetHeight,0<=e?e:100)};lt(a,{width:(this.containerData=e).width,height:e.height}),pt(t,A),mt(a,A)},initCanvas:function(){var t=this.containerData,e=this.imageData,i=this.options.viewMode,a=Math.abs(e.rotate)%180==90,n=a?e.naturalHeight:e.naturalWidth,o=a?e.naturalWidth:e.naturalHeight,h=n/o,a=t.width,e=t.height;t.height*h>t.width?3===i?a=t.height*h:e=t.width/h:3===i?e=t.width/h:a=t.height*h;e={aspectRatio:h,naturalWidth:n,naturalHeight:o,width:a,height:e};this.canvasData=e,this.limited=1===i||2===i,this.limitCanvas(!0,!0),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),e.left=(t.width-e.width)/2,e.top=(t.height-e.height)/2,e.oldLeft=e.left,e.oldTop=e.top,this.initialCanvasData=rt({},e)},limitCanvas:function(t,e){var i,a=this.options,n=this.containerData,o=this.canvasData,h=this.cropBoxData,r=a.viewMode,s=o.aspectRatio,c=this.cropped&&h;t&&(t=Number(a.minCanvasWidth)||0,i=Number(a.minCanvasHeight)||0,1<r?(t=Math.max(t,n.width),i=Math.max(i,n.height),3===r&&(t<i*s?t=i*s:i=t/s)):0<r&&(t?t=Math.max(t,c?h.width:0):i?i=Math.max(i,c?h.height:0):c&&((t=h.width)<(i=h.height)*s?t=i*s:i=t/s)),t=(s=Lt({aspectRatio:s,width:t,height:i})).width,i=s.height,o.minWidth=t,o.minHeight=i,o.maxWidth=1/0,o.maxHeight=1/0),e&&((c?0:1)<r?(i=n.width-o.width,e=n.height-o.height,o.minLeft=Math.min(0,i),o.minTop=Math.min(0,e),o.maxLeft=Math.max(0,i),o.maxTop=Math.max(0,e),c&&this.limited&&(o.minLeft=Math.min(h.left,h.left+(h.width-o.width)),o.minTop=Math.min(h.top,h.top+(h.height-o.height)),o.maxLeft=h.left,o.maxTop=h.top,2===r&&(o.width>=n.width&&(o.minLeft=Math.min(0,i),o.maxLeft=Math.max(0,i)),o.height>=n.height&&(o.minTop=Math.min(0,e),o.maxTop=Math.max(0,e))))):(o.minLeft=-o.width,o.minTop=-o.height,o.maxLeft=n.width,o.maxTop=n.height))},renderCanvas:function(t,e){var i,a,n=this.canvasData,o=this.imageData;e&&(i=(a=function(t){var e=t.width,i=t.height,a=t.degree;if(90==(a=Math.abs(a)%180))return{width:i,height:e};var n=a%90*Math.PI/180,o=Math.sin(n),t=Math.cos(n),n=e*t+i*o,t=e*o+i*t;return 90<a?{width:t,height:n}:{width:n,height:t}}({width:o.naturalWidth*Math.abs(o.scaleX||1),height:o.naturalHeight*Math.abs(o.scaleY||1),degree:o.rotate||0})).width,e=a.height,o=n.width*(i/n.naturalWidth),a=n.height*(e/n.naturalHeight),n.left-=(o-n.width)/2,n.top-=(a-n.height)/2,n.width=o,n.height=a,n.aspectRatio=i/e,n.naturalWidth=i,n.naturalHeight=e,this.limitCanvas(!0,!1)),(n.width>n.maxWidth||n.width<n.minWidth)&&(n.left=n.oldLeft),(n.height>n.maxHeight||n.height<n.minHeight)&&(n.top=n.oldTop),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),this.limitCanvas(!1,!0),n.left=Math.min(Math.max(n.left,n.minLeft),n.maxLeft),n.top=Math.min(Math.max(n.top,n.minTop),n.maxTop),n.oldLeft=n.left,n.oldTop=n.top,lt(this.canvas,rt({width:n.width,height:n.height},Ht({translateX:n.left,translateY:n.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var e=this.canvasData,i=this.imageData,a=i.naturalWidth*(e.width/e.naturalWidth),n=i.naturalHeight*(e.height/e.naturalHeight);rt(i,{width:a,height:n,left:(e.width-a)/2,top:(e.height-n)/2}),lt(this.image,rt({width:i.width,height:i.height},Ht(rt({translateX:i.left,translateY:i.top},i)))),t&&this.output()},initCropBox:function(){var t=this.options,e=this.canvasData,i=t.aspectRatio||t.initialAspectRatio,a=Number(t.autoCropArea)||.8,t={width:e.width,height:e.height};i&&(e.height*i>e.width?t.height=t.width/i:t.width=t.height*i),this.cropBoxData=t,this.limitCropBox(!0,!0),t.width=Math.min(Math.max(t.width,t.minWidth),t.maxWidth),t.height=Math.min(Math.max(t.height,t.minHeight),t.maxHeight),t.width=Math.max(t.minWidth,t.width*a),t.height=Math.max(t.minHeight,t.height*a),t.left=e.left+(e.width-t.width)/2,t.top=e.top+(e.height-t.height)/2,t.oldLeft=t.left,t.oldTop=t.top,this.initialCropBoxData=rt({},t)},limitCropBox:function(t,e){var i,a,n=this.options,o=this.containerData,h=this.canvasData,r=this.cropBoxData,s=this.limited,c=n.aspectRatio;t&&(i=Number(n.minCropBoxWidth)||0,a=Number(n.minCropBoxHeight)||0,t=s?Math.min(o.width,h.width,h.width+h.left,o.width-h.left):o.width,n=s?Math.min(o.height,h.height,h.height+h.top,o.height-h.top):o.height,i=Math.min(i,o.width),a=Math.min(a,o.height),c&&(i&&a?i<a*c?a=i/c:i=a*c:i?a=i/c:a&&(i=a*c),t<n*c?n=t/c:t=n*c),r.minWidth=Math.min(i,t),r.minHeight=Math.min(a,n),r.maxWidth=t,r.maxHeight=n),e&&(s?(r.minLeft=Math.max(0,h.left),r.minTop=Math.max(0,h.top),r.maxLeft=Math.min(o.width,h.left+h.width)-r.width,r.maxTop=Math.min(o.height,h.top+h.height)-r.height):(r.minLeft=0,r.minTop=0,r.maxLeft=o.width-r.width,r.maxTop=o.height-r.height))},renderCropBox:function(){var t=this.options,e=this.containerData,i=this.cropBoxData;(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCropBox(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,t.movable&&t.cropBoxMovable&&wt(this.face,g,i.width>=e.width&&i.height>=e.height?E:k),lt(this.cropBox,rt({width:i.width,height:i.height},Ht({translateX:i.left,translateY:i.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),Bt(this.element,y,this.getData())}},St={initPreview:function(){var t=this.element,i=this.crossOrigin,e=this.options.preview,a=i?this.crossOriginUrl:this.url,n=t.alt||"The image to preview",o=document.createElement("img");i&&(o.crossOrigin=i),o.src=a,o.alt=n,this.viewBox.appendChild(o),this.viewBoxImage=o,e&&("string"==typeof(o=e)?o=t.ownerDocument.querySelectorAll(e):e.querySelector&&(o=[e]),ht(this.previews=o,function(t){var e=document.createElement("img");wt(t,f,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),i&&(e.crossOrigin=i),e.src=a,e.alt=n,e.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(e)}))},resetPreview:function(){ht(this.previews,function(t){var e=vt(t,f);lt(t,{width:e.width,height:e.height}),t.innerHTML=e.html,function(e,i){if(tt(e[i]))try{delete e[i]}catch(t){e[i]=void 0}else if(e.dataset)try{delete e.dataset[i]}catch(t){e.dataset[i]=void 0}else e.removeAttribute("data-".concat(ft(i)))}(t,f)})},preview:function(){var h=this.imageData,t=this.canvasData,e=this.cropBoxData,r=e.width,s=e.height,c=h.width,d=h.height,l=e.left-t.left-h.left,p=e.top-t.top-h.top;this.cropped&&!this.disabled&&(lt(this.viewBoxImage,rt({width:c,height:d},Ht(rt({translateX:-l,translateY:-p},h)))),ht(this.previews,function(t){var e=vt(t,f),i=e.width,a=e.height,n=i,o=a,e=1;r&&(o=s*(e=i/r)),s&&a<o&&(n=r*(e=a/s),o=a),lt(t,{width:n,height:o}),lt(t.getElementsByTagName("img")[0],rt({width:c*e,height:d*e},Ht(rt({translateX:-l*e,translateY:-p*e},h))))}))}},r={bind:function(){var t=this.element,e=this.options,i=this.cropper;at(e.cropstart)&&Dt(t,C,e.cropstart),at(e.cropmove)&&Dt(t,M,e.cropmove),at(e.cropend)&&Dt(t,x,e.cropend),at(e.crop)&&Dt(t,y,e.crop),at(e.zoom)&&Dt(t,U,e.zoom),Dt(i,j,this.onCropStart=this.cropStart.bind(this)),e.zoomable&&e.zoomOnWheel&&Dt(i,"wheel",this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&Dt(i,D,this.onDblclick=this.dblclick.bind(this)),Dt(t.ownerDocument,I,this.onCropMove=this.cropMove.bind(this)),Dt(t.ownerDocument,P,this.onCropEnd=this.cropEnd.bind(this)),e.responsive&&Dt(window,"resize",this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,e=this.options,i=this.cropper;at(e.cropstart)&&Ct(t,C,e.cropstart),at(e.cropmove)&&Ct(t,M,e.cropmove),at(e.cropend)&&Ct(t,x,e.cropend),at(e.crop)&&Ct(t,y,e.crop),at(e.zoom)&&Ct(t,U,e.zoom),Ct(i,j,this.onCropStart),e.zoomable&&e.zoomOnWheel&&Ct(i,"wheel",this.onWheel,{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&Ct(i,D,this.onDblclick),Ct(t.ownerDocument,I,this.onCropMove),Ct(t.ownerDocument,P,this.onCropEnd),e.responsive&&Ct(window,"resize",this.onResize)}},o={resize:function(){var t,e,i,a,n,o,h;this.disabled||(t=this.options,e=this.container,a=this.containerData,i=e.offsetWidth/a.width,a=e.offsetHeight/a.height,1!=(n=Math.abs(i-1)>Math.abs(a-1)?i:a)&&(t.restore&&(o=this.getCanvasData(),h=this.getCropBoxData()),this.render(),t.restore&&(this.setCanvasData(ht(o,function(t,e){o[e]=t*n})),this.setCropBoxData(ht(h,function(t,e){h[e]=t*n})))))},dblclick:function(){var t,e;this.disabled||this.options.dragMode===b||this.setDragMode((t=this.dragBox,e=s,(t.classList?t.classList.contains(e):-1<t.className.indexOf(e))?w:v))},wheel:function(t){var e=this,i=Number(this.options.wheelZoomRatio)||.1,a=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(function(){e.wheeling=!1},50),t.deltaY?a=0<t.deltaY?1:-1:t.wheelDelta?a=-t.wheelDelta/120:t.detail&&(a=0<t.detail?1:-1),this.zoom(-a*i,t)))},cropStart:function(t){var e,i=t.buttons,a=t.button;this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(F(i)&&1!==i||F(a)&&0!==a||t.ctrlKey)||(a=this.options,e=this.pointers,t.changedTouches?ht(t.changedTouches,function(t){e[t.identifier]=Nt(t)}):e[t.pointerId||0]=Nt(t),a=1<Object.keys(e).length&&a.zoomable&&a.zoomOnTouch?W:vt(t.target,g),$.test(a)&&!1!==Bt(this.element,C,{originalEvent:t,action:a})&&(t.preventDefault(),this.action=a,this.cropping=!1,a===O&&(this.cropping=!0,pt(this.dragBox,m))))},cropMove:function(t){var e,i=this.action;!this.disabled&&i&&(e=this.pointers,t.preventDefault(),!1!==Bt(this.element,M,{originalEvent:t,action:i})&&(t.changedTouches?ht(t.changedTouches,function(t){rt(e[t.identifier]||{},Nt(t,!0))}):rt(e[t.pointerId||0]||{},Nt(t,!0)),this.change(t)))},cropEnd:function(t){var e,i;this.disabled||(e=this.action,i=this.pointers,t.changedTouches?ht(t.changedTouches,function(t){delete i[t.identifier]}):delete i[t.pointerId||0],e&&(t.preventDefault(),Object.keys(i).length||(this.action=""),this.cropping&&(this.cropping=!1,ut(this.dragBox,m,this.cropped&&this.options.modal)),Bt(this.element,x,{originalEvent:t,action:e})))}},t={change:function(t){var e=this.options,i=this.canvasData,a=this.containerData,n=this.cropBoxData,o=this.pointers,h=this.action,r=e.aspectRatio,s=n.left,c=n.top,d=n.width,l=n.height,p=s+d,m=c+l,u=0,g=0,f=a.width,v=a.height,w=!0;!r&&t.shiftKey&&(r=d&&l?d/l:1),this.limited&&(u=n.minLeft,g=n.minTop,f=u+Math.min(a.width,i.width,i.left+i.width),v=g+Math.min(a.height,i.height,i.top+i.height));function b(t){switch(t){case H:p+D.x>f&&(D.x=f-p);break;case N:s+D.x<u&&(D.x=u-s);break;case z:c+D.y<g&&(D.y=g-c);break;case L:m+D.y>v&&(D.y=v-m)}}var y,x,M,C=o[Object.keys(o)[0]],D={x:C.endX-C.startX,y:C.endY-C.startY};switch(h){case k:s+=D.x,c+=D.y;break;case H:if(0<=D.x&&(f<=p||r&&(c<=g||v<=m))){w=!1;break}b(H),(d+=D.x)<0&&(h=N,s-=d=-d),r&&(c+=(n.height-(l=d/r))/2);break;case z:if(D.y<=0&&(c<=g||r&&(s<=u||f<=p))){w=!1;break}b(z),l-=D.y,c+=D.y,l<0&&(h=L,c-=l=-l),r&&(s+=(n.width-(d=l*r))/2);break;case N:if(D.x<=0&&(s<=u||r&&(c<=g||v<=m))){w=!1;break}b(N),d-=D.x,s+=D.x,d<0&&(h=H,s-=d=-d),r&&(c+=(n.height-(l=d/r))/2);break;case L:if(0<=D.y&&(v<=m||r&&(s<=u||f<=p))){w=!1;break}b(L),(l+=D.y)<0&&(h=z,c-=l=-l),r&&(s+=(n.width-(d=l*r))/2);break;case Y:if(r){if(D.y<=0&&(c<=g||f<=p)){w=!1;break}b(z),l-=D.y,c+=D.y,d=l*r}else b(z),b(H),!(0<=D.x)||p<f?d+=D.x:D.y<=0&&c<=g&&(w=!1),D.y<=0&&!(g<c)||(l-=D.y,c+=D.y);d<0&&l<0?(h=S,c-=l=-l,s-=d=-d):d<0?(h=X,s-=d=-d):l<0&&(h=R,c-=l=-l);break;case X:if(r){if(D.y<=0&&(c<=g||s<=u)){w=!1;break}b(z),l-=D.y,c+=D.y,s+=n.width-(d=l*r)}else b(z),b(N),!(D.x<=0)||u<s?(d-=D.x,s+=D.x):D.y<=0&&c<=g&&(w=!1),D.y<=0&&!(g<c)||(l-=D.y,c+=D.y);d<0&&l<0?(h=R,c-=l=-l,s-=d=-d):d<0?(h=Y,s-=d=-d):l<0&&(h=S,c-=l=-l);break;case S:if(r){if(D.x<=0&&(s<=u||v<=m)){w=!1;break}b(N),d-=D.x,s+=D.x,l=d/r}else b(L),b(N),!(D.x<=0)||u<s?(d-=D.x,s+=D.x):0<=D.y&&v<=m&&(w=!1),0<=D.y&&!(m<v)||(l+=D.y);d<0&&l<0?(h=Y,c-=l=-l,s-=d=-d):d<0?(h=R,s-=d=-d):l<0&&(h=X,c-=l=-l);break;case R:if(r){if(0<=D.x&&(f<=p||v<=m)){w=!1;break}b(H),l=(d+=D.x)/r}else b(L),b(H),!(0<=D.x)||p<f?d+=D.x:0<=D.y&&v<=m&&(w=!1),0<=D.y&&!(m<v)||(l+=D.y);d<0&&l<0?(h=X,c-=l=-l,s-=d=-d):d<0?(h=S,s-=d=-d):l<0&&(h=Y,c-=l=-l);break;case E:this.move(D.x,D.y),w=!1;break;case W:this.zoom((x=B({},y=o),M=0,ht(y,function(n,t){delete x[t],ht(x,function(t){var e=Math.abs(n.startX-t.startX),i=Math.abs(n.startY-t.startY),a=Math.abs(n.endX-t.endX),t=Math.abs(n.endY-t.endY),i=Math.sqrt(e*e+i*i),i=(Math.sqrt(a*a+t*t)-i)/i;Math.abs(i)>Math.abs(M)&&(M=i)})}),M),t),w=!1;break;case O:if(!D.x||!D.y){w=!1;break}y=kt(this.cropper),s=C.startX-y.left,c=C.startY-y.top,d=n.minWidth,l=n.minHeight,0<D.x?h=0<D.y?R:Y:D.x<0&&(s-=d,h=0<D.y?S:X),D.y<0&&(c-=l),this.cropped||(mt(this.cropBox,A),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}w&&(n.width=d,n.height=l,n.left=s,n.top=c,this.action=h,this.renderCropBox()),ht(o,function(t){t.startX=t.endX,t.startY=t.endY})}},At={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&pt(this.dragBox,m),mt(this.cropBox,A),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=rt({},this.initialImageData),this.canvasData=rt({},this.initialCanvasData),this.cropBoxData=rt({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function(){return this.cropped&&!this.disabled&&(rt(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),mt(this.dragBox,m),pt(this.cropBox,A)),this},replace:function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&e&&(this.isImg&&(this.element.src=e),t?(this.url=e,this.image.src=e,this.ready&&(this.viewBoxImage.src=e,ht(this.previews,function(t){t.getElementsByTagName("img")[0].src=e}))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(e))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,mt(this.cropper,d)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,pt(this.cropper,d)),this},destroy:function(){var t=this.element;return t[c]&&(t[c]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate()),this},move:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=i.left,i=i.top;return this.moveTo(_(t)?t:a+Number(t),_(e)?e:i+Number(e))},moveTo:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.movable&&(F(t)&&(i.left=t,a=!0),F(e)&&(i.top=e,a=!0),a&&this.renderCanvas(!0)),this},zoom:function(t,e){var i=this.canvasData;return t=Number(t),this.zoomTo(i.width*(t=t<0?1/(1-t):1+t)/i.naturalWidth,null,e)},zoomTo:function(t,e,i){var a,n,o,h=this.options,r=this.canvasData,s=r.width,c=r.height,d=r.naturalWidth,l=r.naturalHeight;if(0<=(t=Number(t))&&this.ready&&!this.disabled&&h.zoomable){h=d*t,l=l*t;if(!1===Bt(this.element,U,{ratio:t,oldRatio:s/d,originalEvent:i}))return this;i?(t=this.pointers,d=kt(this.cropper),i=t&&Object.keys(t).length?(o=n=a=0,ht(t,function(t){var e=t.startX,t=t.startY;a+=e,n+=t,o+=1}),{pageX:a/=o,pageY:n/=o}):{pageX:i.pageX,pageY:i.pageY},r.left-=(h-s)*((i.pageX-d.left-r.left)/s),r.top-=(l-c)*((i.pageY-d.top-r.top)/c)):it(e)&&F(e.x)&&F(e.y)?(r.left-=(h-s)*((e.x-r.left)/s),r.top-=(l-c)*((e.y-r.top)/c)):(r.left-=(h-s)/2,r.top-=(l-c)/2),r.width=h,r.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return F(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var e=this.imageData.scaleY;return this.scale(t,F(e)?e:1)},scaleY:function(t){var e=this.imageData.scaleX;return this.scale(F(e)?e:1,t)},scale:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.imageData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.scalable&&(F(t)&&(i.scaleX=t,a=!0),F(e)&&(i.scaleY=e,a=!0),a&&this.renderCanvas(!0,!0)),this},getData:function(){var i,a,t=0<arguments.length&&void 0!==arguments[0]&&arguments[0],e=this.options,n=this.imageData,o=this.canvasData,h=this.cropBoxData;return this.ready&&this.cropped?(i={x:h.left-o.left,y:h.top-o.top,width:h.width,height:h.height},a=n.width/n.naturalWidth,ht(i,function(t,e){i[e]=t/a}),t&&(h=Math.round(i.y+i.height),t=Math.round(i.x+i.width),i.x=Math.round(i.x),i.y=Math.round(i.y),i.width=t-i.x,i.height=h-i.y)):i={x:0,y:0,width:0,height:0},e.rotatable&&(i.rotate=n.rotate||0),e.scalable&&(i.scaleX=n.scaleX||1,i.scaleY=n.scaleY||1),i},setData:function(t){var e,i=this.options,a=this.imageData,n=this.canvasData,o={};return this.ready&&!this.disabled&&it(t)&&(e=!1,i.rotatable&&F(t.rotate)&&t.rotate!==a.rotate&&(a.rotate=t.rotate,e=!0),i.scalable&&(F(t.scaleX)&&t.scaleX!==a.scaleX&&(a.scaleX=t.scaleX,e=!0),F(t.scaleY)&&t.scaleY!==a.scaleY&&(a.scaleY=t.scaleY,e=!0)),e&&this.renderCanvas(!0,!0),a=a.width/a.naturalWidth,F(t.x)&&(o.left=t.x*a+n.left),F(t.y)&&(o.top=t.y*a+n.top),F(t.width)&&(o.width=t.width*a),F(t.height)&&(o.height=t.height*a),this.setCropBoxData(o)),this},getContainerData:function(){return this.ready?rt({},this.containerData):{}},getImageData:function(){return this.sized?rt({},this.imageData):{}},getCanvasData:function(){var e=this.canvasData,i={};return this.ready&&ht(["left","top","width","height","naturalWidth","naturalHeight"],function(t){i[t]=e[t]}),i},setCanvasData:function(t){var e=this.canvasData,i=e.aspectRatio;return this.ready&&!this.disabled&&it(t)&&(F(t.left)&&(e.left=t.left),F(t.top)&&(e.top=t.top),F(t.width)?(e.width=t.width,e.height=t.width/i):F(t.height)&&(e.height=t.height,e.width=t.height*i),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,e=this.cropBoxData;return(t=this.ready&&this.cropped?{left:e.left,top:e.top,width:e.width,height:e.height}:t)||{}},setCropBoxData:function(t){var e,i,a=this.cropBoxData,n=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&it(t)&&(F(t.left)&&(a.left=t.left),F(t.top)&&(a.top=t.top),F(t.width)&&t.width!==a.width&&(e=!0,a.width=t.width),F(t.height)&&t.height!==a.height&&(i=!0,a.height=t.height),n&&(e?a.height=a.width/n:i&&(a.width=a.height*n)),this.renderCropBox()),this},getCroppedCanvas:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!this.ready||!window.HTMLCanvasElement)return null;var e,i,a,n,o,h,r,s,c,d,l,p,m,u=this.canvasData,h=(w=this.image,e=this.imageData,i=u,y=t,a=e.aspectRatio,n=e.naturalWidth,b=e.naturalHeight,o=void 0===(m=e.rotate)?0:m,h=void 0===(v=e.scaleX)?1:v,g=void 0===(l=e.scaleY)?1:l,r=i.aspectRatio,s=i.naturalWidth,c=i.naturalHeight,d=void 0===(p=y.fillColor)?"transparent":p,x=y.imageSmoothingEnabled,f=void 0===x||x,v=void 0===(m=y.imageSmoothingQuality)?"low":m,l=void 0===(e=y.maxWidth)?1/0:e,p=void 0===(i=y.maxHeight)?1/0:i,m=void 0===(x=y.minWidth)?0:x,i=void 0===(e=y.minHeight)?0:e,y=(x=document.createElement("canvas")).getContext("2d"),e=Lt({aspectRatio:r,width:l,height:p}),r=Lt({aspectRatio:r,width:m,height:i},"cover"),s=Math.min(e.width,Math.max(r.width,s)),c=Math.min(e.height,Math.max(r.height,c)),p=Lt({aspectRatio:a,width:l,height:p}),i=Lt({aspectRatio:a,width:m,height:i},"cover"),n=Math.min(p.width,Math.max(i.width,n)),b=Math.min(p.height,Math.max(i.height,b)),b=[-n/2,-b/2,n,b],x.width=ct(s),x.height=ct(c),y.fillStyle=d,y.fillRect(0,0,s,c),y.save(),y.translate(s/2,c/2),y.rotate(o*Math.PI/180),y.scale(h,g),y.imageSmoothingEnabled=f,y.imageSmoothingQuality=v,y.drawImage.apply(y,[w].concat(T(b.map(function(t){return Math.floor(ct(t))})))),y.restore(),x);if(!this.cropped)return h;var g=this.getData(),f=g.x,v=g.y,w=g.width,b=g.height,y=h.width/Math.floor(u.naturalWidth);1!=y&&(f*=y,v*=y,w*=y,b*=y);var x=w/b,g=Lt({aspectRatio:x,width:t.maxWidth||1/0,height:t.maxHeight||1/0}),u=Lt({aspectRatio:x,width:t.minWidth||0,height:t.minHeight||0},"cover"),x=Lt({aspectRatio:x,width:t.width||(1!=y?h.width:w),height:t.height||(1!=y?h.height:b)}),y=x.width,x=x.height,y=Math.min(g.width,Math.max(u.width,y)),x=Math.min(g.height,Math.max(u.height,x)),g=document.createElement("canvas"),u=g.getContext("2d");g.width=ct(y),g.height=ct(x),u.fillStyle=t.fillColor||"transparent",u.fillRect(0,0,y,x);x=t.imageSmoothingEnabled,t=t.imageSmoothingQuality;u.imageSmoothingEnabled=void 0===x||x,t&&(u.imageSmoothingQuality=t);var M,C,D,B,k,x=h.width,t=h.height,f=f,v=v;f<=-w||x<f?B=C=M=f=0:f<=0?(C=-f,f=0,B=M=Math.min(x,w+f)):f<=x&&(C=0,B=M=Math.min(w,x-f)),M<=0||v<=-b||t<v?k=D=O=v=0:v<=0?(D=-v,v=0,k=O=Math.min(t,b+v)):v<=t&&(D=0,k=O=Math.min(b,t-v));var O=[f,v,M,O];return 0<B&&0<k&&O.push(C*(w=y/w),D*w,B*w,k*w),u.drawImage.apply(u,[h].concat(T(O.map(function(t){return Math.floor(ct(t))})))),g},setAspectRatio:function(t){var e=this.options;return this.disabled||_(t)||(e.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function(t){var e,i,a=this.options,n=this.dragBox,o=this.face;return this.ready&&!this.disabled&&(i=a.movable&&t===w,a.dragMode=t=(e=t===v)||i?t:b,wt(n,g,t),ut(n,s,e),ut(n,u,i),a.cropBoxMovable||(wt(o,g,t),ut(o,s,e),ut(o,u,i))),this}},jt=h.Cropper,It=function(){function i(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),!t||!Z.test(t.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=t,this.options=rt({},G,it(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}var t,e,a;return t=i,a=[{key:"noConflict",value:function(){return window.Cropper=jt,i}},{key:"setDefaults",value:function(t){rt(G,it(t)&&t)}}],(e=[{key:"init",value:function(){var t,e=this.element,i=e.tagName.toLowerCase();if(!e[c]){if(e[c]=this,"img"===i){if(this.isImg=!0,t=e.getAttribute("src")||"",!(this.originalUrl=t))return;t=e.src}else"canvas"===i&&window.HTMLCanvasElement&&(t=e.toDataURL());this.load(t)}}},{key:"load",value:function(t){var e,i,a,n,o,h,r=this;t&&(this.url=t,this.imageData={},e=this.element,(i=this.options).rotatable||i.scalable||(i.checkOrientation=!1),i.checkOrientation&&window.ArrayBuffer?Q.test(t)?K.test(t)?this.read((h=(h=t).replace(Yt,""),a=atob(h),h=new ArrayBuffer(a.length),ht(n=new Uint8Array(h),function(t,e){n[e]=a.charCodeAt(e)}),h)):this.clone():(o=new XMLHttpRequest,h=this.clone.bind(this),this.reloading=!0,(this.xhr=o).onabort=h,o.onerror=h,o.ontimeout=h,o.onprogress=function(){o.getResponseHeader("content-type")!==q&&o.abort()},o.onload=function(){r.read(o.response)},o.onloadend=function(){r.reloading=!1,r.xhr=null},i.checkCrossOrigin&&Et(t)&&e.crossOrigin&&(t=Wt(t)),o.open("GET",t,!0),o.responseType="arraybuffer",o.withCredentials="use-credentials"===e.crossOrigin,o.send()):this.clone())}},{key:"read",value:function(t){var e=this.options,i=this.imageData,a=Xt(t),n=0,o=1,h=1;1<a&&(this.url=function(t,e){for(var i=[],a=new Uint8Array(t);0<a.length;)i.push(zt.apply(null,ot(a.subarray(0,8192)))),a=a.subarray(8192);return"data:".concat(e,";base64,").concat(btoa(i.join("")))}(t,q),n=(a=function(t){var e=0,i=1,a=1;switch(t){case 2:i=-1;break;case 3:e=-180;break;case 4:a=-1;break;case 5:e=90,a=-1;break;case 6:e=90;break;case 7:e=90,i=-1;break;case 8:e=-90}return{rotate:e,scaleX:i,scaleY:a}}(a)).rotate,o=a.scaleX,h=a.scaleY),e.rotatable&&(i.rotate=n),e.scalable&&(i.scaleX=o,i.scaleY=h),this.clone()}},{key:"clone",value:function(){var t=this.element,e=this.url,i=t.crossOrigin,a=e;this.options.checkCrossOrigin&&Et(e)&&(i=i||"anonymous",a=Wt(e)),this.crossOrigin=i,this.crossOriginUrl=a;var n=document.createElement("img");i&&(n.crossOrigin=i),n.src=a||e,n.alt=t.alt||"The image to crop",(this.image=n).onload=this.start.bind(this),n.onerror=this.stop.bind(this),pt(n,l),t.parentNode.insertBefore(n,t.nextSibling)}},{key:"start",value:function(){var i=this,t=this.image;t.onload=null,t.onerror=null,this.sizing=!0;function e(t,e){rt(i.imageData,{naturalWidth:t,naturalHeight:e,aspectRatio:t/e}),i.initialImageData=rt({},i.imageData),i.sizing=!1,i.sized=!0,i.build()}var a,n,o=h.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(h.navigator.userAgent);!t.naturalWidth||o?(a=document.createElement("img"),n=document.body||document.documentElement,(this.sizingImage=a).onload=function(){e(a.width,a.height),o||n.removeChild(a)},a.src=t.src,o||(a.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",n.appendChild(a))):e(t.naturalWidth,t.naturalHeight)}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){var t,e,i,a,n,o,h,r,s;this.sized&&!this.ready&&(t=this.element,e=this.options,i=this.image,a=t.parentNode,(s=document.createElement("div")).innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>',o=(n=s.querySelector(".".concat(c,"-container"))).querySelector(".".concat(c,"-canvas")),h=n.querySelector(".".concat(c,"-drag-box")),s=(r=n.querySelector(".".concat(c,"-crop-box"))).querySelector(".".concat(c,"-face")),this.container=a,this.cropper=n,this.canvas=o,this.dragBox=h,this.cropBox=r,this.viewBox=n.querySelector(".".concat(c,"-view-box")),this.face=s,o.appendChild(i),pt(t,A),a.insertBefore(n,t.nextSibling),this.isImg||mt(i,l),this.initPreview(),this.bind(),e.initialAspectRatio=Math.max(0,e.initialAspectRatio)||NaN,e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,pt(r,A),e.guides||pt(r.getElementsByClassName("".concat(c,"-dashed")),A),e.center||pt(r.getElementsByClassName("".concat(c,"-center")),A),e.background&&pt(n,"".concat(c,"-bg")),e.highlight||pt(s,p),e.cropBoxMovable&&(pt(s,u),wt(s,g,k)),e.cropBoxResizable||(pt(r.getElementsByClassName("".concat(c,"-line")),A),pt(r.getElementsByClassName("".concat(c,"-point")),A)),this.render(),this.ready=!0,this.setDragMode(e.dragMode),e.autoCrop&&this.crop(),this.setData(e.data),at(e.ready)&&Dt(t,"ready",e.ready,{once:!0}),Bt(t,"ready"))}},{key:"unbuild",value:function(){this.ready&&(this.ready=!1,this.unbind(),this.resetPreview(),this.cropper.parentNode.removeChild(this.cropper),mt(this.element,A))}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}])&&n(t.prototype,e),a&&n(t,a),i}();return rt(It.prototype,Rt,St,r,o,t,At),It});
\ No newline at end of file
diff --git a/frontent/ops_vue_js/src/router/index.js b/frontent/ops_vue_js/src/router/index.js
index 503c659..39dd243 100644
--- a/frontent/ops_vue_js/src/router/index.js
+++ b/frontent/ops_vue_js/src/router/index.js
@@ -60,6 +60,11 @@ const router = createRouter({
       path: "/purchase",
       name: "purchase",
       component: () => import("../views/purchaseView.vue"),
+    },
+     {
+      path: "/warehouse",
+      name: "warehouse",
+      component: () => import("../views/warehouse.vue"),
     }
   ],
 });
diff --git a/frontent/ops_vue_js/src/views/test.vue b/frontent/ops_vue_js/src/views/test.vue
index 2cc4207..2735241 100644
--- a/frontent/ops_vue_js/src/views/test.vue
+++ b/frontent/ops_vue_js/src/views/test.vue
@@ -1,16 +1,20 @@
 <script setup>
 import { useUserStore } from '@/stores/user'
 
+import imageCropper from '@/components/imageCropper.vue';
+
+import croppertest from '@/components/croppertest.vue';
+
 const user = useUserStore()
 
-function t(){
-    user.login();
-}
+
 
 </script>
 
 <template>
     test
-    <button @click="t">222</button>
-    {{ user.isLoggedIn }}
+
+    <imageCropper></imageCropper>
+   
+    
 </template>
\ No newline at end of file
diff --git a/frontent/ops_vue_js/src/views/warehouse.vue b/frontent/ops_vue_js/src/views/warehouse.vue
index 8b407a0..d4cd63e 100644
--- a/frontent/ops_vue_js/src/views/warehouse.vue
+++ b/frontent/ops_vue_js/src/views/warehouse.vue
@@ -1,5 +1,72 @@
 <template>
-    <div>
-        
+  <div class="page-wrapper">
+    <!-- Page header -->
+    <div class="page-header d-print-none">
+      <div class="container-xl">
+        <div class="row g-2 align-items-center">
+          <div class="col">
+            <h2 class="page-title">Cards</h2>
+          </div>
+        </div>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <!-- Page body -->
+    <div class="page-body">
+      <div class="container-xl">
+        <div class="row row-cards">
+          <div class="col-md-6 col-lg-3">
+            <div class="card">
+              <!-- Photo -->
+              <div
+                class="img-responsive img-responsive-21x9 card-img-top"
+                style="
+                  background-image: url(./static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg);
+                "
+              ></div>
+              <div class="card-body">
+                <h3 class="card-title">Card with top image</h3>
+                <p class="text-secondary card_text">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                 
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 col-lg-3">
+            <div class="card">
+              <!-- Photo -->
+              <div
+                class="img-responsive img-responsive-21x9 card-img-top"
+                style="
+                  background-image: url(./static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg);
+                "
+              ></div>
+              <div class="card-body">
+                <h3 class="card-title">Card with top image</h3>
+                <p class="text-secondary card_text">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                  Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                  pariatur perferendis sed suscipit velit vitae voluptatem. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo optio et fuga omnis ipsa, odit repellendus iste doloremque est, nam eius quisquam perspiciatis deserunt. Quasi tempore velit architecto corporis voluptatibus!
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+
+.card_text{
+   display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示4行 */
+  overflow: hidden;
+  line-height: 1.5;
+  min-height: calc(1.5em * 2); /* 最小高度 */
+}
+
+</style>