Procházet zdrojové kódy

兑换码样式修改

tanxue před 1 dnem
rodič
revize
43d2a112c5
2 změnil soubory, kde provedl 55 přidání a 15 odebrání
  1. 36 2
      common/styles/global/pages.scss
  2. 19 13
      pages/chanpinMy/duihuanma.vue

+ 36 - 2
common/styles/global/pages.scss

@@ -229,8 +229,7 @@
 		width: 100%;height: 100rpx;border: 1rpx solid #dfdfdf;border-radius: 16rpx;
 		display: flex;align-items: center;
 		.phone-input {font-size: 38rpx;padding: 0 30rpx;box-sizing: border-box;color: #555;flex: 1;overflow: hidden;}
-		.uni-input-placeholder {font-size: 34rpx;color: #acacae;
-		}
+		.uni-input-placeholder {font-size: 34rpx;color: #acacae;}
 		.close-btn{width: 42rpx;height: 42rpx;margin-right: 30rpx;@include ezy-no-repeat-cover;
 		background-image: url("@/static/images/login/login-close-icon.png");flex-shrink: 0;}
 	}
@@ -1077,3 +1076,38 @@
 }
 
 
+// 兑换码
+.ezy-dhm-page{
+	width: 100%;height: 100vh;display: flex;flex-direction: column;
+	.dhm-body{
+		width: 95%;margin: 20rpx auto 0;box-sizing: border-box;padding: 36rpx;
+		.dhm-head-box{
+			width: 100%;padding: 12rpx 0 56rpx;box-sizing: border-box;
+			display: flex;align-items: center;color: #333;line-height: 1.6;
+			.head-img-box{width: 126rpx;height: 126rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;border-radius: 50%;}
+			.head-content-box{font-size: 32rpx;}
+			
+		}
+		.duihuan-input-box{
+			width: 100%;height: 100rpx;border: 1rpx solid #dfdfdf;border-radius: 16rpx;
+			display: flex;align-items: center;
+			.uni-input-placeholder {font-size: 34rpx;color: #acacae;}
+			.duihuan-prefix-icon {
+			  width: 56rpx;height: 56rpx;margin:0 32rpx 0 16rpx;@include ezy-no-repeat-cover;
+			  background-image: url("@/static/images/my/two-code.png");position: relative;
+			  font-weight: normal;display: flex;align-items: center;justify-content: space-between;flex-shrink: 0;
+			}
+			.duihuan-prefix-icon::after{
+				content: '';width: 1rpx;height: 56rpx;display: inline-block;background-color: #dfdfdf;
+				position: absolute;bottom: 0;right: -16rpx;
+				}
+		}
+		
+		.duihuan-confirm-btn{
+			width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx;
+			margin-top: 48rpx;@include ezy-no-repeat-cover;font-weight: bold;
+			background-image: url("@/static/images/login/login-btn-bj.png");color:#fff;
+		}
+	}
+}
+

+ 19 - 13
pages/chanpinMy/duihuanma.vue

@@ -1,20 +1,25 @@
 <template>
-	<view class="icon-title-navBar-box1">
-		<view @click="handleBack" class="nav-bar-icon"></view>
-		<text class="nav-bar-title">使用兑换码</text>
-	</view>
-	<view>
-		<view class="tip-content-box">
-			<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
-			<view>{{ myInfoData.nickName }}</view>
-			<view>{{ myInfoData.userName }}</view>
-			<input class="duihuan-input" type="text" focus v-model="duihuamaValue" placeholder="请输入兑换码" />
-			<view class="tip-btn-box">
-				<view class="confirm-btn" @click="confirmBtn">兑换码</view>
+	<view class="ezy-dhm-page">
+		<view class="icon-title-navBar-box">
+			<view @click="handleBack" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">使用兑换码</text>
+		</view>
+		<view class="ezy-page-body dhm-body">
+			<view class="dhm-head-box">
+				<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
+				<view class="head-content-box">
+					<view>{{ myInfoData.nickName }}</view>
+					<view>{{ myInfoData.userName }}</view>
+				</view>
 			</view>
+			<view class="duihuan-input-box">
+				<icon class="duihuan-prefix-icon">+86</icon>
+				<input class="duihuan-input" type="text" focus v-model="duihuamaValue" placeholder="请输入兑换码" />
+			</view>
+			<ezyActiveVue class="ezy-btn-active duihuan-confirm-btn" @aclick="confirmBtn">确定兑换
+			</ezyActiveVue>
 		</view>
 	</view>
-
 	<!-- 失败 -->
 	<duihuanError ref="dhErrRef"></duihuanError>
 	<!-- 成功 -->
@@ -25,6 +30,7 @@
 	import {
 		ref,reactive
 	} from 'vue';
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue"
 	import duihuanError from "./components/duihuanma/duihuanError";
 	import duihuanSuccess from "./components/duihuanma/duihuanSuccess";
 	import {