<!--  -->
<template>
  <div class="optimize">
    <!-- 专家介绍 -->
    <div class="expert-box">
      <van-swipe indicator-color="white">
        <van-swipe-item v-for="(item, index) in expertImages" :key="index" @click="goExperts(item.id)">
          <img v-lazy="item.image" />
          <!-- <p>了解详情</p> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 养育话题 -->
    <div class="parenting">
      <div class="title">
        <p>养育话题</p>
        <a href="/">查看更多</a>
      </div>
      <ul>
        <li>
          <img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
          <p>拖延症</p>
          <span>L1入门 12分钟</span>
        </li>
        <li>
          <img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
          <p>沉迷网络</p>
          <span>L1入门 40分钟</span>
        </li>
        <li>
          <img src="@/assets/optimize/images/3_24.png" alt="不自信" />
          <p>不自信</p>
          <span>L1入门 25分钟</span>
        </li>
      </ul>
    </div>
    <!-- 训练营 -->
    <div class="train">
      <div class="title">
        <p>训练营</p>
      </div>
      <div class="main">
        <ul>
          <li @click="goTrainingcamp(1)">
            <div class="left">
              <p>情绪管理控制</p>
              <span>入门易学</span>
              <div>
                <h5>会员价 ¥998</h5>
                <s>¥1288</s>
              </div>
            </div>
            <img src="@/assets/today/images/2_42.png" />
          </li>
          <li @click="goTrainingcamp(2)">
            <div class="left">
              <p>情绪管理控制</p>
              <span>入门易学</span>
              <div>
                <h5>会员价 ¥998</h5>
                <s>¥1288</s>
              </div>
            </div>
            <img src="@/assets/today/images/2_42.png" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 心理咨询 -->
    <div class="psychology">
      <div class="title">
        <p>心理咨询</p>
      </div>
      <div class="select">
        <ul>
          <li>
            <img src="@/assets/optimize/icons/3_55.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_58.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_62.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_66.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_55.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_58.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_62.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_66.png" alt="" />
          </li>
        </ul>
      </div>
      <div class="main">
        <div class="top">
          <p>黛建松</p>
          <span>清华大学心理学教授</span>
          <img src="@/assets/optimize/images/3_48.png" alt="" />
        </div>
        <div class="bottom">
          <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
          <ul>
            <li>焦虑</li>
            <li>抑郁</li>
            <li>儿童心理</li>
            <li>亲子关系</li>
            <li>青春期心理</li>
            <li>家庭关系</li>
            <li>压力管理</li>
          </ul>
          <div>
            <h5>
              <img src="@/assets/optimize/icons/location.png" alt="" />
              <span>郴州市苏仙区</span>
            </h5>
            <p>¥2480</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import Vue from 'vue';
import TabBar from '@/components/TabBar';
import expertImage from '@/assets/optimize/images/3_08.png';
import { Swipe, SwipeItem, Lazyload } from 'vant';
Vue.use(Lazyload);
Vue.use(Lazyload, {
  lazyComponent: true
});
export default {
  components: {
    TabBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Lazyload.name]: Lazyload
  },
  data() {
    return {
      expertImages: [
        {
          id: 1,
          image: expertImage
        },
        {
          id: 2,
          image: expertImage
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    goExperts(id) {
      this.$router.push({
        name: 'experts',
        query: {
          id: id
        }
      });
    },
    goTrainingcamp(id) {
      this.$router.push({
        name: 'trainingcamp',
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss/index.scss';
</style>
