diff --git a/uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue b/uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue
index b0661e2..1149f80 100644
--- a/uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue
+++ b/uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue
@@ -1,92 +1,92 @@
 <template>
-  <view class="uni-content-info">
-    <view class='cropper-content'>
-      <view v-if="showImage" class="uni-corpper">
-        <view class="uni-corpper-content">
-          <image class="uni-corpper-content-image" :src="imageSrc" mode="aspectFit" 
-            :style="'transform:rotate('+rotateAll + 'deg) rotateY('+rotateY + 'deg) rotateX('+rotateX + 'deg)'">
+  <view class="vrapile-content">
+    <view class="vrapile-cropper">
+      <view v-if="showImage" class="vrapile-cropper-inner">
+        <view class="vrapile-cropper-content">
+          <image class="vrapile-cropper-image" :src="imageSrc" mode="aspectFit" 
+            :style="'transform:rotate('+rotateAll+'deg) rotateY('+rotateY+'deg) rotateX('+rotateX+'deg)'">
           </image>
-          <view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" 
+          <view class="vrapile-cropper-box" @touchstart.stop="contentStartMove" 
             @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
             :style="'left:'+cutL+'rpx;top:'+cutT+'rpx;right:'+cutR+'rpx;bottom:'+cutB+'rpx'">
-            <view class="uni-cropper-view-box">
-              <view class="uni-cropper-dashed-h"></view>
-              <view class="uni-cropper-dashed-v"></view>
-              <view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" 
+            <view class="vrapile-cropper-box-view">
+              <view class="vrapile-cropper-dashed-h"></view>
+              <view class="vrapile-cropper-dashed-v"></view>
+              <view class="vrapile-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-point point-tr" data-drag="topTight"></view>
-              <view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-point point-tr" data-drag="topRight"></view>
+              <view class="vrapile-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
-              <view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
-              <view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" 
+              <view class="vrapile-cropper-point point-bl" data-drag="bottomLeft"></view>
+              <view class="vrapile-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" 
                 @touchmove.stop="dragMove"></view>
-              <view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
+              <view class="vrapile-cropper-point point-lt" data-drag="leftTop"></view>
             </view>
           </view>
         </view>
       </view>
     </view>
-    <view class='cropper-operate'>
-      <view class="cropper-operate-button cropper-operate-button-upload" @click="getImage">
+    <view class="vrapile-operate">
+      <view class="vrapile-operate-button vrapile-operate-button-upload" @click="getImage">
         <uni-icons type="upload" size="20"></uni-icons>选择
       </view>
-      <view class="cropper-operate-button cropper-operate-button-reset" @click="refresh">
+      <view class="vrapile-operate-button vrapile-operate-button-reset" @click="reset">
         <uni-icons type="loop" size="20"></uni-icons>重置
       </view>
-      <view class="cropper-operate-button cropper-operate-button-reset" @click="rotateTopButtom">
+      <view class="vrapile-operate-button vrapile-operate-button-reset" @click="rotateTopButtom">
         <uni-icons type="left" size="20"></uni-icons>翻转
       </view>
-      <view class="cropper-operate-button cropper-operate-button-reset" @click="rotateLeftRight">
+      <view class="vrapile-operate-button vrapile-operate-button-reset" @click="rotateLeftRight">
         <uni-icons type="top" size="20"></uni-icons>翻转
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(90)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(90)">
         <uni-icons type="refreshempty" size="20"></uni-icons>
         90
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(-10)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(-10)">
         <uni-icons type="refreshempty" size="20" style="transform: rotateY(180deg);"></uni-icons>
         10
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(10)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(10)">
         <uni-icons type="refreshempty" size="20"></uni-icons>
         10
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(3)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(3)">
         <uni-icons type="refreshempty" size="20"></uni-icons>
         3
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(30)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(30)">
         <uni-icons type="plus" size="20"></uni-icons>
         30
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(-30)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(-30)">
         <uni-icons type="minus" size="20"></uni-icons>
         30
       </view>
