<template>
  <div id="index">
    <vue-open-header></vue-open-header>
    <div class="open-body border-box">
      <div class="open-body-wrap border-box">
        <div class="swiper-content">
          <div class="swiper-content-body">
            <el-carousel :interval="5000" arrow="never" height="480px">
              <el-carousel-item v-for="item in 4" :key="item">
                <img src="../../assets/index/banner.png" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="notice-content">
            <div class="notice-container">
              <div class="notice-inner">
                <div class="notice-box clearfix flex">
                  <div class="notice-tips"><i class="font_family icon-tongzhigonggao color-fff font-14"></i></div>
                  <ul class="clearfix flex">
                    <template v-for="(item, index) in noticeList">
                      <li class="notice-li clearfix" :key="index + 'notice'">
                        <a class="color-fff font-14" target="_blank" rel="noopener noreferrer" href="announcement.htm?id=1"
                          ><span>「{{ item.noticeDate }}」</span>{{ item.noticeTitle }}
                        </a>
                      </li>
                    </template>
                    <li class="more-notice">
                      <a class="color-fff font-14" target="_blank" rel="noopener noreferrer" href="/platform/announcement.htm">查看更多&gt;</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-content">
          <div class="home-content-service commont-width">
            <div class="homepage-title">
              <h2 class="open-service">开放业务</h2>
              <div class="common-border-line"></div>
            </div>
            <div class="home-content-body">
              <div class="open-service-list">
                <ul class="flex">
                  <template v-for="(item, index) in serviceList">
                    <li :key="index">
                      <img :src="item.serviceIcon" alt="" />
                      <h3>{{ item.serviceName }}</h3>
                      <p>{{ item.serviceContent }}</p>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
          </div>
          <div class="home-content-guide commont-width">
            <div class="homepage-title">
              <h2 class="access-guide">接入指南</h2>
              <div class="common-border-line"></div>
            </div>
            <div class="home-content-body">
              <div class="access-guide-item">
                <ul class="flex flex-space-between">
                  <li>
                    <img src="../../assets/index/banner03.png" alt="" />
                    <div class="inner-li">
                      <h3>平台服务商</h3>
                      <p>面向企业内部开发人员和定制服务商，自主开发内部应用，供企业内部使用，对接已有的后台系统。</p>
                      <div>
                        <el-button plain>立即入驻<i class="font_family  icon-jiantou color-000 p-l-8"></i></el-button>
                      </div>
                    </div>
                  </li>
                  <li class="m-l-40">
                    <img src="../../assets/index/banner04.png" alt="" />
                    <div class="inner-li">
                      <h3>企业开发者</h3>
                      <p>面向企业内部开发人员和定制服务商，自主开发内部应用，供企业内部使用，对接已有的后台系统。</p>
                      <div>
                        <el-button plain>立即入驻<i class="font_family icon-jiantou color-000 p-l-8"></i></el-button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <vue-open-footer></vue-open-footer>
      </div>
    </div>
  </div>
