SesameDevelopment/src/views/Home.vue

<template>
  <div class="home" v-cloak>
    <swiperr :message="messageParent" class="wheelPicture"></swiperr>
    <div id="content">
      <div class="box1">
        <h4>每个项目，我们从认真做原型开始</h4>
        <h5>深入了解行业背景，深度沟通用户需求，规划出最合适的产品</h5>
        <div class="picture">
          <div class="first" @mouseover="mouseOver" @mouseleave="mouseLeave" @touchstart="mouseOver" @touchend="mouseLeave">
            <div class="bg" :class="{paddingMargin:activeFlag}">
              <p class="line"></p>
              <h6 v-bind:class="{titleMargin:activeFlag}">面对老板和客户</h6>
              <transition name="fade">
                <ul v-show="activeFlag">
                  <li v-for="(box11Arr,index) in box11Arrs" :key="index">
                    <p><span>· </span>{{box11Arr}}</p>
                  </li>
                </ul>
              </transition>
            </div>
            <!--<transition name="fade">-->
              <img src="./images/1@2x.png" alt="加载失败">
            <!--</transition>-->
            <transition name="fade">
             <img src="./images/shadow-left.png" alt="加载失败" v-show="activeFlag" style="top:210px;height:50px">
            </transition>
          </div>
          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam" @touchstart="mouseOverTeam" @touchend="mouseLeaveTeam">
            <div class="bg" :class="{paddingMargin:activeTeamFlag}">
              <p class="line"></p>
              <h6 :class="{titleMargin:activeTeamFlag}">面对团队内部</h6>
              <transition name="fade">
              <ul v-show="activeTeamFlag">
                <li v-for="(box12Arr,index) in box12Arrs" :key="index">
                  <p><span>· </span>{{box12Arr}}</p>
                </li>
              </ul>
              </transition>
            </div>
            <!--<transition name="fade">-->
             <img src="./images/2@2x.png" alt="加载失败">
            <!--</transition>-->
            <transition name="fade">
             <img src="./images/shadow-right.png" alt="加载失败" style="height: 65px;top:210px">
            </transition>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box2">
          <div class="left">
            <h4>项目开发流程，选择更灵活</h4>
            <h5>一流的团队，规范的流程，完善的评价体系共同保障您的项目的高质量产出</h5>
            <div class="picture">
              <img src="./images/3@2x.png" alt="加载失败">
            </div>
          </div>
          <div class="right">
            <h4>原型规划</h4>
            <div class="text">
              <p>原型阶段只需您预付2W项目资金，我们根据需求完成最合适的产品原型，原型按芝麻开发模式计费，项目资金多退少不补。完成后交付原型相关的所有文件，后续的开发阶段，由您自主选择合作方式。</p>
              <img src="./images/home_right.png" alt="插画">
            </div>
          </div>
        </div>
          <div class="box3">
            <h4>项目开发</h4>
            <p><span>芝麻开发模式：</span>
              该模式下我们按项目人员填写的实际工作时长和工作进度计费，只需您按月支付项目费用。省去了估价环节，需求变更、设计、会议等所有环节收费透明，项目成本一目了然。
            </p>
            <p><span>传统开发模式：</span>
               我们支持对项目按传统模式开发计费，根据原型进行详细评估，给出整体项目报价，报价更精准。签订合同后客户支付50%预付款，开发完成交付后支付剩余50%尾款。
            </p>
          </div>
          <div class="box4">
            <h4>致力于互联网创新技术服务</h4>
            <h5>技术更跨界、创意更自由、服务更贴心</h5>
            <div class="img">
              <ul class="devote flex-wrap-footer-box">
                <li v-for="(devoteArr,index) in devoteArrs"  :key="index">
                  <div class="upBox">
                    <div>
                      <img :src="devoteArr.img" alt="加载失败">
                      <p>{{devoteArr.title}}</p>
                    </div>
                  </div>
                  <div class="downBox">
                    <ul>
                      <li v-for="(content,inde) in devoteArr.content" :key="inde">
                        <span>·</span><p>{{content}}</p>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
      </div>
    </div>
    <img src="./images/4-BG@2x.png" alt="加载失败" class="background">
    <home-footer></home-footer>
  </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-family: 'PingFangSC-Medium';
  text-align: left;
}
h4{
  color: #566784;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 45px;
}
h5{
  color:#677897;
  font-size: 18px;
  letter-spacing: 0.2px;
  line-height: 22px;
  margin-top: 12px;
}

