feat:扫码登录页面

pages4/login/pcLogin.vue

@@ -2,16 +2,16 @@
     <view class="pcLogins">
         <u-navbar :is-back="false" title="登录" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
             <view class="slot-wrap">
-                <image  src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
+                <image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
             </view>
         </u-navbar>
         <u-line color="#D6D6DB" />
         <view class="contents">
             <!-- 正文内容 -->
+            <image class="logo" src="/static/me/logo.png" style="width: 360rpx;height: 72rpx;"></image>
             <text>登录后您可在网页端继续浏览课程</text>
             <view class="login_bt" @click="pcLogin()">微信登录</view>
         </view>
-        
     </view>
 </template>
 
@@ -23,7 +23,6 @@ export default {
         }
     },
     onLoad(query) {
-        console.log('扫描参数', query)
         const q = decodeURIComponent(query.q)
         this.scanCode = q.substring(q.length - 6)
         // const time = parseInt(query.scancode_time)
@@ -39,7 +38,6 @@ export default {
 	},
     methods: {
         pcLogin() {
-            console.log('跳转')
             uni.navigateTo({
                 url: '/pages4/login/login?scanCode=' + this.scanCode
             });
@@ -53,12 +51,26 @@ export default {
     width: 100%;
     height: 100%;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .logo {
+        margin: 90rpx 0rpx 250rpx;
+    }
+    >text {
+        font-size: 22rpx;
+        color: #666;
+    }
     .login_bt {
-        width: 180rpx;
-        height: 80rpx;
-        line-height: 80rpx;
+        width: 400rpx;
+        height: 70rpx;
+        line-height: 70rpx;
         text-align: center;
-        background: #ddd;
+        background: #09ba08;
+        color: #fff;
+        font-size: 28rpx;
+        border-radius: 35rpx;
+        margin-top: 20rpx;
     }
 }
 </style>

pages4/login/pcLoginSuccess.vue

@@ -1,25 +1,38 @@
 <template>
-    <view class="pcLogins">
+    <view class="pcLogins" :class="{bgcolor: !hidden}">
         <u-navbar :is-back="false" title="登录成功" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
             <view class="slot-wrap">
-                <image  src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
+                <image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
             </view>
         </u-navbar>
         <u-line color="#D6D6DB" />
         <view class="contents">
-            <!-- 正文内容 -->
-            <text>登录成功，你可以在电脑端学习了</text>
-            <view class="login_bt" @click="toHome()">首页</view>
-            <view>手机学习，充分利用一分一秒</view>
-            <view>手机刷题，随时随地提升分数</view>
+            <view class="success" :class="{hidsuce: !hidden}">
+                <image src="/static/me/lg_success.png"></image>
+                <view class="success_word">登录成功</view>
+                <view class="pc_learn">你可以在电脑端学习了</view>
+            </view>
+            <view class="bg_pic">
+                <image class="poster" src="/static/me/poster.png"></image>
+            </view>
         </view>
-        
+        <view v-if="!hidden" class="toLearn" @click="toHome()"></view>
     </view>
 </template>
 
 <script>
 export default {
     name: 'pcLoginSuccess',
+    data() {
+        return {
+            hidden: true,
+        }
+    },
+    onShow() {
+        setTimeout(() => {
+            this.hidden = false
+        }, 1000)
+    },
     methods: {
         toHome() {
             uni.switchTab({
@@ -28,4 +41,58 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.pcLogins {
+    width: 100%;
+    height: 100vh;
+}
+.bgcolor {
+    background-color: #D2E8FF;
+}
+.success {
+    width: 100%;
+    height: 330rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: all 0.5s;
+    >image {
+        width: 80rpx;
+        height: 80rpx;
+        margin: 58rpx 0rpx 32rpx;
+    }
+    .success_word {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #222222;
+        margin-bottom: 12rpx;
+    }
+    .pc_learn {
+        font-weight: 400;
+        color: #777777;
+        font-size: 28rpx;
+    }
+}
+.hidsuce {
+    height: 0rpx;
+    transition: all 0.5s;
+}
+.bg_pic {
+    width: 100%;
+    height: 1436rpx;
+    .poster {
+        width: 100%;
+        height: 100%;
+    }
+}
+.toLearn {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    width: 60%;
+    height: 50vh;
+    // background: #222222;
+}
+</style>