<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    list?: anyObj[]
  }>(),
  {
    list: () => [
      {
        id: '1',
        title: '银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '2',
        title: '银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '3',
        title: '银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '4',
        title:
          '银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '5',
        title: '银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '6',
        title:
          '银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '7',
        title: '银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '8',
        title:
          '银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
      {
        id: '9',
        title:
          '银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆银妆',
        content:
          '【银妆】这个词语院子“银妆素裹，本义指雪下过之后的场景或冬天雪后的美丽景色，这里用”银妆“形容丁香花的洁白。',
      },
    ],
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
</script>
<template>
  <div class="knowledge-card">
    <div class="knowledge-card-title">字词全解</div>
    <div class="knowledge-card-list">
      <div class="hidden_scroll">
        <div
          v-for="i in list"
          :key="i.id"
          class="knowledge-card-list-item"
          :style="{
            'background-image': `url(${OSS_URL}/urm/sentence_collect_list_item_bg.svg),url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
          }"
        >
          <div class="item-title">{{ i.title }}</div>
          <div class="item-content">{{ i.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.knowledge-card {
  line-height: 1.5;
  &-title {
    color: $font-color;
    font-family: $font-special;
    font-size: 3vh;
    padding: 2vh 32px;
    border-radius: 1.67vh;
    background: linear-gradient(269deg, #86e6ff 2.25%, #9effda 51.93%, #5fdcfd 99.65%);
  }
  &-list {
    height: 76.83vh;
    background: linear-gradient(180deg, #f0faff 0%, #fafdff 100%);
    border-radius: 1.67vh;
    padding: 2.67vh 40px;
    .hidden_scroll {
      height: 100%;
    }
    &-item {
      // cursor: pointer;
      min-height: 11.67vh;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 2vh 32px;
      // display: flex;
      // align-items: center;
      background-color: #fff;
      border-radius: 2.67vh;
      margin-bottom: 1.33vh;
      background-repeat: no-repeat;
      background-position:
        -6px -6px,
        right 50%;
      background-size:
        479px 113px,
        233px 271px;
      box-shadow: 0 0.33vh 0.33vh rgba(0, 0, 0, 0.15);
      border: 0.5vh solid transparent;

      .item {
        margin-left: 48px;
        &-title {
          color: $font-color;
          font-family: Arial;
          font-size: 2.67vh;
          font-weight: 700;
          margin-bottom: 0.67vh;
        }
        &-content {
          color: $font-color;
          font-family: 'OPPO Sans';
          font-size: 2vh;
        }
      }
    }
  }
}
</style>
