历史回顾-人物卡片

src/components/HistoryPersonCard.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="history-person-card"
+    :class="{
+      tall: tallOrFat === 'tall',
+      fat: tallOrFat === 'fat',
+    }"
+  >
+    <h1 class="name">
+      {{ name }}
+    </h1>
+    <div
+      class="content-wrap"
+      :class="{
+        tall: tallOrFat === 'tall',
+        fat: tallOrFat === 'fat',
+      }"
+    >
+      <img
+        v-if="img"
+        class="portrait"
+        :class="{
+          tall: tallOrFat === 'tall',
+          fat: tallOrFat === 'fat',
+        }"
+        src=""
+        alt=""
+        draggable="false"
+      >
+      <div
+        class="text"
+        :class="{
+          tall: tallOrFat === 'tall',
+          fat: tallOrFat === 'fat',
+        }"
+      >
+        {{ text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name',
+    'img',
+    'text',
+    'tallOrFat',
+  ]
+}
+</script>
+
+<style lang="less" scoped>
+.history-person-card {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding: 5px;
+  backdrop-filter: blur(5px);
+  &.tall{
+    text-align: center;
+    background-image: url(@/assets/images/bg-person-card-tall.png);
+    width: 354px;
+    height: 559px;
+  }
+  &.fat{
+    background-image: url(@/assets/images/bg-person-card-fat.png);
+    width: 431px;
+    height: 297px;
+  }
+  >h1.name{
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #ECDCA6;
+    line-height: 28px;
+  }
+  >.content-wrap {
+    &.tall{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 440px;
+    }
+    &.fat{
+      display: flex;
+      margin-top: 20px;
+      margin-left: 20px;
+      margin-right: 20px;
+      display: flex;
+      height: 170px;
+    }
+    >img.portrait{
+      flex: 0 0 auto;
+      &.tall{
+        margin-top: 20px;
+        width: 210px;
+        height: 220px;
+      }
+      &.fat {
+        width:  121px;
+        height: 166px;
+      }
+    }
+    >.text{
+      text-align: initial;
+      flex: 1 0 1px;
+      padding-right: 4px;
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 1.5;
+      opacity: 0.7;
+      overflow: auto;
+      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: rgba(220, 231, 240, 0.2);
+        border-radius: 2px;
+      }
+      &.tall{
+        margin-top: 20px;
+        margin-left: 39px;
+        margin-right: 35px;
+      }
+      &.fat{
+        margin-left: 20px;
+      }
+    }
+  }
+}
+</style>