<template>
  <div class="c-introduce">
    <div class="introduce-title">产品优势</div>
    <ul class="introduce">
      <li class="introduce-warp">
        <img src="./introduce/i-1@2x.png">
        <div class="text">
          <div class="title">【多平台覆盖，一站式管理】</div>
          <div class="desc">多平台快速登录，一站式进行账号管理，素材收集，内容创作。</div>
          <ul class="nodes">
            <li class="node">对接各大主流媒体平台</li>
            <li class="node">多平台对接，批量分发</li>
          </ul>
        </div>
      </li>
      <li class="introduce-warp">
        <div class="text">
          <div class="title">【图形化效果统计】</div>
          <div class="desc">每日数据，个性追踪，深度挖掘，图形化统计结果让运营更直观。</div>
          <ul class="nodes">
            <li class="node">对接各大平台的数据结果</li>
            <li class="node">汇总输出所有平台的数据统计</li>
            <li class="node">分析内容在平台上的具体趋势</li>
          </ul>
        </div>
        <img src="./introduce/i-2@2x.png">
      </li>
      <li class="introduce-warp">
        <img src="./introduce/i-3@2x.png">
        <div class="text">
          <div class="title">【分级式权限管理】</div>
          <div class="desc">多账号、多权限设置，优化管理企业的自媒体矩阵。</div>
          <ul class="nodes">
            <li class="node">一对多账号管理，方便企业自媒体矩阵管理</li>
            <li class="node">账号权限管理，优化企业自媒体效果</li>
            <li class="node">批量授权，提升企业自媒体矩阵的管理效率</li>
          </ul>
        </div>
      </li>
      <li class="introduce-warp">
        <div class="text">
          <div class="title">【海量正版图片资源】</div>
          <div class="desc">海量素材，正版图片，即搜即用，满足对图片的个性需求。</div>
          <ul class="nodes">
            <li class="node">低价获取各行各业海量优质图片资源</li>
            <li class="node">关键词自动匹配图片，快速高效</li>
          </ul>
        </div>
        <img src="./introduce/i-4@2x.png">
      </li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.c-introduce
  background-color: #fff
  min-width: 1000px
  .introduce-title
    height: 90px
    text-align: center
    line-height: 90px
    color: #000
    font-size: 32px
    background-image: url("bg@2x.png")
    background-size: cover
    background-position: center
  .introduce
    .introduce-warp
      min-width: 1000px
      overflow: hidden
      padding: 65px 0
      text-align: center
      margin: 0 auto
      letter-spacing: -3px
      font-size: 0
      img
        width: 500px
        height: 300px
        display: inline-block
        vertical-align: middle
      .text
        display: inline-block
        vertical-align: middle
        text-align: left
        width: 400px
        padding: 0 96px 0 0
        letter-spacing: 0
        .title
          color: #333
          font-size: 28px
          margin-bottom: 30px
          margin-left: -14px
        .desc
          color: #666
          font-size: 22px
          margin-bottom: 20px
          line-height: 1.5
        .node
          color: #999
          font-size: 18px
          margin-bottom: 10px
          padding-left: 20px
          background-image: url("arrow.png")
          background-size: 7px 12px
          background-repeat: no-repeat
          background-position: 2px center
      &:nth-child(odd)
        background-color: #f3f5f8
        .text
          padding: 0 0 0 96px
</style>
