Browse Source

Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/SesameDevelopment

cl 6 years ago
parent
commit
e799c8af6a

+ 95 - 2
package-lock.json

@@ -2847,6 +2847,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
@@ -4002,6 +4013,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "^1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -8011,8 +8030,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -9837,6 +9855,37 @@
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.0.tgz",
+      "integrity": "sha512-+qeMu563PN7rPdit2+n5uuYVR0SSVwm0JsOUsaJXzgYcClWSlmX0iHDnmeOobPkf5kUglVot3QS6SyLyaQoJ4w==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
+          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.10.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -10052,6 +10101,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz",
@@ -10440,6 +10498,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -10773,6 +10836,16 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.0.3.tgz",
+      "integrity": "sha512-I0Af9Zl1PgJmRVFZMwI1AfIJL1qx4oVtOWIrh/wNCRSr63DjD3YO8s0V/HvW0O3ds9jx2LNtTRuiHiRdALLhTg==",
+      "dev": true,
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz",
@@ -11437,6 +11510,26 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",

+ 3 - 0
package.json

@@ -16,6 +16,7 @@
     "popper.js": "^1.15.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.3"
   },
   "devDependencies": {
@@ -27,8 +28,10 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "sass-loader": "^8.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "swiper": "^5.0.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.39.3",
     "webpack-dev-middleware": "^3.7.1",

BIN
src/assets/banner3.png


File diff suppressed because it is too large
+ 527 - 0
src/assets/swiper.css


File diff suppressed because it is too large
+ 8278 - 0
src/assets/swiper.js


File diff suppressed because it is too large
+ 13 - 0
src/assets/swiper.min.css


File diff suppressed because it is too large
+ 14 - 0
src/assets/swiper.min.js


+ 248 - 0
src/components/carousel.vue

@@ -0,0 +1,248 @@
+<template>
+  <!-- <div id="dataCenter"> -->
+    <div class="window" :style="{width:screenWidth+'px'}" @mouseover="stop" @mouseleave="play">
+      <ul class="container" :style="containerStyle">
+        <li>
+          <!-- 把最后一张图放在最开始   -->
+          <img :style="{width:screenWidth+'px'}" :src="sliders[sliders.length - 1].img" alt="">
+        </li>
+        <li  v-for="(item, index) in sliders" :key="index">
+          <img :style="{width:screenWidth+'px'}" :src="item.img" alt="">
+        </li>
+        <li>
+          <!-- 把第一张图放在最后  @click="amplification(index)" -->
+          <img :style="{width:screenWidth+'px'}" :src="sliders[0].img" alt="">
+        </li>
+      </ul>
+       <!-- 左右切换按钮 -->
+      <ul class="direction">
+        <li class="left" @click="move(screenWidth, 1, speed)">
+            <img src="..\assets\back1.png" alt=""/>
+          <!-- <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"  /></svg> -->
+        </li>
+        <li class="right" @click="move(screenWidth, -1, speed)">
+            <img src="..\assets\back2.png" alt=""/>
+          <!-- <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"  /></svg> -->
+        </li>
+      </ul>
+      <!-- // 小圆点
+      <ul class="dots">
+        <li v-for="(dot, i) in sliders" :key="i"
+        :class="{dotted: i === (currentIndex-1)}"
+        @click = jump(i+1)
+        >
+        </li>
+      </ul> -->
+    </div>
+    <!-- <div class="mask-div" @click="maskFun()" v-if="maskBol">
+      <img :style="{width:screenWidth+'px'}" :src="sliders[imgNumber].img" alt="" class="mask-img">
+    </div> -->
+  <!-- </div> -->
+</template>
+<script>
+/* eslint-disable */ 
+import img1 from "../assets/banner.png";
+import img2 from "../assets/banner2.png";
+
+export default {
+  name: 'Carousel',
+  props: {
+    initialSpeed: {
+      type: Number,
+      default: 10
+    }, // 图片移动速度
+    initialInterval: {
+      type: Number,
+      default: 3
+    } // 如果是一个组件 ////接受外部传入的切换周期
+  },
+  data () {
+     
+    return {
+      sliders: [
+        {
+          img: img1
+        },
+        {
+          img: 'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
+        },
+        {
+          img: img2
+        }
+      ], // 放图片的数组
+      screenWidth: 1920, // 图片宽度
+      currentIndex: 1, // 原点起始位置
+      distance: 0, // 外层嵌套的初始移动距离
+      transitionEnd: true, // 防止多次快速点击切换出现问题的闸门
+      speed: this.initialSpeed,
+      timer: null, // 定时器
+      imgNumber: 0, // 点击放大的图片
+      maskBol: false
+    }
+  },
+  computed: {
+    containerStyle () {
+      return {
+        transform: `translate3d(${this.distance}px, 0, 0)`
+      }
+    },
+    interval () {
+      return this.initialInterval * 1000
+    }
+  },
+  created () {
+   
+    this.init()
+  },
+  methods: {
+    init () {
+      this.play(),
+      this.distance= -document.body.clientWidth,
+      this.screenWidth=document.body.clientWidth // 屏幕尺寸
+    },
+    move (offset, direction, speed) { // 移动一次的距离, 向左还是向右移动, 图片移动速度
+      if (!this.transitionEnd) return
+      this.transitionEnd = false
+      direction === -1 ? this.currentIndex += offset / this.screenWidth : this.currentIndex -= offset / this.screenWidth
+      if (this.currentIndex > this.sliders.length) this.currentIndex = 1
+      if (this.currentIndex < 1) this.currentIndex = this.sliders.length
+
+      const destination = this.distance + offset * direction
+      this.animate(destination, direction, speed)
+    },
+    animate (des, direc, speed) { // 实际移动距离 想左还是向右 移动速度 负右正左
+      if (this.temp) {
+        window.clearInterval(this.temp)
+        this.temp = null
+      }
+      this.temp = window.setInterval(() => {
+        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
+          this.distance += speed * direc
+        } else {
+          this.transitionEnd = true
+          window.clearInterval(this.temp)
+          this.distance = des
+          let allWidth = this.sliders.length * this.screenWidth
+          if (des < -allWidth) this.distance = -this.screenWidth
+          if (des > -this.screenWidth) this.distance = -allWidth
+        }
+      }, 10)
+    },
+    jump (index) {
+      const direction = index - this.currentIndex >= 0 ? -1 : 1
+      const offset = Math.abs(index - this.currentIndex) * this.screenWidth
+      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
+      this.move(offset, direction, jumpSpeed)
+    },
+    // 自动播放函数
+    play () {
+      console.log(this.screenWidth)
+      if (!this.maskBol) {
+        if (this.timer) {
+          window.clearInterval(this.timer)
+          this.timer = null
+        }
+        this.timer = window.setInterval(() => {
+          this.move(this.screenWidth, -1, this.speed)
+        }, this.interval)
+      }
+    },
+    stop () {
+      window.clearInterval(this.timer)
+      this.timer = null
+    },
+    amplification (index) {
+      this.imgNumber = index
+      this.maskBol = true
+      this.stop()
+    },
+    maskFun () {
+      this.maskBol = false
+      this.play()
+    }
+  }
+}
+</script>
+<style lang="stylus">
+*{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+  }
+  ol,ul{
+    list-style: none;
+    padding 0px;
+  }
+  .container li{
+      width: 100%;
+  }
+    .window{
+      position:relative;
+      height:400px;
+      margin:0 auto;
+      overflow:hidden;
+      .container{
+        display:flex;
+        position:absolute;
+        width: 100%;
+        margin 0 !important
+        padding 0 !important
+      }
+      .left, .right{
+        position:absolute;
+        top:47%;
+        // transform:translateY(-50%);
+         width:32px;
+         height:32px;
+        // background-color:rgba(0,0,0,.3);
+        // border-radius:50%;
+        // cursor:pointer;
+      }
+      .left{
+        left:6.9%;
+        // padding-left:12px;
+        // padding-top:10px;
+      }
+      .right{
+        right:6.9%;
+        // padding-right:12px;
+        // padding-top:10px;
+      }
+     .container img{
+        user-select: none;
+        width 100%
+        height 400px
+      }
+    }
+    // .dots{
+    //     position:absolute;
+    //     bottom:10px;
+    //     left:50%;
+    //     transform:translateX(-50%);
+    //   }
+    // .dots li{
+    //   display:inline-block;
+    //   width:15px;
+    //   height:15px;
+    //   margin:0 3px;
+    //   border:1px solid white;
+    //   border-radius:50%;
+    //   background-color:#333;
+    //   cursor:pointer;
+    // }
+    // .dots .dotted{
+    //   background-color:orange;
+    // }
+    // .mask-div{
+    //   width: 100vw;
+    //   height: 100vh;
+    //   background-color: rgba(0,0,0,.7);
+    //   position: fixed;
+    //   top: 0;
+    //   left: 0;
+    //   .mask-img{
+    //     margin-top: calc(50vh - 200px);
+    //   }
+    // }
+//   }
+</style>

