注册

src/assets/svgs/login_icon_code.svg

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_mima</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="用户注册" transform="translate(-46.000000, -246.000000)" stroke="#3AB200" stroke-width="1.2">
-            <g id="编组-11备份-11" transform="translate(46.000000, 234.000000)">
-                <g id="编组-7" transform="translate(0.000000, 12.000000)">
-                    <path d="M6.2121614,5.48050226 L12,3 L12,3 L17.7878386,5.48050226 C18.5232063,5.79565984 19,6.5187361 19,7.31879232 L19,12 C19,15.6399494 16.8307712,18.9296695 13.4851298,20.3635158 L12,21 L12,21 L10.5148702,20.3635158 C7.16922878,18.9296695 5,15.6399494 5,12 L5,7.31879232 C5,6.5187361 5.47679371,5.79565984 6.2121614,5.48050226 Z" id="矩形"></path>
-                    <polyline id="直线" points="9.21869985 10.9921433 10.7186999 13.2421433 15.2186999 10.2421433"></polyline>
+    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="验证码登录—01" transform="translate(-61.000000, -262.000000)" stroke="#FFFFFF" stroke-width="1.4">
+            <g id="编组-9" transform="translate(45.000000, 195.000000)">
+                <g id="编组-7" transform="translate(16.000000, 67.000000)">
+                    <path d="M4.40886423,4.84667591 L12,2 L12,2 L19.5911358,4.84667591 C20.3717432,5.13940371 20.8888889,5.88564515 20.8888889,6.71933427 L20.8888889,12 C20.8888889,16.010046 18.4014174,19.5994685 14.6466944,21.0074896 L12,22 L12,22 L9.35330563,21.0074896 C5.59858258,19.5994685 3.11111111,16.010046 3.11111111,12 L3.11111111,6.71933427 C3.11111111,5.88564515 3.62825678,5.13940371 4.40886423,4.84667591 Z" id="矩形"></path>
+                    <polyline id="直线" points="8.9096665 10.8801592 10.5763332 13.3801592 15.5763332 10.0468259"></polyline>
                 </g>
             </g>
         </g>

src/assets/svgs/login_icon_mima.svg

@@ -1,14 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_mima</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="用户注册" transform="translate(-46.000000, -374.000000)" stroke="#3AB200" stroke-width="1.2">
-            <g id="编组-11备份-11" transform="translate(46.000000, 362.000000)">
-                <g id="编组-7" transform="translate(0.000000, 12.000000)">
-                    <g id="编组-4" transform="translate(4.500000, 3.000000)">
-                        <path d="M2,8 L13,8 C14.1045695,8 15,8.8954305 15,10 L15,16 C15,17.1045695 14.1045695,18 13,18 L2,18 C0.8954305,18 1.3527075e-16,17.1045695 0,16 L0,10 C-1.3527075e-16,8.8954305 0.8954305,8 2,8 Z" id="矩形"></path>
-                        <line x1="7.5" y1="11.5" x2="7.5" y2="14.5" id="直线"></line>
-                        <path d="M12,3 L12,3.5 C12,5.98528137 9.98528137,8 7.5,8 C5.01471863,8 3,5.98528137 3,3.5 C3,3 3,2.5 3,2 C3,2 3,1.66666667 3,1 L3,0" id="路径" transform="translate(7.500000, 4.000000) scale(1, -1) translate(-7.500000, -4.000000) "></path>
+    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="账号密码登录-01" transform="translate(-61.000000, -262.000000)" stroke="#FFFFFF" stroke-width="1.4">
+            <g id="编组-9" transform="translate(45.000000, 195.000000)">
+                <g id="编组-11备份-11" transform="translate(16.000000, 67.000000)">
+                    <g id="编组-4" transform="translate(3.500000, 2.000000)">
+                        <path d="M2,9.06666667 L15,9.06666667 C16.1045695,9.06666667 17,9.96209717 17,11.0666667 L17,18.4 C17,19.5045695 16.1045695,20.4 15,20.4 L2,20.4 C0.8954305,20.4 8.94280938e-16,19.5045695 0,18.4 L0,11.0666667 C-3.57315355e-16,9.96209717 0.8954305,9.06666667 2,9.06666667 Z" id="矩形"></path>
+                        <line x1="5.1" y1="13.0333333" x2="5.1" y2="16.4333333" id="直线"></line>
+                        <line x1="11.9" y1="13.0333333" x2="11.9" y2="16.4333333" id="直线备份"></line>
+                        <path d="M13.6,3.4 L13.6,3.96666667 C13.6,6.78331889 11.3166522,9.06666667 8.5,9.06666667 C5.68334778,9.06666667 3.4,6.78331889 3.4,3.96666667 C3.4,3.4 3.4,2.83333333 3.4,2.26666667 C3.4,2.26666667 3.4,1.88888889 3.4,1.13333333 L3.4,0" id="路径" transform="translate(8.500000, 4.533333) scale(1, -1) translate(-8.500000, -4.533333) "></path>
                     </g>
                 </g>
             </g>

