<template>
  <div class="home">
    <nav class="navbar navbar-default navbar-fixed-top app" :class="{ 'scroll': scrolled}">
      <div class="container-fluid con">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            
          </button>
          <a class="navbar-brand" href="/">
            <div alt="Brand" class="logo"></div>
          </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="a">
              <a href="/">首页</a>
            </li>
            <li class="a">
              <a href="/case">案例</a>
            </li>
            <li class="a">
              <a href="/dynamic">动态</a>
            </li>
            <li class="a">
              <a href="/about">关于</a>
            </li>
            <li class="a">
              <a href="/contact">联系</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="aarow_box animated aarowMove">
      <div class="aarow" @click="arrow()"></div>
    </div>

    <div class="home-wheel">
      <Wheelplanting :direction="isMobilePhone ? '' : 'vertical'" style="z-index：60"></Wheelplanting>
    </div>

    <div id="pos" style="margin-top:-110px"></div>
    <div class="contanier" style="margin-top: 110px">
      <div class="row">
        <div class="col-md-12" style="padding:0;width: 100%;">
          <h2>多元化服务&nbsp;&nbsp; 一站式解决客户需求</h2>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12" style="padding:0;width: 100%;">
          <p class="p1">
            核心团队拥有八年以上营销策划及创业设计经验，
            <br v-if="isMobilePhone" />团队能力多元化，服务体系立体化。
            <br />我们懂得多，您就更省心!
          </p>
        </div>
      </div>

      <div class="row st">
        <div class="col-xs-6 col-md-3 sw">
          <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
          <div class>
            <h4>品牌服务</h4>
            <p class="text-left business-text">
              品牌咨询
              <br />品牌策划
              <br />CIS/VIS
              <br />logo设计
              <br />
            </p>
          </div>
        </div>

        <div class="col-xs-6 col-md-3 sw">
          <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
          <div class>
            <h4>营销与策划</h4>
            <p class="text-left business-text">
              营销创意
              <br />广告创意
              <br />活动策划与执行
            </p>
          </div>
        </div>
        <div class="col-xs-6 col-md-3 sw">
          <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
          <div class>
            <h4>创意设计</h4>
            <p class="text-left business-text">
              平面设计
              <small>(海报/展架/画册/包装...)</small>
              <br />数字媒体
              <small>(H5/短视频/小程序...)</small>
              <br />动画制作
              <br />视觉设计
              <small>(app/网站)</small>
              <br />空间设计
              <small>(美陈/展厅/店面/导视)</small>
              <br />视频包装
            </p>
          </div>
        </div>
        <div class="col-xs-6 col-md-3 sw">
          <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
          <div class>
            <h4>制作与传播</h4>
            <p class="text-left business-text">
              物料制作
              <br />传统媒介
              <br />网络制作
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="contanier home-case top-case">
      <div class="row home-case" style="padding:0;width: 100%;">
        <div class="col-xs-6 col-md-3 home-case" v-for="(item,index) in caselist" :key="index">
          <router-link :to="{ name: 'details', params: { id: item.id }}">
            <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
              <div class="casetitle">
                <div style="width: 100%">
                  <hr>
                  <p>
                    {{item.caseTitle}}
                  </p>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <router-link class="btn btn-default btn-lg" :to="{ name: 'case' }">更多案例</router-link>

    <div></div>

    <div class="contanier">
      <div class="row" style="padding:0;width: 100%;">
        <div class="col-md-12" style="padding:0;width: 100%;">
          <h1>以品质答谢信任</h1>
        </div>
        <div class="col-md-12" style="padding:0;width: 100%; color:#595757">
          <p>
            至始至终将服务放到首位！
            <br class="br-logotop" />用更好的创意，助力客户创造品牌价值
          </p>
        </div>

        <div class="row st">
          <!-- <div v></div> -->
          <div class="col-md-2 col-xs-4" v-for="(item,index) in blogs" :key="index+'img'">
            <!-- <img :src="item.logoImg" alt class="ph-logo" /> -->
            <div class="ph-logo" :style="{background: `url(${item.logoImg})`}"></div>
          </div>
        </div>

        <div class="contanier st top-news">
          <div class="row">
            <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
              <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
                <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"><h3 class="text-left" style>{{item.caseTitle}}</h3></div>
                
              </router-link>
            </div>
            <!-- item.caseCoverImg -->
          </div>
        </div>
      </div>
    </div>
    <router-link class="btn btn-default btn-lg" role="button" :to="{ name: 'dynamic' }">更多动态</router-link>
  </div>
</template>

<script>


import { scrollIntoView } from 'scroll-js'
import Wheelplanting from "@/components/Wheelplanting.vue";
// import Business from "@/components/Business.vue";

