<template>
  <div>
    <el-row class="marketing-button" style="display:flex;">
      <el-col :span="14" class="button-left">
        <div class="left-title button-left" style="flex:2">
          <div class="left-title-name fl">
            <span>
              <img src="./../../../assets/images/wechat.png">
            </span>
            <span class="title">微信触达域-公众号</span>
            <span class="star-red">*</span>
            <a href="#" class="gray">点击新建群发</a>
          </div>
          <div class="left-title-message fr">
            <span>
              <img src="./../../../assets/images/auth.png">
            </span>
          </div>
        </div>
        <div class="left-icon">
          <div class="icon-left fl">
            <span class="icon-wechat" @click="handleAddMaterial">
              <img src="./../../../assets/images/picture.png">
            </span>
            <p class="title-center icon-wechat-msg">图文素材消息</p>
          </div>
          <div class="icon-right">
            <span class="icon-wechat">
              <img src="./../../../assets/images/temp.png" @click="handleAddTemp">
            </span>
            <p class="icon-wechat-msg title-center">营销模板消息</p>
          </div>
        </div>
      </el-col>
      <el-col :span="10" class="button-right">
        <div class="left-title button-right" style="flex:1">
          <div class="left-title-name fl">
            <span>
              <img src="./../../../assets/images/message.png">
            </span>
            <span class="title">移动触达域-短信</span>
            <span class="star-red">*</span>
            <a href="#" class="gray">点击新建群发</a>
          </div>
          <div class="left-title-message fr">
            <span>
              <img src="./../../../assets/images/unauth.png">
            </span>
          </div>
        </div>
        <div class="right-marketing">
          <div>
            <span class="icon-wechat">
              <img src="./../../../assets/images/message.png" @click="handleAddMessage">
            </span>
            <p class="icon-wechat-msg title-center">短信营销消息</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="marketing-white"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  components: {},
  computed: {},
  mounted () {},
  methods: {
    handleAddMaterial () {
      this.$router.push('addmarketing')
    },
    handleAddTemp () {
      console.log('handleAddTemp')
    },
    handleAddMessage () {
      console.log('handleAddMessage')
    }
  }
}
</script>
<style lang='stylus' scoped>
.marketing-button
  margin 8px 0
  height 182px
  .button-left, .button-right
    padding-left 5px
    background-color #fff
    height 180px
    .left-title
      height 50px
      line-height 50px
      .left-title-name
        img
          width 30px
          height 30px
    .left-icon
      height 140px
      .icon-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
    margin-left 10px
    .right-marketing
      padding 20px 0
      text-align center
      img
        width 64px
        height 64px
      .icon-wechat
        font-size 40px
      .icon-wechat-msg
        font-size 14px
        padding-top 10px
.marketing-white
  background-color #fff
  height 27px
</style>