+ 125 - 41
src/components/footer.vue

@@ -5,16 +5,16 @@
                 <h4>联系我们</h4>
                 <span>CONTACT US</span>
             </div>
-            <div class="tit">
+            <div class="tit1">
                 <div class="weixin">
-                    <img src=".\img\weixin.png" alt="微信二维码">
+                    <img :src="img1" alt="微信二维码">
                     <p>官方微信</p>
                 </div>
                 <div class="contact">
-                    <p class="text-muted">网址:http://www.zhimakaihua.com</p>
-                    <p class="text-muted">电话:400-0018-318</p>
-                    <p class="text-muted">合作邮箱:123456789@163.com</p>
-                    <p class="text-muted">地址:陕西省西安市曲江新区雁塔南路1201号金辉环球中心B座1209室</p>
+                    <p class="text-muted">{{webSite}}</p>
+                    <p class="text-muted">电话:{{tel}}</p>
+                    <p class="text-muted">合作邮箱:{{email}}</p>
+                    <p class="text-muted">地址:{{address}}</p>
                 </div>
             </div>
         </div>
@@ -25,8 +25,18 @@
 </template>
 
 <script>
+import img1 from "./img/weixin.png";
 export default {
-    name: 'HomeFooter'
+    name: 'HomeFooter',
+    data(){
+        return{
+            img1:img1,
+            webSite:"网址:http://www.zhimakahua.com",
+            tel:"400-0018-318",
+            email:"123456789@163.com",
+            address:"陕西省西安市曲江新区雁塔南路1201号金辉环球中心B座1209室"
+        }    
+    }
 }
 </script>
 
