<template functional>
  <div class="ai-test">
    <div class="ai-test-tip">
      <h5>不知道怎么买保险</h5>
      <small>试一试智能风险评测，推荐最适合你的保险</small>
    </div>
    <cr-row class="ai-test-cell" type="flex" align="center">
      <cr-col span="5" class="ai-test-cell-image">
        <cr-image width="60px" height="68px" src="@/assets/images/goods/ai-mongo.png" />
      </cr-col>
      <div class="ai-test-cell-title">
        <h5>智能<span>风险测评</span></h5>
        <small>AI小果：为您提供30s快速测评</small>
      </div>
      <div class="ai-test-cell-btn">
        <cr-button type="warning">开始测评</cr-button>
      </div>
    </cr-row>
  </div>
</template>

<script>
export default {
  name: "AiTestTip"
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";

.ai-test {
  padding: 20px 16px 25.5px;
  &-tip {
    text-align: center;
    .cell-title-mixin();
    margin-bottom: @padding-md;
  }
  &-cell {
    background-color: @white;
    border-radius: @border-radius-md;
    padding: 0 0 0 @padding-xs;
    height: 72px;
    &-image {
      align-self: flex-end;
      .cr-image {
        display: block;
        margin: 0 auto;
      }
    }
    &-title {
      padding: 8px 10px 0 5px;
      .cell-title-mixin();
      h5 {
        margin: 0;
      }
      span {
        color: @orange-dark;
        font-weight: bold;
      }
    }
    &-btn {
      width: 76px;
      .cr-button {
        font-size: @button-default-font-size !important;
        height: @button-default-height !important;
        line-height: @button-default-line-height !important;
        border-radius: @border-radius-sm !important;
      }
    }
  }
}
</style>
