66 lines
1.1 KiB
Vue
66 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<fix-base-style
|
||
|
|
:styleSpacing="styleSpacing"
|
||
|
|
:styleColor="styleColor"
|
||
|
|
:position="position"
|
||
|
|
:index="index"
|
||
|
|
>
|
||
|
|
<view class="fix-picture">
|
||
|
|
<view class="inner" @click="toPath">
|
||
|
|
<template v-if="data.pic">
|
||
|
|
<image mode="widthFix" :src="data.pic" class="img" />
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</fix-base-style>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" name="fix-picture" setup>
|
||
|
|
import { type PropType } from "vue";
|
||
|
|
import type { Form } from "../../types/form";
|
||
|
|
import { baseProps } from "../../hooks";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object as PropType<Form.Picture>,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
pic: "",
|
||
|
|
link: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
...baseProps,
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["jump"]);
|
||
|
|
|
||
|
|
function toPath() {
|
||
|
|
const link = props.data.link;
|
||
|
|
emits("jump", link);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.fix-picture {
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
height: 100%;
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|