106 lines
2.1 KiB
Vue
106 lines
2.1 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) => {
|
|
const rawParts = Array.isArray(line?.parts)
|
|
? line.parts
|
|
: [{ text: line }];
|
|
const parts = rawParts
|
|
.map((part) => ({
|
|
text: String(part?.text ?? part ?? "").trim(),
|
|
}))
|
|
.filter((part) => part.text);
|
|
|
|
return { parts };
|
|
})
|
|
.filter((line) => line.parts.length > 0);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="difficulty-preview">
|
|
<image
|
|
class="difficulty-preview__bg"
|
|
src="https://static.shelingxingqiu.com/shootmini/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">
|
|
<view
|
|
v-for="(line, index) in previewLines"
|
|
:key="index"
|
|
class="difficulty-preview__line"
|
|
>
|
|
<text
|
|
v-for="(part, partIndex) in line.parts"
|
|
:key="partIndex"
|
|
>{{ part.text }}</text>
|
|
</view>
|
|
</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: 0;
|
|
left: 40rpx;
|
|
box-sizing: border-box;
|
|
width: 486rpx;
|
|
height: 93%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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: 84%;
|
|
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>
|