qn-web/src/views/aboutUs.vue

<template>
  <div class="home">
    <el-backtop />
    <top :activeIndex="activeIndexs"></top>
    <div class="ban">
      <el-image
        style="width: 100%"
        :src="require('@/assets/img/home/pressimg.png')"
        fit="fill"
      ></el-image>
    </div>
    <div class="solutabs">
      <el-menu
        :default-active="solutabsIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#3370FF"
      >
        <el-menu-item index="0">公司简介</el-menu-item>
        <el-menu-item index="1">发展历程</el-menu-item>
        <el-menu-item index="2">愿景使命</el-menu-item>
        <el-menu-item index="3">企业荣誉</el-menu-item>
        <el-menu-item index="4">联系方式</el-menu-item>
      </el-menu>
    </div>
    <div style="margin-top: 50px">
      <!-- 公司介绍 -->
      <div class="box-style">
        <div class="box-style-box">
          <div class="floor">
            <headline heading="公司介绍" footing="Company introduction" />
            <div class="floor1">
              <div>
                山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有
                10 年以上工作经验。
              </div>
              <div style="padding-top: 20px">
                作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 发展历程 -->
      <div class="box-style">
        <div class="box-style-box">
          <div class="floor">
            <div class="floor2">
              <headline
                heading="发展历程"
                footing="Development course"
                type="white"
                style="padding-top: 40px"
              />
              <div class="time-line">
                <div class=""></div>
              </div>
            </div>
            <div style="width: 100%; height: 300px">1231232</div>
          </div>
        </div>
      </div>
      <!-- 愿景与使命 -->
      <div class="box-style">
        <div class="box-style-box" style="background: #f5f5f5">
          <div class="floor">
            <div class="floor3 modelWidth flex">
              <div class="left">
                <div class="header">
                  <div class="zn">愿景与使命</div>
                  <div class="en">Vision and mission</div>
                </div>
                <div class="content">· 让青鸟成为一个有价值的公司</div>

                <div class="content">
                  <div class="topTitlt">求实</div>
                  <div class="botTitlt">求真务实，冷静客观的探索</div>
                </div>
                <div class="content">
                  <div class="topTitlt">进取</div>
                  <div class="botTitlt">无功便是过，勇于突破有担当</div>
                </div>
                <div class="content">
                  <div class="topTitlt">创新</div>
                  <div class="botTitlt">超越创新，探索未来</div>
                </div>
                <div class="content">
                  <div class="topTitlt">服务</div>
                  <div class="botTitlt">态度亲善，工作严谨，人性化服务</div>
                </div>
              </div>
              <div class="right">
                <el-image
                  style="height: 100%"
                  :src="require('@/assets/img/home/shiming.png')"
                  fit="fill"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 企业荣誉 -->
      <div class="box-style">
        <div class="box-style-box">
          <div class="floor">
            <div class="floor4">
              <headline heading="企业荣誉" footing="Enterprise honor" />
              <div class="solutabs">
                <el-menu
                  :default-active="solutabsIndexs"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelects"
                  active-text-color="#3370FF"
                >
                  <el-menu-item index="0">企业荣誉</el-menu-item>
                  <el-menu-item index="1">专利软著</el-menu-item>
                  <el-menu-item index="2">资质证书</el-menu-item>
                </el-menu>
              </div>
              <div class="floor4-photos modelWidth">
                <div class="top flex">
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/l1.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/l2.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/l3.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/l4.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/l5.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                </div>
                <div class="bottom flex">
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s1.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s2.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s3.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s4.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s5.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s6.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s7.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div>
                    <el-image
                      style="width: 100%"
                      :src="require('@/assets/img/us/s7.png')"
                      fit="fill"
                    ></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="box-style">
        <div class="box-style-box">
          <div class="floor">
            <div class="floor5 modelWidth">
              <headline heading="联系方式" footing="Contact information" />
              <div class="floor5-title">济南总部</div>
              <div class="inform">
                山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室
              </div>
              <div class="inform">总部电话：0531-58252556</div>
              <div class="inform">工业互联网业务：15066150005 王老师</div>
              <div class="inform">物联网业务：15169050007 王老师</div>
              <div class="inform">商务合作：15588882307 云老师</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom />
    <el-backtop />
  </div>
</template>
<script>
import top from "@/components/header.vue";
import bottom from "@/components/footer.vue";
import headline from "@/components/headline.vue";
export default {
  name: "HomeView",
  components: {
    top,
    bottom,
    headline,
  },
  data() {
    return {
      activeIndexs: 4,
      solutabsIndex: "0",
      solutabsIndexs: "0",
      num: 0, //跳转楼层
    };
  },
  created() {
    var that = this;
    var inner = document.getElementsByClassName("floor");
    // 注册滚动监听事件
    window.onscroll = function () {
      // 获取滚动条距离页面底部的距离
      var tops = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(tops)
      //判断滚动的位置，从而改变楼层选项的样式
      for (var i = 0; i < inner.length; i++) {
        if (inner[i].offsetTop <= tops + 200 && tops <= inner[i].offsetTop) {
          that.num = i;
        }
      }
    };
  },
  methods: {
    // 楼层跳转的方法index
    handleSelect(index) {
      this.num = index;
      // 获取所有的楼层
      var inner = document.getElementsByClassName("floor");
      window.scrollTo({
        top: inner[index].offsetTop - 50,
        behavior: "smooth",
      });
    },

    handleSelects(index) {
      //荣誉
    },
  },
};
</script>
<style lang="less" scoped>
.box-style {
  width: 100%;

  .box-style-box {
    width: 100%;
    .floor {
      width: 100%;
      // 公司介绍
      .floor1 {
        width: 1000px;
        margin: 20px auto 0;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        div {
          text-indent: 2em;
        }
      }
      //发展历程
      .floor2 {
        margin-top: 50px;
        width: 100%;
        height: 300px;
        background: url("@/assets/img/home/develop.png") no-repeat center center;
        background-size: cover;
        .time-line {
          text-align: center;
        }
      }

      //愿景使命
      .floor3 {
        .left {
          flex: 1;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 10%;

          .header {
            .zn {
              font-size: 33px;
              font-family: PingFang SC;
              font-weight: 600;
              font-style: italic;
              color: #333333;
            }
            .en {
              font-size: 21px;
              font-family: PingFang SC;
              font-weight: 600;
              font-style: italic;
              color: #333333;
              opacity: 0.3;
              margin-top: -20px;
            }
          }
          .content {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 500;
            font-style: italic;
            text-align: left;
            padding-top: 20px;
            color: #3370ff;
            .topTitlt {
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: 500;
              font-style: italic;
              color: #333333;
            }
            .botTitlt {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              font-style: italic;
              color: #666666;
            }
          }
        }
        .right {
          flex: 1;
        }
      }

      //企业荣誉
      .floor4 {
        margin-top: 60px;
        .floor4-photos {
          .top {
            margin-top: 10px;
            flex-wrap: wrap;
            div {
              width: 20%;
              padding: 5px 3px;
            }
          }
          .bottom {
            margin-top: 10px;
            flex-wrap: wrap;
            div {
              width: 20%;
              padding: 5px 3px;
            }
          }
        }
      }

      //联系方式
      .floor5 {
        padding-bottom: 70px;
        .floor5-title {
          margin-top: 20px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #3370ff;
        }
        .inform {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 28px;
          padding-top: 10px;
        }
      }
    }
  }
}

.solutabs {
  width: 100%;
  margin: 0px auto;
  .el-menu-demo {
    display: flex;
    justify-content: space-between;
  }
}
</style>