研究生管理系统第二周数据库设计编写数据维护之余的前端开发

<template>
	<view class=container>
		<view style="height:40rpx"></view>
				<view class="student_card" v-for="student in students":key="student.student_id" @click="more_message_handler">
					<view class="student-picture" >
					      <image class="picture":src="student.student_picture_src"  mode="center"></image> 
					</view>
					<view class="student-message">
						<view class="student-item">{{student.student_name}}</view>
						<view class="student-item">{{student.student_type}}</view>
						<view class="student-item">{{student.student_major}}</view>
						<view class="student-item">学号：{{student.student_id}}</view>
					</view >
						
				</view>	
	</view>
</template>

部分代码

<script>
	export default {
		data() {
			return{
				students:[
				            {	
								student_picture_src:"../../../static/pictures/student1.jpg",
				                student_name:"李晓晓",
								student_type:"普通硕士",
								student_major:"08350-软件工程",
				                student_id:"201200301"			                
				            },

<style>
	#container{
	    display:flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	}
	.student_card{
		height: 250rpx;
	    padding: 20rpx;
	    border-radius: 20rpx;
	    width: 90%;
	    box-shadow: 0 0 40rpx -10rpx grey;
	    margin: 10rpx auto;
	}
	.student-picture{
		size: portrait;
		width: 180rpx;
		height: 200rpx;
		position:relative;
		margin-left: 10rpx;
		margin-top: 10rpx;
		padding: 10rpx;
		box-shadow: 0 0 40rpx -10rpx grey;

	}
	.picture{
		position: relative;
		margin-top: -5rpx;
		margin-left: -7rpx;
		width: 170rpx;
		height: 180rpx;
	}
	.student-message{
	 position: relative;
	 margin-top: -180rpx;
	 margin-left: 300rpx;
	
	}
</style>