discover-detail.vue

<template>

		
	<view class="detail">
		<!-- <view class="nav-bar-back">
		    <image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
		    <view class="nav-bar-title">{{title}}</view>
		</view> -->
		
		<view class="top">
				<image  @click="goBack" class="back" src="/static/discover/back.png"></image>
				<view class="title">发布帖子</view>
				<span class="empty"></span>
		</view>
		<view class="school-activity-icon-wrapper"><image class="school-activity-icon" src="/static/discover/activity.svg"></image></view>
		<view class="activity-production">
			<image class="activity-production-icon" src="/static/discover/production.png"></image>
			<text class="activity-title">活动介绍:</text>
			<view class="production-detail">{{production}}</view>
		</view>
		<view class="activity-object">
			<image class="activity-production-icon" src="/static/discover/object.png"></image>
			<text class="activity-title">活动对象:</text>
			<view class="production-detail">{{object}}</view>
		</view>
		<view class="activity-time">
			<image class="activity-production-icon" src="/static/discover/time.png"></image>
			<text class="activity-title">活动时间:</text>
			<view class="production-detail">{{time}}</view>
		</view>
		<view class="activity-place">
			<image class="activity-production-icon" src="/static/discover/place.png"></image>
			<text class="activity-title">活动地点:</text>
			<view class="production-detail">{{place}}</view>
		</view>
		<view class="activity-contact">
			<image class="activity-production-icon" src="/static/discover/contact.png"></image>
			<text class="activity-title">联系方式:</text>
			<view class="production-detail">{{contact}}</view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	      return {
	        title: '趣味篮球赛',
			production:'111111111111111111111111111111111111111111111111111111',
			object:'福州大学全体学生',
			time:'2023-05-03 19:00 2023-05-04 19:00',
			place:'风雨操场',
			contact:'1612737522@qq.com'
	      }
	    },
	    methods: {
	      goBack() {
	        uni.navigateBack({
	          delta: 1
	        })
	      }
	    }
	  }
</script>

<style>
		.top {
			width: 100%;
			height: 50px;
			background-color: #EDEEF0;
			text-align: center;
		}
		
		.back {
			width: 40px;
			height: 30px;
			margin-top: 10px;
			margin-bottom: 10px;
			float: left;
			margin-left: 10px;
		}
		
		.empty{
			width: 40px;
			height: 30px;
			margin-top: 10px;
			margin-bottom: 10px;
			float: right;
			margin-right: 10px;
		}
		.title {
				margin-top: 15px;
				display: inline-block;
			}
	  /* .nav-bar-back {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    height: 60px;
		background-color: #EDEEF0;
	  }
	  .nav-bar-back-icon {
	    width: 40px;
	    height: 30px;
	  }
	  .nav-bar-title {
	    flex: 1;
	    text-align: center;
	    font-size: 24px;
	    font-weight: bold;
	    color: #F1992D;
	  } */
	  .school-activity-icon-wrapper{
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
	  }
	  
	  .school-activity-icon {
	    width: 89%;
	    height: 200px;
	    margin: 0px;
		padding: 0px;
	  }
	  .activity-production{
	  		  margin-top: 10px;
	  }
	  .activity-title {
	    font-size: 20px; /* 调整字体大小为24像素 */
	  }

	  .activity-object{
	  	  margin-top: 10px;
	  }
	  .activity-time{
	  	  margin-top: 10px;
	  }
	  .activity-place{
	  	  margin-top: 10px;
	  }
	  .activity-contact{
	  	  margin-top: 10px;
	  }
	  .activity-production-icon{
		  width: 40px;
		  height: 30px;
		  margin-left: 30px;
		  margin-top:8px;
		  margin-bottom: -5px;
	  }
	  .production-detail{
	      width: 89%;
	      background-color: rgb(245 154 35 / 30%);
	      border-radius: 5px;
		  margin-left: 20px;
		  margin-top: 5px;
		  /* 文字换行处理 */
	      word-wrap:break-word;
	      word-break:break-all;
	  }

</style>