<template>
  <div class="page-rate">
    <co-header fixed title="Rate">
      <fallback slot="left"></fallback>
    </co-header>

    <section class="page-rate-container page-content-main co-wrapper">
      <dl class="main-list">
        <dt class="list-title"><span>基础</span></dt>
        <dd class="list-info">
          设置属性<b>size</b>控制星星大小。
        </dd>
        <dd class="list-example">
          <co-rate v-model="value1" :size='30'></co-rate>
        </dd>
        <dt class="list-title"><span>半星</span></dt>
        <dd class="list-info">
          设置属性<b>allow-half</b>可以选中半星。<br>
          设置属性<b>show-text</b>显示<b>slot</b>提示内容。
        </dd>
        <dd class="list-example">
          <co-rate v-model="value2" allow-half show-text></co-rate>
        </dd>
        <dt class="list-title"><span>只读</span></dt>
        <dd class="list-info">
          设置属性<b>disabled</b>开启只读模式。<br>
          提示内容通过<b>slot </b>自定义。
        </dd>
        <dd class="list-example">
          <co-rate v-model="value3" disabled show-text>
            <i style="color: orange">五星级酒店</i>
          </co-rate>
        </dd>
      </dl>
    </section>
  </div>
</template>

<script type="es6">
  export default {
    name: 'page-rate',
    data() {
      return {
        value1: 3,
        value2: 2.7,
        value3: 5
      };
    }
  };
</script>

<style lang="less">
  .page-rate {
    .list-title {
      background-image: linear-gradient(to bottom, #dddee1 100%, #dddee1 0);
      background-position: 0 center;
      -webkit-background-size: 100% 1px;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      span {
        font-size: 22px;
        line-height: 2;
        margin-left: .7em;
        padding: 0 10px;
        background-color: #efeff4;
      }
    }
    .list-info {
      line-height: 2;
      b {
        font-weight: bold;
        background-color: #eee;

        display: inline-block;
        line-height: 1.5;
        padding: 0 .5em;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        border: 1px solid #999;

      }
    }
    .list-info, .list-example {
      background-color: #fff;
      padding: 10px 20px;
    }
  }
</style>
