Browse Source

我的页面样式改版

tanxue 1 month ago
parent
commit
6f72a1c564

+ 9 - 2
common/styles/global/components.scss

@@ -261,9 +261,10 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	  background-image: url("@/static/images/common/dialog-login-img.png");
 	 }
 	.tip-btn-box{
-		width: 100%;display: flex;justify-content: space-between;
+		width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0;
 		.not-confirm-btn,.confirm-btn{
-			width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0;
+			width: 248rpx;height: 92rpx;line-height: 92rpx;
+			color: #fff;@include ezy-no-repeat-cover;
 		}
 		.not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
 		.confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
@@ -274,6 +275,12 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
 		background-image: url("@/static/images/common/tip-small-bj.png");
 	}
+	.tip-btn-box{
+		margin: 0;
+		.not-confirm-btn,.confirm-btn{
+			width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0;
+		}
+	}
 }
 .tip-middle-dialog{
 	.tip-content-box{

+ 18 - 20
common/styles/global/pages.scss

@@ -108,7 +108,7 @@
 
 // 用户协议弹窗
 .agree-sections-dialog{
-	width: 700rpx;height: 490rpx;padding: 90rpx 0 42rpx;box-sizing: border-box;text-align: center;margin-bottom: 26%;
+	width: 700rpx;height: 490rpx;padding: 80rpx 0 42rpx;box-sizing: border-box;text-align: center;margin-bottom: 26%;
 	background-image: url("@/static/images/login/agree-dialog-bg.png");@include ezy-no-repeat-cover;
 	.agree-title{color:#111;font-size: 40rpx;}
 	.agree-tip{color:#666;font-size: 30rpx;margin-top: 46rpx;}
@@ -1073,48 +1073,49 @@
 
 // 绑定手机号弹窗
 .my-tel-dialog{
-	background-color: rgba(255, 255, 255, 0.6);
+	background-color: rgba(0,0,0, 0.76);
 	position: fixed;display: flex;flex-direction: column;top: 0;left: 0;bottom:0;right: 0;
-	justify-content: center;align-items: center;
+	justify-content: center;align-items: center;z-index: 3;
 	.tel-close{width: 50rpx;height: 50rpx;@include ezy-no-repeat-cover;position: absolute;right: 30rpx;top: 30rpx;
 	background-image: url("@/static/images/common/close-icon.png");}
 	.my-tel-content{
-		width: 625rpx;height: 740rpx;box-sizing: border-box;padding: 100rpx 62rpx;
+		width: 625rpx;height: 740rpx;box-sizing: border-box;padding: 100rpx 42rpx;
 		background-image: url("@/static/images/my/my-tel-bj.png");@include ezy-no-repeat-cover;position: relative;
 
 	}
-	.my-tel-title{font-size: 40rpx;color: #333;text-align:center;margin-bottom: 24rpx;}
+	.my-tel-title{font-size: 40rpx;color: #333;text-align:center;margin-bottom: 32rpx;}
 	.tel-row{border-bottom: 1px dashed #70cbf4;}
-	.yzm-row{padding-top: 32rpx;}
+	.yzm-row{padding-top: 36rpx;}
 	/***** 输入手机号页面*****/
 	.my-input-box{
-		width:500rpx;height: 88rpx;box-sizing: border-box;
-		display: flex;align-items: center;
-		background-image: url("@/static/images/my/my-tel-input.png");@include ezy-no-repeat-cover;
-		.my-input {font-size: 32rpx;padding: 0 22rpx;box-sizing: border-box;color: #fff;flex: 1;}
-		.uni-input-placeholder {font-size: 25rpx;color: #ffffffd9;}
+		width:540rpx;height: 88rpx;line-height: 88rpx;box-sizing: border-box;
+		display: flex;align-items: center;border: 1rpx solid #e3e3e3;border-radius: 16rpx;
+		@include ezy-no-repeat-cover;
+		.my-input {font-size: 32rpx;padding: 0 22rpx;box-sizing: border-box;color: #666;flex: 1;}
+		.uni-input-placeholder {font-size: 32rpx;color: #ccc;}
 		.close-btn{width: 36rpx;height: 36rpx;margin-right: 30rpx;@include ezy-no-repeat-cover;
 		background-image: url("@/static/images/login/login-close-icon.png");flex-shrink: 0;}
 	}
 
-	.get-yzm-btn{color: #3b73bf;margin:24rpx 0 36rpx;font-size: 25rpx;}
+	.get-yzm-btn{color: #3b73bf;margin:46rpx 0 32rpx;font-size: 32rpx;}
 	.get-yzm-disabled{color: #666;}
 
 	.yzm-tip{color: #3b73bf;margin:0 0 24rpx;font-size: 25rpx;}
 
 	.my-bind-btn{
-		width:500rpx;height: 88rpx;text-align: center;line-height: 88rpx;color: #fff;margin-top: 24rpx;
+		width:540rpx;height: 92rpx;text-align: center;line-height: 92rpx;color: #fff;margin-top: 36rpx;
 		background-image: url("@/static/images/my/my-tel-btn.png");@include ezy-no-repeat-cover;
 	}
 }
 
 // 兑换码
 .duihuan-dialog{
+	.tip-content-box{padding: 42rpx 42rpx;}
 	.duihuan-input{
-		width:465rpx;height: 82rpx;box-sizing: border-box;padding: 0 18rpx;
-		display: flex;align-items: center;margin: 0 auto;
-		background-image: url("@/static/images/my/my-tel-input.png");@include ezy-no-repeat-cover;
-		.uni-input-placeholder {font-size: 25rpx;color: #ffffffd9;}
+		width:540rpx;height: 88rpx;line-height: 88rpx;box-sizing: border-box;
+		display: flex;align-items: center;margin: 0 auto;color: #666;
+		border: 1rpx solid #e3e3e3;border-radius: 16rpx;font-size: 32rpx;
+		.uni-input-placeholder {font-size: 32rpx;color: #ccc;}
 	}
 }
 
@@ -1853,9 +1854,6 @@
 			position: absolute;bottom: 12rpx;right: 12rpx;
 			
 		}
-		.item-play-btn:active{
-			transform: rotate(180deg);
-		}
 		.item-play-btn::before{
 			content: '';width: 46rpx;height: 48rpx;display: block;
 			background-image: url("@/static/images/xuanke/xbb-item-jt.png");@include ezy-no-repeat-cover;

+ 3 - 3
components/dialog/nichengDialog.vue

@@ -1,14 +1,14 @@
 <!-- 小弹窗 一行文字 -->
 <template>
 	<uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 mask-background-color="rgba(0,0,0, 0.76);">
 	 <view class="ezy-tip-dialog tip-small-dialog duihuan-dialog">
 		<view class="tip-content-box">
 			<view class="tip-title">{{title}}</view>
 				<input class="duihuan-input" type="text" focus v-model="nichengValue" placeholder="请输入昵称" />
 				<view class="tip-btn-box">
-					<view class="not-confirm-btn" @click="handleClose"></view>
-					<view class="confirm-btn" @click="confirmBtn"></view>
+					<view class="not-confirm-btn" @click="handleClose">取消</view>
+					<view class="confirm-btn" @click="confirmBtn">确认</view>
 				</view>
 		</view>
 	 </view>

+ 1 - 1
components/dialog/tipBigDialog.vue

@@ -1,7 +1,7 @@
 <!-- 大弹窗 三~四行文字 -->
 <template>
  <uni-popup ref="tipBigPopup" :animation="false" :is-mask-click="false"
-  mask-background-color="rgba(255, 255, 255, 0.6);">
+  mask-background-color="rgba(0,0,0, 0.76);">
   <view class="ezy-tip-dialog tip-big-dialog">
   <view class="tip-content-box">
    <view class="tip-title">{{title}}</view>

+ 1 - 1
components/dialog/tipDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<uni-popup ref="tipPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(0, 0, 0, 0.4)">
+	 mask-background-color="rgba(0,0,0, 0.76);">
 	 <view class="phone-tip-dialog">
 			<view class="common-body-box">
 				<view class="tip-title">{{title}}</view>

+ 3 - 3
components/dialog/tipMiddleDialog.vue

@@ -1,14 +1,14 @@
 <!-- 中弹窗 二行文字 -->
 <template>
 	<uni-popup ref="tipMiddlePopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 mask-background-color="rgba(0,0,0, 0.76);">
 	 <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 class="not-confirm-btn" @click="handleClose">取消</view>
+				<view class="confirm-btn" @click="confirmBtn">确认</view>
 			</view>
 		</view>
 	 </view>

+ 3 - 3
components/dialog/tipSmallDialog.vue

@@ -1,14 +1,14 @@
 <!-- 小弹窗 一行文字 -->
 <template>
 	<uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 mask-background-color="rgba(0,0,0, 0.76);">
 	 <view class="ezy-tip-dialog tip-small-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 class="not-confirm-btn" @click="handleClose">取消</view>
+				<view class="confirm-btn" @click="confirmBtn">确认</view>
 			</view>
 		</view>
 	 </view>

BIN
static/images/common/close-icon.png


BIN
static/images/common/ezy-common-bottom-bj.png


BIN
static/images/common/ezy-common-center-bj.png


BIN
static/images/common/ezy-common-top-bj.png


BIN
static/images/common/tip-big-bj.png


BIN
static/images/common/tip-cancel-btn.png


BIN
static/images/common/tip-confirm-btn.png


BIN
static/images/common/tip-middle-bj.png


BIN
static/images/common/tip-small-bj.png


BIN
static/images/my/my-page-bj.png


BIN
static/images/my/my-tel-bj.png


BIN
static/images/my/my-tel-btn.png


BIN
static/images/my/tk-dialog-bj.png