ShangHaiInustrialMuseum/src/views/History.vue

<template>
  <div class="history">
    <h1>
      {{ timeList[activeTimeId] }}
    </h1>
    <menu>
      <img
        class="circle-no-light"
        src="@/assets/images/circle-no-light.png"
        alt=""
        draggable="false"
      >
      <img
        class="circle"
        src="@/assets/images/circle.png"
        alt=""
        draggable="false"
      >
      <ul>
        <li
          v-for="(time, idx) in timeList"
          :key="idx"
          :class="{active: activeTimeId === idx}"
          @click="activeTimeId = idx"
        >
          <div
            class="point"
          />
          {{ time }}
        </li>
      </ul>
    </menu>
  </div>
</template>

<script>
import {
  ref,
  reactive,
} from 'vue'

export default {
  name: 'HistoryView',
  setup () {
    const timeList = reactive([
      '开埠通商',
      '曲折发展',
      '步履维艰',
      '筚路蓝缕',
      '改革开放',
      '战略负重',
      '创新驱动',
      '追梦未来',
    ])
    const activeTimeId = ref(0)

    return {
      timeList,
      activeTimeId,
    }
  }
}
</script>

<style lang="less" scoped>
.history {
  >h1 {
    position: absolute;
    top: 51px;
    left: 81px;
    max-width: 50%;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 48px;
    font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
    font-weight: 800;
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.2);
    border-bottom: 1px solid rgba(217, 217, 217, 0.2);
  }
  >menu {
    position: absolute;
    top: 214px;
    left: 0;
    >img.circle-no-light {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
    }
    >img.circle {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
      z-index: 1;
    }
    >ul {
      >li {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        background: linear-gradient(270deg, #3A454F 0%, rgba(22,28,33,0) 100%);
        // border-radius: 3px;
        border: 1px solid;
        border-left: none;
        border-image: linear-gradient(270deg, rgba(78, 96, 112, 1), rgba(78, 96, 112, 0)) 1 1;
        margin-bottom: 15px;
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        // backdrop-filter: blur(5px); // 会导致产生层叠上下文！！！使得圆点无法在弧线上层！！！
        padding-right: 14px;
        cursor: pointer;
        position: relative;
        >.point {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #D1DCE5;
          box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
          z-index: 2;
        }
        &:hover {
          background: linear-gradient(270deg, #B0A179 0%, rgba(255,209,91,0) 100%);
          border-image: linear-gradient(270deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
        }
        &.active {
          font-size: 24px;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
          text-shadow: 0px 0px 10px #8B7C54;
          >.point {
            background: #FFFFFF;
            box-shadow: 0px 0px 12px 0px #FFD15B, 0px 0px 8px 0px #FFD15B, 0px 0px 10px 0px #FFD15B, 0px 0px 5px 0px #FFD15B;
          }
        }
        &:nth-of-type(1) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(48px + 80px);
          }
        }
        &:nth-of-type(2) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(43px + 80px);
          }
        }
        &:nth-of-type(3) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(50px + 80px);
          }
        }
        &:nth-of-type(4) {
          width: calc(170px + 25px * 4);
          >.point {
            margin-right: calc(65px + 80px);
          }
        }
        &:nth-of-type(5) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(40px + 80px);
          }
        }
        &:nth-of-type(6) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(23px + 80px);
          }
        }
        &:nth-of-type(7) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(15px + 80px);
          }
        }
        &:nth-of-type(8) {
          width: 170px;
          >.point {
            margin-right: calc(17px + 80px);
          }
        }
      }
    }
  }
}
</style>