/*新首页样式开始*/
#content{
  width: 1440px;
  padding: 0 120px;
  margin: 0 auto;
  margin-top: 80px;
  position: relative;
}
.background{  /*原型规划的样式*/
  width: 788px;
  height: 1388px;
  position: absolute;
  top: 1368px;
  right: 0px;
  z-index: -999;
}
#content .box1 .picture{ /*XXXXXX*/
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#content .box1 .picture .first{
  width: 42.83%;
  height: 230px;
  border-radius: 20px;
  position: relative;
  /* background: url('./images/1@2x.png') no-repeat; */
  /* background-size: 100% 100%; */
}
#content .box1 .picture .second img,
#content .box1 .picture .first img {
  position: absolute;
  width: 100%;
  height: 230px;
  top: 0;
  left: 0;
  z-index: -1;
}
.bg{
  height: 230px;
  padding-top: 70px;
}
#content .box1 .picture .second{
  position: relative;
  width: 42.83%;
  height: 230px;
  border-radius: 20px;
}
.box1 .first .line{
  margin-left: 40px;
  width: 30px;
  border-top: 2px solid #677897;
}
.box1 .second .line{
  margin-left: 40px;
  width: 30px;
  border-top: 2px solid #FF8464;
}
.box1 h6{
  margin-top: 30px;
  margin-left: 40px;
  font-size: 20px;
  color: #566784;
  letter-spacing: 0.22px;
}
.second h6{
  color: #FF8464
}
.bg ul{
  margin-top: 10px;
  margin-left: 40px;
}
.bg ul li{
  font-size: 16px;
  letter-spacing: 0.18px;
  line-height: 22px;
  color: #566784
}
.second .bg ul li{
  color: #FF8464
}
.bg ul li span{
  font-weight: 600;
}
#content .box{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 110px;
}
.left{
  width: 612px;
}
.left .picture {
  width: 100%;
}
#content .left .picture{
  margin-top: 60px;
  height: 498px;
}
#content .left .picture img{
  width:100%;
  height: auto;
}
#content .box3 h4{
  font-size: 28px;
  line-height: 40px;
  margin-top: 80px;
  margin-bottom: 40px;
}
#content .box3 span{
  font-weight: 600;
}
#content .box3 p{
  width: 460px;
  font-size: 18px;
  color: #677897;
  text-align: justify;
  line-height: 30px;
  margin-bottom: 50px;
}
.box4{
  margin-top: 116px;
}
.box4 .img .devote{
  margin-top: 60px;
  display: flex;
}
.box4 .img .devote li{
  width: 280px;
  /*margin-right: 26px;*/
}
.upBox{
  width: 280px;
  height: 150px;
  background: #EAEFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upBox div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upBox img{
  width: 44px;
  height: 44px;
}
.upBox p{
  margin-top: 20px;
  font-size: 20px;
  line-height: 28px;
  color: #566784;
  letter-spacing: 0;
}
.downBox{
  height: 146px;
  border: 1px solid #EAEFFF;
  margin-bottom: 100px;
}
.downBox ul{
  display: flex;
  flex-direction: column;
  width: 224px;
  margin: 20px 0px 0px 28px;
}
.downBox ul li{
  display: flex;
  width: 224px;
}
.downBox ul li span{
  width: 10px;
  font-weight: 600;
  height: 26px;
  line-height: 26px;
}
.downBox ul li p{
  width: 214px;
  font-size: 16px;
  line-height: 26px;
  color: #677897;
  letter-spacing: 0;
  text-align: justify;
  word-wrap: break-word;
  word-break:normal;
}
.box2{
  height: 637px;
  display: flex;
  justify-content: space-between;
}
.right{
  width: 490px;
  /* height: 637px; */
}
.right h4{
  /* margin-left: 178px; */
  margin-top: 256px;
  font-size: 28px;
  color: #677897;
}
.right p{
  margin-top: 40px;
  width: 100%;
  font-size: 18px;
  line-height: 30px;
  color: #677897;
}
.right .text{
  width:100%;
  height: 1318px;
  position: relative;
}
.right img{
  position: absolute;
  top: 436px;
  right:6.9%;
}
.titleMargin{
  margin-top: 30px!important
}
/*.mouseoverBackgroung1{*/
  /*background: url('./images/点击态.png')!important;*/
  /*width: 42.83%!important;*/
  /*height: 100%!important;*/
  /*border-radius: 20px;*/
  /*background-size: 100% 100%;*/