import request from '../../utils/request'
import apis from '../config/api';
import { isMobilePhone } from '../../utils'


export default {
  name: "home",
  data () {
    return {
      scrolled: false,
      // rescrolled: false,
      isMobilePhone,
      show: true,
      data: '',
      blogs: {},
      phoneCols: 3,
      deskCols: 6,
      caselist: [],
      dynamiclist: [],
    };
  },
  computed: {

  },
  components: {
    Wheelplanting,
    // Wheelplantings,
    // Business,
  },
  mounted () {
    window.addEventListener('scroll', () => {
      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 300
      
    })

    // window.addEventListener('scrolll', () => {
    //   this.rescrolled = (document.documentElement.scrollTop || document.body.scrollTop) < 300
      
    // })

    


  },
 
  methods: {
    arrow () {

      scrollIntoView(document.querySelector('#pos'), document.body, { behavior: 'smooth' })
    },

  },

  created () {

    //合作伙伴


    // axios.get('http://localhost:8080/pc/partner/list/?pageNum=1&pageSize=18')
    request({
      ...apis.partner.list,
      params: { pageNum: 1, pageSize: 18 }
    })
      .then(res => {

        this.blogs = res.records;


      })

    // axios.get('http://localhost:8080/pc/case/case/list/?pageNum=1&pageSize=8')

    request({
      ...apis.case.list,
      urlData: { type: 'case' },
      params: { pageSize: 100 }
    }).then(con => {
      // console.log(con,"124")
      this.caselist = (con.records || []).filter(x => x.topping === 1);
      // window.console.log(this.caselist, "543");
    })

    request({
      ...apis.case.list,
      urlData: { type: 'movement' },
      params: { pageNum: 1, pageSize: 4, topping: 1 }
    }).then(con => {
      // console.log(con, "124")
      this.dynamiclist = con.records;
      // window.console.log(this.dynamiclist, "543");
    })
  }
};
</script>

