红色教育辅助软件开发第四天

昨日总结

昨天开发了轮播图效果

今日开发

今日开发主页功能模块

代码

<template>
	<view>
		<view class="acty_box">
			<view class="acty_box_img">
				<image src=""></image>
			</view>
			<view class="act_txt">
				<view class="act_txt_T">活动名字</view>
				<view class="act_info">
					<view class="act_info_txt">
						<view class="info_txt1">活动主题</view>
						<view>20人参加</view>
					</view>
					<view class="info_btn">马上报名</view>
				</view>
			</view>
		</view>
		<view class="acty_box">
			<view class="acty_box_img">
				<image src=""></image>
			</view>
			<view class="act_txt">
				<view class="act_txt_T">活动名字</view>
				<view class="act_info">
					<view class="act_info_txt">
						<view class="info_txt1">活动主题</view>
						<view>20人参加</view>
					</view>
					<view class="info_btn">马上报名</view>
				</view>
			</view>
		</view>
		<view class="acty_box">
			<view class="acty_box_img">
				<image src=""></image>
			</view>
			<view class="act_txt">
				<view class="act_txt_T">活动名字</view>
				<view class="act_info">
					<view class="act_info_txt">
						<view class="info_txt1">活动主题</view>
						<view>20人参加</view>
					</view>
					<view class="info_btn">马上报名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"avtivity_card",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	.acty_box{
		display: flex;
		padding: 10px 0;
		margin: 10px;
		border-radius: 10px;
		box-shadow: 0 0 5px 1px rgb(#000000,0.1);
		box-sizing: border-box;
		align-items: center;
		margin-bottom: 15px;
		background-color: #fff;
	}
	.acty_box_img{
		flex-shrink: 0;
		width: 91rpx;
		border-radius: 100%;
		margin: 0 15px;
	}
	image{
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}
	.act_txt{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		padding: 0 15px 0 0;
	}
	.act_txt_T{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		font-size: 18px;
	
	}
	.act_info{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		flex-flow: row nowrap;
		justify-content: space-around;
		
	}
	.act_info_txt{
		width: 60%;
		overflow: hidden;
		font-size: 16px;
		color: #666666;
	}
	.info_txt1{
		height: 20px;
		font-size: 15px;
		overflow: hidden;
	}
	.info_btn{
		width: 60%;
		height: 40px;
		text-align: center;
		line-height: 34px;
		border-radius: 40%;
		background-color: #00b783;
		color: #fff;
		font-size: 16px;
		margin-top: 10px;
		
	}
</style>

总结

该模块我想做的是可以通过请求服务器，然后返回数据，在到前端渲染，就可以做到后期方便修改。我查了一些资料，发现可以通过发送ruquest请求。请求服务器，然后返回json数据，在前端声明变量接受数据。并动态更新。并且我想，一个页面这么多模块，这么多代码，要是可以分开就可以使项目结构更加清晰。这个后期在优化吧