/*}*/
/* #content .box1 .picture .first:hover{
  background: url('./images/点击态.png')!important;
  width: 42.83%!important;
  height: 230px!important;
  border-radius: 20px;
  background-size: 100% 100%;
} */
/* #content .box1 .picture .second:hover {
  background: url('./images/点击状态.png')!important;
  width: 42.83%!important;
  height: 230px!important;
  border-radius: 20px;
  background-size: 100% 100%;
} */
.paddingMargin{
  padding-top: 50px!important
}
@media screen and (max-width: 1440px){
  #content{
    width: 100%!important;
    padding: 0 8.3%!important;
  }
  .background{
    width: 42.5%;
  }
  .picture{
    /* height: auto; */
    margin-top: 50px!important;
  }
  .left{
    width: 51%!important;
  }
  .bg{
    height: auto;
    padding-top: 60px!important;
  }
  .box{
    width: 100%!important;
    margin-top: 100px!important;
  }
  .left h4{
    font-size: 30px!important;
  }
  .left h5{
    font-size: 16px!important;
  }
  .right{
    width: 41%;
  }
  .box3{
    width: 32%;
  }
  #content .box3 p{
    width: 100%;
    font-size: 18px;
    color: #677897;
    text-align: justify;
    line-height: 30px;
    margin-bottom: 50px;
    }
    .box4{
      width: 100%!important;
    }
    .paddingMargin{
      padding-top: 40px!important
    }
}
@media screen and (max-width: 1250px) {
  .right h4{
    font-size: 26px;
  }
  .right p{
    font-size: 16px;
  }
  #content{
    margin-top: 50px;
  }
  .box1 h4{
    font-size: 28px;
  }
  .box1 h5{
    margin-top: 8px;
    font-size: 17px;
  }
  .box1 .picture{
    margin-top: 40px!important;
  }
  #content .box1 .picture .first,
  #content .box1 .picture .second{
    height: 200px!important
  }
  #content .box1 .picture .first img,
  #content .box1 .picture .second img{
    height: 200px!important
  }
  #content .box1 .picture .first img:hover,
  #content .box1 .picture .second img:hover{
    height: 200px!important;
    transition: all 1s linear;
  }
  .bg{
    padding:40px 0!important
  }
  .paddingMargin{
    padding: 30px 0!important
  }
  .box1 .line{
    margin-left: 30px!important;
  }
  .box1 h6{
  margin-top: 20px!important;
  margin-left: 30px;
  font-size: 18px;
}
.bg ul{
  margin-top: 15px;
  margin-left: 30px;
}
.bg ul li{
  font-size: 14px;
  letter-spacing: 0.18px;
  line-height: 22px;
  color: #566784
}
  .box{
    margin-top: 80px!important;
  }
  .box2{
    height: 572px
  }
  .box2 img{
    width: 100%;
  }
  .left h4{
    font-size: 28px!important;
  }
  .left h5{
    margin-top:10px!important;
  }
  .right h4{
    margin-top: 100px!important;
  }
  .background{  /*原型规划的样式*/
    top: 1070px!important;
    right: 0px;
    z-index: -999;
  }
  .right img{
    top: 420px!important;
  }
  .box3 h4{
    margin:35px 0px!important;
    font-size: 26px!important;
  }
  .box3 p{
    margin:35px 0px!important;
    font-size: 16px!important;
  }
  .box4{
    margin-top: 60px!important;
  }
  .box4 h4{
    font-size: 26px!important;
  }
  .box4 h5{
    margin-top: 10px;
    font-size: 16px;
  }
  .box4 .img .devote{
    /* border: 1px solid black; */
    margin-top: 30px!important;
  }
  .downBox{
    margin-bottom: 10px!important;
  }
  .background{  /*原型规划的样式*/
  width: 54%;
}
}
@media screen and (max-width: 1150px) {
  .right img{
    top: 490px!important;
  }
}
@media screen and (max-width: 1000px) {
  .background{
    top: 950px!important;
  }
  .right img{
    top: 450px!important;
  }
  .left h4{
    font-size: 24px!important;
  }
  .left h5{
    font-size: 14px!important;
  }
  .box2{
    height: 500px
  }
  .box3 h4{
    margin: 20px 0!important
  }
  .box4 h4{
    font-size: 24px!important;
  }
  .box4 h5{
    font-size: 15px;
  }
    #content .box1 .picture .first img,
  #content .box1 .picture .second img{
    height: 180px!important
  }
  #content .box1 .picture .first img:hover,
  #content .box1 .picture .second img:hover{
    height: 180px!important
  }
    .bg{
    padding:20px 0!important
  }
  .paddingMargin{
    padding: 20px 0!important
  }
  .box1 .line{
    margin-left: 20px!important;
    background: #FF8464;
  }
  .box1 h6{
  margin-top: 20px!important;
  margin-left: 15px;
  font-size: 16px;
}
.bg ul{
  margin-top: 15px;
  margin-left: 15px;
}
.bg ul li{
  font-size: 12px;
  letter-spacing: 0.18px;
  line-height: 22px;
  color: #566784
}
}
@media screen and (max-width: 800px) {
  .box{
    margin-top: 20px!important
  }
  .box1 h4{
    font-size: 22px!important;
  }
  .box1 h5{
    font-size: 16px!important
  }
  .box2 h4{
    font-size: 22px!important;
  }
  .box3 h4{
    font-size: 22px!important
  }
  .background{
    top: 750px!important;
  }
  .box3 h4{
    margin-top: 50px!important;
  }
  .box3 p{
    margin-top: 0px!important;
    font-size: 15px!important;
  }
  .box4{
    margin-top: 0px!important;
  }
    #content .box1 .picture .first,
  #content .box1 .picture .second{
    height: 150px!important
  }
  #content .box1 .picture .first img,
  #content .box1 .picture .second img{
    height: 150px!important
  }
