<template>
  <view class="content">
    <!-- 轮播图 -->
    <view class="uni-padding-wrap">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            indicator-active-color="#0251FF"
          >
            <swiper-item>
              <view class="swiper-item">
                <img
                  class="swiper-item-pic"
                  src="../../static/swiper_pic.png"
                />
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <img
                  class="swiper-item-pic"
                  src="../../static/swiper_pic1.png"
                />
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">C</view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>

    <!-- 孩子列表 -->
    <children-list :items="items" :current="current" />

    <!-- 精选推荐 -->
    <view class="title">
      <view>
        <img style="height:32rpx;width: 8rpx;vertical-align: middle;" src="@/static/title-pic.png" />
		<text class="title-text" >精选推荐</text>
        <img style="height:32rpx;width: 20rpx; float:right;vertical-align: middle;" src="@/static/title-arrow-icon.png" />
		<!-- 两个img加了width和vertical-align 将文字与图片对齐-->
      </view>
	  <!-- img设置百分比，微信小程序的话，如果父级没有设置高度的话，百分比没有用 -->
      <view class="card recommend-card">
        <view class="cart-item-content">
          <img class="card-item-pic" src="@/static/logo.png"/>
          <view class="recommend-text-view">
            <view>
              <text class="r-text text-title">花样跳绳（B）</text> 
			  <text class="r-text text-cost">$800/人</text>
            </view>
            <text class="text-info">掌握跳绳技术，通过跳绳技术的学习...</text>
            <text style="font-size: 20rpx;font-weight: 400;color: #A3ABBF;">每周星期三17:10~18:10</text>
            <view class="recommend-text-bottom">
              <view class="teacher-avater-div"><img style="width:30rpx; height:30rpx;" src="../../static/avater.png" /></view>
              <text class="teacher-name-text">乐小小</text>
              <button type="primary" class="sign-up-btn">立即报名</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最新教育资讯 -->
    <view class="title">
      <view>
        <img style="height:32rpx;width: 8rpx;vertical-align: middle;" src="@/static/title-pic.png" />
		<text class="title-text">最新教育资讯</text>
        <img style="height:32rpx; float:right;width: 20rpx;vertical-align: middle;" src="@/static/title-arrow-icon.png" />
		<!-- 两个img加了width和vertical-align 将文字与图片对齐-->
	  </view>
      <view class="card news-card">
        <navigator url="/pages/index/news-detial" open-type="navigate" hover-class="navigator-hover">
            <view class="cart-item-content">
          <view class="news-text-view">
            <text class="text-title news-text-title">430教育到底有哪些好处fdfsd？</text>
            <br/>
          <text class="text-info">430教育的好处是描述描描述描述...</text>
          <br/>
          <text class="news-bottom-text">乐小小</text> <text class="news-bottom-text">20分钟前</text>
          <view class="viewer-text-view">
			  <img style="width:24rpx; height:18rpx;" src="@/static/viewer.png"/> <text class="news-bottom-text">1000</text></view>
          </view>
          <img class="news-card-item-pic" src="@/static/logo.png"/>
        </view>
        </navigator>
      </view>

      <view class="card news-card">
        <view class="cart-item-content">
			<view class="news-text-view">
				<text class="text-title news-text-title">430教育到底有哪些好处？</text>
				<br/>
				<text class="text-info">430教育的好处是描述描描述描述...</text>
				<br/>
				<text class="news-bottom-text">乐小小</text> <text class="news-bottom-text">20分钟前</text>
				<view class="viewer-text-view">
				    <img style="width:24rpx; height:18rpx;" src="@/static/viewer.png"/> 
				    <text class="news-bottom-text">1000</text>
				</view>
          </view>
          <img class="news-card-item-pic" src="@/static/logo.png"/>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import childrenList from '@/components/common/childrenList'

export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
      courseList: [],
      items: [
        {
          value: "123",
          name: "乐大棒",
          class: "六年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "12",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "134",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "125",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        }
      ],
      current: "123"
    }
  },
  components: {
    "children-list": childrenList
  },
  onLoad() {},
  methods: {
    
  },
}
</script>

<style scoped>
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.swiper-item-pic {
  width: 100%;
}
.uni-padding-wrap {
  width: 690rpx;
  padding: 10rpx 0;
  margin: 0 auto;
}
.title {
  margin: 30rpx 30rpx;
  font-weight: bold;
  font-size: 28rpx;
  height: 32rpx;
  display:table
}
.title-text {
  margin-left: 10rpx;
  line-height: 32rpx;
}
.recommend-text-view {
  /* padding: 10rpx; */
  padding-left: 18rpx;
  /* height: 30rpx; */
  display: inline-block;
  /* new */
  /* width: 67%; */
  width: 410rpx;
  vertical-align: bottom;
}
.card {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 15px 1px #F0F0F0;
  border-radius: 10px;
}
.recommend-card {
  margin-top: 20rpx;
  width: 677rpx;
  height: 272rpx;
}
.r-text {
  /* padding-right: 60rpx; */
}
.text-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
.text-cost {
  font-size: 28rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #EB564F;
  /* new */
  float: right;
}
.text-info {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}
.card-item-pic {
	/* height: 30%; */
	/* new */
	width: 200rpx;
		height: 160rpx;
		vertical-align: top;
}
.cart-item-content {
  margin: 30rpx;
}
.teacher-avater-div {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #3267F5;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
}
.recommend-text-bottom {
  margin-top: 40rpx;
}
.teacher-name-text {
  display: inline-block;
  font-size: 20rpx;
  line-height: 20rpx;
  margin-left: 30rpx;
  font-weight: 400;
  color: #333333;
}
.sign-up-btn {
  float: right;
  font-size: 20rpx;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
}
.news-bottom-text {
  font-size: 20rpx;
  font-weight: 400;
  padding-right: 10rpx;
}
.news-text-view {
  display: inline-block;
  width: 55%;
}
.news-card-item-pic {
  margin-left: 20rpx;
  width: 245rpx;
  height: 161rpx;
  float: right;
  border-radius: 6rpx;
}
.news-text-title {
  display: inline-block;
  margin-bottom: 30rpx;
  white-space: nowrap;
  width: 350rpx;
  overflow: hidden;  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;  /*超出部分以点号代替*/
}
.news-card {
  margin-top: 20rpx;
  width: 677rpx;
  /* height: 210rpx; */
}
.viewer-text-view {
  margin-left:40rpx;
  display: inline-block;
}
</style>
