Jelajahi Sumber

得分页面样式开发

tanxue 7 bulan lalu
induk
melakukan
016ab4b735

+ 21 - 0
common/styles/global/pages.scss

@@ -271,6 +271,27 @@
 	}
 }
 
+// 得分页
+.exam-score-dialog{
+	width: 750rpx;height: 1250rpx;margin-bottom: 24%;position: relative;
+	background-image: url("@/static/images/exam/score-bj.png");@include ezy-no-repeat-cover;
+	.score-content-box{
+		position: absolute;top: 746rpx;left: 200rpx;word-spacing: 18rpx;
+		font-size: 38rpx;font-weight: 800; color: #000;
+		-webkit-text-stroke: 0.6rpx #fff;text-stroke: 0.6rpx #fff;
+		.text-red{color: #ff6500;margin: 0 8rpx;}
+		.text-score{
+			width: 160rpx;font-size: 82rpx;weight: 800;color: #ff6701;
+			margin: 110rpx 0 0 160rpx;text-align: center;}
+	}
+	.ckst-btn,.jxxx-btn{width: 115rpx;height: 135rpx;@include ezy-no-repeat-cover;margin: 0 36rpx;}
+	.score-btn-box{position: absolute;bottom: 0;display: flex;left: 50%;transform: translateX(-50%);}
+	.ckst-btn{background-image: url("@/static/images/exam/ckst-btn.png");}
+	.jxxx-btn{background-image: url("@/static/images/exam/jxxx-btn.png");}
+	@media (max-height: 700px) {zoom: 0.9;}
+	@media (max-height: 600px) {margin-bottom: 40%;}
+}
+
 	// height:$titleBar-tabBar-page;
 .lli-develop-expect-page{
 	display: flex;flex-direction: column;justify-content: space-between;align-items: center;

+ 12 - 7
components/points/uni-points.vue

@@ -1,11 +1,16 @@
 <template>
-	<uni-popup ref="popupRef" :mask-background-color="popup_background_color">
-		答对: {{data.right}}题,
-		答错:{{data.wrong}}题
-		已成功获得 {{data.jifen}}积分
-
-		<button @click="checkAnswer">查看试题</button>
-		<button @click="goStudyContinue">继续学习</button>
+	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+		<view class="exam-score-dialog">
+			<view class="score-content-box">
+				<view>答对:<text class="text-red">{{data.right}}</text>题  答错:<text class="text-red">{{data.wrong}}</text>题</view>
+				<view class="text-score">{{data.jifen}}</view>
+			</view>
+			<view class="score-btn-box">
+				<view @click="checkAnswer" class="ckst-btn"></view>
+				<view @click="goStudyContinue" class="jxxx-btn"></view>
+			</view>
+		</view>
 	</uni-popup>
 </template>
 

TEMPAT SAMPAH
static/images/exam/ckst-btn.png


TEMPAT SAMPAH
static/images/exam/jxxx-btn.png


TEMPAT SAMPAH
static/images/exam/score-bj.png