mall-web-ssr/components/pcb/home/Intro.vue

<template>
  <div class="pcb-intro">
    <p class="intro-title">PCB商家介绍<span>PCB Business Introduction</span></p>
    <div class="item name">
      <a>
        <img src="https://dfs.ubtob.com/group1/M00/61/BE/CgpkyFo4e82AJM4YAADGy830sto276.jpg" alt="">
      </a>
      <p>深圳市英唐致盈供应链管理有限公司</p>
    </div>
    <div class="item intro">
      英唐致盈供应链是一家pcb解决方案的服务企业。企业服务范围包括：供应链管理及其相关的信息咨询；受托资产管理（不含证券、保险、基金、金融业务及其它限制项目）；企业管理咨询（不含人才中介服务）；经营电子商务（涉及前置行政许可的，须取得前置性行政许可文件后方可经营）；国内贸易、货物及技术进出口。
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .pcb-intro {
    background: url('/images/pcb/intro-bg.png') no-repeat;
    background-size: cover;
    margin-top: 58px;
    height: 274px;
    text-align: center;
    .intro-title {
      height: 68px;
      line-height: 68px;
      font-size: 30px;
      text-align: center;
      font-weight: bold;
      span {
        margin-left: 10px;
        font-size: 12px;
      }
    }
    .item {
      display: inline-block;
      height: 157px;
      vertical-align: middle;
    }
    .name {
      width: 183px;
      margin-right: 63px;
      margin-top: 14px;
      a {
        width: 183px;
        height: 94px;
        line-height: 88px;
        background: #fff;
        border-radius: 3px;
        border: 2px solid #d8c7b3;
        display: block;
        cursor: default;
        img {
          max-width: 183px;
          max-height: 88px;
        }
      }
      p {
        font-size: 18px;
        font-weight: bold;
        margin-top: 26px;
      }
    }
    .intro {
      position: relative;
      width: 842px;
      background: #fff;
      /*-webkit-box-shadow: 0 0 10px 3px #dacab6;
      -moz-box-shadow: 0 0 10px 3px #dacab6;
      box-shadow: 0 0 10px 3px #dacab6;*/
      padding: 24px 18px 20px 25px;
      text-align: left;
      line-height: 25px;
      &::before {
        content: '';
        position: absolute;
        border: {
          top: 34px solid #f0e7de;
          right: 34px solid transparent;
        };
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        position: absolute;
        border: {
          right: 34px solid #fbf9f7;
          top: 34px solid transparent;
        };
        right: 0;
        bottom: 0;
      }
    }
  }
</style>