ceramic/src/components/ProjectCase.vue

<template>
  <div class="projectCase">
    <div class="case_bg">
      <el-row>
        <div class="cases_title">
          <h2>工程案例</h2>
          <h3>—— Engineering Case ——</h3>
          <div class="case_more">
            <a href="">查看所有</a>
          </div>
        </div>
      </el-row>
      <el-row type="flex">
        <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
          <el-row type="flex">
            <el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
              <ul>
                <li>
                  <div class="pics">
                    <el-image
                      class="img"
                      :src="item.src"
                      :preview-src-list="imgBigList">
                    </el-image>
                  </div>
                  <div class="case_info">{{ item.projectName }}</div>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Projects",
  data() {
    return {
      projectList: [
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
          projectName: '大学城新校区教学楼'
        },
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
          projectName: '嘉兴中山名都'
        },
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
          projectName: '蒲田公安局'
        }, {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
          projectName: '财政局大厦'
        }
        , {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
          projectName: '西安市雅盛大厦'
        }, {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
          projectName: '武汉市金晖大厦'
        }, {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
          projectName: '杭州市风情小区'
        }, {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
          projectName: '金湖花园'
        },

      ],
      imgBigList:[
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg',
        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg',
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.el-row--flex {
  display: flex;
  flex-wrap: wrap;
}

* {
  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
}

.projectCase {
  min-height: 900px;

  .case_bg {
    min-width: 1300px;
    background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
    background-size: cover;
    height: 540px;

    .cases_title {
      position: relative;
      display: block;
      width: 100%;
      float: left;
      padding: 100px 0 80px;
      text-align: center;

      h2 {
        color: #fff;
        line-height: 40px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }

      h3 {
        color: #9b9b9b;
        font-size: 16px;
        text-align: center;
        height: 28.8px;
        line-height: 28.8px;
      }

      .case_more {
        margin: 20px 0 0;
        text-align: center;

        a:hover {
          text-decoration: underline;
        }

        a {
          color: #e2c8ab;
          display: inline-block;
          width: 150px;
          height: 40px;
          line-height: 40px;
          background-color: #201e25;
          font-size: 14px;
        }
      }
    }

    .case_example {
      background-color: #fff;
      padding: 10px 10px 0 10px;

      ul {
        li:last-child {
          margin-right: 0;
        }

        li:nth-child(4) {
          margin-right: 0;
        }

        li {
          display: inline-block;
          margin-right: 9px;

          .pics {
            overflow: hidden;
            margin: 0 0 5px 0;

            .img {
              display: block;
              width: 100%;
              transition: all 0.6s;
              cursor: pointer;
            }

            .img:hover {
              filter: brightness(85%);
              opacity: 1;
              transform: scale(1.2);
            }
          }

          .case_info {
            width: 100%;
            float: left;
            font-size: 16px;
            text-align: center;
            line-height: 28.8px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>