素材管理（一）-基础布局-面包屑导航、图片水平布局和v-for+：key遍历

01-素材管理-基础布局

新建并引入素材模块

路由：router/index.js

import Image from '@/views/image' 
{ path: '/image', name: 'image', component: Image }

组件：views/image/index.vue

<template>
  <div class="container">
    <el-card>
      <!-- 面包屑导航 -->
      <div slot="header">
        <my-bread>素材管理</my-bread>
      </div>
      <!-- 按钮盒子 -->
      <div class="btn_box">
        <el-radio-group v-model="reqParams.collect" size="small">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button style="float:right" type="success" size="small">添加素材</el-button>
      </div>
      <!-- 图片列表 -->
      <div class="img_list">
          <!-- 遍历10次，：key突出唯一性 -->
        <div class="img_item" v-for="item in 10" :key="item">
          <img src="../../assets/images/avatar.jpg" alt />
          <div class="option">
            <span class="el-icon-star-off" :class="{red:item===3}"></span>
            <span class="el-icon-delete"></span>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination style="text-align:center" background layout="prev, pager, next" :total="1000"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      reqParams: {
        // false 全部  true 收藏
        collect: false,
        page: 1,
        per_page: 10
      }
    }
  }
}
</script>

<style scoped lang='less'>
.img_list {
  margin-top: 20px;
  .img_item {
    width: 160px;
    height: 160px;
    border: 1px dashed #ddd;
    position: relative;
      //转行内块，横排平铺图片，不需要清除浮动
    display: inline-block;
    margin-right: 50px;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
        //转块元素
      display: block;
    }
    .option {
      width: 100%;
      height: 30px;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      bottom: 0;
      color: #fff;
        //垂直水平居中
      text-align: center;
      line-height: 30px;
      span {
        margin: 0 30px;
        &.red {
          color: red;
        }
      }
    }
  }
}
</style>