<template>
  <table class="member-benefits" cellpadding="0" cellspacing="0">
    <!-- 基础功能 -->
    <tr>
      <td style="width:96px;writing-mode: vertical-lr;" class="title" rowspan="7">基础功能</td>
      <td style="width:279px;" class="title">功能特权</td>
      <td style="width:279px;" class="title bgcolor-f7f7f7">非会员</td>
      <td class="color1890ff title bgcolor-edf6ff">
        <span>会员</span>
        <i class="vip-icon" />
      </td>
    </tr>
    <tr>
      <td>机构授权认证</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <tr>
      <td>设备授权认证</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <tr>
      <td>医师资格认证</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <tr>
      <td>采美品牌背书</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <tr>
      <td>专属服务</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <tr>
      <td>免费升级迭代</td>
      <td class="color909399">90天免费体验</td>
      <td class="color1890ff">永久</td>
    </tr>
    <!-- 订制服务 -->
    <tr>
      <td rowspan="4" class="title" style="writing-mode: vertical-lr;">订制服务</td>
      <td>认证授权图片模板</td>
      <td class="color909399">—</td>
      <td class="color1890ff">订制要求与费用另议</td>
    </tr>
    <tr>
      <td>认证授权物料制作</td>
      <td class="color909399">—</td>
      <td class="color1890ff">订制要求与费用另议</td>
    </tr>
    <tr>
      <td>品牌资料库</td>
      <td class="color909399">—</td>
      <td class="color1890ff">订制要求与费用另议</td>
    </tr>
    <tr>
      <td>其他</td>
      <td class="color909399">—</td>
      <td class="color1890ff">订制要求与费用另议</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'MemberBenefits'
}
</script>

<style scoped lang="scss">
.member-benefits {
  margin: 0 auto;
  min-width: 1100px;
  // width: 100%;

  tr {
    &:first-child {
      td {
        border-top: 1px solid #dfe6ec;
      }
    }
    td {
      color: #404040;
      text-align: center;
      padding: 16px 0;
      font-size: 16px;
      border-left: 1px solid #dfe6ec;
      border-bottom: 1px solid #dfe6ec;
      &:last-child {
        border-right: 1px solid #dfe6ec;
      }
    }

    .title {
      font-size: 18px;
      color: #101010;
    }

    .color909399 {
      color: #909399;
    }

    .color1890ff {
      color: #1890ff;
    }

    .bgcolor-f7f7f7{
      background-color: #F7F7F7;
    }

    .bgcolor-edf6ff{
      background-color: #EDF6FF;
    }
  }
}
</style>