@@ -34,29 +44,26 @@ export default {
 *{
     margin: 0px;
     padding: 0px;
+    text-align: left;
 }
 .footer{
     width: 100%;
+    height: 480px;
     background: #F6F6F6;
     color: aliceblue;
     padding-top: 112px;
+    padding-left: 120px;
 }
 .footer .top{
-    height: 305px;
-    /* background:rgba(40,40,40,1) */
     color: black;
 }
 .footer .top div h4{
-    margin-left: 120px;
-    /* margin-top: 112px; */
     font-family: PingFangSC-Regular;
     font-size: 28px;
     color: #4A4A4A;
     letter-spacing: 0;
 }
 .footer .top div span{
-    margin-left: 120px;
-    margin-top: 112px;
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
@@ -64,36 +71,40 @@ export default {
     height: 22px;
     width: 140px;
 }
-.footer .top .tit{
-    width: 83.3%;
+.footer .top .tit1{
+    width: 95%;
+    display: flex;
+    flex-direction: row;
     height: 233px;
     border-top: 1px solid #E4E4E4;
     border-bottom: 1px solid #E4E4E4;
-    margin-left: 122px;
-    margin-top: 30px;
+    padding-top: 30px;
 }
-.footer .top .tit .contact{
-    float: left;
-    width: 71%;
-    height: 120px;
-    margin-top: 42px;
-    margin-left: 40px;
+.footer .top .tit1 .contact{
+    height: 140px;
+    padding-left:40px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 }
-.footer .top .tit div p{
-    margin: 0px;
+.footer .top .tit1 div p{
     font-family: PingFangSC-Regular;
     font-size: 16px;
     color: #999999;
     letter-spacing: 0;
-    line-height: 30px;
+    height: 80px;
 }
-.footer .top .tit .weixin{
+.footer .top .tit1 .weixin{
     float: left;
     width: 118px;
+    display: flex;
+    flex-direction: column;
+}
+.footer .top .tit1 .weixin img{
+    width: 118px;
     height: 118px;
-    margin-top: 42px;
 }
-.footer .top .tit .weixin p{
+.footer .top .tit1 .weixin p{
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
@@ -101,31 +112,104 @@ export default {
     line-height: 22px;
     text-align: center;
 }
-.footer .top .tit .weixin img{
+.footer .top .tit1 .weixin img{
     float: left;
     width: 118px;
     height: 118px;
 }
 .footer .top h4{
-    /* color: white; */
     color: black;
 }
 .footer .bottom{
     height: 81px;
-    /* background: black; */
-    /* color: white; */
+    display: flex;
+    align-items: center;
     color: black;
 }
 .footer .bottom h4{
-    padding: 0px;
-    margin: 0px;
-    width: 71%;
-    height: 30px;
-    margin-left: 120px;
-    margin-top: 23px;
     font-size: 16px;
     color: #999999;
-    line-height: 30px;
 }
-
+@media screen and (max-width:1100px){
+   .footer{
+    width: 100%;
+    height: 480px;
+    background: #F6F6F6;
+    color: aliceblue;
+    padding-top: 62px;
+    padding-left: 60px;
+}
+.footer .top{
+    color: black;
+}
+.footer .top div h4{
+    font-family: PingFangSC-Regular;
+    font-size: 32px;
+    color: #4A4A4A;
+    letter-spacing: 0;
+}
+.footer .top div span{
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #999999;
+    letter-spacing: 0.2px;
+    height: 22px;
+    width: 140px;
+}
+.footer .top .tit1{
+    width: 95%;
+    display: flex;
+    flex-direction: row;
+    height: 233px;
+    border-top: 1px solid #E4E4E4;
+    border-bottom: 1px solid #E4E4E4;
+    padding-top: 30px;
+}
+.footer .top .tit1 .contact{
+    height: 160px;
+    padding-left:40px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.footer .top .tit1 div p{
+    font-family: PingFangSC-Regular;
+    font-size: 26px;
+    color: #999999;
+    letter-spacing: 0;
+    height: 80px;
+}
+.footer .top .tit1 .weixin{
+    float: left;
+    width: 138px;
+    display: flex;
+    flex-direction: column;
+}
+.footer .top .tit1 .weixin img{
+    width: 138px!important;
+    height: 138px!important;
+}
+.footer .top .tit1 .weixin p{
+    font-family: PingFangSC-Regular;
+    font-size: 30px;
+    color: #999999;
+    letter-spacing: 0;
+    line-height: 22px;
+    text-align: center;
+    padding-top: 20px;
+}
+.footer .top h4{
+    color: black;
+}
+.footer .bottom{
+    height: 81px;
+    display: flex;
+    align-items: center;
+    color: black;
+}
+.footer .bottom h4{
+    font-size: 26px;
+    color: #999999;
+} 
+}
 </style>

+ 108 - 0
src/components/swiperr.vue

@@ -0,0 +1,108 @@
+<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=""></div>
+    </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 {
+       msg: 'Welcome to Your Vue.js App'
+    }
+},
+mounted(){
+     var swiper = new Swiper('.swiper-container', {
+     slidesPerView: 1,
+      spaceBetween: 30,
+      loop: true,
+      spaceBetween: 30,
+      centeredSlides: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    }
+    ); 
+}
+}
+</script>
+
+<style lang="stylus">
+@import '../assets/swiper.min.css';
+
+    .swiper-button-next:after, .swiper-button-prev:after {
+        font-family: swiper-icons;
+        font-size: var(--swiper-navigation-size);
+        display none
+    }
+    .swiper-wrapper img{
+      width 100%
+      height 100%
+    }
+    .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;
+    }
+</style>

+ 46 - 57
src/views/Home.vue

@@ -1,47 +1,52 @@
 <template>
   <div class="home">
-    <div id="banner">
+    <!-- <carousel></carousel> -->
+    <!-- <div id="banner">
       <div id="u1" data-label="公司简介轮播图">
         <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
           <div class="slideshow">
-            <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"
+            <transition-group
               tag="ul"
               name="image"
               style="width: 100%; padding:0px;max-height: 400px;overflow:hidden"
             >
-              <li v-for="(item, index) in imgArray" v-show="index === mark" :key="item">
-                <img :src="item" v-show="index === mark" style="width: 100%; padding:0px" />
-                <!-- height: 400px; -->
+              <li
+                v-for="(item, index) in imgArray"
+                v-show="index === mark"
+                :key="item"
+              >
+                <img
+                  :src="item"
+                  v-show="index === mark"
+                  style="width: 100%; padding:0px"
+                />
               </li>
             </transition-group>
           </div>
-          <!-- <div class="bullet">
-            <span
-              v-for="(item, index) in imgArray"
-              :class="{ active: index === mark }"
-              @click="change(index)"
-              :key="item"
-            ></span>
-          </div> -->
         </div>
       </div>
-    </div>
+    </div>-->
+  <swiperr  :message="message"></swiperr>
 
     <div id="sale">
       <p class="saletitle">致力于互联网创新技术服务</p>
       <p class="salecontent">技术更跨界、创意更自由、服务更贴心</p>
       <div style="display:flex;justify-content:space-between; flex-wrap:wrap;">
-        <div v-for="(item,index) in saleArray" :key="index">
+        <div v-for="(item, index) in saleArray" :key="index">
           <div id="box1">
             <div id="box1-Up">
               <img :src="item.src" alt style="margin-top: 38px !important;" />
-              <p style="margin-top: 20px !important;margin-bottom:20px;">{{item.title}}</p>
+              <p style="margin-top: 20px !important;margin-bottom:20px;">{{ item.title }}</p>
             </div>
             <div id="box1-Dn">
               <ul>
-                <li v-for="(itemson,index) in item.content" :key="index">
+                <li v-for="(itemson, index) in item.content" :key="index">
                   <div class="yuandian"></div>
-                  <span style="display:block;text-align:left">{{itemson.con}}</span>
+                  <span style="display:block;text-align:left">
+                    {{
+                    itemson.con
+                    }}
+                  </span>
                 </li>
               </ul>
             </div>
@@ -260,9 +265,6 @@ div#sale {
   position: relative;
   top: 100px;
 }
-/* #blurr div:nth-child(1){
-  margin-left: 62px;
-} */
 #blurr div:nth-child(4) {
   margin-right: 62px;
   margin-bottom: 66px;
@@ -310,7 +312,6 @@ div#sale {
   );
 }
 #exploit {
-  /* margin-left: 120px; */
   margin: auto 120px;
   padding-top: 100px;
 }
@@ -344,7 +345,6 @@ div#client {
 div#client img {
   width: 284px;
   height: 128px;
-  /* margin-right: 21px; */
 }
 div#client p {
   margin-top: 0px;
@@ -352,7 +352,6 @@ div#client p {
 #box1 {
   background: #ffffff;
   border: 1px solid #f2f2f2;
-  /* margin-right: 26px; */
   width: 280px;
   height: 296px;
 }
@@ -375,12 +374,6 @@ div#box1-Up {
   text-align: center;
   line-height: 28px;
 }
