修改关于我们页面

src/components/footer.vue

@@ -61,6 +61,8 @@ export default {
     height: 480px;
     background: #F6F6F6;
     color: aliceblue;
+    /*position: fixed;*/
+    /*bottom: 0;*/
 }
 #footContent{
     width: 1440px;

src/components/swiper-about.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" v-for="(item,index) in message" :key="index">
+        <img :src="item" alt="1" />
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+    <!--<div class="swiper-button-next">-->
+      <!--<img src="..\assets\back2.png" alt />-->
+    <!--</div>-->
+    <!--<div class="swiper-button-prev">-->
+      <!--<img src="..\assets\back1.png" alt />-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+  /* eslint-disable */
+
+  import "../assets/swiper.js";
+
+  export default {
+    name: "Swiperr",
+    props: ["message"],
+    data() {
+      return {
+        newMessage: []
+      };
+    },
+    methods: {
+      init() {
+        let swipper = new Swiper(".swiper-container", {
+          slidesPerView: 1,
+          spaceBetween: 30,
+          loop: true,
+          centeredSlides: true,
+          autoplay: true,
+          pagination: {
+            el: ".swiper-pagination",
+            clickable: true
+          },
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev"
+          }
+        });
+      }
+    },
+    watch: {
+      message: {
+        immediate: true,
+        handler(newValue, oldValue) {
+          this.$nextTick(() => {
+            this.init(); //当数据到来的时候， DOM 更新循环结束之后，立即执行函数
+          });
+          // Vue.set(this.newMessage, this.newMessage, newValue)
+        },
+        deep: true
+      }
+    }
+  };
+</script>
+
+<style lang="stylus" scoped>
+  @import '../assets/swiper.min.css';
+
+  .swiper-button-next:after, .swiper-button-prev:after {
+    display: none;
+  }
+
+  .swiper-button-next, .swiper-button-prev {
+    height: auto;
+    margin-top: 0;
+  }
+
+  .swiper-wrapper {
+    width: 100%;
+    height:540px;
+    object-fit:cover;
+  }
+
+  .swiper-wrapper img {
+    width: 100%;
+    height:100%;
+    object-fit: cover;
+    border-top-right-radius:10px;
+    border-bottom-right-radius :10px;
+  }
+
+  .swiper-button-next {
+    right: 6.9%;
+  }
+
+  .swiper-button-prev {
+    left: 6.9%;
+  }
+
+  .swiper-button-next img {
+    width: 32px;
+    height: 32px;
+  }
+
+  .swiper-button-prev img {
+    width: 32px;
+    height: 32px;
+  }
+
+  html, body {
+    position: relative;
+    height: 100%;
+  }
+
+  body {
+    background: #eee;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    color: #000;
+    margin: 0;
+    padding: 0;
+  }
+
+  .swiper-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    border-top-right-radius:10px;
+    border-bottom-right-radius :10px;
+  }
+  @media only screen and (max-width: 479px) {
+    .swiper-button-next img {
+      width: 16px !important;
+      height: 16px !important;
+    }
+
+    .swiper-button-prev img {
+      width: 16px !important;
+      height: 16px !important;
+    }
+    .swiper-wrapper img {
+      width: 100%;
+      height: 150px;
+    }
+  }
+</style>
+

src/views/About.vue

@@ -1,64 +1,30 @@
 <template>
   <div class="about">