<style scoped>
@media (min-width: 768px) and (max-width: 992px) {

  .home {
  margin-top: 116px;
  margin-bottom: -116px;
  padding-bottom: 116px; 
  
}
  .con {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .logo{
    margin-top: 0 !important;
  }
  .nav li {margin-left: 0 !important;}
  .a {
    font-size: 2.4rem !important;
    margin-top: 0.5rem !important;
    color: #000;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

@media (max-width: 992px) {
  .business-text {
    display: none;
  }
  h2 {
    font-family: Microsoft Yahei Light;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
  }
  h3 {
    font-size: 2.4rem;
    padding: 0px;
    width: 100%;
    height: 2.4rem;

    background-color: black;
    color: #fff;
    margin: 0;
  }
  .p1 {
    padding-bottom: 10px !important;
  }
  h4 {
    font-family: Microsoft Yahei Light;
    font-size: 1.6rem;
    padding: 5px;
    background-color: #e03723;
    color: #fff;
    margin: 0;
    height: 30px;
    letter-spacing: 6px;
  }
  .st {
    margin-bottom: 20px !important;
    padding: 0 1% !important;
  }
  .sw {
    padding: 2% !important;
  }
  .ph-logo {
    width: 100%;
    /* padding-bottom: 37px; */
    /* height: 100%; */
    height: 0;
    padding-bottom: 45.8%;
    background-size: 100% 100% !important;
    margin: 3px auto;
  }
  .top-news {
    margin-top: 30px;
  }
  .top-case {
    margin-top: 40px;
    padding: 0;
    padding-bottom: 30px !important;
    border: none;
  }
  .aarow_box {
    display: none;
  }
  .aarow {
    display: none;
  }
  .home-case {
    padding: 0;
    margin: 0;
    border: none;
  }

  p {
    padding: 0 0 20px 0;
    font-size: 1.2rem;
    color: #595757;
  }
  .btn {
    font-size: 1.2rem;
    margin-top: 0px;
    width: 140px;

    border-radius: 0px;
    color: #000;
    background-color: #fff;
    border: 1px solid #aaaaaa;
  }
  h1 {
    margin-top: 30px;

    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.3rem;
    color: #000;
  }
  .dynbtn {
    margin-top: 0px !important;
  }
}

@media (min-width: 992px) {
  h1 {
    font-size: 4.8rem;
    margin: 0;
    padding-top: 85px;
    padding-bottom: 10px;
    color: #000;
  }
  .btn {
    font-size: 24px;
    margin-top: 41px;
    padding: 12px 50px;
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    border: 1px solid #aaaaaa;
  }
  .btn:hover {
    color: #e03723;
    border: 1px solid #e03723;
  }

  p {
    padding: 18px 5px 0 5px;
    font-size: 2.4rem;
    color: #595757;
  }
  h2 {
    font-family: Microsoft Yahei Light;
    font-size: 4.8rem;
    margin-top: 86px;
    color: #000;
  }
  h3 {
    font-size: 2.4rem;
    padding: 30px;
    height: 86px;

    background-color: black;
    color: #fff;
    margin: 0;
  }
  h4 {
    font-family: Microsoft Yahei Light;
    font-size: 2.4rem;
    padding: 10px;
    background-color: #e03723;
    color: #fff;
    margin: 0;
    height: 43px;
    letter-spacing: 3px;
  }
  .sw {
    padding: 33px;
  }

  .st {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0;
  }
  .st .sw p {
    line-height: 1.6em;
    font-size: 2.2rem;
    padding-bottom: 0;
  }
  .ph-logo {
    width: 100%;
    /* padding-bottom: 37px; */
    /* height: 100%; */
    height: 0;
    padding-bottom: 45.8%;
    background-size: 100% 100% !important;
    margin: 18px;
  }
  .home-case {
    padding: 0;
    margin: 0;
    border: none;
  }

  .top-news {
    margin-top: 110px;
  }

  .aarow_box {
    width: 26px;
    height: 26px;
    margin: 0 auto;
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    display: block;
    cursor: pointer;
    z-index: 99;
  }
  .aarow {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }

  .animated {
    animation: animated 4s ease infinite;
  }
  @keyframes animated {
    0%,
    38%,
    70%,
    80%,
    100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(20px);
    }
    50% {
      transform: translateY(20px);
    }
  }
}
.row {
  margin: 0;
}

/* .home-business {
  widows: 1300px;
  height: 600px;
} */

.main {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
  justify-content: center;
}

.st4 {
  width: 100%;

  padding-bottom: 100%;
  background-size: 100% 100% !important;
  position: relative;

  margin: 0;
}
.st4 .casetitle {
  display: none;
}

.st4:hover .casetitle {
  position: absolute;
  width: 100%;
  height: 100%;
  float: left;
  padding: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  display: -webkit-flex;
  display: flex;

  text-align: center;
}
.st4 .casetitle p {
  text-align: center;
  display: block;
  color: #fff;
  width: 100%;
}
.home-news {
  padding: 0 6px;
  margin-bottom: 12px;
}

.home-dynamic {
  /* position: absolute;
  width: 100%;
  height: 100%;
  float: left;
  padding: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  display: -webkit-flex;
  display: flex;
  bottom: 0;
  width: 100%; 
      position: absolute;
    bottom: 0;
  
    width: calc(100% - 12px);
    */

  height: 0;
  padding-bottom: 60%;
  background-size: 100% 100% !important;
}
h3{
      position: absolute;
   
    width: calc(100% - 12px);
 bottom: 0;
  color: #fff;
 
  background: rgba(0, 0, 0, 0.8);
}

</style>


<style lang="less" scoped>
.routelink{
  text-decoration: none;
}



.casetitle {
  hr {
    margin-bottom: 0px;
    width: 50px;
    border: 2px solid red;
  }
}


@media (max-width: 992px) {
  .navbar {
    display: none;
  }

  .st {
    padding: 0 20px;

    .sw {
      padding: 20px;
    }
  }
}
@media (min-width: 992px) {
  .br-logotop {
    display: none;
  }
  .navbar {
    height: 116px;
    z-index: 70;
    padding: 30px 0;
    background-color: transparent;
    border: none;
    margin: 0;
    .navbar-brand {
      padding: 0;

      img {
        height: 100%;
      }
    }

    .nav {
      font-size: 2.6rem;
      li {
        margin-left: 2vw;
        a {
          color: #fff;

     padding-left: 5px;
    padding-right: 5px;
    margin: 0 10px;
          &:hover {
            border-bottom: 3px solid #fff;
          }
        }
      }
    }

    .logo {
      width: 300px;
      height: 60px;
      background: url("../assets/logo.png");
    }

    &.scroll {
      transition: all 0.5s;
      background: #fff;

      .nav {
        li {
          a {
            color: #000;

    padding-left: 5px;
    padding-right: 5px;
    margin: 0 10px;

            &:hover {
              border-bottom: 3px solid #000;
            }
          }
        }
      }

      .logo {
        background: url("../assets/logo1.png");
      }
    }

    //  &.scrolll {
    //   transition: all 0.5s;
    //   background-color: transparent;
    //   .nav {
    //     li {
    //       a {
    //         color: #fff;

    //         &:hover {
    //           border-bottom: 3px solid #fff;
    //         }
    //       }
    //     }
    //   }

    //   .logo {
    //     background: url("../assets/logo.png");
    //   }
    // }
  }
}
</style>
