653cdd5139
Replace all deprecated `flex-items-center` utility classes with standard `items-center` across components. Additionally, update font weight classes from `font-900` to `font-bold`, standardize hex color class syntax to use bracket notation, and remove unused SCSS styles from the SharedVisual component.
57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div class="scenic-image-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
|
|
@click="handleSelect">
|
|
<img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
|
|
|
|
<div
|
|
class="scenic-image-card__expand flex items-center flex-justify-center rounded-full text-white text-[18px] font-bold"
|
|
@click.stop="handleAction">
|
|
{{ action.icon }}
|
|
</div>
|
|
|
|
<div v-if="hasCaption" class="scenic-image-card__caption">
|
|
<div v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-bold truncate">
|
|
{{ caption.title }}
|
|
</div>
|
|
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-bold truncate">
|
|
{{ caption.subtitle }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["select", "action"]);
|
|
|
|
const caption = computed(() => props.data.caption || {});
|
|
const action = computed(() => props.data.action || {});
|
|
const hasCaption = computed(() => Boolean(caption.value.title || caption.value.subtitle));
|
|
|
|
const handleSelect = () => {
|
|
if (props.disabled) return;
|
|
emit("select", props.data);
|
|
};
|
|
|
|
const handleAction = () => {
|
|
if (props.disabled) return;
|
|
emit("action", props.data);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|