86 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			86 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
| 
								 | 
							
								<template>
							 | 
						||
| 
								 | 
							
								  <view class="content">
							 | 
						||
| 
								 | 
							
								    <view class="topimg">
							 | 
						||
| 
								 | 
							
								      <img :src="detailData.actCover "
							 | 
						||
| 
								 | 
							
								           alt="" />
							 | 
						||
| 
								 | 
							
								    </view>
							 | 
						||
| 
								 | 
							
								    <view class="contentbox">
							 | 
						||
| 
								 | 
							
								      <view class="title">
							 | 
						||
| 
								 | 
							
								        活动介绍
							 | 
						||
| 
								 | 
							
								      </view>
							 | 
						||
| 
								 | 
							
								      <view class="contenttext"
							 | 
						||
| 
								 | 
							
								            v-html="detailData.actExplain">
							 | 
						||
| 
								 | 
							
								      </view>
							 | 
						||
| 
								 | 
							
								    </view>
							 | 
						||
| 
								 | 
							
								  </view>
							 | 
						||
| 
								 | 
							
								</template>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<script>
							 | 
						||
| 
								 | 
							
								import * as act from '@/config/activity.js'
							 | 
						||
| 
								 | 
							
								export default {
							 | 
						||
| 
								 | 
							
								  data() {
							 | 
						||
| 
								 | 
							
								    return {
							 | 
						||
| 
								 | 
							
								      pkId: '',
							 | 
						||
| 
								 | 
							
								      detailData: {},
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  onLoad(query) {
							 | 
						||
| 
								 | 
							
								    this.pkId = query.pkId
							 | 
						||
| 
								 | 
							
								    console.log('🌈query', query.pkId)
							 | 
						||
| 
								 | 
							
								    this.getDetail()
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  methods: {
							 | 
						||
| 
								 | 
							
								    getDetail() {
							 | 
						||
| 
								 | 
							
								      act
							 | 
						||
| 
								 | 
							
								        .getActivityDetailList({
							 | 
						||
| 
								 | 
							
								          pkId: this.pkId,
							 | 
						||
| 
								 | 
							
								        })
							 | 
						||
| 
								 | 
							
								        .then((res) => {
							 | 
						||
| 
								 | 
							
								          this.detailData = res.rows[0]
							 | 
						||
| 
								 | 
							
								          const regex = new RegExp('<img', 'gi')
							 | 
						||
| 
								 | 
							
								          this.detailData.actExplain = this.detailData.actExplain.replace(
							 | 
						||
| 
								 | 
							
								            regex,
							 | 
						||
| 
								 | 
							
								            `<img style="max-width: 200px;"`
							 | 
						||
| 
								 | 
							
								          )
							 | 
						||
| 
								 | 
							
								        })
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								</script>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<style lang="scss" scoped>
							 | 
						||
| 
								 | 
							
								.content {
							 | 
						||
| 
								 | 
							
								  height: 100vh;
							 | 
						||
| 
								 | 
							
								  background: #a60c02;
							 | 
						||
| 
								 | 
							
								  // background: linear-gradient(180deg, #6289C9 0%, #125AB3 100%);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  .topimg {
							 | 
						||
| 
								 | 
							
								    width: 100%;
							 | 
						||
| 
								 | 
							
								    height: auto;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    img {
							 | 
						||
| 
								 | 
							
								      width: 100%;
							 | 
						||
| 
								 | 
							
								      height: 100%;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  .contentbox {
							 | 
						||
| 
								 | 
							
								    text-align: center;
							 | 
						||
| 
								 | 
							
								    padding: 28rpx 42rpx;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    .title {
							 | 
						||
| 
								 | 
							
								      font-size: 40rpx;
							 | 
						||
| 
								 | 
							
								      font-weight: 400;
							 | 
						||
| 
								 | 
							
								      color: #fbf0cf;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    .contenttext {
							 | 
						||
| 
								 | 
							
								      font-size: 24rpx;
							 | 
						||
| 
								 | 
							
								      font-weight: 400;
							 | 
						||
| 
								 | 
							
								      color: #fbf0cf;
							 | 
						||
| 
								 | 
							
								      line-height: 28rpx;
							 | 
						||
| 
								 | 
							
								      margin-top: 44rpx;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								</style>
							 |