-      <view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(3)">
+      <view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(3)">
         <uni-icons type="plus" size="20"></uni-icons>
         3
       </view>
     </view>
-    <view class='cropper-image' v-if="imageViewSrc">
-      <image mode="aspectFit" class='cropper-image-image' :src="imageViewSrc"></image>
+    <view class="vrapile-view" v-if="imageViewSrc">
+      <image class="vrapile-view-image" mode="aspectFit" :src="imageViewSrc"></image>
     </view>
-    <view class='cropper-config'>
-      <button class="cropper-config-button" type="warn" @click="saveImageInfo"> 提交 </button>
+    <view class="vrapile-submit">
+      <button class="vrapile-submit-button" type="warn" @click="saveImageInfo"> 提交 </button>
     </view>
-    <canvas class="cropper-canvas" canvas-id="imageCanvas"></canvas>
+    <canvas class="vrapile-canvas" canvas-id="imageCanvas"></canvas>
   </view>
 </template>
 
@@ -108,7 +108,7 @@
     DRAFG_MOVE_RATIO = 1 //移动时候的比例,
 
   export default {
-    name: 'cutImage',
+    name: "cutImage",
     props:{
       avatar:{
         type: String
@@ -236,7 +236,7 @@
         })
         this.getImageInfo()
       },
