about 顶部栏

src/router/index.ts

@@ -127,7 +127,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Share',
     component: () => import('../views/login/Share.vue')
   },
-
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('../views/login/About.vue')
+  }
 ]
 
 const router = createRouter({

src/views/login/About.vue

@@ -1,5 +1,21 @@
 <template>
   <div class="about">
+    <div class="topnav">
+      <div class="navcontent">
+        <div class="left">
+          <img src="@/static/images/logo.png" alt="" class="logo">
+          <span class="orgname">Beelink</span>
+        </div>
+        <div class="right">
+          <div>立即登录</div>
+          <div class="signnow">立即注册</div>
+          <div class="line"></div>
+          <img src="@/static/images/yuyan.png" alt="" class="icon">
+          <div>中文</div>
+          <img src="@/static/images/jiantou2.png" alt="" class="arrow">
+        </div>
+      </div>
+    </div>
     <div class="top">
       <div class="titlebox">
         <div class="title">beelink</div>
@@ -96,6 +112,68 @@ export default defineComponent({
   color:white!important
 }
 .about {
+  .topnav{
+    width: 100%;
+    height: 57px;
+    background: white;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    .navcontent{
+      width: 910px;
+      margin: 0 auto;
+      display:flex;
+      justify-content: space-between;
+      align-items: center;
+      .left{
+        .logo{
+          width: 38px;
+          height: 36px;
+          margin-right:6px;
+        }
+        .orgname{
+          color: #0DBBA4;
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+      .right{
+        width: 282px;
+        font-size: 11px;
+        color:#111111;
+        display: flex;
+        align-items: center;
+        .signnow{
+          width: 85px;
+          height: 23px;
+          background: linear-gradient(90deg, #00DAC2, #42DE9D, #87E062, #D0EB3D, #FFFA18);
+          border-radius: 11px;
+          color: white;
+          text-align: center;
+          line-height: 23px;
+          margin-left: 26px;
+          margin-right: 23px;
+        }
+        .line{
+          width: 1px;
+          height: 18px;
+          background: #EEEEEE;
+          margin-right: 23px;
+        }
+        .icon{
+          width: 14px;
+          height: 14px;
+          margin-right: 6px;
+        }
+        .arrow{
+          width: 9px;
+          height: 5px;
+          margin-left: 28px;
+        }
+      }
+    }
+  }
   .top {
     width: 100%;
     height: 512px;