历史回顾-右侧article

src/views/History.vue

@@ -30,6 +30,47 @@
         </li>
       </ul>
     </menu>
+
+    <article>
+      <h2>{{ timeList[activeTimeId] }}</h2>
+      <img
+        class="splitter"
+        src="@/assets/images/splitter-history-top.png"
+        alt=""
+        draggable="false"
+      >
+      <div class="txt-wrapper">
+        <div
+          class="txt"
+        >
+          skjflksklflk;sdj喀什酱豆腐感受到了看过深刻的JFK流口水
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+          史蒂夫罗杰斯大量进口
+        </div>
+        <button class="left" />
+        <button class="right" />
+      </div>
+      <img
+        class="splitter"
+        src="@/assets/images/splitter-history-bottom.png"
+        alt=""
+        draggable="false"
+      >
+    </article>
   </div>
 </template>
 
@@ -197,5 +238,75 @@ export default {
       }
     }
   }
+
+  >article {
+    position: absolute;
+    top: 134px;
+    right: 114px;
+    width: 458px;
+    >h2 {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+      text-shadow: 0px 0px 9px #B0A179;
+      margin-bottom: 28px;
+      &::before {
+        content: '';
+        display: inline-block;
+        margin-right: 10px;
+        width: 3px;
+        height: 3px;
+        background: #B0A179;
+      }
+    }
+    >img.splitter {
+      width: 100%;
+      margin-bottom: 25px;
+    }
+    >.txt-wrapper {
+      margin-bottom: 20px;
+      position: relative;
+      padding-left: 40px;
+      padding-right: 35px;
+      >.txt {
+        min-height: 40px;
+        max-height: 500px;
+        overflow: auto;
+        font-size: 20px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.8);
+        line-height: 23px;
+        padding-right: 10px;
+        &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+          border-radius: 2px;
+        }
+      }
+      >button {
+        width: 36px;
+        height: 36px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background-size: 90%;
+        background-repeat: no-repeat;
+        &.left {
+          left: 0;
+          background-image: url(@/assets/images/arrow_left.png);
+          background-position: left center;
+        }
+        &.right {
+          right: 0;
+          background-image: url(@/assets/images/arrow_right.png);
+        background-position: right center;
+        }
+      }
+    }
+  }
 }
 </style>