Kaynağa Gözat

我的页面样式优化

tanxue 2 ay önce
ebeveyn
işleme
8b5b89ff60

+ 23 - 39
common/styles/global/pages.scss

@@ -903,63 +903,47 @@
 	padding-top:var(--status-bar-height);@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/my/my-page-bj.png");
 	.my-head-box{
 		width: 100%;padding: 80rpx 24rpx 42rpx;box-sizing: border-box;display: flex;align-items: center;color: #fff;
-		.head-img-box{width: 154rpx;height: 154rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;}
+		.head-img-box{width: 154rpx;height: 154rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;border-radius: 50%;}
 		.head-content-box{font-size: 30rpx;}
 	}
 
 	// hyqy
 	.my-hyqy-swiper{
-		height: 385rpx;
+		height: 363rpx;margin-bottom: 32rpx;
 		.uni-swiper-dots-horizontal{bottom: 24rpx;}
 	}
 	.hyqy-box{
-		width: 731rpx;height: 385rpx;margin: 0 auto;position: relative;
+		width: 690rpx;height: 363rpx;margin: 0 auto;position: relative;
 		@include ezy-no-repeat-cover;
-		.hyqy-box-img{width: 731rpx;height: 385rpx;margin: 0 auto;display: block;border-radius: 10rpx;}
+		.hyqy-box-img{width: 690rpx;height: 363rpx;margin: 0 auto;display: block;border-radius: 10rpx;}
 	}
 	// list
 	.my-list-box{
-		width:700rpx;margin: 36rpx auto 240rpx;
-		.list-row{border-bottom: 2rpx solid #5bcdfb;color: #fff;box-sizing: border-box;padding: 30rpx 20rpx;
-		display: flex;align-items: center;position: relative;}
-		.list-row::after{
-			content: '';width: 19rpx;height: 33rpx;@include ezy-no-repeat-cover;
-			background-image: url("@/static/images/my/list-jt.png");
-			position: absolute;right: 20rpx;
-		}
-		.no-jt::after,.no-jt::after{display: none;}
-		.list-icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 10rpx;}
-		.tel-icon{background-image: url("@/static/images/my/list-icon1.png");}
-		.error-icon{background-image: url("@/static/images/my/list-icon2.png");}
-		.order-icon{background-image: url("@/static/images/my/list-icon3.png");}
-		.login-out-icon{background-image: url("@/static/images/my/list-icon4.png");}
-		.about-icon{background-image: url("@/static/images/my/list-icon5.png");}
-		.zhuxiao-icon{background-image: url("@/static/images/my/list-icon6.png");}
-		.duihuanma-icon{background-image: url("@/static/images/my/list-icon8.png");}
-		.yszc-icon{background-image: url("@/static/images/my/list-icon7.png");}
-		.cpsc-icon{background-image: url("@/static/images/my/list-icon9.png");}
-		.sxtk-icon{background-image: url("@/static/images/my/list-icon10.png");}
-		.kfdh-icon{background-image: url("@/static/images/my/list-icon11.svg");}
+		width:690rpx;margin: 16rpx auto;display: flex;padding: 16rpx 0;
+		background-color: rgba(255, 255, 255, 0.6);border-radius: 8rpx;
+		.list-item{color: #333;width: 25%;text-align: center;font-size: 28rpx;}
+		.list-icon{
+			width: 87rpx;height: 77rpx;display: block;margin: 0 auto;
+			@include ezy-no-repeat-cover;
+			}
+		.cpsc-icon{background-image: url("@/static/images/my/list-icon1.png");}
+		.sxtk-icon{background-image: url("@/static/images/my/list-icon2.png");}
+		.error-icon{background-image: url("@/static/images/my/list-icon3.png");}
+		.xxjl-icon{background-image: url("@/static/images/my/list-icon4.png");}
+		.order-icon{background-image: url("@/static/images/my/list-icon5.png");}
+		.duihuanma-icon{background-image: url("@/static/images/my/list-icon6.png");}
+		.kfdh-icon{background-image: url("@/static/images/my/list-icon7.png");}
+		.yysz-icon{background-image: url("@/static/images/my/list-icon8.png");}
+		.zhuxiao-icon{background-image: url("@/static/images/my/list-icon9.png");}
+		.login-out-icon{background-image: url("@/static/images/my/list-icon10.png");}
 	}
 	
 	.kefu-dialog{
 		.not-confirm-btn{display: none;}
 		.confirm-btn{margin: 24rpx auto;}
 	}
