118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
||
<div class="abstract" v-if="sceneData">
|
||
<div class="title">{{ sceneData.title }}</div>
|
||
<div class="info">
|
||
<div class="info-item">
|
||
<span class="name">直播时间：</span>
|
||
<span class="info-item-text">{{ sceneData.liveStart }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="name">直播地点：</span>
|
||
<span class="info-item-text">{{ sceneData.livePosition }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="name">直播简介：</span>
|
||
<van-text-ellipsis
|
||
class="info-item-text"
|
||
style="display: inline;"
|
||
rows="3"
|
||
:content="sceneData.liveDesc"
|
||
expand-text="展开"
|
||
collapse-text="收起"
|
||
/>
|
||
</div>
|
||
<!-- <div class="info-item" v-if="sceneData.liveDescHref">
|
||
<span class="name">相关链接：</span>
|
||
<a :href="sceneData.liveDescHref" target="_blank" class="info-item-text">
|
||
{{ sceneData.liveDescHref }}
|
||
</a>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { defineProps, ref, onMounted } from 'vue';
|
||
|
||
const props = defineProps({
|
||
sceneData: {
|
||
type: Object,
|
||
default: () => null
|
||
}
|
||
});
|
||
|
||
const isLoaded = ref(false);
|
||
|
||
// 暴露给父组件的方法，用于主动标记已加载
|
||
const loadData = () => {
|
||
isLoaded.value = true;
|
||
console.log('简介组件加载完成');
|
||
};
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
loadData
|
||
});
|
||
|
||
console.log('简介组件数据:', props.sceneData);
|
||
const text =
|
||
"那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。";
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.abstract {
|
||
// border: 1px solid blue;
|
||
margin-top: 10px;
|
||
padding: 0 20px;
|
||
// border-top: 4px solid #eee;
|
||
// padding-top: 10px;
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
line-height: 21px;
|
||
letter-spacing: 0px;
|
||
color: #232323;
|
||
}
|
||
.info {
|
||
margin-top: 10px;
|
||
font-size: 17px;
|
||
// font-size: 13px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #5c5c5c;
|
||
|
||
.info-item {
|
||
margin-bottom: 7px;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
align-items: center;
|
||
|
||
.name {
|
||
color: #000;
|
||
}
|
||
.info-item-text {
|
||
color: #777882;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 18px;
|
||
font-size: 17px;
|
||
// font-size: 13px;
|
||
color: #5c5c5c;
|
||
line-height: 1.6;
|
||
// line-height: 20px;
|
||
.content-title {
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.go-new-page {
|
||
color: rgb(0, 0, 238);
|
||
}
|
||
}
|
||
}
|
||
</style>
|