| | |
| | | background-color: var(--color-bg-2); |
| | | .tab-bar-box { |
| | | display: flex; |
| | | padding: 0 0 0 20px; |
| | | padding: 0; |
| | | background-color: var(--color-bg-2); |
| | | border-bottom: 1px solid var(--color-border); |
| | | // border-bottom: 1px solid var(--color-border); |
| | | height: 100%; |
| | | .tab-bar-scroll { |
| | | flex: 1; |
| | |
| | | user-select: none; |
| | | } |
| | | .link-activated { |
| | | color: $main; |
| | | // color: $main; |
| | | color: #1057fd; |
| | | .tag-link { |
| | | color: $main; |
| | | } |
| | |
| | | <div class="layout-right"> |
| | | <div class="layout-header"> |
| | | <div class="app-header"> |
| | | <app-bread></app-bread> |
| | | <!-- <app-bread></app-bread> --> |
| | | <app-tags></app-tags> |
| | | <app-header-right></app-header-right> |
| | | </div> |
| | | <app-tags></app-tags> |
| | | <!-- <app-tags></app-tags> --> |
| | | </div> |
| | | <div class="layout-content"> |
| | | <app-main></app-main> |
| | |
| | | <template> |
| | | <div> |
| | | <p>{{ title }}</p> |
| | | <a-cascader :options="data" :style="{ width: '250px' }" :placeholder="placeholder" /> |
| | | <a-cascader :options="data" :placeholder="placeholder" /> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup name="TheACascader"> |
| | |
| | | <template> |
| | | <div> |
| | | <p>{{ title }}</p> |
| | | <a-input-search :style="{ width: '250px' }" :placeholder="placeholder" /> |
| | | <a-input-search :placeholder="placeholder" /> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup name="TheASearch"> |
| | |
| | | <template> |
| | | <div> |
| | | <p>{{ title }}</p> |
| | | <a-select :style="{ width: '100px' }" :placeholder="placeholder"> |
| | | <a-select :placeholder="placeholder"> |
| | | <a-option v-for="(item, key) in data" :key="key">{{ item }}</a-option> |
| | | </a-select> |
| | | </div> |
| | |
| | | } |
| | | } |
| | | .icon-card { |
| | | min-width: 88px; |
| | | max-width: 208px; |
| | | // min-width: 88px; |
| | | // max-width: 208px; |
| | | width: 100%; |
| | | min-height: 77px; |
| | | border-radius: 4px; |
| | | box-sizing: border-box; |
| | | margin-right: 10px; |
| | | flex: 1; |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | |
| | | } |
| | | } |
| | | .main { |
| | | padding: 8px 20px; |
| | | padding: 8px 12px; |
| | | background: var(--color-bg-2); |
| | | margin-top: 8px; |
| | | flex: 1; |
| | |
| | | overflow: hidden; |
| | | > div { |
| | | float: left; |
| | | margin: 0 20px 20px 0; |
| | | margin: 0 12px 12px 0; |
| | | } |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div class="comprehensive"> |
| | | <div> |
| | | <div class="top-title"> |
| | | <the-icon-card |
| | | v-for="(item, index) in dataList" |
| | |
| | | </a-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="main"> |
| | | <!-- <a-scrollbar class="box-scrollbar" style="height: calc(100vh - 300px) overflow: auto"> --> |
| | | <div class="cards"> |
| | | <the-box-card |
| | | v-for="(item, index) in list" |
| | |
| | | ></the-box-card> |
| | | </div> |
| | | <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" /> |
| | | <!-- </a-scrollbar> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | } |
| | | .top-title { |
| | | display: flex; |
| | | width: 100%; |
| | | } |
| | | .card-box { |
| | | width: 391px; |
| | |
| | | .menus { |
| | | position: relative; |
| | | background: var(--color-bg-2); |
| | | margin-top: 8px; |
| | | // margin-top: 8px; |
| | | padding: 14px 20px; |
| | | display: flex; |
| | | > div { |