// 活动介绍
<view class="activity_introduce">
<view class="top_box">
<view class="top_box_circle">
<view class="min_circle_1"></view>
<view class="min_circle_2"></view>
</view>
<view class="top_box_text">活动介绍</view>
</view>
<view class="bottom_box">
<rich-text class="rich_text" v-if="introduceText !== '<p><br></p>'" :nodes="introduceText">
<!-- 这里展示后台富文本框配置的内容。为全面贯彻落实创新驱动发展战略,围绕《科技成果转化法》的实施,加快先进制造与工业自动化行业的科技成
果转移转化,促进中小企业加快转 型升级,推进院企对接、价值链。 -->
</rich-text>
<view v-else class="dynamic_rich_text">暂无信息</view>
</view>
</view>
// 活动议程
<view class="activity_introduce">
<view class="top_box">
<view class="top_box_circle">
<view class="min_circle_1"></view>
<view class="min_circle_2"></view>
</view>
<view class="top_box_text">活动议程</view>
</view>
<view class="bottom_box">
<rich-text class="rich_text" v-if="agendaText !== '<p><br></p>'" :nodes="agendaText"></rich-text>
<view v-else class="dynamic_rich_text">暂无信息</view>
</view>
</view>
data() {
return {
uuid: '', // 当前数据的uuid
headTitle: '', // 顶部标题
activityData: {}, // 活动详情数据
introduceText: '', // 活动介绍的富文本内容
agendaText: '', // 活动议程的富文本内容
timer: true // 存一个定时器状态开关
};
},
methods: {
// 活动详情初始化
activityDetailsInit() {
this.$apiGet(`/api/gc_trade_center/activity/public/${this.uuid}`).then(res => {
console.log(res, '活动详情的初始化');
this.activityData = res;
if (this.activityData) {
// 动态修改顶部标题
wx.setNavigationBarTitle({
title: this.activityData.category
});
this.introduceText = this.richText(this.activityData.otherData.introduce);
this.agendaText = this.richText(this.activityData.otherData.agenda);
this.getSignUpState();
}
});
},
// 解析富文本后显示数据
richText(richTextData) {
if (richTextData) {
var richtext = richTextData;
const regex = new RegExp('<img', 'gi');
const regex2 = new RegExp('src="/api', 'gi');
richtext = richtext.replace(regex2, `src="${this.$ServerBaseUrl}/api`);
richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
return richtext;
} else {
return '';
}
},
}
lang="scss"的css样式
// 活动介绍的样式
.activity_introduce {
margin-top: 60rpx;
.top_box {
display: flex;
justify-content: flex-start;
margin-bottom: 18rpx;
.top_box_circle {
margin-right: 22rpx;
width: 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
.min_circle_1 {
width: 16rpx;
height: 16rpx;
background: rgba(218, 0, 23, 0.7);
border-radius: 50%;
margin-right: -6rpx;
}
.min_circle_2 {
width: 16rpx;
height: 16rpx;
background: rgba(1, 68, 151, 0.7);
border-radius: 50%;
}
}
.top_box_text {
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333333;
}
}
.bottom_box {
width: 690rpx;
overflow: hidden;
.rich_text {
text-indent: 2em;
}
.dynamic_rich_text {
width: 690rpx;
// height: 48rpx;
// line-height: 48rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
text-align: center;
}
}
}