历史回顾-左侧的傻逼菜单

src/App.vue

@@ -99,7 +99,7 @@ export default {
     HomeFadeIn,
   },
   setup () {
-    const isShowFadeInMask = ref(true)
+    const isShowFadeInMask = ref(false)
     function onLoadingEnd() {
       isShowFadeInMask.value = false
     }

src/views/General.vue

@@ -2,8 +2,11 @@
   <div
     class="general"
   >
-    <h1 :title="'离开的监管机构'">
-      离开的监管机构
+    <h1
+      v-if="activeCorpInfo"
+      :title="activeCorpInfo.name"
+    >
+      {{ activeCorpInfo.name }}
     </h1>
     <form @submit="onSearch">
       <input
@@ -253,7 +256,7 @@ export default {
         width: 323px;
         height: 47px;
         background: linear-gradient(92deg, rgba(176,161,121,0) 0%, rgba(176,161,121,0.3) 50%, rgba(176,161,121,0) 100%);
-        border-radius: 3px 3px 3px 3px;
+        // border-radius: 3px;
         font-size: 16px;
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
@@ -353,10 +356,6 @@ export default {
         &:hover {
           background: linear-gradient(90deg, #B0A179 0%, rgba(255,209,91,0) 100%);
           border-image: linear-gradient(98deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
-          >.item-icon {
-            background: #FFFFFF;
-            box-shadow: 0px 0px 12px 0px #FFD15B, 0px 0px 8px 0px #FFD15B, 0px 0px 10px 0px #FFD15B, 0px 0px 5px 0px #FFD15B;
-          }
         }
         &.active {
           background: linear-gradient(90deg, #B0A179 0%, rgba(255,209,91,0) 100%);

src/views/History.vue

@@ -1,21 +1,103 @@
 <template>
   <div class="history">
-    sfsd
+    <h1>
+      {{ 'sdfsdfsdfsdf' }}
+    </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
+          :class="{active: activeTimeId === 0}"
+          @click="activeTimeId = 0"
+        >
+          <div
+            class="point"
+          />开埠通商
+        </li>
+        <li
+          :class="{active: activeTimeId === 1}"
+          @click="activeTimeId = 1"
+        >
+          <div
+            class="point"
+          />曲折发展
+        </li>
+        <li
+          :class="{active: activeTimeId === 2}"
+          @click="activeTimeId = 2"
+        >
+          <div
+            class="point"
+          />步履维艰
+        </li>
+        <li
+          :class="{active: activeTimeId === 3}"
+          @click="activeTimeId = 3"
+        >
+          <div
+            class="point"
+          />筚路蓝缕
+        </li>
+        <li
+          :class="{active: activeTimeId === 4}"
+          @click="activeTimeId = 4"
+        >
+          <div
+            class="point"
+          />改革开放
+        </li>
+        <li
+          :class="{active: activeTimeId === 5}"
+          @click="activeTimeId = 5"
+        >
+          <div
+            class="point"
+          />战略负重
+        </li>
+        <li
+          :class="{active: activeTimeId === 6}"
+          @click="activeTimeId = 6"
+        >
+          <div
+            class="point"
+          />创新驱动
+        </li>
+        <li
+          :class="{active: activeTimeId === 7}"
+          @click="activeTimeId = 7"
+        >
+          <div
+            class="point"
+          />追梦未来
+        </li>
+      </ul>
+    </menu>
   </div>
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
+import {
+  ref
+} from 'vue'
 
 export default {
   name: 'HistoryView',
   setup () {
-    const state = reactive({
-      count: 0,
-    })
+    const activeTimeId = ref(0)
 
     return {
-      ...toRefs(state),
+      activeTimeId,
     }
   }
 }
@@ -23,6 +105,138 @@ export default {
 
 <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>