{"version":3,"sources":["webpack:///./src/assets/img/topfans/neirongjiare.gif","webpack:///./src/assets/img/topfans/bangshangtoutiao.gif","webpack:///./src/assets/img/topfans/yingxiaotuiguang.gif","webpack:///./src/views/topfans/components/TopfansToufang.vue?42d6","webpack:///src/views/topfans/components/TopfansToufang.vue","webpack:///./src/views/topfans/components/TopfansToufang.vue?20b2","webpack:///./src/views/topfans/components/TopfansToufang.vue?ee4c","webpack:///./src/views/topfans/components/TopfansToufang.vue?36ce"],"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","attrs","img","_e","staticRenderFns","data","tabs","methods","component"],"mappings":"0HAAAA,EAAOC,QAAU,IAA0B,iC,qBCA3CD,EAAOC,QAAU,IAA0B,qC,uBCA3CD,EAAOC,QAAU,IAA0B,qC,oECA3C,IAAIC,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,6BAA6B,CAACF,EAAG,MAAM,CAACE,YAAY,4CAA4C,CAACF,EAAG,KAAK,CAACE,YAAY,iBAAiB,CAACN,EAAIO,GAAG,UAAUH,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,IAAI,CAACE,YAAY,SAASgB,MAAM,CAAC,KAAO,iCAAiC,OAAS,WAAW,CAACtB,EAAIO,GAAG,mBAAmBH,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACkB,MAAM,CAAC,IAAMb,EAAKc,WAAWvB,EAAIwB,UAAS,QAChoCC,EAAkB,G,+DC2CtB,GACEC,KADF,WAEI,MAAO,CACLX,YAAa,EACbY,KAAM,CACZ,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,iDACQ,IAAR,KAEA,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,2DACQ,IAAR,KAEA,CACQ,GAAR,EACQ,MAAR,OACQ,KAAR,iCACQ,IAAR,QAKEC,QAAS,CACPV,UADJ,SACA,GACMjB,KAAKc,YAAcL,KCxE6V,I,wBCQlXmB,EAAY,eACd,EACA9B,EACA0B,GACA,EACA,KACA,WACA,MAIa,aAAAI,E,2CCnBf","file":"js/v-topfans-components-TopfansToufang.55d42eee.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/neirongjiare.0c4cc69e.gif\";","module.exports = __webpack_public_path__ + \"img/bangshangtoutiao.7095809e.gif\";","module.exports = __webpack_public_path__ + \"img/yingxiaotuiguang.952b5836.gif\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"topfans-toufang-component\"},[_c('div',{staticClass:\"topfans-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('a',{staticClass:\"button\",attrs:{\"href\":\"https://weibo.com/u/3587960280\",\"target\":\"_blank\"}},[_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=\"topfans-toufang-component\">\n    <div class=\"topfans-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              <a\n                href=\"https://weibo.com/u/3587960280\"\n                class=\"button\"\n                target=\"_blank\"\n              >\n                免费咨询，开始使用\n              </a>\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 screen1 from '@/assets/img/topfans/yingxiaotuiguang.gif'\nimport screen2 from '@/assets/img/topfans/neirongjiare.gif'\nimport screen3 from '@/assets/img/topfans/bangshangtoutiao.gif'\n\nexport default {\n  data() {\n    return {\n      activeIndex: 0,\n      tabs: [\n        {\n          id: 1,\n          title: '营销推广',\n          desc: '转化变现一步到位，可投放营销性质博文如：店铺产品上新宣传、转发抽奖等，加速提升转化变现效率；',\n          img: screen1\n        },\n        {\n          id: 2,\n          title: '内容加热',\n          desc: '人人都有机会撬动百万流量上【热门】，博文内容要求：无营销性质博文，如观点表达、日常生活分享、专业领域知识分享等；',\n          img: screen2\n        },\n        {\n          id: 3,\n          title: '帮上头条',\n          desc: '快速提升关注，拥有海量粉丝，适用场景：明星大V背书及品牌宣传',\n          img: screen3\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-primary;\n        .tab-item {\n          &:after {\n            content: '';\n            background-color: $text-color-primary;\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      bottom: -88px;\n      width: 436px;\n      height: 655px;\n      overflow: hidden;\n      box-sizing: border-box;\n      background: url('~@/assets/img/topfans/phone_bg.png') no-repeat top\n        center/100% 100%;\n      padding: 120px 70.24px 0 76.97px;\n      img {\n        width: 100%;\n        height: 100%;\n        float: left;\n        object-fit: cover;\n        border-radius: 4.8px;\n        border: 1px solid #e3e5e9;\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: $danger-color;\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!./TopfansToufang.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!./TopfansToufang.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TopfansToufang.vue?vue&type=template&id=7736bcf1&scoped=true&\"\nimport script from \"./TopfansToufang.vue?vue&type=script&lang=js&\"\nexport * from \"./TopfansToufang.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TopfansToufang.vue?vue&type=style&index=0&id=7736bcf1&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  \"7736bcf1\",\n  null\n  \n)\n\nexport default component.exports","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!./TopfansToufang.vue?vue&type=style&index=0&id=7736bcf1&lang=scss&scoped=true&\""],"sourceRoot":""}