.box1 .line{
    margin-top: 12px!important;
    margin-left: 10px!important;
  }
  .paddingMargin{
    padding: 10px 0 0 10px!important;
  }
  .box1 h6{
  margin-top: 10px!important;
  margin-left: 10px;
  font-size: 14px;
}
.bg ul{
  margin-top: 12px;
  margin-left: 10px;
}
.bg ul li{
  font-size: 12px;
  letter-spacing: 0.18px;
  line-height: 22px;
  color: #566784
}
.downBox ul li span{
  width: 20px;
}
}
@media screen and (max-width: 661px) {
  .box1 .picture{
    flex-direction: column!important;
  }
  .box1 .picture .first,.box1 .picture .second{
    width: 100%!important;
    margin-bottom: 20px;
  }
  .box2{
    flex-direction: column;
    height: auto;
  }
  .left{
    width: 100%!important;
    height: auto!important;
  }
  .left .picture{
    margin-top: 1px!important;
    height: auto!important;
  }
  .right{
    width: 100%;
    height: auto!important;
  }
  .right .text{
    height: auto
  }
  .right h4{
    margin-top: 10px!important
  }
  .right p{
    margin-top: 10px!important
  }
  .background{
    width: 100%!important;
  }
  .box2 .right .text{
    height: auto!important;
  }
  .box2 .right img{
    top: 10px!important;
    position: relative;
  }
  .box3{
    width: 100%!important;
    margin-top: 35px!important;
  }
  .box3 h4{
    font-size: 22px!important;
    margin: 20px 10px 10px 0px!important;
  }
  .box3 p{
    margin: 10px 0!important
  }
  .box4{
    margin-top: 20px!important
  }
  .box h4{
    font-size: 22px!important;
  }
  .box4 .devote{
    justify-content: center!important;
  }
  .box4 .devote>li{
    margin-bottom: 25px!important;
  }
  .box4 .downBox ul li p{
    font-size: 14px!important;
  }
}
.flex-wrap-footer-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.fade-enter,.fade-leave-to{
  opacity:0;
}
.fade-enter-active,.fade-leave-active{
  transition:opacity 1.5s;
}
</style>