src/assets/svgs/login_icon_yao qingma.svg

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_yao qingma</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="用户注册" transform="translate(-46.000000, -438.000000)">
-            <g id="编组-11备份-13" transform="translate(46.000000, 426.000000)">
-                <g id="编组-7" transform="translate(0.000000, 12.000000)">
-                    <g id="编组" transform="translate(3.000000, 3.000000)">
-                        <path d="M15.8291457,16.8896797 C15.1959799,16.8896797 14.6532663,16.3772242 14.4723618,16.2918149 L9.3165829,13.3879003 C9.13567837,13.3024911 9.0452261,12.9608541 9.1356784,12.7900356 C9.22613067,12.6192171 9.5879397,12.5338078 9.76884423,12.6192171 L14.9246231,15.6085409 C15.2864322,15.8647687 15.6482412,16.0355872 15.7386935,16.0355872 C15.7386935,16.0355872 15.8291457,15.9501779 15.8291457,15.6939502 C15.919598,14.1565836 17.0954774,2.02846973 17.1859297,1.51601422 C17.1859297,1.3451957 17.0954774,1.0035587 17.0050251,0.918149477 C16.9145729,0.918149477 16.8241206,0.918149477 16.6432161,1.0035587 C15.3768844,1.60142347 2.080402,7.92170816 1.44723617,8.17793594 C1.17587937,8.26334519 0.9045226,8.51957294 0.9045226,8.60498219 C0.9045226,8.69039145 0.994974867,8.86120997 1.44723617,9.11743771 C3.16582913,10.0569395 4.25125627,10.569395 4.25125627,10.569395 C4.4321608,10.6548043 4.52261307,10.911032 4.4321608,11.1672598 C4.34170853,11.3380783 4.07035177,11.4234876 3.79899497,11.3380783 C3.79899497,11.3380783 2.71356783,10.8256228 0.994974867,9.886121 C0.271356767,9.544484 0,9.11743771 0,8.60498219 C0,7.92170816 0.9045226,7.49466191 0.994974867,7.40925268 C1.08542713,7.32384342 14.9246231,0.832740219 16.1005025,0.234875447 C16.7336684,-0.106761552 17.0954774,-0.0213523263 17.3668342,0.149466189 C18,0.491103188 18,1.34519573 18,1.51601422 C18,1.68683273 16.7336683,14.2419929 16.6432161,15.6939502 C16.6432161,16.2918149 16.3718593,16.6334519 16.0100503,16.8042705 C16.0100503,16.8042705 15.919598,16.8896797 15.8291457,16.8896797 Z" id="路径" fill="#3AB200" fill-rule="nonzero"></path>
-                        <polyline id="路径-2" stroke="#3AB200" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" points="17.0050251 0.918149477 6.27327738 12.1679515 6.27327738 18"></polyline>
+    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="用户注册-01" transform="translate(-61.000000, -407.000000)" stroke="#FFFFFF" stroke-width="1.4">
+            <g id="编组-9" transform="translate(45.000000, 195.000000)">
+                <g id="编组-11备份-16" transform="translate(16.000000, 212.000000)">
+                    <g id="编组" transform="translate(2.662666, 2.446072)">
+                        <polyline id="路径-2" stroke-linejoin="round" points="17.2744252 0.530988633 5.20346147 13.1846547 5.20346147 18"></polyline>
+                        <path d="M3.51424038,11.4803669 L0.622484307,10.0361728 C0.066732791,9.75862063 -0.158792364,9.08309455 0.118759773,8.52734304 C0.232049121,8.30050015 0.418660915,8.11859003 0.648320223,8.01112481 L16.2852366,0.106286721 C16.8478882,-0.156996634 17.5174408,0.0856892707 17.7807241,0.64834086 C17.860915,0.819713359 17.8965796,1.00854578 17.8844171,1.19736099 L16.2524624,16.0965247 C16.2125303,16.7164443 15.6776148,17.1866171 15.0576951,17.146685 C14.9079649,17.1370402 14.7616776,17.097536 14.627446,17.0304984 L9.20998317,14.3249216" id="路径"></path>
                     </g>
                 </g>
             </g>