-      refresh(){
+      reset(){
         this.setData({
           cutL: 150,
           cutT: 150,
@@ -263,7 +263,7 @@
       // 获取图片
       getImageInfo() {
         // 将图片写入画布
-        let ctx = uni.createCanvasContext('imageCanvas', this)
+        let ctx = uni.createCanvasContext("imageCanvas", this)
         // 清除内容
         ctx.clearRect(0, 0, this.rpxToPx(750), this.rpxToPx(750))
         // 重置旋转内容
@@ -280,7 +280,7 @@
         }
         ctx.translate(this.rpxToPx(-375), this.rpxToPx(-375))
         // 设置canvas背景色
-        // ctx.fillStyle = 'black';
+        // ctx.fillStyle = "black";
         // ctx.fillRect(0, 0, this.rpxToPx(750), this.rpxToPx(750))
         ctx.drawImage(this.imageSrc, IMG_RATIO>=1?0:(IMG_REAL_H-IMG_REAL_W)/2, IMG_RATIO<=1?0:(IMG_REAL_W-IMG_REAL_H)/2, IMG_REAL_W, IMG_REAL_H)
         // 用户反馈，此处ios旋转后无法预览，改true为false可解决问题
@@ -293,7 +293,7 @@
             destWidth: this.rpxToPx(750 - this.cutL - this.cutR) * this.scaleTate,
             destHeight: this.rpxToPx(750 - this.cutT - this.cutB) * this.scaleTate,
             quality: 1,
-            canvasId: 'imageCanvas',
+            canvasId: "imageCanvas",
             success: (res)=> {
               this.setData({
                 imageViewSrc: res.tempFilePath
@@ -306,7 +306,7 @@
         })
       },
       saveImageInfo(){
-        this.$emit('save', {
+        this.$emit("save", {
           avatar: this.imageViewSrc
         })
         return this
@@ -363,22 +363,7 @@
       dragMove(e) {
         let dragType = e.target.dataset.drag
         switch (dragType) {
-          case 'right':
-            let dragLengthR = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
-            if (CUT_R + dragLengthR < 0) dragLengthR = -CUT_R
-            this.setData({
-              cutR: CUT_R + dragLengthR
-            })
-            break
-          case 'left':
-            let dragLengthL = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
-            if (CUT_L - dragLengthL < 0) dragLengthL = CUT_L
-            if ((CUT_L - dragLengthL) > (SCREEN_WIDTH - this.cutR)) dragLengthL = CUT_L - (SCREEN_WIDTH - this.cutR)
-            this.setData({
-              cutL: CUT_L - dragLengthL
-            })
-            break
-          case 'top':
+          case "top":
             let dragLengthT = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
             if (CUT_T - dragLengthT < 0) dragLengthT = CUT_T
             if ((CUT_T - dragLengthT) > (SCREEN_WIDTH - this.cutB)) dragLengthT = CUT_T - (SCREEN_WIDTH - this.cutB)
@@ -386,14 +371,29 @@
               cutT: CUT_T - dragLengthT
             })
             break
-          case 'bottom':
+          case "right":
+            let dragLengthR = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
+            if (CUT_R + dragLengthR < 0) dragLengthR = -CUT_R
+            this.setData({
+              cutR: CUT_R + dragLengthR
+            })
+            break
+          case "bottom":
             let dragLengthB = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
             if (CUT_B + dragLengthB < 0) dragLengthB = -CUT_B
             this.setData({
               cutB: CUT_B + dragLengthB
             })
             break
-          case 'rightBottom':
+          case "left":
+            let dragLengthL = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
+            if (CUT_L - dragLengthL < 0) dragLengthL = CUT_L
+            if ((CUT_L - dragLengthL) > (SCREEN_WIDTH - this.cutR)) dragLengthL = CUT_L - (SCREEN_WIDTH - this.cutR)
+            this.setData({
+              cutL: CUT_L - dragLengthL
+            })
+            break
+          case "rightBottom":
             let dragLengthRBX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
             let dragLengthRBY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
 
@@ -419,80 +419,16 @@
 </script>
 
 <style scoped>
-  .uni-content-info{
+  
+  .vrapile-content{
     height: 100%;
     overflow-y: auto;
   }
-  
-  .cropper-content {
+  .vrapile-cropper{
     min-height: 750rpx;
     width: 100%;
   }
-  .cropper-operate{
-    padding: 5rpx 10rpx;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-content: flex-start;
-  }
-  .cropper-operate-button{
-    margin: 5rpx 10rpx;
-    margin-top: 10rpx;
-    width: 80rpx;
-    padding: 10rpx 0;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10rpx;
-    font-size: 14px;
-    border: 3rpx solid gray;
-  }
-  .cropper-operate-button-upload{
-    width: 170rpx;
-  }
-  .cropper-operate-button-reset{
-    width: 110rpx;
-  }
-  .cropper-operate-button-rotate{
-    width: 80rpx;
-  }
-  .cropper-config {
-    position: fixed;
-    width: 100%;
-    bottom: 10rpx;
-    padding: 10rpx;
-    display: flex;
-    justify-content: space-between;
-    z-index: 2;
-  }
-  .cropper-config-button{
-    width: 90%;
-  }
-  .cropper-image{
-    padding: 10rpx 40rpx;
-    margin-bottom: 80rpx;
-    /* #ifndef H5 */
-    margin-bottom: 120rpx;
-    /* #endif */
-    display: flex;
-    justify-content: center;
-  }
-  .cropper-image-image{
-    width: 400rpx;
-    height: 400rpx;
-  }
-  
-  .cropper-canvas{
-    position:absolute;
-    width: 750rpx;
-    height: 750rpx;
-    top: -9999rpx;
-    left: -9999rpx;
-  }
-
-  .uni-corpper {
+  .vrapile-cropper-inner {
     position: relative;
     overflow: hidden;
     -webkit-user-select: none;
@@ -506,16 +442,16 @@
     height: 750rpx;
     background: #000;
   }
-
-  .uni-corpper-content {
+  .vrapile-cropper-content {
     position: relative;
-    width:750rpx;
-    height:750rpx;
-    left:0rpx;
-    top:0rpx
+    width: 750rpx;
+    height: 750rpx;
+    left: 0rpx;
+    top: 0rpx;
   }
-
-  .uni-corpper-content-image {
+  
+  /* 底层展示的图片 */
+  .vrapile-cropper-image {
     display: block;
     /* width: 100%; */
     min-width: 0 !important;
@@ -528,26 +464,14 @@
     width: 750rpx;
     height: 750rpx;
   }
-  /* 移动图片效果 */
-  .uni-cropper-drag-box {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    cursor: move;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 1;
-  }
-  /* 内部的信息 */
-
-  .uni-corpper-crop-box {
+  
+  /* 操作的方框 */
+  .vrapile-cropper-box {
     position: absolute;
     background: rgba(255, 255, 255, 0.3);
     z-index: 2;
   }
-
-  .uni-corpper-crop-box .uni-cropper-view-box {
+  .vrapile-cropper-box-view {
     position: relative;
     display: block;
     width: 100%;
@@ -556,9 +480,9 @@
     outline: 1rpx solid #69f;
     outline-color: rgba(102, 153, 255, .75)
   }
+  
   /* 横向虚线 */
-
-  .uni-cropper-dashed-h {
+  .vrapile-cropper-dashed-h {
     position: absolute;
     top: 33.33333333%;
     left: 0;
@@ -567,9 +491,9 @@
     border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
     border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
   }
+  
   /* 纵向虚线 */
-
-  .uni-cropper-dashed-v {
+  .vrapile-cropper-dashed-v {
     position: absolute;
     left: 33.33333333%;
     top: 0;
@@ -578,22 +502,21 @@
     border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
     border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
   }
+  
   /* 四个方向的线  为了之后的拖动事件*/
-
-  .uni-cropper-line-t {
+  .vrapile-cropper-line-t {
     position: absolute;
     display: block;
     width: 100%;
-    background-color: #69f;
+    background-color: #6699ff;
     top: 0;
     left: 0;
     height: 1rpx;
     opacity: 0.1;
     cursor: n-resize;
   }
-
-  .uni-cropper-line-t::before {
-    content: '';
+  .vrapile-cropper-line-t::before {
+    content: "";
     position: absolute;
     top: 50%;
     right: 0rpx;
@@ -605,11 +528,10 @@
     background: transparent;
     z-index: 11;
   }
-
-  .uni-cropper-line-r {
+  .vrapile-cropper-line-r {
     position: absolute;
     display: block;
-    background-color: #69f;
+    background-color: #6699ff;
     top: 0;
     right: 0rpx;
     width: 1rpx;
@@ -617,9 +539,8 @@
     height: 100%;
     cursor: e-resize;
   }
-
-  .uni-cropper-line-r::before {
-    content: '';
+  .vrapile-cropper-line-r::before {
+    content: "";
     position: absolute;
     top: 0;
     left: 50%;
@@ -631,21 +552,19 @@
     background: transparent;
     z-index: 11;
   }
-
-  .uni-cropper-line-b {
+  .vrapile-cropper-line-b {
     position: absolute;
     display: block;
     width: 100%;
-    background-color: #69f;
+    background-color: #6699ff;
     bottom: 0;
     left: 0;
     height: 1rpx;
     opacity: 0.1;
     cursor: s-resize;
   }
-
-  .uni-cropper-line-b::before {
-    content: '';
+  .vrapile-cropper-line-b::before {
+    content: "";
     position: absolute;
     top: 50%;
     right: 0rpx;
@@ -657,11 +576,10 @@
     background: transparent;
     z-index: 11;
   }
-
-  .uni-cropper-line-l {
+  .vrapile-cropper-line-l {
     position: absolute;
     display: block;
-    background-color: #69f;
+    background-color: #6699ff;
     top: 0;
     left: 0;
     width: 1rpx;
@@ -669,9 +587,8 @@
     height: 100%;
     cursor: w-resize;
   }
-
-  .uni-cropper-line-l::before {
-    content: '';
+  .vrapile-cropper-line-l::before {
+    content: "";
     position: absolute;
     top: 0;
     left: 50%;
@@ -684,81 +601,143 @@
     z-index: 11;
   }
 
-  .uni-cropper-point {
+  /* 四个角和四条线中间的点 */
+  .vrapile-cropper-point {
     width: 5rpx;
     height: 5rpx;
-    background-color: #69f;
-    opacity: .75;
+    background-color: #6699ff;
+    opacity: 0.75;
     position: absolute;
     z-index: 3;
   }
-
   .point-t {
     top: -3rpx;
     left: 50%;
     margin-left: -3rpx;
     cursor: n-resize;
   }
-
   .point-tr {
     top: -3rpx;
     left: 100%;
     margin-left: -3rpx;
-    cursor: n-resize;
+    cursor: ne-resize;
   }
-
   .point-r {
     top: 50%;
     left: 100%;
     margin-left: -3rpx;
     margin-top: -3rpx;
-    cursor: n-resize;
+    cursor: e-resize;
   }
-
   .point-rb {
     left: 100%;
     top: 100%;
     -webkit-transform: translate3d(-50%, -50%, 0);
     transform: translate3d(-50%, -50%, 0);
-    cursor: n-resize;
+    cursor: se-resize;
     width: 36rpx;
     height: 36rpx;
-    background-color: #69f;
+    background-color: #6699ff;
     position: absolute;
     z-index: 1112;
     opacity: 1;
   }
-
   .point-b {
     left: 50%;
     top: 100%;
     margin-left: -3rpx;
     margin-top: -3rpx;
-    cursor: n-resize;
+    cursor: s-resize;
   }
-
   .point-bl {
     left: 0%;
     top: 100%;
     margin-left: -3rpx;
     margin-top: -3rpx;
-    cursor: n-resize;
+    cursor: sw-resize;
   }
-
   .point-l {
     left: 0%;
     top: 50%;
     margin-left: -3rpx;
     margin-top: -3rpx;
-    cursor: n-resize;
+    cursor: w-resize;
   }
-
   .point-lt {
     left: 0%;
     top: 0%;
     margin-left: -3rpx;
     margin-top: -3rpx;
-    cursor: n-resize;
+    cursor: nw-resize;
+  }
+
+  /* 操作按钮 */
+  .vrapile-operate{
+    padding: 5rpx 10rpx;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: flex-start;
+  }
+  .vrapile-operate-button{
+    margin: 5rpx 10rpx;
+    margin-top: 10rpx;
+    width: 80rpx;
+    padding: 10rpx 0;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10rpx;
+    font-size: 14px;
+    border: 3rpx solid gray;
+  }
+  .vrapile-operate-button-upload{
+    width: 170rpx;
+  }
+  .vrapile-operate-button-reset{
+    width: 110rpx;
+  }
+  .vrapile-operate-button-rotate{
+    width: 80rpx;
+  }
+  
+  /* 提交按钮 */
+  .vrapile-submit {
+    position: fixed;
+    width: 100%;
+    bottom: 10rpx;
+    padding: 10rpx;
+    display: flex;
+    justify-content: space-between;
+    z-index: 2;
+  }
+  .vrapile-submit-button{
+    width: 90%;
+  }
+  
+  /* 裁剪图片预览 */
+  .vrapile-view{
+    padding: 10rpx 40rpx;
+    margin-bottom: 80rpx;
+    /* #ifndef H5 */
+    margin-bottom: 120rpx;
+    /* #endif */
+    display: flex;
+    justify-content: center;
+  }
+  .vrapile-view-image{
+    width: 400rpx;
+    height: 400rpx;
+  }
+  
+  /* canvas引入 */
+  .vrapile-canvas{
+    position:absolute;
+    width: 750rpx;
+    height: 750rpx;
+    top: -9999rpx;
+    left: -9999rpx;
   }
-    
 </style>
diff --git a/uni_modules/vrapile-cut-image/readme.md b/uni_modules/vrapile-cut-image/readme.md
index 5689ad3..9c618d0 100644
--- a/uni_modules/vrapile-cut-image/readme.md
+++ b/uni_modules/vrapile-cut-image/readme.md
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-  // import { uploadAvatar } from "@/api/system/user"
+  // import { uploadAvatar } from "@/api/system/user.js"
   export default {
     data() {
       return {