forest-traced-H5-UI/src/view/firm.vue

<template>
  <div class="body-firm">
    <main-title>生产经营企业介绍</main-title>
    <div class="box animated fadeIn">
      <div class="box-1">
        <div class="logo">
          <div class="img ui-absolute"></div>
        </div>
        <div class="info">
          <h3>{{ info.orgName || '' }}</h3>
          <p>{{ info.remark || '' }}</p>
        </div>
        <ul class="imgs-list">
          <li v-for="(src, key) in img" :key="key">
            <el-image class="ui-absolute" :src="src | host" :preview-src-list="src | hostList">
              <div slot="placeholder" class="img-loading">
                <i class="el-icon-loading"></i>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </li>
        </ul>
      </div>
    </div>
    <bottom class="animated fadeIn">
      <div class="box-bottom">
        <p>联系人：{{ info.principals || '' }}</p>
        <p>电话：{{ info.tel || '' }}</p>
        <p>地址：{{ info.orgAddress || '' }}</p>
        <div class="box-bottom-code">
          <el-image
            class="box-bottom-code-img"
            :src="info.wxQRImg | host"
            :preview-src-list="info.wxQRImg | hostList"
          >
            <div slot="placeholder" class="img-loading">
              <i class="el-icon-loading"></i>
            </div>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <p>扫码立即关注我们</p>
        </div>
      </div>
    </bottom>
  </div>
</template>

<script>
import bottom from '../components/bottom.vue';
export default {
  components: {
    bottom
  },
  data() {
    return {
      src: 'https://weiliicimg9.pstatp.com/weili/l/708037487756836870.webp'
    };
  },
  computed: {
    info() {
      return this.$store.state.info;
    },
    img() {
      return this.info.qualificaImgs ? this.info.qualificaImgs.split(';') : [];
    }
  }
};
</script>

<style lang="less">
.body-firm {
  .box {
    margin: 0.2rem 0;
    &-1 {
      background: #f1f2f3;
      border-radius: 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1.3rem;
      padding-bottom: 0.4rem;
      > .logo {
        position: relative;
        // background: #20374d;
        // box-shadow: 0 0 0.2rem -0.04rem #20374d;
        margin-top: -0.8rem;
        width: 100%;
        height: 2.2rem;
        border-radius: 50%;
        overflow: hidden;
        > .img {
          background: url(../assets/image/logo.png) no-repeat center center;
          background-size: 100% 100%;
        }
      }
      > .info {
        margin-top: 0.4rem;
        width: 90%;
        font-size: 0.16rem;
        color: #5d6267;
        > h3 {
          color: #20374d;
        }
        p {
          text-indent: 2em;
          font-size: 300;
          line-height: 1.8em;
          margin: 0.2rem 0;
        }
      }
      > .imgs-list {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1);
        border-radius: 0.1rem;
        width: 88%;
        padding: 0.2rem;
        > li {
          width: 33.33%;
          position: relative;
          &::before {
            content: '';
            padding-top: 128%;
            display: block;
          }
          > .el-image {
            margin: 0.06rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .box-bottom {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    padding: 1em 7%;
    position: relative;
    &-code {
      position: absolute;
      right: 7%;
      top: -80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      > p {
        margin-top: 0.5em;
      }
      &-img {
        width: 90px;
        height: 90px;
      }
    }
  }
}
</style>