src/assets/svgs/login_icon_zhanghao.svg

@@ -1,14 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_zhanghao</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="用户注册" transform="translate(-46.000000, -182.000000)" stroke="#3AB200" stroke-width="1.2">
-            <g id="编组-11备份-11" transform="translate(46.000000, 170.000000)">
-                <g id="编组-6" transform="translate(0.000000, 12.000000)">
-                    <g id="编组-2" transform="translate(5.000000, 3.000000)">
-                        <path d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,16 C14,17.1045695 13.1045695,18 12,18 L2,18 C0.8954305,18 1.3527075e-16,17.1045695 0,16 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="矩形"></path>
-                        <path d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 L14,12 L0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="矩形"></path>
-                        <line x1="5" y1="15" x2="9" y2="15" id="直线"></line>
+    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账号密码登录-01" transform="translate(-61.000000, -213.000000)" stroke="#FFFFFF" stroke-width="1.4">
+            <g id="编组-9" transform="translate(45.000000, 195.000000)">
+                <g id="编组-11备份-12" transform="translate(16.000000, 16.000000)">
+                    <g id="编组-6" transform="translate(0.000000, 2.000000)">
+                        <path d="M11.8494862,9.25096392 C12.489192,9.25096392 13.0683369,9.51025591 13.4875553,9.92947434 C13.9067737,10.3486928 14.1660657,10.9278377 14.1660657,11.5675434 C14.1660657,12.2072492 13.9067737,12.7863941 13.4875553,13.2056125 C13.0683369,13.6248309 12.489192,13.8841229 11.8494862,13.8841229 C11.2097805,13.8841229 10.6306356,13.6248309 10.2114171,13.2056125 C9.79219871,12.7863941 9.53290671,12.2072492 9.53290671,11.5675434 C9.53290671,10.9278377 9.79219871,10.3486928 10.2114171,9.92947434 C10.6306356,9.51025591 11.2097805,9.25096392 11.8494862,9.25096392 Z" id="椭圆形" transform="translate(11.849486, 11.567543) rotate(5.000000) translate(-11.849486, -11.567543) "></path>
+                        <path d="M19.9138547,15.6893633 C20.3368515,14.7696871 20.5727354,13.7461465 20.5727354,12.6675122 C20.5727354,10.475382 19.5984583,8.51080632 18.0592935,7.18317458" id="路径" stroke-linejoin="round" transform="translate(19.316014, 11.436269) rotate(5.000000) translate(-19.316014, -11.436269) "></path>
+                        <rect id="矩形" x="2.83159827" y="19.6906567" width="18.7795588" height="3.08434641" rx="1.5421732"></rect>
+                        <path d="M19.8571184,5.48257944 C18.0067606,3.33255748 15.2655942,1.97113125 12.2064497,1.97113125 C6.63401837,1.97113125 2.11667026,6.48847937 2.11667026,12.0609107 C2.11667026,15.0424029 3.85080359,18.266989 5.90687169,20.1140943 M19.7147375,18.8011694 C20.5185786,17.9063266 21.1647649,16.8669949 21.6095833,15.7268876" id="形状" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.863127, 11.042613) rotate(5.000000) translate(-11.863127, -11.042613) "></path>
+                        <line x1="21.3506284" y1="16.7231563" x2="14.154184" y2="12.6887744" id="路径"></line>
+                        <line x1="13.7923423" y1="10.3706389" x2="20.3112877" y2="6.20045932" id="路径"></line>
                     </g>
                 </g>
             </g>

src/views/account/Login.vue

@@ -1,116 +1,112 @@
 <template>
-    <div class="login">
+    <div
+        class="login"
+        :class="{ loginHeight: bar.value.show }"
+        :style="{ backgroundImage: `url(${require('../../assets/login.png')})` }"
+    >
+        <img class="logo" v-if="active === 'phone'" src="../../assets/lvzhopu-logo.png" alt="" />
+        <img class="logo" v-else src="../../assets/lvzhopu-logo2.png" alt="" />
         <div class="tabs">
             <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
             <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
         </div>
 
         <van-form @submit="submit" ref="form" v-if="active === 'phone'">
