nuxtProject/pages/introduction/index.vue

<template>
  <div class="client-aboutUs-page">
    <!-- 关于我们banner栏 -->
    <div class="aboutUs-banner">
      <span><img :src="aboutUsBannerImg" alt="关于我们"></span>
    </div>

    <!-- 公司简介 -->
    <div class="company-profile-box">
      <div class="client-container">
          <img :src="companyProfileImg" alt="公司简介">
          <p>大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。</p>
          <p>公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
      </div>
    </div>

    <!-- 品牌介绍 -->
    <div class="brand-introduction-box">
      <div class="client-container fn-clear">
        <div class="brand-introduction-content">
          <div class="brand-introduction-left">
            <h4>品牌介绍</h4>
            <img :src="brandIntroductionImg" alt="品牌介绍">
          </div>
          <span>MTA是Master of Training  Administration的缩写，含义是培训管理专家，麦塔致力于为客户提供专业的在线教育方案，打造企业核心竞争力。麦塔品牌诞生于2009年，公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。研发团队集结了来自互联网、科技、教育等多个领域专家级研发工程师，率先实现了移动化、平台化、知识化、智能化的学习管理模式。麦塔肩负着“改变互联网教育未来”的使命，持续创新、创造价值，与客户和合作伙伴共享共赢。</span>
        </div>
      </div>
    </div>

    <!-- 企业发展历程 -->
    <div class="enterprise-development-box">
      <h4 class="client-title mb40">企业发展历程</h4>
      <div class="client-container fn-clear">
        <el-tabs v-model="activeName" class="enterprise-development-tab">
          <el-tab-pane label="2008年-2014年" name="first">
            <ul>
              <li>
                  <div><img :src="enterpriseDevImg1" alt="企业发展历程"></div>
                  <p><i>3月</i><span>栋科软件正式注册成立</span></p>
                  <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
              </li>
              <li>
                <div><img :src="enterpriseDevImg2" alt="企业发展历程"></div>
                <p><i>5月</i><span>麦塔1.0考培系统发布</span></p>
                <p><i>6月</i><span>正式进军企培行业</span></p>
              </li>
              <li>
                <div><img :src="enterpriseDevImg3" alt="企业发展历程"></div>
                <p><i>3月</i><span>与步步高展开合作</span></p>
                <p><i>6月</i><span>麦塔网校版正式研发成功</span></p>
              </li>
              <li>
                <div><img :src="enterpriseDevImg4" alt="企业发展历程"></div>
                <p><i>3月</i><span>栋科软件正式注册成立</span></p>
                <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="2016年-现在" name="second">
            <ul class="enterprise-second-ul">
              <li>
                <div><img :src="enterpriseDevImg5" alt="企业发展历程"></div>
                <p><i>8月</i><span>麦塔3.0产品发布</span></p>
                <p><i>12月</i><span>企业用户突破4万</span></p>
              </li>
              <li>
                <div><img :src="enterpriseDevImg6" alt="企业发展历程"></div>
                <p><i>7月</i><span>麦塔4.0产品发布</span></p>
                <p><i>12月</i><span>课程开发时长超2万小时</span></p>
              </li>
              <li>
                <div><img :src="enterpriseDevImg7" alt="企业发展历程"></div>
                <p><i>4月</i><span>麦塔SaaS版产品发布</span></p>
                <p><i>8月</i><span>企业用户已突破15万</span></p>
              </li>
              <li></li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>



    </div>

    <!-- 企业文化 -->
    <div class="corporate-culture-box">
      <div class="client-container">
        <h4 class="client-title mb40">企业文化</h4>
        <ul>
          <li><div><i></i><h5>核心价值观</h5><p>共同成长，相伴一生</p></div></li>
          <li><div><i></i><h5>企业愿景</h5><p>成为一流的教育软件公司</p></div></li>
          <li><div><i></i><h5>企业使命</h5><p>让学习变得更轻松</p></div></li>
          <li><div><i></i><h5>服务标准</h5><p>只有客户的成功，才有我们的成功</p></div></li>
        </ul>
      </div>
    </div>


    <!-- 联系我们 -->
    <div class="client-container">
      <div class="contact-us-box fn-clear">
        <ul class="contact-container-box">
          <h4>联系我们</h4>
          <h5>资讯及商务合作</h5>
          <li><i></i><span>400-052-2130</span></li>
          <li><i></i><span>2956600477/3375245762</span></li>
          <li><i></i><span>service@llisoft.com</span></li>
          <li><i></i><span>大连市沙河口区数码路北段25号201室</span></li>
        </ul>
        <img :src="contactUsImg" alt="联系我们" />
      </div>
    </div>

  </div>


</template>

<script>
  export default {
    name:     'introduction',
    layout:   'templateB',
    asyncData({ store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/introduction');
    },
    data() {
      return {
        // banner 图片
        aboutUsBannerImg:    require(`~/static/images/client/aboutUs/aboutUs-banner-img.png`),
        // 公司简介图片
        companyProfileImg:    require(`~/static/images/client/aboutUs/company-profile-img.png`),
        brandIntroductionImg: require(`~/static/images/client/aboutUs/aboutUs-logo.png`),
        // 企业发展历程
        enterpriseDevImg1:  require(`~/static/images/client/aboutUs/enterprise-development-img1.png`),
        enterpriseDevImg2:  require(`~/static/images/client/aboutUs/enterprise-development-img2.png`),
        enterpriseDevImg3:  require(`~/static/images/client/aboutUs/enterprise-development-img3.png`),
        enterpriseDevImg4:  require(`~/static/images/client/aboutUs/enterprise-development-img4.png`),
        enterpriseDevImg5:  require(`~/static/images/client/aboutUs/enterprise-development-img5.png`),
        enterpriseDevImg6:  require(`~/static/images/client/aboutUs/enterprise-development-img6.png`),
        enterpriseDevImg7:  require(`~/static/images/client/aboutUs/enterprise-development-img7.png`),
        // 联系我们
        contactUsImg:  require(`~/static/images/client/aboutUs/contact-us-img.png`),
        // 企业发展历程默认tab页
        activeName: 'first'
      };
    },
    head(){
      return {
        title: '栋科软件公司简介_栋科软件联系方式',
        meta: [
          {
            name: 'keywords',
            content: '栋科软件公司简介'
          },
          {
            name:'description',
            content:'大连栋科软件工程有限公司是专业的教育软件供应商，2007年，栋科软件创立于大连软件园。公司主营业务包括：中小学、高中、各大高校的教育软件产品、企业在线培训解决方案、在线考试软件产品，及相关平台服务等。目前，公司拥有办公基础软件研发、教育动漫产品研发、在线培训运营、数据测试、线上售后服务等事业部。'
          }
        ],
      }
    },
    computed: {},
    methods:  {},
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>