-/* div#box1-up image{
-  margin-top: 20px !important;
-}
-div#box1-up p{
-  margin-top: 38px !important;
-} */
 div#box1-Dn {
   font-family: PingFangSC-Light;
   font-size: 16px;
@@ -392,10 +385,6 @@ div#box1-Dn {
 }
 div#box1-Dn ul {
   margin: 20px 28px 22px 28px;
-  /* padding-top: 20px;
-      padding-bottom: 22px;
-      padding-right: 28px;
-      margin-left: 28px; */
   padding-left: 0px;
 }
 div#box1-Dn ul li {
@@ -416,7 +405,6 @@ div#box1-Dn ul li {
   margin-right: 4px;
 }
 #box2 {
-  /* margin-right: 60px; */
   margin-bottom: 62px;
   width: 360px;
   height: 330px;
@@ -451,12 +439,10 @@ div#box3-Left {
   width: 40%;
   height: 303px;
   float: left;
-  /* background-image: linear-gradient(-180deg, #43BFFF 0%, #2093FF 100%); */
   margin: 87px 107px 110px 0px;
 }
 div#box3-Right {
   display: flex;
-  /* background-image: linear-gradient(-180deg, #43BFFF 0%, #2093FF 100%); */
 }
 .box3-Right-li {
   display: flex;
@@ -553,7 +539,6 @@ div#box3-Right ul :nth-child(2) {
   margin-top: 40px;
 }
 #client-Pic img {
