| | |
| | | <div class="current-page-box"> |
| | | <div v-for="(item, index) in data" :key="index"> |
| | | <div v-if="index == 0"> |
| | | <div class="m10 grid-content bg-purple-dark"> |
| | | <el-tag effect="dark" type="danger" color="red"> |
| | | <span style="display: inline-block; min-width: 60px;"> |
| | | {{ item.name }} |
| | | </span> |
| | | </el-tag> |
| | | </div> |
| | | <box-title class="m10" :title="item.name"></box-title> |
| | | |
| | | <div v-for="(item1, childIndex) in item.children" :key="childIndex"> |
| | | <div class="m20 m-t-28 grid-content bg-purple-dark"> |
| | |
| | | </div> |
| | | |
| | | <div v-if="index == 1"> |
| | | <div class="m10 grid-content bg-purple-dark"> |
| | | <el-tag effect="dark" type="danger" color="red"> |
| | | <span style="display: inline-block; min-width: 60px;"> |
| | | {{ item.name }} |
| | | </span> |
| | | </el-tag> |
| | | </div> |
| | | <box-title class="m10" :title="item.name"></box-title> |
| | | |
| | | <div class="grid-container"> |
| | | <div v-for="(item1, childIndex) in item.children" :key="childIndex"> |
| | |
| | | </div> |
| | | |
| | | <div v-if="index == 2"> |
| | | <div class="m10 grid-content bg-purple-dark"> |
| | | <el-tag effect="dark" type="danger" color="red"> |
| | | <span style="display: inline-block; min-width: 60px;"> |
| | | {{ item.name }} |
| | | </span> |
| | | </el-tag> |
| | | </div> |
| | | <box-title class="m10" :title="item.name"></box-title> |
| | | |
| | | <div class="grid-container"> |
| | | <div> |
| | |
| | | update, |
| | | remove |
| | | } from '@/api/label/label' |
| | | |
| | | import boxTitle from '../components/boxTitle.vue' |
| | | |
| | | export default { |
| | | data () { |
| | | return { |
| | |
| | | }, |
| | | } |
| | | }, |
| | | |
| | | components: { boxTitle }, |
| | | |
| | | mounted () { |
| | | this.onLoad() |
| | | }, |
| | | |
| | | methods: { |
| | | onLoad (page, params = {}) { |
| | | this.loading = true |
| | |
| | | } |
| | | |
| | | .grid-container>div { |
| | | margin: 10px; |
| | | padding: 12px 8px; |
| | | margin: 18px; |
| | | padding: 10px 8px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | width: calc(100% / 6 - 20px); |
| | | background-color: #097FFE; |
| | | width: calc(100% / 6 - 36px); |
| | | background-color: #429FFF; |
| | | text-align: center; |
| | | border-radius: 10px; |
| | | box-sizing: border-box; |
| | | |
| | | &>div { |
| | | line-height: 24px; |
| | | font-size: 14px; |
| | | line-height: 22px; |
| | | text-align: center; |
| | | } |
| | | |
| | | &>div:first-child { |
| | | font-size: 20px; |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | } |
| | | } |