feat:关于我们

src/components/header.vue

@@ -152,7 +152,7 @@ export default {
           name: "大数据核验平台",
         },
       ],
-      activeIndex: 0,
+
       timer: null,
       showIndex: 0,
     };
@@ -161,7 +161,6 @@ export default {
   methods: {
     //跳转导航
     hanldeNav(index) {
-      this.activeIndex = index;
       if (index == 4) {
         this.$router.push({
           path: "/aboutUs",

src/views/aboutUs.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="home">
+    <el-backtop />
+    <top :activeIndex="activeIndexs"></top>
+    <div class="ban">
+      <el-image
+        style="width: 100%; height: 500px"
+        :src="require('@/assets/img/home/content.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>
+      <div class="box-style">
+        <div class="box-style-box">
+          <div class="floor"><h1>1</h1></div>
+        </div>
+      </div>
+      <div class="box-style">
+        <div class="box-style-box">
+          <div class="floor"><h1>2</h1></div>
+        </div>
+      </div>
+      <div class="box-style">
+        <div class="box-style-box">
+          <div class="floor"><h1>3</h1></div>
+        </div>
+      </div>
+      <div class="box-style">
+        <div class="box-style-box">
+          <div class="floor"><h1>4</h1></div>
+        </div>
+      </div>
+      <div class="box-style">
+        <div class="box-style-box">
+          <div class="floor"><h1>5</h1></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",
+      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",
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.box-style {
+  width: 100%;
+
+  .box-style-box {
+    width: 100%;
+  }
+}
+
+.solutabs {
+  width: 100%;
+  margin: 0px auto;
+  .el-menu-demo {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.floor {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/views/home.vue

@@ -125,7 +125,7 @@
           <div class="solutabscontent">
             <div class="left">
               <el-image
-                style="width: 40vw; height: 400px"
+                style="width: 100%"
                 :src="require('@/assets/img/home/content.png')"
               ></el-image>
             </div>
@@ -141,7 +141,9 @@
                   </div>
                   <div class="soluright">
                     <div>物联数据感知</div>
-                    <div>以物联网智能监管终端为核心，通过物联网技术感...</div>
+                    <div>
+                      以物联网智能监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术感...
+                    </div>
                   </div>
                 </div>
                 <div class="understand">
@@ -226,14 +228,14 @@
     <!-- 新闻中心 -->
     <div
       class="box-style"
-      style="background: #e5eff9; padding-top: 60px; padding-bottom: 40px"
+      style="background: #e5eff9; padding-top: 60px; padding-bottom: 60px"
     >
       <div class="box-style-box">
         <headline heading="新闻中心" footing="News Center" />
         <div class="journalism">
           <div class="jo-left">
             <el-image
-              style="width: 100%; height: 400px"
+              style="width: 100%"
               :src="require('@/assets/img/home/content.png')"
               fit="fill"
             ></el-image>
@@ -242,9 +244,8 @@
             <div class="jo-content" v-for="item in 3" :key="item">
               <div class="jo-img">
                 <el-image
-                  style="height: 100%; width: 100%"
+                  style="height: 100%"
                   :src="require('@/assets/img/home/content.png')"
-                  fit="fill"
                 ></el-image>
               </div>
               <div class="jo-detail">
@@ -272,11 +273,14 @@
         <div class="partner">
           <div class="partner-left">
             <div>
-              <img :src="require('@/assets/img/home/hb.png')" />
+              <img
+                style="width: 100%"
+                :src="require('@/assets/img/home/hb.png')"
+              />
             </div>
           </div>
           <div class="partner-right-box">
-            <div class="partner-right" :style="{ top }">
+            <div class="partner-right">
               <div
                 class="par-company"
                 v-for="(item, index) in company"
@@ -461,7 +465,6 @@ export default {
 //指数
 .technical {
   height: 130px;
-
   text-align: center;
   .exponent {
     flex: 1.5;
@@ -654,15 +657,17 @@ export default {
         margin-top: 20px;
         display: flex;
         width: 100%;
-
+        justify-content: space-around;
         .left {
-          width: 60%;
+          width: 50%;
         }
         .right {
-          width: 40%;
+          width: 45%;
+
           .right-content {
             width: 100%;
-            padding: 30px 0 0 20%;
+            padding: 30px 10px 0 0;
+
             .top {
               font-size: 24px;
               font-family: PingFang SC;
@@ -678,6 +683,8 @@ export default {
               }
               .soluright {
                 padding-left: 10px;
+                width: 90%;
+
                 & > div:nth-child(1) {
                   font-size: 18px;
                   font-family: PingFang SC;
@@ -691,6 +698,7 @@ export default {
                   font-weight: 600;
                   color: #6a7890;
                   line-height: 32px;
+                  width: 90%;
                   white-space: nowrap;
                   text-overflow: ellipsis;
                   overflow: hidden;
@@ -891,29 +899,27 @@ export default {
 
       .jo-right {
         width: 48%;
-        height: 100%;
         display: flex;
         flex-direction: column;
-        align-items: center;
-
+        justify-content: space-between;
         .jo-content {
           width: 100%;
-          height: 120px;
           display: flex;
-          flex: 1;
           align-items: center;
-          margin-bottom: 18px;
+
           .jo-img {
             width: 30%;
-            height: 120px;
+            display: flex;
+            align-items: center;
           }
           .jo-detail {
             width: 70%;
-            height: 120px;
+            padding: 10px 15px;
             background: #fff;
-            padding: 20px 30px;
+            height: 94px;
             .jo-title {
               font-size: 14px;
+
               font-family: PingFang SC;
               font-weight: 500;
               color: #333333;
@@ -927,7 +933,6 @@ export default {
               font-family: PingFang SC;
               font-weight: 400;
               color: #333333;
-              line-height: 26px;
               padding-top: 10px;
               display: -webkit-box;
               -webkit-line-clamp: 2;
@@ -960,8 +965,8 @@ export default {
           align-items: end;
 
           .par-company {
-            width: 240px;
-            height: 80px;
+            width: 200px;
+            height: 60px;
             border: 1px solid #d7dbf0;
 
             background: #ffffff;