-  /* margin-right: 21px; */
   margin-bottom: 24px;
 }
 
@@ -562,37 +547,38 @@ div#box3-Right ul :nth-child(2) {
   width: 100%;
   margin: 0 auto;
   background: #ffffff;
-  /* background: #f6f6f6; */
-  /* background-color: gold; */
+  overflow: hidden;
 }
 #box {
   width: 280px;
   height: 296px;
 }
+#banner{
+  background-color: goldenrod
+}
 .slideshow {
   width: 100%;
-  /* height: 400px; */
 }
 .slideshow ul li {
   list-style: none;
 }
-/* .active {
-  background: red !important;
-} */
-/* .image-enter-active {
-  transform: translateX(-100%);
-  transition: all 1.5s ease;
+.image-enter-to {
+  transition: all 1s ease;
+  transform: translateX(0);
 }
+
 .image-leave-active {
-  transform: translateX(100%);
-  transition: all 1.5s ease;
+  transition: all 1s ease;
+  transform: translateX(-100%);
 }
+
 .image-enter {
   transform: translateX(100%);
 }
+
 .image-leave {
   transform: translateX(0);
-} */
+}
 </style>
 
 <script>
@@ -601,22 +587,28 @@ div#box3-Right ul :nth-child(2) {
 
 import img1 from "../assets/banner.png";
 import img2 from "../assets/banner2.png";
+import img3 from "../assets/banner3.png";
 import HelloWorld from "@/components/HelloWorld.vue";
 import HomeFooter from "../components/footer.vue";
+import Carousel from "@/components/carousel.vue";
+import Swiperr from "@/components/swiperr.vue"
 
