TBtools-登录、注册页样式

htmldev/TBTools/src/views/modules/account/login.vue

@@ -1,37 +1,41 @@
 <template>
-  <div>
-    <el-row>
-      <el-col class="TT-main" :span="10" :offset="7">
-        <h3 class="title">
-          <span>登录</span>
-        </h3>
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
-                 status-icon>
-          <el-form-item prop="userPhone">
-            <el-input type="tel" v-model="dataForm.userPhone" placeholder="帐号"></el-input>
-          </el-form-item>
-          <el-form-item prop="userPassword">
-            <el-input v-model="dataForm.userPassword" type="password" placeholder="密码"></el-input>
-          </el-form-item>
-          <el-form-item prop="captcha" v-if="false">
-            <el-row :gutter="20">
-              <el-col :span="17">
-                <el-input v-model="dataForm.captcha" placeholder="图形验证码">
-                </el-input>
-              </el-col>
-              <el-col :span="7" class="captcha">
-                <img :src="captchaPath" @click="getCaptcha()" alt="">
-              </el-col>
-            </el-row>
-          </el-form-item>
-          <el-form-item>
-            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
-            <p class="login" @click="gotoRegister">暂无账号？立即注册</p>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row style="padding-top: 45px;">
+    <el-col :span="11" :offset="1">
+      <img class="TT-logo" src="../../../../static/img/login/logo_login.png" alt="">
+    </el-col>
+    <el-col :span="8" :offset="1">
+      <h3 class="title">
+        <span>登录</span>
+        <span>/Login</span>
+      </h3>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+               status-icon>
+        <el-form-item prop="userPhone">
+          <el-input type="tel" v-model="dataForm.userPhone" placeholder="帐号"></el-input>
+        </el-form-item>
+        <el-form-item prop="userPassword">
+          <el-input v-model="dataForm.userPassword" type="password" placeholder="密码"></el-input>
+        </el-form-item>
+        <el-form-item prop="captcha" v-if="false">
+          <el-row :gutter="20">
+            <el-col :span="17">
+              <el-input v-model="dataForm.captcha" placeholder="图形验证码">
+              </el-input>
+            </el-col>
+            <el-col :span="7" class="captcha">
+              <img :src="captchaPath" @click="getCaptcha()" alt="">
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item>
+          <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()"
+                     style="width:100%;background: #332C2B;color: #00EEFF;border: none;">登录
+          </el-button>
+          <p class="login" @click="gotoRegister">暂无账号？立即注册</p>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -120,46 +124,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.TT-main {
-  padding: 30px 0 50px;
-  overflow: hidden;
+.TT-logo {
+  display: block;
+  width: 401px;
+  height: 315px;
+  margin: 0 auto;
 }
 
 .title {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 179px;
-  margin: 0 auto 22px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  color: #fff;
-  background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
-  overflow: hidden;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(54, 84, 99, 0.7);
-  }
+  text-align: right;
+  padding-right: 66px;
+  margin-bottom: 37px;
 
   span {
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    display: block;
-    width: 100%;
-    line-height: 179px;
-    font-size: 30px;
-    font-weight: 400;
-    text-align: center;
+    &:nth-of-type(1) {
+      line-height: 30px;
+      font-size: 22px;
+      color: #332C2B;
+    }
+
+    &:nth-of-type(2) {
+      line-height: 26px;
+      font-size: 18px;
+      font-weight: 400;
+      color: #DCDFE6;
+    }
   }
 }
 

htmldev/TBTools/src/views/modules/account/register.vue

@@ -1,55 +1,53 @@
 <template>
-  <div>
-    <el-row style="padding-top: 45px;">
-      <el-col :span="11" :offset="1">
-        <img class="TT-logo_register" src="../../../../static/img/register/logo_register.png" alt="">
-      </el-col>
-      <el-col class="TT-main" :span="8" :offset="1">
-        <h3 class="title">
-          <span>注册</span>
-          <span>/Sign up</span>
-        </h3>
-        <el-form
-          :model="dataForm"
-          status-icon
-          :rules="rules"
-          ref="dataForm"
-          label-width="0"
-          class="demo-ruleForm">
-          <el-form-item prop="tel">
-            <el-input v-model="dataForm.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
-          </el-form-item>
-          <el-form-item prop="captcha">
-            <el-row :gutter="20">
-              <el-col :span="17">
-                <el-input v-model="dataForm.captcha" placeholder="图形验证码">
-                </el-input>
-              </el-col>
-              <el-col :span="7" class="login-captcha">
-                <img :src="captchaPath" @click="getCaptcha()" alt="">
-              </el-col>
-            </el-row>
-          </el-form-item>
-          <el-form-item prop="smscode" class="code">
-            <el-input v-model="dataForm.smscode" placeholder="验证码"></el-input>
-            <el-button type="primary" :disabled='isDisabled' @click="sendCode('dataForm')">{{ buttonText }}</el-button>
-          </el-form-item>
-          <el-form-item prop="pass">
-            <el-input type="password" v-model="dataForm.pass" auto-complete="off" placeholder="输入密码"></el-input>
-          </el-form-item>
-          <el-form-item prop="checkPass">
-            <el-input type="password" v-model="dataForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="submitForm('dataForm')"
-                       style="width:100%;background: #332C2B;color: #00EEFF;">注册
-            </el-button>
-            <p class="login" @click="gotoLogin">已有账号？立即登录</p>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row style="padding-top: 45px;">
+    <el-col :span="11" :offset="1">
+      <img class="TT-logo" src="../../../../static/img/register/logo_register.png" alt="">
+    </el-col>
+    <el-col :span="8" :offset="1">
+      <h3 class="title">
+        <span>注册</span>
+        <span>/Sign up</span>
+      </h3>
+      <el-form
+        :model="dataForm"
+        status-icon
+        :rules="rules"
+        ref="dataForm"
+        label-width="0"
+        class="demo-ruleForm">
+        <el-form-item prop="tel">
+          <el-input v-model="dataForm.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
+        </el-form-item>
+        <el-form-item prop="captcha">
+          <el-row :gutter="20">
+            <el-col :span="17">
+              <el-input v-model="dataForm.captcha" placeholder="图形验证码">
+              </el-input>
+            </el-col>
+            <el-col :span="7" class="login-captcha">
+              <img :src="captchaPath" @click="getCaptcha()" alt="">
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item prop="smscode" class="code">
+          <el-input v-model="dataForm.smscode" placeholder="验证码"></el-input>
+          <el-button type="primary" :disabled='isDisabled' @click="sendCode('dataForm')">{{ buttonText }}</el-button>
+        </el-form-item>
+        <el-form-item prop="pass">
+          <el-input type="password" v-model="dataForm.pass" auto-complete="off" placeholder="输入密码"></el-input>
+        </el-form-item>
+        <el-form-item prop="checkPass">
+          <el-input type="password" v-model="dataForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('dataForm')"
+                     style="width:100%;background: #332C2B;color: #00EEFF;border: none;">注册
+          </el-button>
+          <p class="login" @click="gotoLogin">已有账号？立即登录</p>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
 </template>
 <script>
 import { isMobile, isSmscode } from '@/utils/validate'
@@ -225,7 +223,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.TT-logo_register {
+.TT-logo {
   display: block;
   width: 508px;
   height: 399px;
@@ -293,6 +291,7 @@ export default {
     text-align: center;
     background: #332C2B;
     color: #00EEFF;
+    border: none;
 
     &.el-button--primary:focus {
       background: #332C2B;