<template>
  <div id="index">
    <vue-open-header />
    <div class="open-body border-box">
      <transition
        name="fade"
        mode="out-in">
        <router-view />
      </transition>
    </div>
    <vue-open-footer />
  </div>
</template>
<script>
import vueOpenHeader from '@/components/vue-open-header.vue';
import vueOpenFooter from '@/components/vue-open-footer.vue';
import { getThreeNotice } from '@/api/notice';
import errMsg from '@/assets/js/error';
export default {
  name: 'IndexPage',
  components: {
    vueOpenHeader,
    vueOpenFooter
  },
  data() {
    return {
      projectName: '', // 当前项目名
      noticeList: [
        /* {
          noticeId: '',
          effectiveTime : '07-08',
          title: '关于《小程序违规处理规则》等规则修订公告'
        } */
      ],
      /* 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: '接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付、微信收藏和微信支付、微信收藏和微信支付。'
        }
      ]
    };
  },
  mounted() {
    const that = this;
    that.getNoticeData();
  },
  methods: {
    /**
     * @description: 路由跳转
     * @param {String} route
     * @author: 无尘
     */
    changeRoute(route) {
      this.$router.push(route);
    },
    /**
     * @description: 处理路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /*{
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },
    /**
     * @description: 各路由返回 tabId
     * @param {String} id
     * @author: 无尘
     */
    showTab(id) {
      let that = this;
      that.activeSelTab = id;
    },
    /**
     * @description: 获取公告
     * @author: 无尘
     */
    getNoticeData() {
      const that = this;
      let para = {};
      getThreeNotice(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.noticeList= resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

  },

};
</script>
<style lang="less">
#index {
  position: relative;
  width: 100%;
  .open-body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 464px);
    margin: 58px 0 60px 0;
    // 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 {
            .clearfix:before, .clearfix:after {
              display: block;
              visibility: hidden;
              height: 0;
              content: "";
              clear: both;
            }
            .notice-inner {
              width: 1200px;
              height: 36px;
              line-height: 36px;
              margin: 0 auto;
              .notice-ul {
                width: 100%;
              }
              .notice-li {
                float: left;
                width: 234px;
                margin-right: 60px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #fff;
                font-size: 14px;
                a {
                  color: #fff;
                }
                &:hover {
                  color:rgba(76,112,232,0.8);
                  a {
                    color:rgba(76,112,232,0.8);
                    span {
                      color: #fff;
                    }
                    .notice-txt {
                      color:rgba(76,112,232,0.8);
                    }
                  }
                }
              }
              .more-notice {
                float: right;
                &:hover {
                  a {
                    color:rgba(76,112,232,0.8);
                  }
                }
              }
            }
          }
        }
      }
      .home-content {
        width: 100%;
        .home-service {
          width: 100%;
          background: #F9FAFF;
        }
        .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: 40px auto 60px auto;
          .access-guide-item {
            li {
              width: 580px;
              height: 400px;
              background: #FFFFFF;
              border-radius: 2.5px;
              cursor: pointer;
              box-shadow: 0px 2px 8px 0px rgba(193,205,241,0.42);
              transition: all 0.3s;
              img {
                display: inline-block;
                vertical-align: top;
                border-radius: 2.5px 2.5px 0 0;
                width: 100%;
              }
              .inner-li {
                height: 232px;
                border-radius: 0 0 2.5px 2.5px;
              }
              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 {
                -webkit-transform: translateY(-4px);
                -moz-transform: translateY(-4px);
                -ms-transform: translateY(-4px);
                -o-transform: translateY(-4px);
                transform: translateY(-4px);
                .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;
                font-size: 16px;
                color: #0A1633;
                span {
                  display: inline-block;
                  -webkit-transform: translateY(-1px);
                  -moz-transform: translateY(-1px);
                  transform: translateY(-1px);
                }
                &:hover {
                  color: #4C70E8;
                  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>