-import animated from 'animate.css';
+import animated from "animate.css";
 
 export default {
   name: "home",
   components: {
-    HomeFooter
+    HomeFooter,
+    Carousel,
+    Swiperr
   },
   data() {
     return {
       timer: null, //定时器
       mark: 0, //比对图片索引的变量
       //轮播图数据
-      imgArray: [img1, img2],
+      message:[img1, img2, img3],
+      imgArray: [img1, img2, img3],
       saleArray: [
         {
           src: require("../assets/1.png"),
@@ -661,16 +653,13 @@ export default {
   methods: {
     autoPlay() {
       this.mark++;
-      if (this.mark === 2) {
+      if (this.mark === this.imgArray.length) {
         this.mark = 0;
       }
     },
     play() {
       this.timer = setInterval(this.autoPlay, 1500);
     },
-    change(i) {
-      this.mark = i;
-    },
     stop() {
       clearInterval(this.timer);
     },

+ 381 - 226
src/views/Serve.vue

@@ -1,89 +1,181 @@
 <template>
-  <div class="serve">
-    <div class="content col-md-12 container-fluid">
-        <div class="imgs">
-            <p>做你创业路上的</p>
-            <h4>技术合伙人</h4>
-        </div>
-        <div class="first">
-            <span>|</span><h3>主营业务</h3>
-            <div class="img">
-                <p class="work1"><span>技术开发</span>
+<div class="container-fuild">
+<div class="row">
+<div class="serve">
+    <div class="imgs">
+        <img src=".//images//u136.jpg" alt="服务">
+        <p>做你创业路上的</p>
+        <h4>技术合伙人</h4>
+    </div>
+    <div class="first">
+         <div class="col-md-12 tit">
+            <h3>主营业务</h3>
+         </div>
+        <div class="work col-md-12">
+            <div class="work1">
+                <div class="img col-md-1">
+                    <img :src="workImg1">
+                </div>
+                <div class="title col-md-1"><p>{{title1}}</p> </div>
+                <div class="job col-md-10">
                     <ul>
                         <li v-for="(work1,index) in works1"  :key="index">{{work1}}</li>
                     </ul>
-                </p>
-                <p class="work2"><span>设计类</span>
+                </div>
+            </div>
+            <div class="work1">
+                <div class="img col-md-1">
+                    <img :src="workImg2">
+                </div>
+                <div class="title col-md-1"><p>{{title2}}</p> </div>
+                <div class="job col-md-10">
                     <ul>
                         <li v-for="(work2,index) in works2"  :key="index">{{work2}}</li>
                     </ul>
-                </p>
-                <p class="work3"><span>其他服务</span>
+                </div>
+            </div>
+            <div class="work1">
+                <div class="img col-md-1">
+                    <img :src="workImg3">
+                </div>               
+                <div class="title col-md-1"><p>{{title3}}</p> </div>
+                <div class="job col-md-10">
                     <ul>
                         <li v-for="(work3,index) in works3"  :key="index">{{work3}}</li>
                     </ul>
-                </p>
+                </div>
             </div>
         </div>
-        <div class="second">
-            <span>|</span><h3>开发流程</h3>
-            <img src=".//images/u143.png" alt="开发流程">
+    </div>       
+    <div class="second">
+        <div class="col-md-12 tit">
+            <h3>开发流程</h3>
+         </div>
+         <div class="process col-md-12">
+             <div class="boxs col-md-2" v-for="(process,index) in process" :key="index" :style="{color:process.color}"> 
+                <div class="top" >
+                    <div class="glyphicon glyphicon-chevron-right"></div>
+                    <div class="box">
+                        <div class="circle">
+                            <div class="size">{{process.title}}</div>
+                            <div class="index">{{index}}</div>
+                        </div>
+                    </div>   
+                </div>
+                <div class="title">{{process.subhead}}</div>
+             </div>
+         </div>
+    </div>
+    <div class="third">
+        <div class="col-md-12 tit">
+            <h3>产品解决方案</h3>
         </div>
-        <div class="third">
-                <div class="methodTitle"><span>|</span><h3>产品解决方案</h3></div>
-                    <ul>
-                        <li>
-                            <img src="./images/u147.png" alt="芝麻开花">
-                            <div>
-                                <p><span>自动售酒机项目</span>
-                                    打破传统高端酒销售模式,利用互联网技术结合线下终端硬件,
-                                    建立一套新零售体系;迎合了新的互联网消费理念,让用户在
-                                    线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出
-                                    后获得众多年轻消费者的追捧。</p>
-                            </div>
-                        </li>
-                        <li>
-                            <img src="./images/u148.png" alt="芝麻开花">
-                            <div>
-                                <p><span>益车宝是</span>
-                                    一家轮胎销售代理公司,在转型之前一直延续代理—经销
-                                    —门店的传统销售模式,经营存在诸多问题。经过互联网转型规划,
-                                    将所有销售环节打通,线上线下结合,实行新的多样化互联网销售
-                                    策略和管理模式,用户量及营业收入获得突破性持续增长。</p>
-                            </div>
-                        </li>
-                        <li>
-                            <img src="./images/u149.png" alt="芝麻开花">
-                            <div>
-                                <p><span>股票自动交易系统</span>
-                                    – 将股票买卖的实盘操作完全交给程序自动完成。</p>
-                                <p><span>汽车行业互联网舆情监控系统</span>
-                                    – 已服务广汽丰田和江淮汽车。</p>
-                            </div>
-                        </li>
-                    </ul>
+        <div class="methods">
+            <ul >
+                <li v-for="(method,index) in methods" :key="index" class="col-md-4">
+                    <img :src="method.img">
+                    <div >
+                        <p v-for="(content,index) in method.contents" :key="index"><span>{{content.title}}——</span>{{content.par}}</p>
+                    </div>
+                </li>
+            </ul>
         </div>
-      </div>
-      <home-footer style="position: relative; top: 2281px;"></home-footer>
-     </div>
+    </div>
+    <home-footer class="col-md-12 col-xs-12">
+    </home-footer>
+ </div>
+</div>
+</div>
+
 </template>
 
 <script>
- /* eslint-disable */
-import HomeFooter from '../components/footer.vue'
-
-
+/* eslint-disable */
+import HomeFooter from '../components/footer';
+import workImg1 from './/images/work1.png';
+import workImg2 from './/images/work2.png';
+import workImg3 from './/images/work3.png';
+import methodImg1 from './images/u147.png';
+import methodImg2 from './images/u148.png';
+import methodImg3 from './images/u149.png';
 export default {
   name: 'serve',
-    components: {
-    HomeFooter
-  },
   data(){
       return{
+          "workImg1":workImg1,
+          "workImg2":workImg2,
+          "workImg3":workImg3,
+          "title1":"技术开发",
+          "title2":"设计类",
+          "title3":"其他服务",
           "works1":["网站开发","系统开发","APP开发","微信公众号","微信小程序","手机网站"],
           "works2":["UI设计","网页设计","画册设计","logo设计"],
           "works3":["黑盒测试","需求分析","数据分析","服务器维护","网站维护","系统维护"],
+          "process":[
+              {
+                  "title":"项目评估",
+                  "subhead":"评估需求、开发周期、开发成本等",
+                  "color":"orange"
+              },
+              {
+                  "title":"立项",
+                  "subhead":"签署合同、充值预付款",
+                  "color":"green"
+              },
+              {
+                  "title":"安排工作者",
+                  "subhead":"安排项目经理及其他工作者",
+                  "color":"blue"
+              },
+              {
+                  "title":"项目开发",
+                  "subhead":"工作者按需求开发,按时发布工作进度",
+                  "color":"purple"
+              },
+              {
+                  "title":"按月结算",
+                  "subhead":"每月初结算上月工作者报酬及平台服务费",
+                  "color":"green"
+              },
+          ],
+          "methods":[
+              {
+                "img":methodImg1,
+                "contents":[
+                    {
+                        "title":"自动售酒机项目",
+                        "par":"自动售酒机项打破传统高端酒销售模式,利用互联网技术结合线下终端硬件,建立一套新零售体系;迎合了新的互联网消费理念,让用户在线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出后获得众多年轻消费者的追捧。"
+
+                    }
+                ]
+              },
+              {
+                "img":methodImg2,
+                "contents":[
+                    {
+                        "title":"益车宝是",
+                        "par":"自动售酒机项打破传统高端酒销售模式,利用互联网技术结合线下终端硬件,建立一套新零售体系;迎合了新的互联网消费理念,让用户在线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出后获得众多年轻消费者的追捧。"
+                    }
+                ]
+              },
+              {
+                "img":methodImg3,
+                "contents":[
+                    {
+                        "title":"股票自动交易系统",
+                        "par":"将股票买卖的实盘操作完全交给程序自动完成。"
+                    },
+                    {
+                        "title":"汽车行业互联网舆情监控系统",
+                        "par":"已服务广汽丰田和江淮汽车。"
+                    }
+                ]
+              }
+          ]
       }
+  },
+    components:{
+      HomeFooter
   }
 }
 </script>
@@ -91,207 +183,270 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 /************************************整体样式********************************************/
-
 *{
     margin: 0px;
     padding: 0px;
     list-style: none;
-    text-align: left;
 }
 /************************************整体样式********************************************/
 
 /************************************主体样式********************************************/
-.serve{
-    width: 1440px;
+/********************imgs***************************/
+.serve .imgs{
+    width: 100%;
+    position: relative;
 }
-
-/********************first***************************/
-.serve .content .imgs{
+.serve .imgs img{
     width: 100%;
-    height: 400px;
-    border: 1px solid black;
-    /* margin-top: 17px; */
-    background: url(.//images//u136.jpg) no-repeat;
-    background-size: 100%;
-}
-.serve .content .imgs p{
-    font-size: 45px;
-    margin-top: 130px;
-    margin-left: 320px;
+    max-height: 400px;
+}
+.serve .imgs p{
+    font-size: 40px;
     color: #999;
+    position: absolute;
+    left: 25%;
+    top: 35%;
+    font-weight: 600;   
 }
-.serve .content .imgs h4{
-    font-size: 58px;
-    margin-top: 30px;
-    margin-left: 640px;
-    color: white;
+.serve .imgs h4{
+    font-size: 50px;
+    color: white; 
+    position: absolute;
+    left: 45%;
+    top: 55%;
+    font-weight: 600;
+}
+/********************imgs***************************/
+/********************主营业务***************************/
+.serve .tit{
+    border-left: 3px solid red;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    text-align: left;
+    padding-left: 3%;
 }
-.serve .content .first span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .tit h3{
+    font-size: 28px
 }
-.serve .content .first h3{
-    font-size: 28px;
-    float: left;
-    width: 160px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
-    text-align: center;
-    margin: 40px 0px 10px 60px;
+.serve .first{
+    padding-left: 5%;
 }
-.serve .content .first .img{
-    float: left;
-    width: 1440px;
-    height: 420px;
+.serve .first .work .work1{
     border-top: 1px solid rgb(212, 212, 212);
+    height: 100px;
+    line-height: 100px;
 }
-.serve .content .first .img p{
-    width: 100%;
-    height: 140px;
-    line-height: 140px;
-    padding: 0px;
-    margin: 0px;
+.serve .first .work .work2{
     border-bottom: 1px solid rgb(212, 212, 212);
 }
-.serve .content .first .img p span{
-    color: black;
-    margin: 0px;
-    padding-left: 250px;
-    font-size: 30px;
+.serve .first .work .work1 .img img{
+    width: 40%;
+}
+.serve .first .work .work1 .title{
     color:#0aa99a;
-    font-weight: 600px;
-}
-.serve .content .first .img .work1{
-    background: url(".//images/work1.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img .work2{
-    background: url(".//images/work2.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img .work3{
-    background: url(".//images/work3.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img ul{
-    height: 140px;
-    margin-left: 450px;
-}
-.serve .content .first .img ul li{
-    float: left;
-    font-size: 24px;
-    margin:0px;
-    width: 150px;
+    font-size: 20px;
 }
-.serve .content .first .img ul li:hover{
-    cursor: pointer;
+.serve .first .work .job ul li{
+    float: left;
+    /* text-align: center; */
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    flex: 1;
+    font-size: 20px;
+    width: 15%;
+}
+/* 主营业务的手机端 */
+@media screen and (max-width:1026px){
+   .serve .first .work .work1 .title{
+       font-size: 24px;
+       float: left;
+    } 
+    .serve .first .work .work1 .img img{
+        display: none;
+    } 
+    .serve .first .work .work1{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .serve .first .work .work1 .title{
+        flex:2;
+    }
+    .serve .first .work .work1 .job{
+        flex:10
+    }
+    .serve .first .work .job ul li{
+    /* float: left; */
+    display: flex;
+    flex: 1;
+    font-size: 20px;
+
 }
-/*********************first*************************/
-/*********************second*************************/
-.serve .content .second{
-    width: 1440px;
 }
-.serve .content .second span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .first .work .job ul li:hover{
+    cursor: pointer;
 }
-.serve .content .second h3{
-    font-size: 28px;
-    float: left;
-    width: 160px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
+/*********************second开发流程*************************/
+@media screen and (max-width:1100px){
+    .serve .second{
+    padding-left: 0;
+    }
+    .serve .second .process .boxs .box .circle .size{
+    font-size: 18px;
+    }
+    .serve .second .process .boxs .box .circle .index{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: -2%;
+    left:50%;
+    margin-left: -5%;
+    background: rgb(245, 245,245,1);
+    width:10%;
+    font-size: 14px;
     text-align: center;
-    margin: 40px 0px 10px 60px;
+    }
+    .serve .second .process .boxs .title{
+    padding-left: 20%;
+    margin-top: 20px;
+    font-size: 20px;
+    display: flex;
+    justify-items: center;
+    align-items: centers;
+    font-size: 16px!important;
+    }
+    .serve .second .process .boxs .box .circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20vw!important;
+    height: 20vw!important;
+    /* margin-left: -2%; */
+    border-radius: 100%;
+    border: 1px dashed;
+    position: relative;
 }
-.serve .content .second img{
-  width: 1440px;
 }
-
-/*********************second*************************/
-/*********************third*************************/
-.serve .content .third{
-    width: 1024px;
-    /* padding-bottom: 30px; */
-}
-.serve .content .third .methodTitle{
-    width: 1440px;
-    height: 90px;
-}
-.serve .content .third span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .second{
+    padding-left: 5%;
 }
-.serve .content .third h3{
-    font-size: 28px;
-    float: left;
-    width: 180px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
-    text-align: center;
-    margin: 40px 0px 10px 60px;
-}
-.serve .content .third ul{
-  float: left;
-  margin-left: 0;
-  width: 1440px;
-  height: 490px;
+.serve .second .process{
+    display: flex;
+    flex: 1;
+    flex-direction: row;
 }
-.serve .content .third ul li{
-    float: left;
-    width: 400px;
-    height: 590px;
-    margin-left: 70px;
-    border: 1px solid rgb(212, 212, 212);
+.serve .second .process .boxs{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 1%;
+    background:rgb(245,245,245);
 }
-.serve .content .third ul li img{
-    width: 400px;
+.serve .second .process .boxs .top{
+    width: 100%;
     height: 200px;
+    display: flex;
+    flex-direction:row;
+    justify-content: space-between;
+    align-items: center;
 }
-.serve .content .third ul li div{
-    padding: 20px;
+.serve .second .process .boxs:first-child .glyphicon{
+    display: none;
 }
-.serve .content .third ul li div p{
-    float: left;
-    font-size: 21px;
-    line-height: 40px;
-    margin-bottom: 50px;
+.serve .second .process .boxs:first-child .top{
+    display: flex;
+    justify-content: flex-end;
+    margin-left: -5%
 }
-.serve .content .third ul li div span{
-    float: left;
+.serve .second .process .boxs .box .circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10vw;
+    height: 10vw;
+    margin-left: -2%;
+    border-radius: 100%;
+    border: 1px dashed;
+    position: relative;
     font-size: 24px;
-    font-weight: bold;
-    margin: 0px;
-    color: black;
-}
-/*********************third*************************/
-/************************************右边样式********************************************/
-/* .container-fluid{
-    height: 2750px;
-} */
-.content{
+}
+.serve .second .process .boxs .box .circle .index{
     position: absolute;
     display: flex;
-    flex-direction: column;
-    width: 1440px;
+    align-items: center;
+    bottom: -8%;
+    left:50%;
+    margin-left: -5%;
+    background: rgb(245, 245,245,1);
+    width:10%;
+    font-size: 20px;
+    text-align: center;
+}
+.serve .second .process .boxs .title{
+    padding-left: 20%;
+    margin-top: 20px;
+    font-size: 20px;
+    display: flex;
+    justify-items: center;
+    align-items: centers
+}
+/*********************second开发流程*************************/
+/*********************third产品解决方案*************************/
+@media screen and (max-width:1026px){
+    .third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    /* min-height:320px; */
+    /* height: 400px!important; */
+    height: auto!important;
+    margin-bottom: 30px;
+    }
+    .third img{
+    width: 100%;
+    /* max-height: 300px; */
+    height: auto!important;
+    }
+    .third p{
+    font-size: 32px!important;
+    line-height: 70px!important;
+    padding-top: 10px;
+    margin-bottom: 20px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 34px!important;
+}
+}
+.third{
+    padding-left: 5%;
+}
+.third ul li{
+    padding-right: 4%;
+}
+.third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    /* min-height:320px; */
+    height: 300px;
+}
+.third img{
+    width: 100%;
+    max-height: 300px;
+    height: 200px;
+}
+.third p{
+    font-size: 18px;
+    line-height: 40px;
+    padding-top: 10px;
+    margin-bottom: 20px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 22px;
 }
- 
+/*********************third产品解决方案*************************/
 </style>

File diff suppressed because it is too large
+ 370 - 225
src/views/Teach.vue


BIN
src/views/images/入门待遇.png