1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <template>
- <div class="">
- <p class="headline">飞信云开发文档</p>
- <p class="subhead">请点击左侧目录查看文档详情</p>
- <div class="document-img">
- <img src="../assets/images/bg_06.png" alt="" />
- </div>
- <div class="fast-menu">
- <p class="menu-headline">快捷跳转</p>
- <div class="menu-list">
- <div class="menu-item one-row active-menu-item">目录名称1</div>
- <div class="menu-item one-row">目录名称1</div>
- <div class="menu-item one-row">目录名称1</div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import {} from "vue";
- </script>
- <style scoped lang="scss">
- .headline {
- font-size: var(--size-32);
- font-weight: var(--weight-700);
- padding-bottom: var(--size-10);
- }
- .subhead {
- font-size: var(--size-16);
- padding-bottom: var(--size-24);
- }
- .document-img {
- width: 897px;
- height: 449px;
- }
- .fast-menu {
- padding-top: var(--size-30);
- .menu-headline {
- font-size: var(--size-24);
- font-weight: var(--weight-700);
- }
- .menu-list {
- display: flex;
- flex-direction: row;
- align-items: stretch;
- .menu-item {
- cursor: pointer;
- margin: var(--size-10) var(--size-10) 0 0;
- min-width: 128px;
- height: 45px;
- background: var(--color-06);
- border-radius: var(--size-6);
- text-align: center;
- line-height: 45px;
- padding: 0 var(--size-10);
- }
- .active-menu-item {
- background-color: var(--color-08);
- color: var(--color-04);
- }
- }
- }
- </style>
|