<script>
/* eslint-disable */
// @ is an alias to /src
import HomeFooter from "../components/footer.vue";
import Swiperr from "@/components/swiperr.vue";
import animated from "animate.css";
import wheel from "./images/banner.png";
import devoteImg1 from './images/1.png';
import devoteImg2 from './images/2.png';
import devoteImg3 from './images/3.png';
import devoteImg4 from './images/4.png';
import global_api_address from "./global.vue";
import Qs from "qs";

export default {
  name: "home",
  components: {
    HomeFooter,
    Swiperr
  },
  data() {
    return {
      api_address: global_api_address.api_address, //请求接口的地址
      //轮播图数据
      messageParent: [wheel],
      box11Arrs:['真实感受产品','方便沟通，言之有物'],
      box12Arrs:['展示明确需求','提高团队整体效率'],
      devoteArrs:[
        {
          img:devoteImg1,
          title:'助力新零售',
          content:["结合优秀硬件团队",'利用互联网优势','完成基于物联网技术的新零售体系建立或推广']
        },
        {
          img:devoteImg2,
          title:'政府信息化建设',
          content:['以精湛的互联网技术','推动政府信息化建设','提高行政效能']
        },
        {
          title:'传统互联网转型',
          img:devoteImg3,
          content:['深入了解传统行业','打破只做网络营销的传统思维','设计开发全新业务模式','依托传统产业原有资源']
        },
        {
          img:devoteImg4,
          title:'自由产品',
          content:['股票自动交易系统','汽车行业互联网监控系统']
        }
      ],
      activeFlag:false,
      activeTeamFlag:false,
      // saleArray: [],
      // saleArray2: [],
      // trainPicArry: [],
      // box12Arry: [],
      // box13Arry: [],
      // clientArry: [],
      api2: "api_get_picture",
      time: new Date().getTime() + ""
    };
  },
  //点击切换图片
  methods: {
    sortBy: function(attr, rev) {
      //第二个参数没有传递 默认升序排列
      if (rev == undefined) {
        rev = 1;
      } else {
        rev = rev ? 1 : -1;
      }

      return function(a, b) {
        a = a[attr];
        b = b[attr];
        if (a < b) {
          return rev * -1;
        }
        if (a > b) {
          return rev * 1;
        }
        return 0;
      };
    },
    getSwiperRequest: function() {
      let md5Str1 = this.$md5(this.api2 + this.time); //验证用的md5函数
      let sendParam = {
        timestamp: this.time,
        method: this.api2,
        sign: md5Str1
      };
      this.axios
        .post(this.api_address + "/api/api.php", Qs.stringify(sendParam))
        .then(res => {
          res.data.data.sort(this.sortBy("order", true));
          for (let i = 0; i < res.data.data.length; i++) {
            this.messageParent.push({
              src: this.api_address + "/" + res.data.data[i].url
            });
          }
        })
        .catch(error => {});
    },
    mouseOver(){
      this.activeFlag = true
    },
    mouseLeave(){
      this.activeFlag = false
    },
    mouseOverTeam(){
      this.activeTeamFlag = true
    },
    mouseLeaveTeam(){
      this.activeTeamFlag = false
    }
  }
  // mounted() {
    // this.getSwiperRequest();
    // console.log(this.messageParent)
  // }
};
</script>