模考报名界面修改

pages5/mockExam/examApply.vue

@@ -1,10 +1,11 @@
 <template>
 <!-- 模考报名页面 -->
     <view class="exam_apply">
-        <image mode="widthFix" class="mock_bg" src="/pages5/static/mock_bg.png"></image>
-		<u-navbar :is-back="false" title="模考报名" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
-		</u-navbar>
-        <!-- <nav-bar title="模考报名"></nav-bar> -->
+        <!-- background="{ background: '#498AFE' }" -->
+        <image class="mock_bg" src="../static/mock_bg.png"></image>
+		<!-- <u-navbar :is-back="false" title="模考报名" :border-bottom="false"  title-color="#fff" back-icon-color="#ffffff" background="{ background: '#498AFE' }">
+		</u-navbar> -->
+        <nav-bar title="模考报名" class="navbar"></nav-bar>
         <u-line color="#D6D6DB" />
         <view class="mains">
             <u-form :model="examform" ref="uForm" :rules="rules" label-width='74'>
@@ -238,10 +239,16 @@ page {
     .mock_bg {
         width: 100%;
         height: 760rpx;
+        z-index: -999;
+        top: 0;
+    }
+    .navbar {
+        background-color: #498AFE;
     }
     .mains {
         padding: 16rpx;
-        background-color: #F7F7F9;
+        position: relative;
+        top: -450rpx;
     }
     .items {
         padding: 40rpx 0rpx 40rpx 24rpx;

pages5/mockExam/registrationSuccess.vue

@@ -2,12 +2,27 @@
     <view class="registration_success">
         <nav-bar title="模考报名成功"></nav-bar>
         <view class="exam_success">
-            <image class="imgs" src="../static/icon_success.png"></image>
-            <text class="success_word">报名成功</text>
+            <image class="imgs" src="../static/ping_bg.png"></image>
+            <view class="activity_time">
+                活动时间：{{ startTime | formate('yyyy年mm月dd日')}}-{{ endTime | formate('yyyy年mm月dd日')}}
+            </view>
         </view>
         <view class="exam_times">
-            <view class="time_title">模考大练兵 比拼赢大奖</view>
-            <view class="time_range">活动时间：{{ startTime | formate('yyyy年mm月dd日')}}-{{ endTime | formate('yyyy年mm月dd日')}}</view>
+            <view class="start_time all_time">
+                <view class="time_left">
+                    <text class="numbers">{{ sDay > 1 ? parseInt(sDay) : 0 }}</text>
+                    <text class="days">天</text>
+                </view>
+                <view class="words">距模考开始时间</view>
+            </view>
+            <view class="lines"></view>
+            <view class="end_time all_time">
+                <view class="time_left">
+                    <text class="numbers">{{ sDay > 1 ? parseInt(eDay) : 0 }}</text>
+                    <text class="days">天</text>
+                </view>
+                <view class="words">距模考结束时间</view>
+            </view>
         </view>
         <view class="mains">
             <view class="gives">
@@ -43,7 +58,7 @@
                 </view>
             </view>
         </view>
-        <view class="distance_time">
+        <!-- <view class="distance_time">
             <view class="time_item">
                 距模考开始时间还有：
                 <u-count-down v-if="sDay > 1" :timestamp="lastStartDay" :show-days="true" separator="zh" 
@@ -61,9 +76,14 @@
                 <text v-else>0天</text>
             </view>
             <view class="time_item">活动详情请咨询业务人员或致电020-87085982/87085983</view>
+        </view> -->
+        <view class="activity_phone">
+            <view class="titles">活动咨询电话</view>
+            <view class="phone_num">020-87085982 / 87085983</view>
         </view>
         <view class="exam_entry">
-            <text class="entrys">考试入口：</text>请进入祥粤云学堂小程序或者网站， 在个人中心找到模考功能进行考试。
+            参加本次活动，请添加此次活动专属微信号
+            <!-- <text class="entrys">考试入口：</text>请进入祥粤云学堂小程序或者网站， 在个人中心找到模考功能进行考试。 -->
         </view>
     </view>     
 </template>
@@ -92,9 +112,6 @@ export default {
         this.eDay = this.lastEndDay/24/60/60
         console.log('lastStartDay', this.lastStartDay, this.lastEndDay, this.sDay, this.eDay)
     },
-    onShow() {
-        
-    },
 }
 </script>
 
@@ -112,25 +129,66 @@ page {
     align-items: center;
 }
 .exam_success {
-    margin-top: 68rpx;
+    width: 100%;
+    height: 360rpx;
+    // margin-top: 68rpx;
     display: flex;
     align-items: center;
+    position: relative;
+    top: 0;
+    left: 0;
     .imgs {
-        width: 56rpx;
-        height: 56rpx;
+        width: 100%;
+        height: 360rpx;
+        // width: 56rpx;
+        // height: 56rpx;
     }
-    .success_word {
-        font-size: 48rpx;
-        font-weight: 800;
-        color: #01D38A;
-        margin-left: 16rpx;
+    .activity_time {
+        width: 662rpx;
+        height: 72rpx;
+        line-height: 72rpx;
+        text-align: center;
+        background: rgba(255,255,255,0.7);
+        border-radius: 16rpx;
+        border: 2rpx solid #FFFFFF;
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #2D5692;
+        position: absolute;
+        bottom: 12rpx;
+        left: 40rpx;
     }
 }
 .exam_times {
-    margin-top: 92rpx;
+    margin-top: 28rpx;
     display: flex;
-    flex-direction: column;
     align-items: center;
+    justify-content: space-between;
+    width: 670rpx;
+    height: 178rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    padding: 0rpx 64rpx;
+    .all_time {
+        .time_left {
+            text-align: center;
+        }
+        .numbers {
+            font-size: 52rpx;
+            font-weight: 800;
+            color: #F67205;
+        }
+        .days {
+            font-size: 28rpx;
+            font-weight: 500;
+            color: #F67205;
+        }
+        .words {
+            font-size: 28rpx;
+            color: #6D7D94;
+            margin-top: 10rpx;
+        }
+    }
     .time_title {
         font-size: 48rpx;
         font-weight: bold;
@@ -142,6 +200,11 @@ page {
         color: #222222;
         margin-top: 12rpx;
     }
+    .lines {
+        width: 2rpx;
+        height: 84rpx;
+        background: #E4E4E4;
+    }
 }
 .mains {
     width: 670rpx;
@@ -294,20 +357,42 @@ page {
         margin-bottom: 24rpx;
     }
 }
-.exam_entry {
-    margin-top: 22rpx;
-    margin-bottom: 100rpx;
-    width: 686rpx;
-    height: 128rpx;
-    background: #3F8DFD;
-    border-radius: 16rpx;
-    padding: 20rpx 50rpx;
-    color: #fff;
-    line-height: 44rpx;
-    .entrys {
+.activity_phone {
+    margin: 40rpx 0rpx 56rpx 0rpx;
+    padding: 32rpx 0rpx 0rpx 44rpx;
+    width: 670rpx;
+    height: 148rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    .titles {
+        font-size: 28rpx;
+        color: #222222;
+        margin-bottom: 12rpx;
+    }
+    .phone_num {
         font-size: 28rpx;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #3F8DFD;
     }
 }
+.exam_entry {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #222222;
+    margin-bottom: 100rpx;
+    // margin-top: 22rpx;
+    // margin-bottom: 100rpx;
+    // width: 686rpx;
+    // height: 128rpx;
+    // background: #3F8DFD;
+    // border-radius: 16rpx;
+    // padding: 20rpx 50rpx;
+    // color: #fff;
+    // line-height: 44rpx;
+    // .entrys {
+    //     font-size: 28rpx;
+    //     font-weight: bold;
+    //     color: #FFFFFF;
+    // }
+}
 </style>