-	@media (max-height: 736px) {
-		.my-head-box{padding: 46rpx 24rpx 16rpx;}
-		.my-list-box{
-			margin: 6rpx auto 260rpx;
-			.list-row{padding: 20rpx;}
-		}
-	}
-	@media (max-height: 600px) {
-		.my-head-box{padding: 42rpx 24rpx 24rpx;}
-		.my-list-box{
-			margin: 12rpx auto 240rpx;
-			.list-row{padding: 16rpx;font-size: 30rpx;}
-			.list-row::after{right: 16rpx;}
-		}
+	@media (max-height: 700px) {
+		min-height: 1400rpx;
 	}
 }
 .ezy-my-page::before{

+ 70 - 48
pages/my/index.vue

@@ -18,66 +18,72 @@
 				<img :src="item.addCover" class="hyqy-box-img" />
 			</swiper-item>
 		</swiper>
+		<!-- 
+		<view class="list-row" @click="telClick">
+			<icon class="list-icon tel-icon"></icon>
+			<text>手机号码</text>
+		</view> 
+		<view class="list-row" @click="aboutClick">
+			<icon class="list-icon about-icon"></icon>
+			<text>关于我们</text>
+		</view>
+		<view v-if="loginFlag" class="list-row" @click="xxscClick">
+			<icon class="list-icon sxtk-icon"></icon>
+			<text>学习时长</text>
+		</view>
+		<view v-if="loginFlag" class="list-row" @click="yinsizhengce">
+			<icon class="list-icon yszc-icon"></icon>
+			<text>隐私政策</text>
+		</view>
+		-->
 		<view class="my-list-box">
-			<view class="list-row" @click="telClick">
-				<icon class="list-icon tel-icon"></icon>
-				<text>手机号码</text>
+			<view class="list-item" @click="xxjlClick">
+				<icon class="list-icon xxjl-icon"></icon>
+				<text>学习记录</text>
 			</view>
-			<view class="list-row" @click="checkWrong">
+			<view class="list-item" @click="checkWrong">
 				<icon class="list-icon error-icon"></icon>
 				<text>我的错题</text>
 			</view>
-			<view v-if="loginFlag" class="list-row" @click="orderClick">
-				<icon class="list-icon order-icon"></icon>
-				<text>我的订单</text>
-			</view>
-			<view class="list-row" @click="aboutClick">
-				<icon class="list-icon about-icon"></icon>
-				<text>关于我们</text>
-			</view>
-			<view class="list-row" @click="cpscClick">
-				<icon class="list-icon cpsc-icon"></icon>
-				<text>产品商城</text>
-			</view>
-			<view v-if="loginFlag" class="list-row" @click="sxtkClick">
+			<view class="list-item" @click="sxtkClick">
 				<icon class="list-icon sxtk-icon"></icon>
 				<text>数学题库</text>
 			</view>
-			<view v-if="loginFlag" class="list-row" @click="xxjlClick">
-				<icon class="list-icon sxtk-icon"></icon>
-				<text>学习记录</text>
-			</view>
-			<view v-if="loginFlag" class="list-row" @click="xxscClick">
-				<icon class="list-icon sxtk-icon"></icon>
-				<text>学习时长</text>
-			</view>
-			<view v-if="appleCode=='true'&&currentPlatform=='ios'" class="list-row" @click="duihuamaDuihuan">
+			<view v-if="appleCode=='true'&&currentPlatform=='ios'" class="list-item" @click="duihuamaDuihuan">
 				<icon class="list-icon duihuanma-icon"></icon>
 				<text>兑换码</text>
 			</view>
-			<view v-if="currentPlatform=='android'" class="list-row" @click="duihuamaDuihuan">
+			<view v-if="currentPlatform=='android'" class="list-item" @click="duihuamaDuihuan">
 				<icon class="list-icon duihuanma-icon"></icon>
 				<text>兑换码</text>
 			</view>
-			<view v-if="loginFlag" class="list-row" @click="yonghuzhuxiao">
-				<icon class="list-icon zhuxiao-icon"></icon>
-				<text>用户注销</text>
+		</view>
+		<view class="my-list-box">
+			<view class="list-item" @click="cpscClick">
+				<icon class="list-icon cpsc-icon"></icon>
+				<text>产品商城</text>
 			</view>
-			<view v-if="loginFlag" class="list-row" @click="yinsizhengce">
-				<icon class="list-icon yszc-icon"></icon>
-				<text>隐私政策</text>
+			<view class="list-item" @click="orderClick">
+				<icon class="list-icon order-icon"></icon>
+				<text>我的订单</text>
 			</view>
-			<view class="list-row" @click="kefudianhua">
+			<view class="list-item" @click="kefudianhua">
 				<icon class="list-icon kfdh-icon"></icon>
-				<text>客服与投诉</text>
+				<text>客服电话</text>
 			</view>
-			<view class="list-row" @click="exitLogin">
-				<icon class="list-icon login-out-icon"></icon>
-				<text>退出登录</text>
+			<view class="list-item" @click="yingyongshezhi">
+				<icon class="list-icon yysz-icon"></icon>
+				<text>应用设置</text>
+			</view>
+		</view>
+		<view class="my-list-box">
+			<view class="list-item" @click="yonghuzhuxiao">
+				<icon class="list-icon zhuxiao-icon"></icon>
+				<text>用户注销</text>
 			</view>
-			<view class="list-row" @click="yingyongshezhi">
+			<view class="list-item" @click="exitLogin">
 				<icon class="list-icon login-out-icon"></icon>
-				<text>应用设置</text>
+				<text>退出登录</text>
 			</view>
 		</view>
 		<CustomTabBar :levelId="levelId" :currentTabNumber="3" :typeId="typeId" :subjectId="subjectId"
@@ -219,11 +225,19 @@
 	}
 
 	function yonghuzhuxiao() {
-		zhuxiaoDialogRef.value.handleShow();
+		if (loginFlag.value) {
+			zhuxiaoDialogRef.value.handleShow();
+		} else {
+			youkeDialogRef.value.handleShow();
+		}
 	}
 
 	function duihuamaDuihuan() {
-		duihuanmaDialogRef.value.handleShow();
+		if (loginFlag.value) {
+			duihuanmaDialogRef.value.handleShow();
+		} else {
+			youkeDialogRef.value.handleShow();
+		}
 	}
 
 	function duihuanmaBtn(data) {
@@ -322,15 +336,23 @@
 
 
 	function sxtkClick() {
-		uni.redirectTo({
-			url: '/pages/my/sxtkPage'
-		});
+		if (loginFlag.value) {
+			uni.redirectTo({
+				url: '/pages/my/sxtkPage'
+			});
+		} else {
+			youkeDialogRef.value.handleShow();
+		}
 	}
 
 	function xxjlClick() {
-		uni.redirectTo({
-			url: '/pages/my/xuexiJilu'
-		});
+		if (loginFlag.value) {
+			uni.redirectTo({
+				url: '/pages/my/xuexiJilu'
+			});
+		} else {
+			youkeDialogRef.value.handleShow();
+		}
 	}
 
 	function xxscClick() {

BIN
static/images/my/list-icon1.png


BIN
static/images/my/list-icon10.png


Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
static/images/my/list-icon11.svg


BIN
static/images/my/list-icon2.png


BIN
static/images/my/list-icon3.png


BIN
static/images/my/list-icon4.png


BIN
static/images/my/list-icon5.png


BIN
static/images/my/list-icon6.png


BIN
static/images/my/list-icon7.png


BIN
static/images/my/list-icon8.png


BIN
static/images/my/list-icon9.png


BIN
static/images/my/sz-icon1.png


BIN
static/images/my/sz-icon2.png


Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor