<template>
  <div class="companyIntroduction">
    <Navs></Navs>
    <div class="content">
      <!-- 全局搜索 -->
      <search></search>
      <div class="cont">
        <div class="cont_top">
          <div class="left">公司介绍</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">公司介绍</span>
          </div>
        </div>
        <div class="cont_bottom">
          <div class="bottom_left">
            <div v-for="(item,index) in componData" :key="index">
              <img :src="item.url" alt />
              <div class="cont">
                <div class="title">{{item.title}}</div>
                <div class="co">{{item.cont}}</div>
              </div>
            </div>
          </div>
          <div class="bottom_right">
            <div class="top">
              <div class="left">公司简介</div>
              <div class="right"></div>
            </div>
            <!-- 公司简介区域 -->
            <div class="cont">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河北知时数据科技有限公司（ZSDT）是国内专业的数据、信息与软件服务提供商，是一家拥有先进软件开发技术和自主知识产权的高科技企业，在数据的挖掘、应用及服务等相关技术领域，始终保持国际领先地位。
              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司致力于数据领域发展，秉承“专注数据 共享价值”的企业理念，依托自身的数据资源、技术研发优势及丰富的市场运营经验，打通数据获取、数据处理、数据服务环节，通过数据挖掘分析、机器学习预测，推动相关技术、应用和产业的创新，实现数据价值最大化。
              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司拥有专业的数据研究团队，现有数十名10年以上从事调研方案设计、数据采集、数据分析、数据挖掘的专业人员，同时与多家国内知名院校专家保持着密切合作
            </div>
          </div>
        </div>
        <div class="waterY">
          <div>CORPORATE</div>
          <div>CULTURE</div>
        </div>
      </div>
    </div>
    <div class="finashLeft">
      <div></div>
    </div>

    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'companyIntroduction',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png')
      },
      componData: [
        {
          url: require('../../../static/company/gongsi.png'),
          title: '企业文化',
          cont: '持诚信互利共荣，以厚德载物'

        },
        {
          url: require('../../../static/company/linian.png'),
          title: '理念',
          cont: '释放政府数据价值'

        },
        {
          url: require('../../../static/company/dingwei.png'),
          title: '定位',
          cont: '数据资源及技术服务商'

        },
        {
          url: require('../../../static/company/yuanjing.png'),
          title: '愿景',
          cont: '推动数据成为最有价值的资产'

        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  & > .cont {
    position: relative;
    width: 84.25rem;
    // border: 1px solid red;
    background-color: #fff;
    & > .cont_top {
      width: 100%;
      height: 5.125rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.0625rem solid #dbdbdb;
      & > .left {
        margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    & > .cont_bottom {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;
      & > .bottom_left {
        width: 42rem;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        & > div {
          width: 42rem;
          height: 8.625rem;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          & > img {
            margin: 0 1.5rem 0 0rem;
            width: 3.875rem;
            height: 3.25rem;
          }
          & > .cont {
            height: 4.25rem;
            // border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            & > .title {
              font-size: 1.625rem;
              font-weight: normal;
              font-stretch: normal;
              // line-height: 34px;
              letter-spacing: 0rem;
              color: #000000;
            }
            & > .co {
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #333333;
            }
          }
        }
      }
      & > .bottom_right {
        margin-top: 1rem;
        width: 37.25rem;
        // border: 1px solid red;

        & > .top {
          width: 100%;
          height: 5.5rem;
          font-size: 3rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 34px;
          letter-spacing: 0.125rem;
          color: #000000;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-bottom: 0.25rem solid #dbdbdb;
          & > .right {
            width: 20.625rem;
            height: 1.5rem;
            background-color: #52b6e3;
          }
        }
        & > .cont {
          margin: 0 auto;
          width: 36.875rem;
          margin-top: 2.5rem;
          // border: 1px solid red;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 2.125rem;
          letter-spacing: 0.0625rem;
          color: #333333;
        }
      }
    }
    & > .waterY {
      position: absolute;
      z-index: 20;
      top: 0;
      width: 100%;
      height: 41.375rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 3.2rem;
      & > div {
        font-size: 10rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 13.25rem;
        letter-spacing: 1rem;
        color: #333333;
        opacity: 0.15;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.finashLeft {
  padding-bottom: 1.875rem;
  width: 100%;
  height: 1.5rem;
  background-color: #fff;
  & > div {
    width: 42.875rem;
    height: 1.5rem;
    background-color: #52b6e3;
  }
}
</style>
