登录点赞页面

pages/index.vue

 <template>
   <div class="container">
     <Header
+      v-if="userMobile"
 			:token="token"
 			:is-scroll="isScroll"
 			:share-title1="shareTitle1"
@@ -120,7 +121,8 @@ export default {
     },
     // 查看个人明细
     selfInfo() {
-
+      // this.$router.push({path: "/perdetails",query: {}});
+      this.$router.push({path: "/login-point",query: {}});
     },
     // 活动任务
 		activityTaskJump(data) {

pages/login-point/index.vue

+<template>
+    <div class="point-container">
+        <div class="info-text">
+            <img src="../../static/images/task-four.png" />
+            <p class="info-name">某某邀请您助力 为他点赞</p>
+            <p class="info-award">做任务瓜分500万云鹊豆</p>
+        </div>
+        <div class="form-info">
+            <div class="field-wrap">
+                <label>联系方式</label>
+                <input v-model="mobilePhone" type="tel" maxlength="11" placeholder="请输入手机号">
+            </div>
+            <div class="field-wrap">
+                <label>图形验证码</label>
+                <input v-model="captchaAnswer" type="text" maxlength="6" placeholder="请输入">
+                <div class="cap-box"><img :src="captchaImg" @click="getCaptcha"></div>
+            </div>
+            <div class="field-wrap">
+                <label>短信验证码</label>
+                <input v-model="authCode" type="tel" maxlength="6" placeholder="请输入">
+                <button v-if="notSend" @click="sendSms">{{btnMsg}}</button>
+                <van-count-down v-if="!notSend" :time="time" @finish="finishCount" :format="'ss' + 's'" />
+            </div>
+            <button class="btn-post" @click="getCourse">登录点赞 助力好友</button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            notSend: true,
+            mobilePhone: '',
+            captchaAnswer: '', // 输入的图形验证码
+            captchaImg: '', // 图形验证码图片字段
+            authCode: '', // 短信验证码
+            btnMsg: '点击获取',
+        }
+    },
+    methods: {
+        // 点击刷新验证码
+        getCaptcha(){
+            
+        },
+        // 发送获取短信验证码
+        sendSms(){
+            
+        },
+        // 倒计时结束
+        finishCount(){
+            
+        },
+        getCourse() {
+
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.point-container {
+    width: 100%;
+    height: 100vh;
+    background-image:url('../../static/images/background.png');
+    background-size: 100% 100%;
+    .info-text {
+        padding: 30px 0;
+        text-align: center;
+        img {
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+        }
+        .info-name {
+            padding: 14px 0 8px;
+            font-size: 20px;
+            font-weight: 700;
+            color: #fff;
+            text-shadow:0px 2px 10px rgba(222,77,16,1);
+        }
+        .info-award {
+            font-size: 13px;
+            color:#fff;
+            text-shadow:0px 2px 10px rgba(231,93,48,1);
+        }
+    }
+    .form-info {
+        padding: 15px;
+        margin: 0 15px;
+        height: 250px;
+        background: #fff;
+        border-radius: 6px;
+        box-sizing: border-box;
+        .field-wrap{
+            display: flex;
+            justify-content: flex-start;
+            width: 315px;
+            height: 45px;
+            line-height: 45px;
+            padding: 0 20px;
+            box-sizing: border-box;
+            background:rgba(248,249,250,1);
+            border-radius:22.5px;
+            margin-bottom: 10px;
+            position: relative;
+            .cap-box{
+                width: 90px;
+                height: 35px;
+                top: 5px;
+                right: 5px;
+                position: absolute;
+                background: #D8D8D8;
+                border-radius: 23px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                    border-radius:22.5px;
+                }
+            }
+            button  {
+                width:60px;
+                height:40px;
+                top: 2.5px;
+                right: 20px;
+                position: absolute;
+                font-size:14px;
+                color:rgba(151,152,153,1);
+                line-height:40px;
+                background: none;
+                border: none;
+            }
+            label{
+                margin-top: 2.5px;
+                font-size:14px;
+                font-weight:700;
+                display: block;
+                width: 112px;
+                height: 40px;
+                line-height: 40px;
+                color:rgba(55,56,57,1);
+            }
+            input{
+                margin-top: 2.5px;
+                font-size:14px;
+                width: 130px;
+                height: 40px;
+                line-height:40px;
+                background: none; 
+                border: none;
+            }
+            ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+                color:rgba(199,200,201,1);
+                height: 40px;
+                line-height:40px;
+            }
+            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+                color:rgba(199,200,201,1);
+                height: 40px;
+                line-height:40px;
+            }
+            ::-moz-placeholder { /* Mozilla Firefox 19+ */
+                color:rgba(199,200,201,1);
+                height: 40px;
+                line-height:40px;
+            }
+            :-ms-input-placeholder { /* Internet Explorer 10-11 */
+                color:rgba(199,200,201,1);
+                height: 40px;
+                line-height:40px;
+            }
+        }
+        .btn-post{
+            width: 315px;
+            height: 45px;
+            margin-top: 10px;
+            background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
+            border-radius:22.5px;
+            font-size:15px;
+            font-weight:700;
+            color:rgba(255,255,255,1);
+            line-height:15px;
+            border: none;
+        }
+    }
+}
+</style>
\ No newline at end of file

pages/perdetails.vue → pages/perdetails/index.vue

@@ -7,9 +7,9 @@
 		/>
     <section class="personal-details-wrapper">
       <article class="user">
-        <img class="user-img" src="../assets/user-header.png" alt="">
+        <img class="user-img" src="../../assets/user-header.png" alt="">
         <div class="profile">
-          <img src="../assets/user-header.png" alt="">
+          <img src="../../assets/user-header.png" alt="">
           <div class="desc">
             <span class="score">22345</span>
             <span class="text">我的勤奋分</span>
@@ -24,7 +24,7 @@
 <script>
 import DetailList from '@/components/bussiness/detail-list';
 import DetailBtn from '@/components/bussiness/detail-btn';
-import Header from '../components/header';
+import Header from '../../components/header';
 export default {
   components: {
     Header,