6. 官网装修

首页

设计图资源： dribbble.com, 参考

图标：iconfont.cn

• 使用最新的svg方式
• 如果不想用在线的js，可以将js文件保存到本地，在main.ts中import

渐变生成工具： https://cssgradient.io/

使用clip-path制作底部圆弧

.topNavandBanner {
     clip-path: ellipse(80% 60% at 50% 40%); /* 椭圆x轴长度 y轴长度 at x轴位置 y轴位置 */
}

文档页

高亮当前路由

当路由被点击时，会自动添加router-link-active 和 router-link-exact-active类

<a aria-current="page" 
   href="#/doc/switch" 
   class="router-link-active router-link-exact-active" 
   data-v-27b63eee="">Switch组件</a>

引入github-markdown-css

 npm install github-markdown-css

在main.ts引入

import 'github-markdown-css'

给要使用样式的地方添加markdown-body类

<article class="markdown-body">

用a标签实现路由跳转

<a href="#/doc/install">安装</a>

rotateX实现height从中间向两头增长

.router-link-active {
              color: #011627;
              background: $heighlight-grey;
              position: relative;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 3px;
                    height: 100%;
                    background-color: $yellow;
                    animation: bdrolate 800ms;
                }
        }
@keyframes bdrolate {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}