feat: print and perf style

src/views/components/cropping/index.vue

@@ -3,9 +3,9 @@ import { ref, nextTick, getCurrentInstance } from "vue";
 import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 
-const instance = getCurrentInstance();
 let info = ref<object>(null);
 let cropperImg = ref<string>("");
+const instance = getCurrentInstance();
 
 const onCropper = (): void => {
   nextTick(() => {
@@ -25,14 +25,19 @@ const onCropper = (): void => {
 </script>
 
 <template>
-  <div>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">图片裁剪组件</span>
+      </div>
+    </template>
     <div class="cropper-container">
       <Cropper ref="refCropper" :width="'40vw'" :src="img" />
       <img :src="cropperImg" class="croppered" v-if="cropperImg" />
     </div>
     <el-button type="primary" @click="onCropper">裁剪</el-button>
     <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
-  </div>
+  </el-card>
 </template>
 
 <style scoped>