<template>
  <div class="home">
    <cr-image
      class="home-activity"
      width=""
      height=""
      fit="cover"
      src="@/assets/images/home/activity@2x.png"
    />
    <div class="home-service">
      <div class="home-service-item">
        <svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
        <span class="Hs-item-text">智能风险评测</span>
      </div>
      <div class="home-service-item">
        <svg-icon icon-class="consult-service" class-name="Hs-item-svg" />
        <span class="Hs-item-text">1对1咨询服务</span>
      </div>
    </div>
    <div class="home-select">
      <p class="home-select-title">芒果保险精选推荐</p>
      <div class="home-select-desc">
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">全网精选</span>
        </div>
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">高性价比</span>
        </div>
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">理赔口碑好</span>
        </div>
      </div>
      <good-list :list="goodsList" class="home-select-goods"></good-list>
    </div>
    <div class="home-classroom">
      <p class="home-classroom-title">芒果小课堂</p>
      <div class="home-classroom-card">
        <p class="Hc-card-question">医保到底能保多少?</p>
        <p class="Hc-card-result">已有1.8万人认为有用</p>
        <div class="Hc-card-operation">
          <svg-icon class-name="Hcc-operation-svg" icon-class="useful" />
          <span class="Hcc-operation-text">有用</span>
        </div>
        <div class="Hc-card-operation">
          <svg-icon class-name="Hcc-operation-svg" icon-class="useless" />
          <span class="Hcc-operation-text">没用</span>
        </div>
        <cr-image
          class="Hc-card-image"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/home/teacher@2x.png"
        />
      </div>
      <div class="home-classroom-item">
        <div class="Hc-item-left">
          <p>保险公司公司会倒闭吗？</p>
          <p>芒果小课堂</p>
        </div>
        <cr-image
          class="Hc-item-right"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/home/teacher@2x.png"
        />
      </div>
      <div class="home-classroom-item">
        <div class="Hc-item-left">
          <p>科学投保要知道以下几大原则</p>
          <p>芒果小课堂</p>
        </div>
        <cr-image
          class="Hc-item-right"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/home/teacher@2x.png"
        />
      </div>
    </div>
    <div class="home-phone">
      <p>客服电话：XXXXXXXX</p>
      <p>服务时间：9:00-21:00</p>
    </div>
    <div class="home-logo">
      <svg-icon icon-class="logo" class-name="home-logo-svg" />
      <p class="home-logo-info">全天候保险代理股份有限公司</p>
      <p class="home-logo-info">京ICP备XXXXXXXX号</p>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import GoodList from "@/components/GoodList/index";
import good01 from "@/assets/images/goods/goods-01.png";
import good02 from "@/assets/images/goods/goods-02.png";
import good03 from "@/assets/images/goods/goods-03.png";
import good04 from "@/assets/images/goods/goods-04.png";
import Tabbar from "@/components/Tabbar";

const goodsList = [
  {
    id: 1,
    img: good01,
    title: "万家保·百万医疗险",
    sub: "产品优势",
    glory: "好评榜第1名",
    price: "0",
    unit: "",
    allow: true
  },
  {
    id: 2,
    img: good02,
    title: "万家保·重疾轻症险",
    sub: "100种重疾+40种轻症",
    glory: "",
    price: "3",
    unit: "首月",
    allow: true
  },
  {
    id: 3,
    img: good03,
    title: "万家保·综合意外险",
    sub: "产品优势",
    glory: "开车必备",
    price: "0",
    unit: "",
    allow: true
  },
  {
    id: 4,
    img: good04,
    title: "华贵大麦2020定期寿险",
    sub: "产品优势",
    glory: "",
    price: "0",
    unit: "",
    allow: true
  }
];

export default {
  name: "Home",
  components: {
    GoodList,
    Tabbar
  },
  data() {
    return {
      goodsList
    };
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
