<template>
  <div class="main">
      <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>

      <div class="charts">
          <div class="chartsItem">
              <p class="title">客群分析</p>
              <customer-first />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群分析</p>
              <customer-second />
              <analyse />
          </div>
      </div>
  </div>
</template>

<script>
import headerTop from "./components/headerTop.vue";
import customerFirst from "./components/guest/customerFirst.vue";
import customerSecond from "./components/guest/customerSecond.vue";
import analyse from "./components/analyse.vue";
export default {
    name: "guestPortrait",
    components:{analyse, headerTop,customerFirst,customerSecond},
    data() {
        return {
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            title:'客群画像',//页面标题
            bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
            bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
            time:'',//跳转携带的时间
            menu:{},//手机配置信息
        }
    },
    onLoad(option){
        //跳转的时候带上时间
        this.time = option.time
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo',systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100vw;
  min-height: 100vh;
  .charts{
    width: 100%;
    box-sizing: border-box;
    padding: 28px 16px 0;
    background: #fff;
    .chartsItem{
      .title{
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 24px;
      }
    }
  }
}
</style>