移动端注册样式

buuoltwo · Oct 11, 2020 · fc60abe · fc60abe
1 parent e274ae8
commit fc60abe
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/src/pages/register/template.less b/src/pages/register/template.less
@@ -7,37 +7,31 @@
   padding-top: 30px;
   padding-bottom: 40px;
 
-  h4 {
-    margin: 10px 0 5px;
-    text-align:left;
-  }
-
-  p {
-    margin: 5px 0;
-  }
-
-  input {
-    width: 400px;
-  }
-
-  .error {
-    font-size: 12px;
-    color: #f00;
-  }
-
-  button {
-    margin-top: 30px;
-    justify-self: start;
+  fieldset {
+    border-radius: 5px;
+    h4 {
+      margin: 10px 0 5px;
+      text-align:left;
+    }
+    button {
+      margin-top: 30px;
+      justify-self: start;
+    }
+    .notice {
+      font-size: 12px;
+      color: @textLighterColor;
+      text-align: center;
+      margin-top: 30px;
+
+      a {
+        color: @themeColor;
+      }
+    }
   }
+}
 
-  .notice {
-    font-size: 12px;
-    color: @textLighterColor;
-    text-align: center;
-    margin-top: 30px;
-
-    a {
-      color: @themeColor;
-    }
+@media (max-width:768px) {
+  fieldset {
+    width: 90%;
   }
 }
diff --git a/src/pages/register/template.vue b/src/pages/register/template.vue
@@ -1,10 +1,24 @@
 <template>
   <div id="login">
-    <h4>用户名</h4>
-    <el-input v-model="username" placeholder="用户名" size="medium"></el-input>
-    <h4>密码</h4>
-    <el-input v-model="password" placeholder="密码" size="medium" @keyup.enter="onLogin" show-password></el-input>
-    <el-button size="medium" @click="onRegister">立即注册</el-button>
+    <fieldset>
+      <legend>请注册</legend>
+      <h4>用户名</h4>
+      <el-input
+        v-model="username"
+        placeholder="用户名"
+        size="medium"
+      ></el-input>
+      <h4>密码</h4>
+      <el-input
+        v-model="password"
+        placeholder="密码"
+        size="medium"
+        @keyup.enter="onLogin"
+        show-password
+      ></el-input>
+      <el-button size="medium" @click="onRegister">立即注册</el-button>
+    </fieldset>
+
     <!-- <p class="notice">
       没有账号？
       <router-link to="/register">注册新用户</router-link>