优化打包构建

2026-06-23 10:53:32 +08:00
parent 57c24e133f
commit 4870a31b9e
2 changed files with 164 additions and 0 deletions
@@ -0,0 +1,95 @@
+<!--
+  @description 头像展示组件，带有悬停效果的圆形图片展示
+  @date 20260622
+-->
+<template>
+  <div
+    :style="{ height: height, width: width }"
+    class="pan-item"
+    :class="{ 'pan-item--hoverable': hoverable }"
+  >
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <img :src="image" class="pan-thumb" alt="avatar">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: String,
+      required: true
+    },
+    hoverable: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  &--hoverable:hover {
+    .pan-info {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+  opacity: 0;
+  transition: all 0.35s ease-in-out;
+  transform: translate3d(0, 0, 0);
+
+  .pan-info-roles-container {
+    padding: 20px;
+    text-align: center;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.35s ease-in-out;
+  object-fit: cover;
+}
+</style>