实习总结 - 广告位管理 - 设计实现（1） - 页面布局

任何时候都不要忘记微笑~ 

1. 文件夹

localhost:9528/#/market/advert/edit/new

2. 路由

{
        path: 'advert',
        name: 'advert',
        component: () => import('@/views/advert/index'),
        meta: {
          title: '广告位管理',
          icon: 'table'
        },
        // redirect: '/market/advert/list',
        children: [{
            path: '/',
            name: 'list',
            component: () => import('@/views/advert/list'),
            meta: {
              title: '广告位管理',
              icon: 'tree',
              breadcrumb: false
            },
            hidden: true
          },
          {
            path: 'edit/:id',
            name: 'edit',
            component: () => import('@/views/advert/edit'),
            meta: {
              title: '新建广告位',
              icon: 'tree'
            },
            hidden: true
          }
        ]
      },

3. 静态页面设计

广告位管理主页面列表 list.vue

<template>
  <div class="admin-layout base-layout-warp coupon">
    <div class="layout-header">广告位管理</div>
    <div class="layout-col2">
      <div class="layout-float">
        <div class="float-item">
          <el-select v-model="searchParams.status" placeholder="发布状态">
            <el-option
              v-for="(item,index) in Object.keys(PublishMap)"
              :value="item"
              :key="index"
              :label="PublishMap[item]"
            />
          </el-select>
        </div>
        <div class="float-item">
          <el-select v-model="searchParams.adsPosition" placeholder="推广位置">
            <el-option
              v-for="(item,index) in PositionMap"
              :value="item.value"
              :key="index"
              :label="item.label"
            />
          </el-select>
        </div>
        <div class="float-item">
          <el-input v-model="searchParams.query" placeholder="请输入广告ID或广告名称" />
        </div>
        <div class="float-item">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="clearbtn">清空</el-button>
        </div>
      </div>
      <div class="float-item" style="float：right;">
        <el-button type="primary" @click="createNew">新建广告</el-button>
      </div>
    </div>
    <div class="layout-content">
      <el-table :data="advList" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="id" label="广告ID" max-width="100" /