傻逼玩意儿

src/components/HistoryPersonCard.vue

@@ -6,35 +6,57 @@
       fat: tallOrFat === 'fat',
     }"
   >
-    <h1 class="name">
-      {{ name }}
-    </h1>
     <div
-      class="content-wrap"
+      class="inner-wrap"
       :class="{
         tall: tallOrFat === 'tall',
         fat: tallOrFat === 'fat',
       }"
     >
+      <h1 class="name">
+        {{ name }}
+      </h1>
       <img
-        v-if="img"
-        class="portrait"
-        :class="{
-          tall: tallOrFat === 'tall',
-          fat: tallOrFat === 'fat',
-        }"
-        :src="img"
+        v-if="tallOrFat === 'tall'"
+        src="@/assets/images/line_short.png"
         alt=""
+        class="splitter"
+        draggable="false"
+      >
+      <img
+        v-if="tallOrFat === 'fat'"
+        src="@/assets/images/line_long.png"
+        alt=""
+        class="splitter"
         draggable="false"
       >
       <div
-        class="text"
+        class="content-wrap"
         :class="{
           tall: tallOrFat === 'tall',
           fat: tallOrFat === 'fat',
         }"
       >
-        {{ text }}
+        <img
+          v-if="img"
+          class="portrait"
+          :class="{
+            tall: tallOrFat === 'tall',
+            fat: tallOrFat === 'fat',
+          }"
+          :src="img"
+          alt=""
+          draggable="false"
+        >
+        <div
+          class="text"
+          :class="{
+            tall: tallOrFat === 'tall',
+            fat: tallOrFat === 'fat',
+          }"
+        >
+          {{ text }}
+        </div>
       </div>
     </div>
   </div>
@@ -56,81 +78,101 @@ export default {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
-  padding: 5px;
+  padding: 8px;
   backdrop-filter: blur(5px);
+  background-color: rgba(6, 11, 26, 0.20);
+  box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.3);
   &.tall{
     text-align: center;
-    background-image: url(@/assets/images/bg-person-card-tall.png);
     width: 354px;
-    height: 559px;
+    height: 509px;
   }
   &.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;
+    width: 389px;
+    height: 268px;
   }
-  >.content-wrap {
+  >.inner-wrap{
+    width: 100%;
+    height: 100%;
+    text-align: center;
     &.tall{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      height: 440px;
+      background-image: url(@/assets/images/bg-person-card-tall.png);
     }
     &.fat{
+      background-image: url(@/assets/images/bg-person-card-fat.png);
+    }
+    >h1.name{
+      padding-top: 20px;
+      height: 70px;
       display: flex;
-      margin-top: 20px;
-      margin-left: 20px;
-      margin-right: 20px;
-      display: flex;
-      height: 170px;
+      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;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
     }
-    >img.portrait{
-      flex: 0 0 auto;
-      object-fit: cover;
-      &.tall{
-        margin-top: 20px;
-        width: 210px;
-        height: 220px;
-      }
-      &.fat {
-        width:  121px;
-        height: 166px;
-      }
+    >img.splitter{
+      height: 10px;
     }
-    >.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;
-      }
+    >.content-wrap {
       &.tall{
-        margin-top: 20px;
-        margin-left: 39px;
-        margin-right: 35px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 390px;
       }
       &.fat{
+        display: flex;
+        margin-top: 10px;
         margin-left: 20px;
+        margin-right: 20px;
+        display: flex;
+        height: 170px;
+      }
+      >img.portrait{
+        flex: 0 0 auto;
+        object-fit: cover;
+        &.tall{
+          margin-top: 20px;
+          width: 210px;
+          height: 220px;
+        }
+        &.fat {
+          width:  101px;
+          height: 139px;
+        }
+      }
+      >.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;
+        text-indent: 2em;
+        &::-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;
+          margin-bottom: 30px;
+        }
       }
     }
   }

src/views/HistoryNew.vue

@@ -106,7 +106,7 @@ export default {
     HistoryPersonCard,
   },
   setup () {
-    const spaceEachPerson = 300
+    const spaceEachPerson = 220
 
     // 时代阶段
     const stageList = reactive([
@@ -213,7 +213,7 @@ export default {
         stageItem.endPos = temp + stageItem.width
         temp = stageItem.endPos
       }
-      maxTranslateLength.value = stageList[stageList.length - 1].endPos + window.innerWidth / 5
+      maxTranslateLength.value = stageList[stageList.length - 1].endPos
     })
 
     // 用户操作相关
@@ -307,12 +307,12 @@ export default {
 
       // 根据速度更新位置
       translateLength.value += moveSpeed.value * timeElapsed
-      if (translateLength.value < - window.innerWidth / 2) {
-        translateLength.value = - window.innerWidth / 2
+      if (translateLength.value < 0) {
+        translateLength.value = 0
         moveSpeed.value = 0
       } else if (translateLength.value > maxTranslateLength.value) {
         if (isAutoMoving.value) {
-          translateLength.value = -window.innerWidth / 2
+          translateLength.value = 0
         } else {
           translateLength.value = maxTranslateLength.value
           moveSpeed.value = 0
@@ -413,7 +413,7 @@ export default {
               ...personItem,
               initialLeft: (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5),
               left: (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5),
-              top: Math.random() * 70 + (tallOrFat === 'tall' ? 200 : 350),
+              top: Math.random() * 70 + (tallOrFat === 'tall' ? 250 : 350),
               tallOrFat,
               zIndex: tallOrFat === 'tall' ? 5 : 4,
               filter: `brightness(${tallOrFat === 'tall' ? '1' : '0.75'})`,