nuxtProject/pages/introduction/index.vue

<template>
  <div class="client-aboutUs-page">
    <!-- 关于我们banner栏 -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner"></div>
    </div>

    <!-- 公司简介 -->
    <div class="company-profile-box client-container">
      <div class="my-img mta-hidden-xs">
        <i></i>
      </div>
      <div class="text-content">
          <h4>公司介绍</h4>
          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
          <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
      </div>
    </div>

    <!-- 我们提供什么 -->
    <div class="brand-introduction-box client-container">
      <h4>我们提供什么</h4>
      <ul>
        <li>
          <div>
            <i class="mta-hidden-xs"></i>
            <p>在线考试系统租赁/采购</p>
          </div>
        </li>
        <li>
          <div>
            <i class="mta-hidden-xs"></i>
            <p>在线考试系统租赁/采购</p>
          </div>
        </li>
        <li>
          <div>
            <i class="mta-hidden-xs"></i>
            <p>课件定制开发服务</p>
          </div>
        </li>
        <li>
          <div>
            <i class="mta-hidden-xs"></i>
            <p>行业通用类课程资源</p>
          </div>
        </li>
      </ul>
    </div>


    <!-- 我么你始终专注教育系统研发，更懂用户需求 -->
    <div class="corporate-culture-box client-container mta-hidden-xs">
      <h4>我们始终专注教育系统研发</h4>
      <ul>
        <div :class="{next: nextList, prev: prevList}">
          <li v-for="(img,index) in imgList" :key="index">
            <img :src="img.url" alt="证书">
          </li>
        </div>
        <i class="img-btn-prev img-btn" @click="onPrev"></i>
        <i class="img-btn-next img-btn" @click="onNext"></i>
      </ul>
    </div>
    <div class="corporate-culture-box-h5 client-container mta-hidden-sm">
      <h4>我们始终专注教育系统研发</h4>
      <ul>
        <li v-for="(img,index) in imgList" :key="index">
          <img :src="img.url" alt="证书">
        </li>

      </ul>
    </div>

    <!-- 地图 -->
    <div class="contact-us-box mta-hidden-xs">
      <div class="my-map">
        <img :src="img2" alt="地图">
        <div class="img-right">
          <h3>联系我们</h3>
          <p>资讯QQ：956600477/3375245762</p>
          <p>联系电话：400-052-2130</p>
          <p>公司邮箱：service@llisoft.com</p>
          <p>公司地址：大连市沙河口区数码路北段25号201室</p>
        </div>
      </div>
    </div>
    <div class="contact-us-box-h5 client-container mta-hidden-sm">
      <div class="img-right-h5">
        <h3>联系我们</h3>
        <p>资讯QQ：956600477/3375245762</p>
        <p>联系电话：400-052-2130</p>
        <p>公司邮箱：service@llisoft.com</p>
        <p>公司地址：大连市沙河口区数码路北段25号201室</p>
      </div>
      <img :src="img2" alt="地图">
    </div>

  </div>


</template>

<script>
  import {BannerImgs} from "@/defaultConfig";

  export default {
    name:     'introduction',
    layout:   'templateB',
    async asyncData({$axios, store}) {
      const arr = [
        $axios.$post(`/home/banner/list`, {'code': BannerImgs.guanyuwomen}),
      ];
      const [res2] = await Promise.all(arr);
      return {
        bannerList: res2.data.data || [],
      }
    },
    data() {
      return {
        imgList: [
          {
            url: require("~/static/gangweiIcon/z125.png")
          },
          {
            url: require("~/static/gangweiIcon/z126.png")
          },
          {
            url: require("~/static/gangweiIcon/z127.png")
          },
          {
            url: require("~/static/gangweiIcon/z128.png")
          },
          {
            url: require("~/static/gangweiIcon/z125.png")
          },
          {
            url: require("~/static/gangweiIcon/z126.png")
          },
          {
            url: require("~/static/gangweiIcon/z127.png")
          },
          {
            url: require("~/static/gangweiIcon/z128.png")
          },
        ],
        prevList: true,
        nextList: false,
      };
    },
    head(){
      return {
        title: '麦塔考培系统_大连栋科软件工程有限公司',
        meta: [
          {
            name: 'keywords',
            content: '麦塔考试系统,麦塔培训系统'
          },
          {
            name:'description',
            content:'大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。'
          }
        ],
      }
    },
    methods: {
      onPrev() {
        this.prevList = true;
        this.nextList = false;
      },
      onNext() {
        this.prevList = false;
        this.nextList = true;
      },
    }
  };
</script>
<style lang="scss">
.company-profile-box {
  margin-top: 250px;
  display: flex;
  justify-content: space-between;
  .my-img {
    width: 416px;
    height: 560px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("~static/gangweiIcon/z120.png");
    flex-shrink: 0;

    i {
      display: inline-block;
      width: 188px;
      height: 86px;
      background-image: url("~static/gangweiIcon/z131.png");
      margin: 238px 0 0 114px;
    }
  }
  .text-content {
    margin-left: 150px;
    h4 {
      font-size: 30px;
      text-align: left;
      font-weight: 800;
      color: #333;
      margin-top: 180px;
      position: relative;


      &:before {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100px;
        height:3px;
        background: #00b96b;
      }
    }

    p {
      margin: 40px 0 0 0;
    }
  }
}

