<template>
  <view class="s-ses">
    <card v-for="item in caseList" :key="item.id" :is-show-line="false" :title="item.title">
      <view>
        <text class="des">{{ item.des }}</text>
        <view class="imgs">
          <image v-for="img in item.imgs" :key="img" :src="img"></image>
        </view>
      </view>
    </card>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import card from './card.vue';

const caseList = ref([
  {
    id: 1,
    title: '很庆幸给孩子选择了学小乐督学服务',
    des: `孩子平时学习不大好，但是我们做家长的忙于生计，没空督促和辅导孩子学习，看到学习机里有督学服务，试着用了下，本来没报太大期望，结果孩子成绩居然有了提升，又试了两期，发现确实是有效果，特别的开心…
`,
    imgs: [
      new URL('@/static/png/case1.png', import.meta.url).href,
      new URL('@/static/png/case2.png', import.meta.url).href,
      new URL('@/static/png/case3.png', import.meta.url).href,
    ],
  },

  {
    id: 2,
    title: '学小乐督学服务挺好的',
    des: `价格比上辅导机构便宜多了，本来想着试试看，没想到居然提分了，哈哈，容我开心一会…`,
    imgs: [
      new URL('@/static/png/case1.png', import.meta.url).href,
      new URL('@/static/png/case2.png', import.meta.url).href,
    ],
  },

  {
    id: 3,
    title: '我儿子成绩提高了，太开心啦',
    des: `价格比上辅导机构便宜多了，本来想着试试看，没想到居然提分了，哈哈，容我开心一会…`,
    imgs: [
      new URL('@/static/png/case1.png', import.meta.url).href,
      new URL('@/static/png/case2.png', import.meta.url).href,
    ],
  },
]);
</script>

<style lang="scss">
.s-ses {
  padding-top: 12px;

  .imgs {
    display: flex;
    flex-wrap: wrap;
    image {
      flex: 32%;
      height: 100px;
      margin-right: 3px;
      margin-bottom: 3px;
    }
  }
  .des {
    color: #666;
    text-align: justify;
    padding-bottom: 8px;
    // font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 160% */
    max-height: 200px;
    display: -webkit-box; /* 必须结合 -webkit-box */
    -webkit-box-orient: vertical; /* 设置为垂直方向 */
    -webkit-line-clamp: 4; /* 限制最大显示的行数 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis;
  }
}
</style>
