ieplus-app/src/pagesOther/components/university-item.vue

<template>
  <view class="px-30 py-20 flex items-center gap-20" @click="handleClick">
    <ie-image :src="data.logo" custom-class="w-110 h-110" mode="aspectFill" />
    <view class="flex-1 flex flex-col gap-8">
      <view class="text-30 text-fore-title font-bold flex items-center gap-20">
        <text class="flex-1 min-w-1 ellipsis-1">{{ data.name }}</text>
        <uv-tags v-if="data.star" type="warning" size="tiny" plain :text="data.star"></uv-tags>
      </view>
      <view class="flex items-center gap-10 flex-wrap">
        <view v-for="value in tags" :key="value">
          <uv-tags :text="value" type="info" size="tiny" plain />
        </view>
      </view>
      <view class="text-24 text-fore-light flex items-center gap-6">
        <uv-icon name="map" size="16" color="var(--fore-light)" />
        <text class="text-24 text-fore-light">{{ data.address }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { Major } from '@/types';

const props = defineProps<{
  data: Major.University;
}>();
const tags = computed(() => {
  return props.data.bxLevel?.split(',') || [];
});
const emit = defineEmits<{
  (e: 'click', data: Major.University): void;
}>();

const handleClick = () => {
  emit('click', props.data);
};
</script>
<style lang="scss" scoped></style>