luoyang-uniapp-app/pages/tabbar/learnCar/comp/topInfo.vue

<template>
		<view class="topInfo card">
			<view class="user_row">
				<view class="avatar">
					<image :src="vuex_userInfo.photoPath" mode="widthFix" v-if="vuex_userInfo.photoPath"></image>
				</view>
				<view class="rightTxt" @click="showType=true">
					<view class="name">{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录' }}</view>
					<view class="btn_row">
						<view class="txt">{{ carType }}</view>
						<u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="bg">
				<view class="row">
					<view class="timeItem">
						<view class="flex">
							<view class="time">120</view>
							<view class="uni">分钟</view>
						</view>
						<view class="lab">已完成学时</view>
					</view>
					<view class="timeItem">
						<view class="flex">
							<view class="time">120</view>
							<view class="uni">分钟</view>
						</view>
						<view class="lab">应完成学时</view>
					</view>
				</view>
				<view class="row">
					<view class="timeItem">
						<view class="flex ">
							<view class="time">120</view>
							<view class="uni">分钟</view>
						</view>
						<view class="lab">已完成学时</view>
					</view>
					<view class="timeItem">
						<view class="flex ">
							<view class="time ">120</view>
							<view class="uni">分钟</view>
						</view>
						<view class="lab">应完成学时</view>
					</view>
				</view>
			</view>
			<u-picker :show="showType" :columns="typeArr" keyName="name" @confirm="confirmType" @cancel="showType=false"></u-picker>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				showType: false,
				typeArr: [
					[
						{name: '科目一', id: 1},
						{name: '科目二', id: 2},
						{name: '科目三', id: 3},
					]
				],
				carType: '科目一'
			}
		},
		methods: {
			confirmType(val) {
				console.log(val)
				let item = val.value[0]
				this.carType = item.name
				this.showType = false
			}
		}
	}
</script>

<style scoped lang="scss">
	  .topInfo.card {
		  padding: 0rpx 20rpx 20rpx 20rpx;
	    .user_row {
			display: flex;
	      .avatar {
	        width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			background: url('../../../../static/images/mineIcon/avatar.png');
			background-size: 100% 100%;
			margin-top: -36rpx;
			background: #F6F7FA;
	      }
	
	      .rightTxt {
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  flex: 1;
			  width: 0;
			  padding: 0 0 0 20rpx;
	        .name {
				font-size: 28rpx;
				color: #333;
	        }
	
	        .btn_row {
				display: flex;
				align-items: center;
				justify-content: center;
				background: $themC;
				width: 150rpx;
				height: 50rpx;
				color: #fff;
				border-radius: 10rpx;
				font-size: 24rpx;
				lighting-color: 50rpx;
	          .txt {
				margin-right: 10rpx;
	          }
	        }
	      }
	    }
	
	    .bg {
			background: #F6F7FA;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 30rpx;
	      .row {
			  border-top: 1rpx solid #EDEDED;
			  display: flex;
			  &:first-child {
				  border: none;
			  }
	        .timeItem {
				border-left: 1px solid #EDEDED;
				flex: 1;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 24rpx;
				padding: 20rpx 0;
				&:first-child {
					border: none;
				}
	          .flex {
				  justify-content: center;
				  
	            .time {
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
	            }
	            .uni {
					margin-top: -6rpx;
	            }
	          }
	
	          .lab {
				text-align: center;
	          }
	        }
	      }
	    }
	  }
</style>