micro_vue/src/scrm_pages/site/components/new-feature.vue

<template>
<div class="feature">
    <ul >
        <li>
            <span>
              <img :src="new1" alt="">
              <p>轮播图</p>  
            </span>
        </li>
         <li>
           <span>
              <img :src="new1" alt="">
              <p>轮播图</p>  
            </span>  
        </li>
         <li>
           <span>
              <img :src="new1" alt="">
              <p>轮播图</p>  
            </span>  
        </li>
         <li>
           <span>
              <img :src="new1" alt="">
              <p>轮播图</p>  
            </span>  
        </li>
         <li>
           <span>
              <img :src="new1" alt="">
              <p class="title">轮播图</p>  
            </span>  
        </li>
    </ul>
    <!-- <el-row :gutter="21" type="flex"  justify="space-around">
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
    </el-row>
    <el-row :gutter="21" type="flex"  justify="space-around">
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
    </el-row>
    <el-row :gutter="21" type="flex"  justify="space-around">
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
    </el-row> -->
</div>    
</template>


<script>
export default {
  name: "newfeature",
  data() {
    return {
      new1: require("../../../assets/preview/new-1.png")
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.feature {
  ul {
    border: 1px solid #eaeefb;
    float: left;
    width: 100%;
    li {
      width: 33.3%;
      float: left;
      text-align: center;
      height: 120px;
      color: #666;
      font-size: 13px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-right: -1px;
      margin-bottom: -1px;
      span {
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 120px;
        img {
          display: inline-block;
          font-size: 32px;
          margin-bottom: 15px;
          color: #606266;
          transition: color 0.15s linear;
          vertical-align: middle;
        }
        .title {
          display: inline-block;
          padding: 0 3px;
          height: 30px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>