{"version":3,"sources":["webpack:///./src/views/brand/components/BrandProduct.vue?7192","webpack:///./src/assets/img/brand/fensijingying.png","webpack:///./src/assets/img/brand/pinpaizhiyou.png","webpack:///./src/views/brand/components/BrandProduct.vue?976e","webpack:///src/views/brand/components/BrandProduct.vue","webpack:///./src/views/brand/components/BrandProduct.vue?4ff2","webpack:///./src/views/brand/components/BrandProduct.vue?7b9f","webpack:///./src/assets/img/brand/pinpaijingying.png","webpack:///./src/assets/img/brand/neirongjingying.png"],"names":["module","exports","render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_l","item","index","key","id","class","active","activeIndex","on","$event","changeTab","_s","title","desc","$emit","attrs","img","_e","staticRenderFns","data","tabs","methods","component"],"mappings":"mIAAA,W,uBCAAA,EAAOC,QAAU,IAA0B,kC,8CCA3CD,EAAOC,QAAU,IAA0B,iC,yCCA3C,IAAIC,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,2BAA2B,CAACF,EAAG,MAAM,CAACE,YAAY,0CAA0C,CAACF,EAAG,KAAK,CAACE,YAAY,iBAAiB,CAACN,EAAIO,GAAG,WAAWH,EAAG,IAAI,CAACE,YAAY,4BAA4B,CAACN,EAAIO,GAAG,sBAAsBH,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,KAAK,CAACE,YAAY,QAAQN,EAAIQ,GAAIR,EAAQ,MAAE,SAASS,EAAKC,GAAO,OAAON,EAAG,KAAK,CAACO,IAAIF,EAAKG,GAAGC,MAAM,CAAEC,OAAQd,EAAIe,cAAgBL,GAAQM,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOjB,EAAIkB,UAAUR,MAAU,CAACN,EAAG,MAAM,CAACE,YAAY,YAAY,CAACN,EAAIO,GAAGP,EAAImB,GAAGV,EAAKW,eAAc,GAAGpB,EAAIQ,GAAIR,EAAQ,MAAE,SAASS,EAAKC,GAAO,MAAO,CAAEV,EAAIe,cAAgBL,EAAON,EAAG,MAAM,CAACO,IAAIF,EAAKG,GAAGN,YAAY,eAAe,CAACF,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,KAAK,CAACE,YAAY,iBAAiB,CAACN,EAAIO,GAAGP,EAAImB,GAAGV,EAAKW,UAAUhB,EAAG,IAAI,CAACE,YAAY,QAAQ,CAACN,EAAIO,GAAGP,EAAImB,GAAGV,EAAKY,SAASjB,EAAG,MAAM,CAACE,YAAY,SAASU,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOjB,EAAIsB,MAAM,eAAe,CAACtB,EAAIO,GAAG,mBAAmBH,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACmB,MAAM,CAAC,IAAMd,EAAKe,WAAWxB,EAAIyB,UAAS,QACznCC,EAAkB,G,oFCwCtB,GACEC,KADF,WAEI,MAAO,CACLZ,YAAa,EACba,KAAM,CACZ,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,gDACQ,IAAR,KAEA,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,0CACQ,IAAR,KAEA,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,8CACQ,IAAR,KAEA,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,mDACQ,IAAR,QAKEC,QAAS,CACPX,UADJ,SACA,GACMjB,KAAKc,YAAcL,KC3E2V,I,wBCQhXoB,EAAY,eACd,EACA/B,EACA2B,GACA,EACA,KACA,WACA,MAIa,aAAAI,E,8BCnBfjC,EAAOC,QAAU,IAA0B,mC,qBCA3CD,EAAOC,QAAU,IAA0B","file":"js/v-brand-components-BrandProduct.8f41e85b.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandProduct.vue?vue&type=style&index=0&id=35d122de&lang=scss&scoped=true&\"","module.exports = __webpack_public_path__ + \"img/fensijingying.3134874d.png\";","module.exports = __webpack_public_path__ + \"img/pinpaizhiyou.cf113ce0.png\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"brand-product-component\"},[_c('div',{staticClass:\"brand-section app-basic-layout-wrapper\"},[_c('h3',{staticClass:\"title font-30\"},[_vm._v(\"品牌号方案\")]),_c('p',{staticClass:\"subtitle font-color-desc\"},[_vm._v(\"互动营销新途径，激活潜在兴趣人群\")]),_c('div',{staticClass:\"body\"},[_c('ul',{staticClass:\"tabs\"},_vm._l((_vm.tabs),function(item,index){return _c('li',{key:item.id,class:{ active: _vm.activeIndex === index },on:{\"click\":function($event){return _vm.changeTab(index)}}},[_c('div',{staticClass:\"tab-item\"},[_vm._v(_vm._s(item.title))])])}),0),_vm._l((_vm.tabs),function(item,index){return [(_vm.activeIndex === index)?_c('div',{key:item.id,staticClass:\"tab-content\"},[_c('div',{staticClass:\"main-content\"},[_c('h3',{staticClass:\"content-title\"},[_vm._v(_vm._s(item.title))]),_c('p',{staticClass:\"desc\"},[_vm._v(_vm._s(item.desc))]),_c('div',{staticClass:\"button\",on:{\"click\":function($event){return _vm.$emit('register')}}},[_vm._v(\" 免费咨询，开始使用 \")])]),_c('div',{staticClass:\"image-wrapper\"},[_c('img',{attrs:{\"src\":item.img}})])]):_vm._e()]})],2)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"brand-product-component\">\n    <div class=\"brand-section app-basic-layout-wrapper\">\n      <h3 class=\"title font-30\">品牌号方案</h3>\n      <p class=\"subtitle font-color-desc\">互动营销新途径，激活潜在兴趣人群</p>\n      <div class=\"body\">\n        <ul class=\"tabs\">\n          <li\n            v-for=\"(item, index) in tabs\"\n            :key=\"item.id\"\n            :class=\"{ active: activeIndex === index }\"\n            @click=\"changeTab(index)\"\n          >\n            <div class=\"tab-item\">{{ item.title }}</div>\n          </li>\n        </ul>\n        <template v-for=\"(item, index) in tabs\">\n          <div v-if=\"activeIndex === index\" :key=\"item.id\" class=\"tab-content\">\n            <div class=\"main-content\">\n              <h3 class=\"content-title\">{{ item.title }}</h3>\n              <p class=\"desc\">{{ item.desc }}</p>\n              <div class=\"button\" @click=\"$emit('register')\">\n                免费咨询，开始使用\n              </div>\n            </div>\n            <div class=\"image-wrapper\">\n              <img :src=\"item.img\" />\n            </div>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport fangan1 from '@/assets/img/brand/fensijingying.png'\nimport fangan2 from '@/assets/img/brand/pinpaijingying.png'\nimport fangan3 from '@/assets/img/brand/neirongjingying.png'\nimport fangan4 from '@/assets/img/brand/pinpaizhiyou.png'\n\nexport default {\n  data() {\n    return {\n      activeIndex: 0,\n      tabs: [\n        {\n          id: 1,\n          title: '粉丝经营',\n          desc: '以\"任务+奖励\"的形式激励用户互动参与，粉丝高效互动，扩大粉丝流量，实现私域流量向公域转化',\n          img: fangan1\n        },\n        {\n          id: 2,\n          title: '品牌经营',\n          desc: '品牌号全新profile页，稳定入口展现品牌内容及产品，实现品牌资产沉淀和积累',\n          img: fangan2\n        },\n        {\n          id: 3,\n          title: '内容经营',\n          desc: '稳定的社交资产沉淀，内容可控，优质内容聚合，软性原生塑造影响力，实现公域流量向私域转化',\n          img: fangan3\n        },\n        {\n          id: 4,\n          title: '品牌挚友',\n          desc: '品牌与KOL之间强关联，投放挚友内容，释放品牌x明星信息收割粉丝，挚友公域流量向品牌私域流量转化',\n          img: fangan4\n        }\n      ]\n    }\n  },\n  methods: {\n    changeTab(index) {\n      this.activeIndex = index\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.body {\n  padding-top: 60px;\n  position: relative;\n  padding-left: 271px;\n  .tabs {\n    position: absolute;\n    left: 0;\n    top: 60px;\n    height: 177px;\n    border-left: 3px solid rgba(142, 144, 145, 0.25);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    .tab-item {\n      padding-left: 19px;\n      cursor: pointer;\n      height: 30px;\n      line-height: 30px;\n      font-size: 16px;\n      position: relative;\n    }\n    li {\n      &.active {\n        color: $text-color-copper;\n        .tab-item {\n          &:after {\n            content: '';\n            background-color: $text-color-copper;\n            position: absolute;\n            width: 3px;\n            height: 100%;\n            left: -3px;\n            top: 0;\n          }\n        }\n      }\n    }\n  }\n  .tab-content {\n    padding-right: 458px;\n    position: relative;\n    min-height: 525px;\n    .image-wrapper {\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 436px;\n      height: 613px;\n      overflow: hidden;\n      img {\n        width: 100%;\n        height: 100%;\n        float: left;\n        object-fit: cover;\n      }\n    }\n    .content-title {\n      font-size: 26px;\n      line-height: 32px;\n      margin-bottom: 52px;\n    }\n    .desc {\n      font-size: 18px;\n      margin-bottom: 104px;\n      line-height: 36px;\n    }\n    .button {\n      width: 208px;\n      height: 48px;\n      line-height: 48px;\n      font-size: 16px;\n      text-align: center;\n      color: #ffffff;\n      border-radius: 24px;\n      background-color: $base-color-1;\n      display: inline-block;\n      cursor: pointer;\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandProduct.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandProduct.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BrandProduct.vue?vue&type=template&id=35d122de&scoped=true&\"\nimport script from \"./BrandProduct.vue?vue&type=script&lang=js&\"\nexport * from \"./BrandProduct.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BrandProduct.vue?vue&type=style&index=0&id=35d122de&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"35d122de\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/pinpaijingying.405a6797.png\";","module.exports = __webpack_public_path__ + \"img/neirongjingying.d99f7a07.png\";"],"sourceRoot":""}