en-shoubo-pc/src/views/Exhibitions/components/ListItem/index.vue

<template>
  <div
    v-for="item in list"
    :key="item.id"
    class="list-item"
    @click="
      $router.push({
        name: 'ExhibitionsDetail',
        query: { id: item.id, k: $route.params.type },
      })
    "
  >
    <ElImage
      fit="cover"
      :src="baseUrl + item.thumb"
      aria-label="Image link"
      :aria-description="item.name"
    />

    <div class="list-item__inner" aria-label="Link">
      <p class="list-item__title">{{ item.name }}</p>
      <p class="list-item__content limit-line line-4">
        {{ item.digest }}
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ExhibitionsListItem } from "@/api";
import { getBaseURL } from "@dage/service";

defineProps<{
  list: ExhibitionsListItem[];
}>();

const baseUrl = getBaseURL();
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  height: 240px;
  background: var(--white-bg);
  color: var(--black-text-color);
  cursor: pointer;

  .el-image {
    width: 240px;
    height: 100%;
  }
  &__inner {
    flex: 1;
    padding: 0 25px;
    border: 1px solid #c7c7c7;
    border-left: 0;
  }
  &__title {
    font-size: 18px;
    line-height: 22px;
    padding: 16px 0;
    margin-bottom: 13px;
    font-weight: bold;
  }
  &__content {
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-text-color);
  }
}
</style>