-    <div class="imgarea">
-      <img :src="img1" alt class="widthimg" />
-      <div class="imgtext">
-        <h1>专注</h1>
-        <div class="righttext">
-          <h2>互联网项目技术服务</h2>
+
+   <div>
+     <img src="./new-img/banner2.png" alt="banner" class="about-banner">
+   </div>
+
+    <div class="about-center-box">
+      <div class="about-content">
+        <div class="content-left">
+            <div class="about-title">关于我们</div>
+            <div class="about-en">ABOUT US</div>
+            <div v-for="item in aboutList" class="about-list">
+              <img src="./new-img/rect-icon.png" alt="">
+              <div>{{item.content}}</div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="aboutus">
-      <div class="head">
-        <p>关于我们</p>
-      </div>
-      <div class="content">
-        <div class="hidecontent" v-show="navBarFixed"></div>
-        <div class="leftmenu" :class="navBarFixed == true ? 'navBarWrap' :''">
-          <img :src="img2" alt />
-          <div class="leftbutton">
-            <a href="#block1">公司概述</a>
-            <a href="#block2">发展历程</a>
-            <a href="#block3">公司荣誉</a>
-          </div>
+        <div class="content-right">
+          <swiperr :message="messageParent" class="swiper-img-box"></swiperr>
         </div>
-        <div class="rightcontent">
-          <div class="block1" id="block1">
-            <div class="row">
-              <img :src="img3" />
-              <div class="imgright">
-                <div class="headline">
-                  <p>西安芝麻开花网络科技有限公司</p>
-                </div>
-                <div class="headline-next">
-                  <ul>
-                    <li v-for="(item,index)  in list" :key="index">
-                      <p class="listtext">{{item}}</p>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div class="imgrow">
-              <img :src="img4" />
-              <img :src="img5" />
-              <img :src="img6" />
-            </div>
-          </div>
-          <div class="block2" id="block2">
-            <div class="headline short">
-              <p>发展历程</p>
-            </div>
-            <img :src="img7" alt />
-          </div>
-          <div class="block3" id="block3">
-            <div class="headline short">
-              <p>公司荣誉</p>
-            </div>
-            <img :src="img8" alt />
-            <img :src="img9" alt />
-            <img :src="img10" alt />
+      </div>
+      <div class="about-award">
+        <div class="award-title">公司荣誉</div>
+        <div class="award-en">COMPANY HONOR</div>
+        <div class="award-list-box">
+          <div v-for="item in awardList">
+            <img :src="item" alt="award">
           </div>
         </div>
       </div>
@@ -69,45 +35,33 @@
 
 <script>
 /* eslint-disable */
-import img1 from "./images/u431.jpg";
-import img2 from "./images/20190830132652.png";
-import img3 from "./images/u472.png";
-import img4 from "./images/u473.png";
-import img5 from "./images/u474.png";
-import img6 from "./images/u475.png";
-import img7 from "./images/u462.png";
-import img8 from "./images/u466.jpg";
-import img9 from "./images/u467.jpg";
-import img10 from "./images/u468.jpg";
 
 import HomeFooter from "../components/footer.vue";
