<template>
  <div class="marketing">
    <div class="marketing-title">
      <el-row class="top-left">
        <el-col :span="12">
          <span class="top-title">营销推送</span>
          <span class="top-tips">* 支持<a href="#">会员标签</a>
            体系下的精准消息推送</span>
        </el-col>
        <el-col :span="12" class="top-right">
          <span><i class="el-icon-question"></i>营销推送</span>
          <span><i class="el-icon-question"></i>营销推送</span>
          <span><i class="el-icon-question"></i>营销推送</span>
        </el-col>
      </el-row>
      <el-row></el-row>
      <el-row class="marketing-subtitle">
        <el-col :span="5" class="subtitle-img">
          <span><i class="el-icon-news iconimg"></i></span>
        </el-col>
        <el-col :span="18" class="subtitle-tips">
          <div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
          <div class="tips-wechat">
            <el-row>
              <el-col :span="12">
                <span>
                  <i class="el-icon-news"></i>
                </span>
                <span>微信触达域-公众号</span>
                <span>
                  <a href="#">
                    立即授权</a>
                </span>
              </el-col>
              <el-col :span="12">
                <span>
                  <i class="el-icon-message"></i>
                </span>
                <span>移动触达域-短信</span>
                <span>
                  <a href="#">
                    前往开通</a>
                </span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row class="marketing-button">
      <el-col :span="14" class="button-left">
        <div class="left-title">
          <div class="left-title-name">
            <span><i class="el-icon-news"></i></span>
            <span>微信触达域-公众号</span>
            <span>*</span>
            <a href="#">点击新建群发</a>
          </div>
          <div class="left-title-message">
            <span><i class="el-icon-success"></i></span>
            <span>已授权</span>
          </div>
        </div>
        <div class="left-icon">
          <div class="icon-left">
            <span class="icon-wechat">
              <i class="el-icon-picture-outline"></i>
            </span>
            <p class="icon-wechat-msg">图文素材消息</p>
          </div>
          <div class="icon-right">
            <span class="icon-wechat">
              <i class="el-icon-document"></i>
            </span>
            <p class="icon-wechat-msg">营销模板消息</p>
          </div>
        </div>
      </el-col>
      <el-col :span="10" class="button-right">
        <div class="left-title">
          <div class="left-title-name">
            <span><i class="el-icon-message"></i></span>
            <span>移动触达域-短信</span>
            <span>*</span>
            <a href="#">点击新建群发</a>
          </div>
          <div class="left-title-message">
            <span><i class="el-icon-success"></i></span>
            <span>未授权</span>
          </div>
        </div>
        <div class="right-marketing">
          <div>
            <span class="icon-wechat">
              <i class="el-icon-message"></i>
            </span>
            <p class="icon-wechat-msg">短信营销消息</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="marketing-white"></div>
      </el-col>
    </el-row>
    <marketing-tab class="marketing-tabs"></marketing-tab>
  </div>
</template>

<script>
import MarketingTab from 'components/Tab/MarketingTab'

export default {
  components: {
    MarketingTab
  }
}
</script>

<style lang="stylus" scoped>
.marketing
  .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
      .top-tips
        padding-left 20px
      .top-right
        span
          padding-right 20px
    .marketing-subtitle
      height 130px
      .subtitle-img
        .iconimg
          font-size 70px
          line-height 130px
          padding-left 70px
      .subtitle-tips
        padding-top 30px
        .tips-wechat
          padding 30px
  .marketing-button
    margin-top 10px
    background-color #fff
    height 182px
    .button-left, .button-right
      padding-left 10px
      .left-title
        height 50px
        line-height 50px
        .left-title-name
          float left
        .left-title-message
          float right
          padding-right 20px
      .left-icon
        height 140px
        .icon-left
          float left
          width 50%
        .icon-right, .icon-left
          padding 20px 0
          text-align center
          .icon-wechat
            font-size 40px
          .icon-wechat-msg
            font-size 14px
            padding-top 10px
    .button-right
      .right-marketing
        padding 20px 0
        text-align center
        .icon-wechat
          font-size 40px
        .icon-wechat-msg
          font-size 14px
          padding-top 10px
  .marketing-white
    background-color #fff
    height 27px
  .marketing-tabs
    position relative
    top -10px
</style>
