.

src/components/ImgContent.vue

@@ -1,7 +1,7 @@
 <template>
-    <van-image :src="src" :fit="fit">
+    <van-image :src="src" :fit="fit" :radius="radius">
         <template v-slot:loading>
-            <loading></loading>
+            <loading :radius="radius"></loading>
         </template>
     </van-image>
 </template>
@@ -10,10 +10,15 @@
 import { Image } from 'vant';
 import Loading from './Loading.vue';
 export default {
-    props: ['src', 'fit'],
+    props: ['src', 'fit', 'radius'],
     components: {
         'van-image': Image,
         Loading
     }
 };
 </script>
+<style lang="less" scoped>
+.van-image {
+    overflow: hidden;
+}
+</style>

src/components/Loading.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="loading-content">
-        <div class="loading">
+        <div class="loading" :style="{ borderRadius: borderRadius }">
             <img class="img1" src="@assets/01.png" alt="" />
             <img class="img2" src="@assets/02.png" alt="" />
         </div>
@@ -8,7 +8,21 @@
 </template>
 
 <script>
-export default {};
+export default {
+    props: {
+        radius: {
+            type: [String, Number],
+            default: '0px'
+        }
+    },
+    computed: {
+        borderRadius() {
+            let str = (this.radius || '').toString().replace(/px/, '');
+            str += 'px';
+            return str;
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
@@ -17,6 +31,7 @@ export default {};
     justify-content: center;
     width: 100%;
     position: relative;
+    overflow: hidden;
 }
 
 .loading {

src/styles/app.less

@@ -237,8 +237,9 @@ input:-webkit-autofill {
 }
 
 .activeAvatar {
-    overflow: initial !important;
-    background-color: #fff;
+    // overflow: initial !important;
+    padding: 0.5%;
+    // background-color: #fff;
     img {
         border-radius: 100px;
         // border: 4px solid;
@@ -263,8 +264,8 @@ input:-webkit-autofill {
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 124%;
-        height: 124%;
+        width: 114%;
+        height: 114%;
     }
 }
 

src/views/Mine.vue

@@ -23,7 +23,7 @@
             <div class="userInfo-content">
                 <div class="userInfo-top">
                     <van-image
-                        round
+                        radius="100"
                         width="150"
                         height="150"
                         :src="

src/views/creator/Detail.vue

@@ -481,6 +481,7 @@ export default {
     .van-image {
         border: 5px solid @bg;
         flex-shrink: 0;
+        background-color: #fff;
 
         &.rank {
             border-color: transparent;
@@ -493,7 +494,7 @@ export default {
         display: block;
         height: auto;
         position: absolute;
-        top: -8px;
+        top: -10px;
         left: 1px;
     }