.brand-introduction-box {
  h4 {
    font-size: 30px;
    text-align: center;
    font-weight: 800;
    color: #333;
    margin-top: 180px;
    margin-bottom: 150px;
    position: relative;
  }
  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 50%;
      padding: 20px;
      box-sizing: border-box;

      >div {
        width: 100%;
        height: 242px;
        box-sizing: border-box;

        i {
          width: 100px;
          height: 100px;
          display: inline-block;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          margin: 50px 0 24px 150px;
        }

        p {
          width: 260px;
          margin: 0 0 0 66px;
          font-size: 24px;
          color: #fff;
          font-weight: 500;
        }
      }

      &:nth-child(1) {

        >div {
          background-image: url("~static/gangweiIcon/z116.png");
          i {
            background-image: url("~static/gangweiIcon/z121.png");
          }
        }
      }
      &:nth-child(2) {
        >div  {
          background-image: url("~static/gangweiIcon/z117.png");
          i {
            background-image: url("~static/gangweiIcon/z122.png");
          }
        }
      }
      &:nth-child(3) {
        >div {
          background-image: url("~static/gangweiIcon/z118.png");
          i {
            background-image: url("~static/gangweiIcon/z123.png");
          }
        }
      }
      &:nth-child(4) {
        >div {
          background-image: url("~static/gangweiIcon/z119.png");
          i {
            background-image: url("~static/gangweiIcon/z124.png");
          }
        }

      }
    }
  }
}

.corporate-culture-box {
  position: relative;
  margin-bottom: 200px;

  h4 {
    font-size: 30px;
    text-align: center;
    font-weight: 800;
    color: #333;
    margin-top: 180px;
    margin-bottom: 150px;
  }

  ul {
    position: relative;
    overflow: hidden;

    >div {
      display: flex;
      box-sizing: border-box;
      transition: all 0.5s ease;

      &.next {
        transform: translate(-100%);
      }
      &.prev {
        transform: translate(0);
      }
    }
    li {
      padding: 20px;
      width: 25%;
      margin: 0 auto;
      text-align: center;
      flex-shrink: 0;
      box-sizing: border-box;

      img {
        width: 221px;
        height: 298px;
      }
    }
    .img-btn {
      display: inline-block;
      width: 33px;
      height: 33px;
      cursor: pointer;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .img-btn-prev {
      position: absolute;
      left: 0px;
      top: 150px;
      background-image: url('~static/gangweiIcon/z129.png');
    }
    .img-btn-next {
      position: absolute;
      right: 0px;
      top: 150px;
      background-image: url('~static/gangweiIcon/z130.png');
    }
  }
}

.corporate-culture-box-h5 {
  h4 {
    font-size: 18px;
    text-align: center;
    font-weight: 800;
    color: #333;
    margin-top: 10%;
    margin-bottom: 10%;
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 50%;
      padding: 20px;
      box-sizing: border-box;

      img {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
}

.contact-us-box {
  width: 100%;
  height: 500px;
  background-image: url("~static/gangweiIcon/z132.png");
  margin-bottom: 260px;
  position: relative;

  .my-map {
    background: red;
    position: absolute;
    top: 246px;
    left: 330px;
    width: 880px;
    height: 332px;
    display: flex;

    img {
      flex: 1;
      width: 100%;
      height: 100%;
    }

    .img-right {
      background: #00b96b;
      width: 346px;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;

      h3 {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 24px;
      }

      p {
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        margin-bottom: 14px;
        line-height: 33px;
      }

    }
  }

}

.contact-us-box-h5 {
  margin-top: 20px;
  margin-bottom: 30px;

  .img-right-h5 {
    h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 20px;
      text-align: center;
    }

    p {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    img {
      width: 100%;
      height: auto;
    }
  }
}

@media (max-width: 768px) {
  .company-profile-box {
    margin-top: 20px;

    .text-content {
      margin: 0;

      h4 {
        margin-top: 20px;
        text-align: center;
        font-size: 24px;

        &:before {
          left: 50%;
          transform: translate(-50%);
        }
      }

      p {
        font-size: 14px;
      }
    }
  }

  .brand-introduction-box {
    h4 {
      font-size: 18px;
      text-align: center;
      font-weight: 800;
      color: #333;
      margin-top: 10%;
      margin-bottom: 10%;
    }

    p {
      font-size: 14px;
    }

    ul {
      li {
        width: 100%;

        >div {
          width: 100%;
          height: 120px;
          box-sizing: border-box;

          p {
            width: 100%;
            line-height: 120px;
            margin: 0;
            font-size: 14px;
            color: #fff;
            font-weight: 500;
            text-align: center;
          }
        }
      }
    }
  }


}
</style>