ceramic/src/components/AboutUs.vue

<template>
  <div class="aboutUs">
    <el-row style="">
      <el-row>
        <div class="about_title">
          <h2>关于我们</h2>
          <h3>—— ABOUT US ——</h3>
        </div>
        <div class="about_text">
          {{ aboutContent }}
        </div>
      </el-row>
      <el-row style="margin: 0 60px">
        <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
          <p>
            <b class="num_bold">{{ numItem.num }}</b>
            <span>{{ numItem.units }}</span>
          </p>
          <p>{{ numItem.title }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="padding: 0 5% ">
        <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
                :class="'culture_'+imgTextIndex">
          <div class="imgAndText">
            <a :href="imgTextItem.href">
              <span class="pic">
                <img :src="imgTextItem.src" alt=""/>
              </span>
              <span class="img_box">
                  <span class="img_innerBox">
                    <span class="its">
                    <span class="about_en">
                      <span>{{ imgTextItem.boldText }}</span>
                      <span>{{ imgTextItem.enText }}</span>
                    </span>
                    <span class="line"></span>
                    <span class="about_cn">{{ imgTextItem.cnTitle }}</span>
                    </span>
                  </span>
                </span>
            </a>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "AboutUs",
  data() {
    return {
      aboutContent: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
      numList: [
        {
          num: '2000',
          units: '亩',
          title: '拥有近两千亩的三大基地'
        },
        {
          num: '7000',
          units: '多人',
          title: '员工人数超过7000人'
        },
        {
          num: '4',
          units: '大种类',
          title: '4大种类，数百款产品'
        },
        {
          num: '60',
          units: '多个',
          title: '产品远销多个国家'
        }
      ],
      imgTextList: [
        {
          href: '',
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446921627711241s.jpg',
          boldText: 'Brand',
          enText: 'culture',
          cnTitle: '品牌文化'
        }, {
          href: '',
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446922829529890s.jpg',
          boldText: 'Enterprise',
          enText: 'viewpoint',
          cnTitle: '企业观点'
        }, {
          href: '',
          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446925925108442s.jpg',
          boldText: 'corporate',
          enText: 'culture',
          cnTitle: '企业文化'
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
*{
  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
}
@media screen and (max-width: 1660px) {
  .aboutUs {
    width: 1200px !important;
  }
  .img_innerBox {
    padding: 20px!important;
  }
  }

.aboutUs {
  min-width: 1300px;
  width: 1360px;
  margin: 0 auto 50px auto;

  .about_title {
    display: inline;
    width: 100%;
    float: left;
    margin: 0 0 20px 0;
    text-align: center;

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

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

  .about_text {
    color: #666;
    width: 80%;
    float: left;
    padding: 0 10% 50px;
    font-size: 15px;
    text-align: center;
    line-height: 28.8px;
  }

  .num_title {
    font-size: 14px;
    color: #666666;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    margin-bottom: 50px;

    .num_bold {
      color: #444;
      line-height: 46px;
      margin: 0 4px 0 0;
      font-size: 40px;
      font-family: arial;
      font-weight: normal;
    }

    p:last-child {
      line-height: 25.2px;
    }

  }

  .num_title:last-child {
    border: none !important;
  }

  .culture_1 {
    .img_box {
      position: absolute;
      bottom: auto !important;
      top: 0;
    }
  }

  .imgAndText:hover {
    img {
      transform: scale(1.2);
    }
  }

  .imgAndText {
    display: block;
    margin: 0 15px;
    padding: 12px;
    border: 1px solid #e9e9e9;
    background-color: #201f25;

    > a {
      position: relative;
      display: inline-block;
      width: 100%;

      .pic {
        display: inline-block;
        overflow: hidden;

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

      .img_box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(32, 31, 37, 0.5);

        .img_innerBox {
          display: block;
          padding: 20px 30px;

          .its {
            display: inline-block;
            width: 100%;

            .about_en {
              color: #e0c9aa;
              font-size: 22px;
              float: left;
              text-transform: uppercase;
              line-height: 39.6px;
              font-family: arial;

              span:first-child {
                font-weight: bold;
                margin-right: 10px;
              }
            }

            .line {
              clear: both;
              width: 50px;
              height: 1px;
              float: left;
              margin: 3px 0;
              background-color: #e2c9ab;
            }

            .about_cn {
              color: #e0c9aa;
              clear: both;
              float: left;
              font-size: 18px;
              line-height: 32px;
            }
          }
        }
      }
    }
  }
}
</style>