我的页面 第一版

common/styles/global/pages.scss

@@ -328,7 +328,8 @@
 
 /*** 我的页面***/
 .client-my-page{
-	background-color:#f8f9fd;
+	background-color:#f8f9fd;height: 100vh;
+	// head
 	.my-head-box{
 		width: 100%;height:372rpx;display: flex;align-items: center;box-sizing: border-box;padding: 52rpx 52rpx 0 52rpx;
 		background-image: url("@/static/images/my/client-my-bj.png");@include ezy-no-repeat-cover();
@@ -340,9 +341,39 @@
 	.head-content-box{
 		font-size: 46rpx;color: #fff;
 		.idcard-row-box{display: flex;align-items: center;margin-top: 24rpx;}
-		.idcard-icon{width: 56rpx;height:56rpx;
-		background-image: url("@/static/images/my/my-card-icon.png");@include ezy-no-repeat-cover();
-	}
+		.idcard-icon{width: 56rpx;height:56rpx;background-image: url("@/static/images/my/my-card-icon.png");@include ezy-no-repeat-cover();}
 		.idcard-text{font-size: 36rpx;margin-left: 10rpx;}
 	}
+	
+	// num
+	.my-num-box{
+		background-color: #fff;box-sizing: border-box;padding: 36rpx;border-radius: 8rpx;
+		display: flex;justify-content: space-around;margin: 20rpx;
+		.num-item-box{
+			display: flex;flex-direction: column;align-items: center;position: relative;
+			icon{width: 100rpx;height: 100rpx;@include ezy-no-repeat-cover();margin-bottom: 10rpx;}
+			.ks-icon{background-image: url("@/static/images/my/my-ks-icon.png");}
+			.lx-icon{background-image: url("@/static/images/my/my-lx-icon.png");}
+			.kc-icon{background-image: url("@/static/images/my/my-kc-icon.png");}
+			.my-num-badge{position: absolute;right: -8rpx;top: -12rpx;}
+			.num-title{font-size: 28rpx;color: #333;}
+		}
+	}
+	
+	// list
+	.my-list-box{
+		width:700rpx;margin: 0 auto;background-color: #fff;border-radius: 8rpx;padding: 0 36rpx;
+		.list-row{border-bottom: 2rpx solid #eee;color: #333;box-sizing: border-box;padding: 42rpx 0;
+		display: flex;align-items: center;position: relative;}
+		.list-row::after{
+			content: '';width: 30rpx;height: 30rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");
+			position: absolute;right: 0;transform: rotate(270deg);
+		}
+		.list-row:last-child{border: 0;}
+		.list-icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 32rpx;}
+		.user-icon{background-image: url("@/static/images/my/my-editor-icon.png");}
+		.score-icon{background-image: url("@/static/images/my/my-score-icon.png");}
+		.login-out-icon{background-image: url("@/static/images/my/login-out-icon.png");}
+	}
 }

components/dialog/commonDialog.vue

@@ -0,0 +1,53 @@
+<!-- 中弹窗 二行文字 -->
+<template>
+	<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-tip-dialog tip-middle-dialog">
+		<view class="tip-content-box">
+			<view class="tip-title">{{title}}</view>
+			<view class="tip-content">{{content}}</view>
+			<view class="tip-btn-box">
+				<view class="not-confirm-btn" @click="handleClose"></view>
+				<view class="confirm-btn" @click="confirmBtn"></view>
+			</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const props = defineProps({
+	  title: {
+	    type: String,
+	    default: '提示'
+	  },
+	  content: {
+	    type: String,
+		require: true,
+	    default: ''
+	  },
+	});
+	const commonPopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		commonPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		commonPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn');
+		commonPopup.value.close();
+	}
+	defineExpose({
+			handleShow,
+			handleClose
+		})
+</script>
+
+<style>
+</style>

pages/client/my/index.vue

@@ -13,20 +13,41 @@
 		
 		<view class="my-num-box">
 			<view class="num-item-box">
-				<uni-badge class="uni-badge-left-margin" text="1" />
-				<icon></icon>
-				<text></text>
+				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kaoshiCount"
+				:customStyle="{background: '#ff2527'}" :text="myInfoData.kaoshiCount" />
+				<icon class="ks-icon"></icon>
+				<text class="num-title">考试管理</text>
 			</view>
 			<view class="num-item-box">
-				<icon></icon>
-				<text></text>
+				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.lianxiCount"
+				:customStyle="{background: '#ff2527'}" :text="myInfoData.lianxiCount" />
+				<icon class="lx-icon"></icon>
+				<text class="num-title">练习管理</text>
 			</view>
 			<view class="num-item-box">
-				<icon></icon>
-				<text></text>
+				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kechengCount"
+				:customStyle="{background: '#ff2527'}" :text="myInfoData.kechengCount" />
+				<icon class="kc-icon"></icon>
+				<text class="num-title">课程管理</text>
 			</view>
 		</view>
 		
+		<view class="my-list-box">
+			<view class="list-row" @click="telClick">
+				<icon class="list-icon user-icon"></icon>
+				<text>修改个人信息</text>
+			</view>
+			<view class="list-row" @click="checkWrong">
+				<icon class="list-icon score-icon"></icon>
+				<text>成绩列表</text>
+			</view>
+			<view class="list-row" @click="exitLogin">
+				<icon class="list-icon login-out-icon"></icon>
+				<text>退出登录</text>
+			</view>
+		</view>
+		<!-- 底部区域 -->
+		<customTabbarClient></customTabbarClient>
 	</view>
 </template>
 
@@ -34,6 +55,7 @@
 	import {onLoad} from '@dcloudio/uni-app';
 	import {getMineUser,getMineInfo} from '@/api/my.js'
 	import {reactive,ref} from "vue";
+	import customTabbarClient from "@/components/custom-tabbar/custom-tabbar-client.vue"
 	let myInfoData = reactive({
 		userImg: '',
 		userName: '',
@@ -60,6 +82,10 @@
 			myInfoData.lianxiCount = res.data.lianxiCount;
 		})
 	}
+	function exitLogin(){
+		
+	}
+	
 	onLoad(() => {
 		getMyInit()
 	})