hg_zlxc_h5/pages/index/comp/list.vue

<template>
	<view class="ul" v-if="listData.length">
		<view class="li" v-for="(item,index) in listData" :key="index" @click="goDetail(item)">
			<view class="cover">
				<image :src="item.iconUrl" mode=""></image>
			</view>
			<view class="borderLine">
				<view class="centerInfo">
					<view class="name">{{item.schoolName}}</view>
					<view class="star">
						<u-rate :count="5" v-model="item.starLevel" active-color="#F5682D" disabled></u-rate>
						<view class="starText">
							{{item.starLevel}}分
						</view>
					</view>
					<view class="district">上城区</view>
				</view>
				<view class="rightCon">
					<view class="btn">查看班型</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['listData'],
		data() {
			return {}
		},
		methods: {
			goDetail(item) {
				this.$store.commit('upDateTrainingSchoolId', item)
				this.$goPage('/pages/schoolDetails/details')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ul {
		width: 100%;
	  .li {
		  width: 100%;
		  display: flex;
		  padding: 20rpx 0 0 0;
	    .cover {
			width: 204rpx;
			height: 140rpx;
			border-radius: 14rpx;
			overflow: hidden;
			flex-shrink: 0;
			
	      image {
			display: block;
			width: 100%;
			height: 100%;
	      }
	    }
		.borderLine {
			flex: 1;
			width: 0;
			padding-bottom: 44rpx;
			border-bottom: 1rpx solid #E8E9EC;
			display: flex;
		}
	
	    .centerInfo {
			width: 0;
			flex: 1;
			padding: 0 0 0 20rpx;
	      .name {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
	      }
	
	      .star {
			  display: flex;
			  align-items: center;
			  margin: 10rpx 0 14rpx 0;
	       
	
	        .starText {
				font-size: 24rpx;
				color: #F88F36;
	        }
	      }
	
	      .district {
			  font-size: 24rpx;
			  color: #333;
	      }
	    }
		.rightCon {
			padding-top: 36rpx;
			.btn {
				width: 144rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 56rpx;
				text-align: center;
			}
		}
	   }
	}
</style>