87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
lines: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const previewLines = computed(() => {
|
|
return props.lines.map((line) => String(line || "").trim()).filter(Boolean);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="difficulty-preview">
|
|
<image
|
|
class="difficulty-preview__bg"
|
|
src="/static/training-difficulty-design/text.png"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="difficulty-preview__content">
|
|
<text class="difficulty-preview__title">{{ title }}</text>
|
|
<view class="difficulty-preview__copy">
|
|
<text
|
|
v-for="(line, index) in previewLines"
|
|
:key="`${line}-${index}`"
|
|
class="difficulty-preview__line"
|
|
>
|
|
{{ line }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.difficulty-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.difficulty-preview__bg {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.difficulty-preview__content {
|
|
position: absolute;
|
|
top: 28rpx;
|
|
left: 30rpx;
|
|
box-sizing: border-box;
|
|
width: 486rpx;
|
|
}
|
|
|
|
.difficulty-preview__title {
|
|
display: block;
|
|
color: #ffd543;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
font-family: "PingFang SC", sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
.difficulty-preview__copy {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
display: block;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
font-family: "PingFang SC", sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
.difficulty-preview__line {
|
|
display: block;
|
|
}
|
|
|
|
|
|
</style>
|