39 lines
899 B
Vue
39 lines
899 B
Vue
<script setup lang="ts" name="IconAndText">
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
icon?: string;
|
|
text?: string;
|
|
width?: number;
|
|
height?: number;
|
|
}>();
|
|
|
|
const defaultIcon = new URL("../../assets/svg/failed.svg", import.meta.url).href;
|
|
const defaultText = "抱歉，出现意外错误了";
|
|
const viewportWidth = 375;
|
|
const unit = "vw";
|
|
|
|
const pxToVw = (val:number) => {
|
|
return viewportWidth/100 * val + unit;
|
|
};
|
|
|
|
const iconStyle = computed(() => {
|
|
let str = "";
|
|
if (props.width) str += "width:" + pxToVw(props.width);
|
|
if (props.height) {
|
|
str += props.width ? ";" : "";
|
|
str += "height:" + pxToVw(props.height);
|
|
}
|
|
return str;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toupai-tips-page-image" :style="iconStyle">
|
|
<img :src="icon || defaultIcon">
|
|
</div>
|
|
<div class="toupai-tips-page-text">
|
|
<p>{{ text || defaultText }}</p>
|
|
</div>
|
|
</template> |