<template>
  <div>
    <div class="marketing-title">
      <el-row class="top-left">
        <el-col :span="13">
          <span class="top-title">营销推送</span>
          <span class="top-tips">
            <span class="star-red">*</span>
            支持
            <a href="#">会员标签</a>
            体系下的精准消息推送
          </span>
        </el-col>
        <el-col :span="11" class="top-right">
          <a
            style="color: #73879C;margin-right: 10px"
            target="_blank"
            href="http://help.bigaka.com/2017/08/31/%E6%80%8E%E6%A0%B7%E4%BD%BF%E7%94%A8%E5%BE%AE%E4%BF%A1%E6%A8%A1%E6%9D%BF%E6%B6%88%E6%81%AF%E8%90%A5%E9%94%80%EF%BC%9F/"
          >
            <i class="el-icon-question"></i>微信营销推送怎么玩
          </a>
          <a
            style="color: #73879C;margin-right: 10px"
            target="_blank"
            href="http://help.bigaka.com/2017/04/27/%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E4%BC%9A%E5%91%98%E6%A0%87%E7%AD%BE%E5%AF%B9%E4%BC%9A%E5%91%98%E7%B2%BE%E5%87%86%E6%8A%95%E6%94%BE%E5%BE%AE%E4%BF%A1%E6%8E%A8%E9%80%81/"
          >
            <i class="el-icon-question"></i>微信软文如何精准营销
          </a>
          <a
            style="color: #73879C"
            target="_blank"
            href="http://help.bigaka.com/2017/08/31/%E6%80%8E%E6%A0%B7%E4%BD%BF%E7%94%A8%E7%9F%AD%E4%BF%A1%E8%90%A5%E9%94%80%EF%BC%9F/"
          >
            <i class="el-icon-question"></i>短信营销怎么配置
          </a>
        </el-col>
      </el-row>
      <el-row></el-row>
      <el-row class="marketing-subtitle">
        <el-col :span="6" class="subtitle-img">
          <span>
            <img src="@/assets/images/avatar.png">
          </span>
        </el-col>
        <el-col :span="18" class="subtitle-tips">
          <div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
          <div class="tips-wechat">
            <el-row>
              <el-col :span="12" class="wechat-icon">
                <span>
                  <img src="@/assets/images/wechat.png">
                </span>
                <span>微信触达域-公众号</span>
                <span>
                  <a :href="this.authUrl">立即授权</a>
                </span>
              </el-col>
              <el-col :span="12" class="wechat-icon">
                <span>
                  <img src="@/assets/images/message.png">
                </span>
                <span>移动触达域-短信</span>
                <span>
                  <a :href="this.msgUrl">前往开通</a>
                </span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import config from "@/config";
export default {
  data() {
    return {
      authUrl: "",
      msgUrl: ""
    };
  },
  // created() {
  //   this.authUrl = ctx + "/back/wechat/auth";
  //   this.msgUrl = platformCtx + "/message/marketingSms/list.do";
  // }
};
</script>

<style lang='stylus' scoped>
.marketing-title {
  height: 177px;
  background-color: #fff;

  .top-left {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid gray;
    margin: 0 15px;

    .top-title {
      font-size: 20px;
      color: #73879C;
      text-align: left;
    }

    .top-tips {
      padding-left: 20px;
      color: rgba(115, 135, 156, 0.4);

      .top-star {
        color: #FF0000;
      }

      .top-tag {
        color: #0000FF;
      }
    }

    .top-right {
      span {
        padding-right: 20px;
        font-size: 14px;
        color: #496D92;
        text-align: left;

        i {
          margin-right: 3px;
        }
      }
    }
  }

  .marketing-subtitle {
    height: 130px;

    .subtitle-img {
      line-height: 130px;
      padding-left: 70px;
    }

    .subtitle-tips {
      padding-top: 30px;
      font-family: 'PingFangSC-Regular', 'PingFang SC';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #73879C;

      .tips-wechat {
        padding: 15px;

        .wechat-icon {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}
</style>