-
+import Swiperr from "@/components/swiper-about.vue";
+import swiperImg from "./new-img/u472.png";
+import swiperImg2 from "./new-img/u473.png";
+import swiperImg3 from "./new-img/u474.png";
+import award1 from  "./new-img/soft.png";
+import award2 from  "./new-img/Bitmap.png";
+import award3 from  "./new-img/parter.png";
 export default {
   name: "About",
   //   props: {
   //     msg: String
   //   }
   components: {
-    ooo: HomeFooter
+    ooo: HomeFooter,
+    Swiperr
   },
   data() {
     return {
-      img1: img1,
-      img2: img2,
-      img3: img3,
-      img4: img4,
-      img5: img5,
-      img6: img6,
-      img7: img7,
-      img8: img8,
-      img9: img9,
-      img10: img10,
-      navBarFixed: false,
-      list: [
-        `西安芝麻开花网络科技有限公司成立于2016年，多年来专注于互联网技术开发和数据服务。`,
-        "我们的服务分为四大部分：为创业企业提供互联网技术支持；为传统企业互联网转型提供专业的全程解决方案；为政府事业单位提供信息化策略支持，为硬件技术企业提供互联网技术结合方案。",
-        "公司采用全职+兼职+实习的管理模式，办公环境良好，位于西安曲江新区顶级写字楼。"
-      ]
+      messageParent: [swiperImg,swiperImg2,swiperImg3],
+      aboutList:[
+        {content:'西安芝麻开花网络科技有限公司成立于2016年，多年来专注于互联网技术开发和数据服务。'},
+        {content:'我们的服务分为四大部分：为创业企业提供互联网技术支持；为传统企业互联网转型提供专业的全程解决方案；为政府事业单位提供信息化策略支持，为硬件技术企业提供互联网技术结合方案。'},
+        {content:'公司采用全职+兼职+实习的管理模式，办公环境良好，位于西安曲江新区顶级写字楼。'}
+      ],
+      awardList:[award1,award2,award3]
     };
   },
   mounted() {
@@ -115,30 +69,116 @@ export default {
    //window.addEventListener("scroll", this.watchScroll);
   },
   methods: {
-    // watchScroll() {
-    //   var scrollTop =
-    //     window.pageYOffset ||
-    //     document.documentElement.scrollTop ||
-    //     document.body.scrollTop;
-    //   //  当滚动超过 50 时，实现吸顶效果
-    //   if (
-    //     scrollTop > 549 &&
-    //     document.body.scrollHeight -
-    //       window.pageYOffset -
-    //       document.getElementById("footer").offsetHeight >
-    //       450
-    //   ) {
-    //     //(window.innerHeight-document.getElementById("footer").offsetHeight) > 400)
-    //     this.navBarFixed = true;
-    //     console.log(document.getElementById("footer").offsetHeight);
-    //   } else {
-    //     this.navBarFixed = false;
-    //   }
-    // }
   },
 };
 </script>
 <style scoped>
+  .about-banner{
+    object-fit: cover;
+    width: 100%;
+    height: 300px;
+    position: relative;
+  }
+  .about-center-box {
+    width: 100%;
+    height: 1000px;
+    background: #fff;
+  }
+  .about-content {
+    width: 85%;
+    height: 540px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 30px 0 rgba(36,44,49,0.10);
+    border-radius: 10px;
+    position: absolute;
+    bottom: 175px;
+    left: 8%;
+    display: flex;
+  }
+  .content-left {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    padding: 4%;
+    text-align: left;
+  }
+  .content-right {
+    width: 30%;
+  }
+  .about-title {
+    font-family: PingFangSC-Medium;
+    font-size: 32px;
+    color: #566784;
+    letter-spacing: 0.52px;
+  }
+  .about-en {
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: #677897;
+    letter-spacing: 0.29px;
+    margin-top: 0.6%;
+  }
+  .about-list {
+    margin-top: 3.2%;
+    display: flex;
+  }
+  .about-list img {
+    margin-right: 0.7%;
+    margin-top: 0.6%;
+    width: 10px;
+    height: 18px;
+  }
+  .about-list div {
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: #999999;
+    text-align: justify;
+    line-height: 30px;
+  }
+  .swiper-img-box {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .about-award{
+    width: 85%;
+    margin-top: 28%;
+    margin-left: 8%;
+    text-align: left;
+  }
+  .award-title {
+    font-family: PingFangSC-Medium;
+    font-size: 32px;
+    color: #566784;
+    letter-spacing: 0;
+  }
+  .award-en{
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: #677897;
+    letter-spacing: 0.2px;
+    margin-top: 0.6%;
+  }
+  .award-list-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .award-list-box div {
+    width:380px;
+    height:280px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.10);
+    margin-top: 3.2%;
+    text-align: center;
+    line-height: 280px;
+    border-radius: 10px;
+  }
+  .award-list-box div img {
+    width:340px;
+    height:240px;
+    object-fit: cover;
+  }
 /* @media only screen and (max-width: 479px) {
   .about{
     margin-top: 40px !important;

src/views/Home.vue

@@ -752,7 +752,7 @@ h5{
 import HomeFooter from "../components/footer.vue";
 import Swiperr from "@/components/swiperr.vue";
 import animated from "animate.css";
-import wheel from "./images/banner.png";
+import wheel from "./new-img/banner.png";
 import devoteImg1 from './images/1.png';
 import devoteImg2 from './images/2.png';
 import devoteImg3 from './images/3.png';