{"version":3,"file":"account-group.js","sources":["../../../src/components/onboarding/baseHeader.vue","../../../src/components/onboarding/baseFrame.vue","../../../src/components/onboarding/statusBar.vue","../../../src/components/onboarding/footerBar.vue","../../../src/views/demo/account-group.vue"],"sourcesContent":["<template>\n  <div class=\"onboarding__header\">\n    <div class=\"onboarding__logo\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'baseHeader'\n}\n</script>\n\n<style scoped>\n.onboarding__header {\n  padding-top: 62px;\n}\n.onboarding__logo {\n  width: 300px;\n  height: 40px;\n  background: url(\"../../assets/logo.png\") center center / contain no-repeat;\n  background-size: 280px 28px;\n}\n</style>\n","<template>\n  <div class=\"base-frame\">\n    <base-header></base-header>\n    <div class=\"base-frame__main\" :class=\"{'has-footer':hasFooter}\">\n      <div class=\"base-frame__content\"  v-loading.lock=\"loading\">\n        <slot></slot>\n      </div>\n      <div class=\"base-frame__bg\">\n        <slot name=\"bg\"></slot>\n      </div>\n    </div>\n    <div class=\"base-frame__footer\" v-if=\"hasFooter\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport baseHeader from './baseHeader.vue';\nimport { computed } from 'vue';\nimport { useStore } from 'vuex';\n\nexport default {\n  name: 'baseFrame',\n  components: {\n    baseHeader,\n  },\n  props: {\n    hasFooter: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup() {\n    const store = useStore();\n    return {\n      loading: computed(() => store.state.loading)\n    }\n  }\n}\n</script>\n\n<style lang=\"less\" scoped>\n@header-height: 192px;\n@footer-height: 176px;\n\n.base-frame {\n  height: 100%;\n  padding-left: 128px;\n  background-color: #fff;\n  overflow: auto;\n\n  &__main {\n    position: relative;\n    height: calc(~\"100% - @{header-height}\");\n    margin-top: 90px;\n\n    &.has-footer {\n      //height: calc(~\"100% - @{header-height} - @{footer-height}\");\n      min-height: calc(~\"100% - @{header-height} - @{footer-height}\");\n    }\n\n    .base-frame__bg {\n      z-index: 0;\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      height: 100%;\n    }\n  }\n  &__content {\n    z-index: 1;\n    position: relative;\n    background: transparent;\n  }\n\n  &__footer {\n    z-index: 10;\n    position: fixed;\n    bottom: 10px;\n    left: 50%;\n    margin-top: 84px;\n    transform: translateX(-50%);\n  }\n}\n</style>\n","<template>\n<div class=\"status-bar\">\n  <span class=\"status-bar__label\">{{label}}</span>\n  <ul class=\"status-bar__list\" v-for=\"item in count\" :key=\"item\">\n    <li class=\"status-bar__item\" :class=\"{'is-active': item <= current}\"></li>\n  </ul>\n</div>\n</template>\n\n<script>\nexport default {\n  name: 'statusBar',\n  props: {\n    label: {\n      type: [String, Number],\n      required: true,\n    },\n    count: {\n      type: Number,\n      default: 3,\n      required: true,\n    },\n    current: {\n      type: Number,\n      default: -1,\n      required: true,\n    }\n  },\n  setup() {\n  }\n}\n</script>\n\n<style lang=\"less\" scoped>\n.status-bar {\n  display: flex;\n  align-items: center;\n  padding: 14px 26px;\n  background-color: #eceff1;\n  border-radius: 30px;\n\n  &__label {\n    height: 24px;\n    margin: 0 8px 0 0;\n    font-size: 15.8px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    white-space: nowrap;\n    letter-spacing: 0.15px;\n    text-align: center;\n    color: #6c6c6c;\n  }\n\n  &__list {\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n  &__item {\n    width: 24px;\n    height: 24px;\n    margin: 0 13px 0 8px;\n    //background-color: #0e3655;\n    border: solid 1px #0e3655;\n    border-radius: 50%;\n\n    &.is-active {\n      background-color: #0e3655;\n    }\n  }\n}\n\n</style>\n","<template>\n  <div class=\"footer-bar\">\n    <status-bar\n        class=\"footer-bar__item\"\n        v-for=\"(item, index) in status\"\n        :key=\"index\"\n        :label=\"labels[index]\"\n        :count=\"item.count\"\n        :current=\"item.current\">\n    </status-bar>\n  </div>\n</template>\n\n<script>\nimport statusBar from './statusBar.vue';\nexport default {\n  name: 'footerBar',\n  props: {\n    // 维护一个数组，分别对应三个步骤\n    status: {\n      type: Array,\n      default() {\n        return [\n          {\n            count: 0,\n            current: 0\n          },\n          {\n            count: 0,\n            current: 0\n          },\n          {\n            count: 0,\n            current: 0\n          },\n        ]\n      },\n      required: true\n    }\n  },\n  components: {\n    statusBar,\n  },\n  setup() {\n    const labels = [\n      'Personal Information',\n      'Group Information',\n      'Confirmation'\n    ];\n    return {\n      labels,\n    }\n  }\n}\n</script>\n\n<style lang=\"less\" scoped>\n.footer-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  //padding: 0 172px 0 44px;\n\n  &__item {\n    flex: 0 1 auto;\n    margin-right: 10px;\n  }\n}\n</style>\n","<template>\n  <base-frame :has-footer=\"true\" class=\"base-bg\">\n    <p class=\"step__question\">\n      Please confirm the following information about your account group:\n    </p>\n    <ul class=\"user-info\">\n      <li class=\"user-info__item\">\n        <label class=\"user-info__label\">Competency</label>\n        <span class=\"user-info__value\">{{userInfo.describe}}/10 </span>\n      </li>\n      <li class=\"user-info__item\">\n        <label class=\"user-info__label\">Primary role</label>\n        <span class=\"user-info__value\">{{userInfo.role}}</span>\n      </li>\n      <li class=\"user-info__item\">\n        <label class=\"user-info__label\">Analytical needs</label>\n        <span class=\"user-info__value\">{{userInfo.needs.join('')}}</span>\n      </li>\n      <li class=\"user-info__item\">\n        <label class=\"user-info__label\">Company name</label>\n        <span class=\"user-info__value\">{{userInfo.name}}</span>\n      </li>\n      <li class=\"user-info__item\">\n        <label class=\"user-info__label\">Company industry</label>\n        <span class=\"user-info__value\">{{userInfo.industry}}</span>\n      </li>\n<!--      <li class=\"user-info__item\">-->\n<!--        <label class=\"user-info__label\">Integrated platforms</label>-->\n<!--        <span class=\"user-info__value\">Google Analytics; <br />Google Adwords</span>-->\n<!--      </li>-->\n    </ul>\n\n    <div class=\"step__action\">\n      <el-button type=\"default\" round  size=\"medium\" @click=\"back\">\n        <span class=\"step__btn\">Back</span>\n      </el-button>\n      <el-button type=\"primary\" round size=\"medium\" @click=\"next\" :disabled=\"isSubmit\">\n        <span class=\"step__btn primary\">Create Account Group</span>\n      </el-button>\n    </div>\n    <template v-slot:footer>\n      <footer-bar\n          :status=\"[{count: 3, current:3},{count:7, current:7},{count:2, current:0}]\">\n      </footer-bar>\n    </template>\n  </base-frame>\n</template>\n\n<script>\nimport { reactive } from 'vue';\nimport { useRouter } from 'vue-router';\nimport baseFrame from '../../components/onboarding/baseFrame';\nimport footerBar from '../../components/onboarding/footerBar';\n\nexport default {\n  name: 'demo-account-group',\n  components: {\n    baseFrame,\n    footerBar,\n  },\n  setup() {\n    const router = useRouter();\n    const userInfo = reactive({\n      describe: 4,\n      role: 'Owner',\n      needs: ['Report Performances of Advertising Campaigns'],\n      name: 'dataslinger',\n      industry: 'Beauty & Cosmetics',\n    });\n\n    // to next\n    const next = () => {\n      router.push({\n        name: 'connect-platform',\n      });\n    }\n\n    // 返回\n    const back = () => {\n      router.push('/');\n    }\n\n    return {\n      userInfo,\n      next,\n      back,\n    }\n  },\n}\n</script>\n\n<style lang=\"less\" scoped>\n.base-bg {\n  background: #fff url(\"../../assets/onboarding/step2-7.png\") right 188px no-repeat;\n}\n.step__question {\n  width: 649px;\n  margin-bottom: 20px;\n  font-family: Montserrat;\n  font-size: 24px;\n  font-weight: 500;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  color: #0e3655;\n}\n\n.user-info {\n  &__item {\n    display: flex;\n    line-height: 24px;\n    margin-bottom: 16px;\n    align-content: center;\n  }\n\n  &__label {\n    display: inline-block;\n    width: 280px;\n    font-family: Montserrat;\n    font-size: 16px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: 0.15px;\n    color: rgba(0, 0, 0, 0.38);\n  }\n\n  &__value {\n    width: 300px;\n    font-family: Montserrat;\n    font-size: 16px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    //line-height: 1.52;\n    letter-spacing: 0.15px;\n    color: #0e3655;\n  }\n}\n\n.step__action {\n  margin-top: 48px;\n  padding-bottom: 100px;\n\n  .step__btn {\n    display: block;\n    min-width: 96px;\n    height: 16px;\n    font-size: 14px;\n    font-weight: 600;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: 1.16;\n    letter-spacing: 1.25px;\n    text-align: center;\n    color: #0e3655;\n\n    &.primary {\n      color: #ffffff;\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","name","_hoisted_1","class","_createElementVNode","_createElementBlock","_hoisted_3","components","baseHeader","props","hasFooter","type","Boolean","default","setup","store","useStore","loading","computed","state","_hoisted_2","key","_openBlock","_createVNode","_component_base_header","_normalizeClass","$props","_withDirectives","_renderSlot","_ctx","$slots","undefined","$setup","lock","_hoisted_4","_createCommentVNode","label","String","Number","required","count","current","_toDisplayString","_Fragment","_renderList","item","status","Array","statusBar","labels","index","_createBlock","_component_status_bar","baseFrame","footerBar","router","useRouter","userInfo","reactive","describe","role","needs","industry","next","push","back","_withScopeId","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_component_base_frame","footer","_component_footer_bar","_withCtx","join","_component_el_button","round","size","onClick","_","disabled","isSubmit"],"mappings":"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"}