</template>
<script>
import vueOpenHeader from '@/components/vue-open-header.vue';
import vueOpenFooter from '@/components/vue-open-footer.vue';
/* import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error'; */
export default {
  name: 'index',
  data() {
    return {
      projectName: '', // 当前项目名
      noticeList: [
        {
          noticeId: '',
          noticeDate: '07-08',
          noticeTitle: '关于《小程序违规处理规则》等规则修订公告'
        },
        {
          noticeId: '',
          noticeDate: '07-08',
          noticeTitle: '关于《小程序违规处理规则》等规则修订公告'
        },
        {
          noticeId: '',
          noticeDate: '07-08',
          noticeTitle: '关于《小程序违规处理规则》等规则修订公告'
        }
      ],
      /* eslint-disable */
      serviceList: [
        {
          serviceId: '',
          serviceIcon: require('../../assets/index/service_01_icon.png'),
          serviceName: '商品管理',
          serviceContent: '接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付、微信收藏和微信支付、微信收藏和微信支付。'
        },
        {
          serviceId: '',
          serviceIcon: require('../../assets/index/service_02_icon.png'),
          serviceName: '门店导购管理',
          serviceContent: '接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付、微信收藏和微信支付、微信收藏和微信支付。'
        },
        {
          serviceId: '',
          serviceIcon: require('../../assets/index/service_03_icon.png'),
          serviceName: '会员管理',
          serviceContent: '接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付、微信收藏和微信支付、微信收藏和微信支付。'
        },
        {
          serviceId: '',
          serviceIcon: require('../../assets/index/service_04_icon.png'),
          serviceName: '营销管理',
          serviceContent: '接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付、微信收藏和微信支付、微信收藏和微信支付。'
        }
      ]
    };
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(route) {
      this.$router.push(route);
    },

    /**
     *  处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /*{
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },

    /**
     * 各路由返回 tabId
     */
    showTab(id) {
      let that = this;
      that.activeSelTab = id;
    },

    // 选择后返回tabCode，做各路由判断
    setSelectTab(item) {
      const that = this;
      let tabCode = item.tabCode;
      if (item.hasOwnProperty('children') && !!item.children.length) {
        tabCode = item.children[0].tabCode;
        if (item.children[0].hasOwnProperty('children') && !!item.children[0].hasOwnProperty('children').length) {
          tabCode = item.children[0].children[0].tabCode;
        }
      }
      that.$router.push({
        path: item.tabUrl,
        query: {
          tabCode: tabCode
        }
      });
    }
  },
  mounted() {
    const that = this;
    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 204 + 'px';
  },
  components: {
    vueOpenHeader,
    vueOpenFooter
  }
};
</script>
<style lang="less">
#index {
  position: relative;
  width: 100%;
  .open-body {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 58px;
    overflow: hidden;
    &-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      // 轮播
      .swiper-content {
        position: relative;
        width: 100%;
        height: 480px;
        .swiper-content-body {
          position: relative;
          z-index: 0;
        }
        .notice-content {
          position: absolute;
          width: 100%;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          .notice-container {
            .notice-inner {
              width: 1200px;
              height: 36px;
              line-height: 36px;
              margin: 0 auto;
              .notice-li {
                width: 234px;
                margin-right: 60px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #fff;
                font-size: 14px;
              }
              .more-notice {
                margin-left: 236px;
              }
            }
          }
        }
      }
      .home-content {
        width: 100%;
        .home-content-service {
          padding: 40px 0 48px 0;
          text-align: center;
          .open-service-list {

            li {
              width:25%;
              padding: 0 20px;
              text-align: center;
              img {
                width: 70px;
              }
              h3 {
                margin-top: 25px;
                font-size: 16px;
                color: #0A1633;
              }
              p {
                margin-top: 16px;
                font-size: 14px;
                color: #6B798E;
                line-height: 24px;
                white-space: pre-wrap;
              }
            }
          }
        }
        .home-content-guide {
          text-align: center;
          margin-bottom: 60px;
          .access-guide-item {
            li {
              width: 580px;
              height: 400px;
              background: #FFFFFF;
              cursor: pointer;
              box-shadow: 0px 2px 8px 0px rgba(193,205,241,0.42);
              img {
                display: inline-block;
                vertical-align: top;
                width: 100%;
              }
              .inner-li {
                height: 232px;
              }
              h3 {
                padding-top: 40px;
                font-size: 16px;
                color: #0A1633;
              }
              p {
                padding: 0 40px;
                margin-top: 16px;
                line-height: 24px;
                font-size: 14px;
                color: #6B798E;
                text-align: left;
              }
              &:hover {
                .inner-li {
                  border: 1px solid #4C70E8;
                  border-top: 0px;
                }
                .el-button {
                  border: 1px solid #4C70E8;
                  color:#4C70E8;
                  i {
                    color: #4C70E8;

                  }
                }
              }
              .el-button {
                margin-top: 38px;
                width: 150px;
                height: 38px;
                line-height: 38px;
                padding: 0;
                border: none;
                border-radius: 2px;
                &:hover {
                  border: 1px solid #4C70E8;
                  i {
                    color: #4C70E8;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.commont-width {
  width: 1200px;
  margin: 0 auto;
}
.homepage-title {
  h2 {
    font-size: 24px;
    color: #0a1633;
    font-weight: 700;
  }
  .common-border-line {
    width: 40px;
    height: 5px;
    border-radius: 6px;
    background: #4C70E8;
    margin: 15px auto 48px auto;
  }
}
/* 表格为空 */
.el-table .el-table__empty-block {
  height: 256px;
}

.el-table__empty-text {
  width: auto;
  margin-bottom: 80px;

  &::before {
    content: ' ';
    display: block;
    width: 60px;
    height: 60px;
    background: url(../../assets/no-data_icon.png) no-repeat center;
    margin: 0px auto 22px auto;
  }
}

.line-18 {
  line-height: 18px;
}
</style>
