Fix(image): replace the image tag with background-image to prevent the stretching

Author: Armour

src/components/PanThumb/index.vue

@@ -8,10 +8,10 @@
         <slot />
       </div>
     </div>
-    <img
-      :src="image"
+    <div
+      :style="{backgroundImage: `url(${image})`}"
       class="pan-thumb"
-    >
+    />
   </div>
 </template>
 
@@ -113,24 +113,12 @@ export default class extends Vue {
 .pan-thumb {
   width: 100%;
   height: 100%;
-  background-size: 100%;
+  background-position: center center;
+  background-size: cover;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
   transform-origin: 95% 40%;
   transition: all 0.3s ease-in-out;
-
-  &:after {
-    content: '';
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    border-radius: 50%;
-    top: 40%;
-    left: 95%;
-    margin: -4px 0 0 -4px;
-    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-  }
 }
 </style>