-            <van-field
-                type="tel"
-                name="用户名"
-                placeholder="请输入手机号码"
-                v-model="form.phone"
-                :rules="[
-                    { required: true, message: '请输入手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请输入密码"
-                v-model="form.password"
-                :rules="[{ required: true, message: '请填写密码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
+            <div class="field-box">
+                <van-field
+                    type="tel"
+                    name="用户名"
+                    placeholder="Account"
+                    v-model="form.phone"
+                    :rules="[
+                        { required: true, message: '请输入手机号码' },
+                        {
+                            pattern: phonePattern,
+                            message: '手机号码格式错误'
+                        }
+                    ]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                    </template>
+                </van-field>
+                <van-field
+                    type="password"
+                    name="密码"
+                    placeholder="Password"
+                    v-model="form.password"
+                    :rules="[{ required: true, message: '请填写密码' }]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                    </template>
+                </van-field>
+            </div>
 
             <div class="button">
                 <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
           忘记密码？
         </van-button> -->
 
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                    class="sure"
-                    >登录</van-button
-                >
-                <van-button class="del" round block plain @click="$router.replace('/register')"
-                    >暂无账号，立即注册</van-button
+                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
+                <van-button class="del" block plain @click="$router.replace('/register')"
+                    >暂无绿洲宇宙登陆许可 立即申领</van-button
                 >
             </div>
         </van-form>
 
         <van-form @submit="submit" ref="code" v-else>
-            <van-field
-                type="tel"
-                name="手机号码"
-                placeholder="请输入手机号码"
-                v-model="form.phone"
-                :rules="[
-                    { required: true, message: '请输入手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
+            <div class="field-box">
+                <van-field
+                    type="tel"
+                    name="手机号码"
+                    placeholder="Account"
+                    v-model="form.phone"
+                    :rules="[
+                        { required: true, message: '请输入手机号码' },
+                        {
+                            pattern: phonePattern,
+                            message: '手机号码格式错误'
+                        }
+                    ]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                    </template>
+                </van-field>
 
-            <van-field
-                type="code"
-                name="验证码"
-                placeholder="请输入验证码"
-                v-model="form.code"
-                :rules="[{ required: true, message: '请输入验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-button
-                        class="sub-code"
-                        size="small"
-                        plain
-                        type="primary"
-                        @click="sendPhone"
-                        :disabled="isSend"
-                    >
-                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                    </van-button>
-                </template>
-            </van-field>
+                <van-field
+                    type="code"
+                    name="验证码"
+                    placeholder="Verify"
+                    v-model="form.code"
+                    :rules="[{ required: true, message: '请输入验证码' }]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                    </template>
+                    <template #button>
+                        <van-button
+                            class="sub-code"
+                            size="small"
+                            plain
+                            color="#26F50D"
+                            @click="sendPhone"
+                            :disabled="isSend"
+                        >
+                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                        </van-button>
+                    </template>
+                </van-field>
+            </div>
             <div class="button">
                 <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
           忘记密码？
         </van-button> -->
 
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                    class="sure"
-                    >登录</van-button
-                >
-                <van-button class="del" round block plain @click="$router.replace('/register')"
-                    >暂无账号，立即注册</van-button
+                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
+                <van-button class="del" block plain @click="$router.replace('/register')"
+                    >暂无绿洲宇宙登陆许可 立即申领</van-button
                 >
             </div>
         </van-form>
