<template>
  <Layout>
    <div class="layout-container" style="width: 100%">
      <div class="page-header">
        <div class="am-container">
          <h1 class="page-header-title">关于我们</h1>
        </div>
      </div>

      <div class="breadcrumb-box">
        <div class="am-container">
          <ol class="am-breadcrumb">
            <li>
              <router-link to="/">首页</router-link>
            </li>
            <li class="am-active">关于我们</li>
          </ol>
        </div>
      </div>
    </div>


    <div class="section">
      <div class="container" style="max-width: 1160px">
        <div class="section--header">
          <h2 class="section--title">{{ companyInfo.name }}</h2>
          <p class="section--description">{{ companyInfo.introduction }}</p>
        </div>

        <div class="about-container">
          <div class="am-g">
            <div class="am-u-md-6">
              <div class="our-company-text">
                <h3>关于云适配你需要知道哪些？</h3>
                <p>
                  云适配(AllMobilize Inc.)
                  是全球领先的HTML5企业移动化解决方案供应商，由前微软美国总部IE浏览器核心研发团队成员及移动互联网行业专家在美国西雅图创立，并获得了微软创投的扶持以及晨兴资本、IDG资本、天创资本等国际顶级风投机构的投资。
                </p>
                <p>
                  从2012年至今，云适配的开放技术平台已经吸引了超过40万开发者加入；云适配跨屏云也成功应用于超过30万家企业网站，包括微软、联想等世界500强企业，光明网、中国青年报等知名媒体，清华、北大、中科大等知名大学，以及中国政府网、中国共产党网等政府机构。2014年6月，比尔·盖茨先生访华时特地观看了云适配的技术演示，并给予高度的赞赏。
                </p>
              </div>
            </div>

            <div class="am-u-md-6">
              <div class="our-company-quote">
                <div class="am-g">
                  <div class="am-u-md-6">
                    <div class="our-company-img">
                      <img src="@/assets/images/about/ben.jpg" alt=""/>
                    </div>
                  </div>

                  <div class="am-u-md-6">
                    <p class="our-company-brief">
                      国家“千人计划”特聘专家、中国企业级HTML5产业联盟主席、HTML5国际标准制定者之一、微软总部IE浏览器核心研发,成功发布了IE8、IE9、IE10,参与了下一代互联网标准HTML5国际标准制定以及IE中HTML5引擎的设计。
                    </p>
                    <div class="our-company-quote_author"><strong>吴总</strong><span>奥里斯电梯有限公司创始人</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--about-container end-->
      </div>
    </div>

    <hr class="section_divider -narrow">

    <div class="section">
      <div class="container" style="max-width: 1160px">
        <div class="section--header">
          <h2 class="section--title">我们的宗旨</h2>
          <p class="section--description">
            让人们无论使用任何设备都能安全高效获取信息
            <br>One Web，Any Device
          </p>
        </div>

        <div class="about-container">
          <div class="our-mission">
            <div class="am-g">
              <div class="am-u-md-3">
                <div class="our_mission--item">
                  <div class="figure our_mission--item_media"><img src="@/assets/images/about/f02.jpg" alt=""></div>
                  <h3 class="our_mission--item_title">品质</h3>
                  <div class="our_mission--item_body">
                    <p>
                      全球领先的HTML5解决方案供应商，安全高效解决企业移动化
                    </p>
                    <ul>
                      <li>快捷的移动适配开发</li>
                      <li>统一的办公通讯门户</li>
                      <li>完善的安全管理平台</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="am-u-md-3">
                <div class="our_mission--item">
                  <div class="figure our_mission--item_media"><img src="@/assets/images/about/f03.jpg" alt=""></div>
                  <h3 class="our_mission--item_title">责任</h3>
                  <div class="our_mission--item_body">
                    <p>
                      国产最流行的开源HTML5前端框架，组件丰富，为HTML5开发加速
                    </p>
                    <ul>
                      <li>持续改进</li>
                      <li>追求卓越品质</li>
                      <li>为顾客创造价值</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="am-u-md-3">
                <div class="our_mission--item">
                  <div class="figure our_mission--item_media"><img src="@/assets/images/about/f04.jpg" alt=""></div>
                  <h3 class="our_mission--item_title">诚信</h3>
                  <div class="our_mission--item_body">
                    <p>
                      全球领先的HTML5解决方案供应商，安全高效解决企业移动化
                    </p>
                    <ul>
                      <li>平等包容</li>
                      <li>互利共赢</li>
                      <li>与事业伙伴同成长</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="am-u-md-3">
                <div class="our_mission--item">
                  <div class="figure our_mission--item_media"><img src="@/assets/images/about/f01.jpg" alt=""></div>
                  <h3 class="our_mission--item_title">责任</h3>
                  <div class="our_mission--item_body">
                    <p>
                      全球领先的HTML5解决方案供应商，安全高效解决企业移动化
                    </p>
                    <ul>
                      <li>快捷的移动适配开发</li>
                      <li>统一的办公通讯门户</li>
                      <li>完善的安全管理平台</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <hr class="section_divider -narrow">


    <div class="section">
      <div class="container" style="max-width: 1160px">
        <div class="section--header">
          <h2 class="section--title">我们的团队</h2>
          <p class="section--description">
            成员既有超级学霸（来自Harvard、Google、香港科技大学、中国科技大学），
            <br>也有来自行业的技术大拿。
          </p>
        </div>

        <div class="about-container">
          <div class="our-team">
            <div class="am-g">
              <div class="am-u-md-3 am-u-end" v-for="(designer,index) in designers" :key="index">
                <div class="team-box">
                  <div class="our-team-img" style="height: 304px;overflow: hidden">
                    <img :src="designer.avatar" style="height: auto" alt=""/>
                  </div>
                  <div class="team_member--body">
                    <h3 class="team_member--name">{{ designer.name }}</h3>
                    <span class="team_member--position">{{ designer.content }}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </Layout>
</template>

<script>
import Layout from "@/components/common/Layout";

export default {
  name: "AboutView",
  components: {Layout},
  data() {
    return {
      companyInfo: {},
      designers: [],
    }
  },
  mounted() {
    this.getCompanyInfo()
    this.getDesigners()
  },
  methods: {
    getCompanyInfo() {
      //获取公司信息，默认第一个
      this.$post("/company/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              if (res.data.data.length > 0) {
                this.companyInfo = res.data.data[0]
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });

    },
    getDesigners() {
      //获取所有设计师
      this.$post("/designer/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              this.designers = res.data.data
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });

    }

  }
}
</script>

<style scoped>

</style>