@@ -131,6 +127,7 @@ import phone from '../../mixins/phone';
 let fromRoute = null;
 export default {
     mixins: [phone],
+    inject: ['bar'],
     data() {
         return {
             active: 'phone',
@@ -200,37 +197,72 @@ export default {
 <style lang="less" scoped>
 .login {
     padding: 40px 50px 100px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+.loginHeight {
+    min-height: calc(100vh - 46px);
+}
+/deep/input:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px #101010 inset;
+    -webkit-text-fill-color: #898989;
+}
+/deep/.van-field__control {
+    color: #898989;
+    font-size: 14px;
+}
+.logo {
+    width: 94px;
+    height: 16px;
+    display: block;
+    margin-bottom: 2px;
 }
-
 .tabs {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-right: 10px;
     .tab {
-        font-size: 18px;
+        font-size: 16px;
         color: #c8c9cc;
-        line-height: 25px;
+        line-height: 30px;
 
         &.active {
-            font-size: 24px;
+            font-size: 20px;
             font-weight: bold;
-            color: @text0;
-            line-height: 33px;
+            color: #25f50d;
+            line-height: 30px;
         }
     }
 }
 
+/deep/.field-box {
+    background: #101010;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
+    .van-cell:after {
+        left: 56px;
+        right: 16px;
+        border: none;
+        height: 1px;
+        background: rgba(137, 137, 137, 0.3);
+    }
+    .van-cell + .van-cell {
+        margin-top: 0 !important;
+    }
+}
+
 .icon {
     display: block;
-    margin-top: 12px;
+    margin-top: 16px;
 }
 /deep/ .van-form {
     margin-top: 28px;
     .van-cell {
-        padding: 0px 0;
+        padding: 0px 16px;
 
         .van-field__left-icon {
-            margin-right: 8px;
+            margin-right: 16px;
         }
     }
 
@@ -238,7 +270,7 @@ export default {
         margin-top: 20px;
     }
     .van-field__body {
-        height: 44px;
+        height: 56px;
         align-items: center;
     }
 }
@@ -248,15 +280,18 @@ export default {
 
     .del {
         margin-top: 20px;
-        border-color: @text0;
+        border-color: #ffffff;
+        color: #ffffff;
+        background-color: #101010;
     }
 
     .sure {
-        color: @bg !important;
+        color: #000000 !important;
     }
 
     .van-button {
         font-weight: bold;
+        border-radius: 12px;
     }
 }
 

src/views/account/Register.vue

@@ -1,113 +1,113 @@
 <template>
-    <div class="login">
+    <div
+        class="login"
+        :class="{ loginHeight: bar.value.show }"
+        :style="{ backgroundImage: `url(${require('../../assets/login.png')})` }"
+    >
+        <img class="logo" src="../../assets/lvzhopu-logo.png" alt="" />
         <div class="tabs">
             <div class="tab active">用户注册</div>
         </div>
 
         <van-form @submit="submit" ref="form">
-            <van-field
-                type="tel"
-                name="手机号码"
-                placeholder="请输入手机号码"
-                v-model="form.phone"
-                :maxlength="11"
-                :rules="[
-                    { required: true, message: '请输入手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                </template>
-            </van-field>
-
-            <van-field
-                type="digit"
-                name="验证码"
-                placeholder="请输入验证码"
-                v-model="form.code"
-                :maxlength="4"
-                :rules="[{ required: true, message: '请输入验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-button
-                        @click="sendPhone"
-                        class="sub-code"
-                        size="small"
-                        plain
-                        :disabled="isSend"
-                        type="primary"
-                    >
-                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                    </van-button>
-                </template>
-            </van-field>
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请输入密码"
-                v-model="form.password"
-                :rules="[{ required: true, message: '请填写密码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
+            <div class="field-box">
+                <van-field
+                    type="tel"
+                    name="手机号码"
+                    placeholder="请输入手机号码"
+                    v-model="form.phone"
+                    :maxlength="11"
+                    :rules="[
+                        { required: true, message: '请输入手机号码' },
+                        {
+                            pattern: phonePattern,
+                            message: '手机号码格式错误'
+                        }
+                    ]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                    </template>
+                </van-field>
 
-            <van-field
-                type="password"
-                name="密码"
-                placeholder="请再次输入密码"
-                v-model="form.password2"
-                :rules="[
-                    { required: true, message: '请再次填写密码' },
-                    {
-                        validator: val => {
-                            if (val == form.password) {
-                                return true;
-                            } else {
-                                return false;
-                            }
-                        },
-                        message: '两次密码输入不一致'
-                    }
-                ]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                </template>
-            </van-field>
-            <van-field
-                v-if="showInvite"
-                type="text"
-                name="邀请码"
-                placeholder="请输入邀请码"
-                v-model="form.inviteCode"
-                :disabled="!!$store.state.inviteCode"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_yao qingma.svg')" class="icon" />
-                </template>
-            </van-field>
+                <van-field
+                    type="digit"
+                    name="验证码"
+                    placeholder="请输入验证码"
+                    v-model="form.code"
+                    :maxlength="4"
+                    :rules="[{ required: true, message: '请输入验证码' }]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                    </template>
+                    <template #button>
+                        <van-button
+                            @click="sendPhone"
+                            class="sub-code"
+                            size="small"
+                            plain
+                            :disabled="isSend"
+                            color="#26F50D"
+                        >
+                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                        </van-button>
+                    </template>
+                </van-field>
+                <van-field
+                    type="password"
+                    name="密码"
+                    placeholder="请输入密码"
+                    v-model="form.password"
+                    :rules="[{ required: true, message: '请填写密码' }]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                    </template>
+                </van-field>
 
-            <div class="button">
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                    class="sure"
+                <van-field
+                    type="password"
+                    name="密码"
+                    placeholder="请再次输入密码"
+                    v-model="form.password2"
+                    :rules="[
+                        { required: true, message: '请再次填写密码' },
+                        {
+                            validator: val => {
+                                if (val == form.password) {
+                                    return true;
+                                } else {
+                                    return false;
+                                }
+                            },
+                            message: '两次密码输入不一致'
+                        }
+                    ]"
+                >
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                    </template>
+                </van-field>
+                <van-field
+                    v-if="showInvite"
+                    type="text"
+                    name="邀请码"
+                    placeholder="请输入邀请码"
+                    v-model="form.inviteCode"
+                    :disabled="!!$store.state.inviteCode"
                 >
-                    注册
+                    <template #left-icon>
+                        <img :src="require('@assets/svgs/login_icon_yao qingma.svg')" class="icon" />
+                    </template>
+                </van-field>
+            </div>
+            <div class="button">
+                <van-button round block native-type="submit" color="#26F50D" class="sure">
+                    立即申领
                 </van-button>
                 <van-button class="del" round block plain @click="$router.replace('/login')">
-                    已有账号，立即登陆
+                    已有绿洲宇宙登陆许可 去登陆
                 </van-button>
             </div>
         </van-form>
@@ -128,6 +128,7 @@ import phone from '../../mixins/phone';
 let fromRoute = null;
 export default {
     mixins: [phone],
+    inject: ['bar'],
     data() {
         return {
             active: 'phone',
@@ -197,11 +198,15 @@ export default {
 <style lang="less" scoped>
 .login {
     padding: 40px 50px 100px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+.loginHeight {
+    min-height: calc(100vh - 46px);
 }
-
 .tabs {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     .tab {
         font-size: 18px;
@@ -209,25 +214,25 @@ export default {
         line-height: 25px;
 
         &.active {
-            font-size: 24px;
+            font-size: 20px;
             font-weight: bold;
-            color: @text0;
-            line-height: 33px;
+            color: #25f50d;
+            line-height: 30px;
         }
     }
 }
 
 .icon {
     display: block;
-    margin-top: 12px;
+    margin-top: 16px;
 }
 /deep/ .van-form {
     margin-top: 28px;
     .van-cell {
-        padding: 0px 0;
+        padding: 0px 16px;
 
         .van-field__left-icon {
-            margin-right: 8px;
+            margin-right: 16px;
         }
     }
 
@@ -235,24 +240,44 @@ export default {
         margin-top: 20px;
     }
     .van-field__body {
-        height: 44px;
+        height: 56px;
         align-items: center;
     }
 }
+
+/deep/.field-box {
+    background: #101010;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
+    .van-cell:after {
+        left: 56px;
+        right: 16px;
+        border: none;
+        height: 1px;
+        background: rgba(137, 137, 137, 0.3);
+    }
+    .van-cell + .van-cell {
+        margin-top: 0 !important;
+    }
+}
+
 .button {
     margin-top: 60px;
 
     .del {
         margin-top: 20px;
-        border-color: @text0;
+        border-color: #ffffff;
+        color: #ffffff;
+        background-color: #101010;
     }
 
     .sure {
-        color: @bg !important;
+        color: #000000 !important;
     }
 
     .van-button {
         font-weight: bold;
+        border-radius: 12px;
     }
 }
 
@@ -265,14 +290,35 @@ export default {
     justify-content: center;
     margin-top: 50px;
     font-size: @font1;
-
+    color: #fff;
     span {
-        color: @prim;
+        color: #25f50d;
     }
 }
-
+.van-checkbox {
+    background-color: #101010;
+    padding: 5px;
+    border-radius: 12px;
+}
+/deep/.van-checkbox__label {
+    color: #fff;
+}
 /deep/.van-checkbox__icon--checked .van-icon {
     background: linear-gradient(135deg, @prim 0%, @warn 100%);
     border-width: 0;
 }
+/deep/input:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px #101010 inset;
+    -webkit-text-fill-color: #898989;
+}
+/deep/.van-field__control {
+    color: #898989;
+    font-size: 14px;
+}
+.logo {
+    width: 94px;
+    height: 16px;
+    display: block;
+    margin: 0 auto 2px;
+}
 </style>