修改样式

src/components/pages/changePswd/changePswd.vue

@@ -1,41 +1,42 @@
 <template>
-    <div class="changeBox">
-        <div class="changeArea">
-            <div>
-                <div class="changeTitle">
-                    <div>您的密码过于简单</div>
-                    <div>请重新修改</div>
-                </div>
-                <div class="changeContent">
-                    <div class="dialog-content-item-content">
-                        <span>
-                            账号
-                        </span>
-                        <input v-model="account" type="text" placeholder="请输入新账户" class="input" />
-                    </div>
-                    <div class="dialog-content-item-content">
-                        <span>
-                            <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
-                            新密码
-                        </span>
-                        <input v-model="password" type="password" placeholder="请输入新密码" class="input" />
-                    </div>
-                    <div class="dialog-content-item-content">
-                        <span>
-                            <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
-                            新密码确认
-                        </span>
-                        <input v-model="password1" type="password" placeholder="请输入新密码" class="input" />
-                    </div>
-                    <div class="user_p">
-                        <p>
-                            要确保您的帐户安全无虑，请设置安全系数高的密码，例如:密码应由字母或符号、数字组成.
-                        </p>
+    <div class="dialog">
+        <div class="dialog-header">
+            <div class="dialog-title">
+                <h1>您的密码过于简单</h1>
+                <h1 style="margin-top: 10px;">请重新修改</h1>
+            </div>
+            <div class="dialog-main">
+                <div class="dialog-content">
+                    <div class="dialog-content-item">
+                        <div class="dialog-content-item-content1">
+                            <span>
+                                账号
+                            </span>
+                            <input v-model="account" type="text" placeholder="请输入新账户" class="input" />
+                        </div>
+                        <div class="dialog-content-item-content1">
+                            <span>
+                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
+                                新密码
+                            </span>
+                            <input v-model="password" type="password" placeholder="请输入新密码" class="input" />
+                        </div>
+                        <div class="dialog-content-item-content1">
+                            <span>
+                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
+                                新密码确认
+                            </span>
+                            <input v-model="password1" type="password" placeholder="请输入新密码" class="input" />
+                        </div>
                     </div>
-                    <button class="button" @click="confirmPswd">确认提交</button>
                 </div>
             </div>
-
+            <div class="user_p">
+                <p>
+                    要确保您的帐户安全无虑，请设置安全系数高的密码，例如:密码应由字母或符号、数字组成.
+                </p>
+            </div>
+            <button class="button" @click="confirmPswd">确认提交</button>
         </div>
     </div>
 </template>
@@ -119,17 +120,38 @@ export default {
 }
 </script>
 <style scoped>
-.changeBox {
-    background-color: #fff;
-    height: 100vh;
-}
-
-.changeArea {
+html,
+body {
+    height: 100%;
+    margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+/* 弹窗整体大小 */
+.dialog {
+    width: 100%;
     height: 100%;
-    padding:0 30px;
+    background-color: #fff;
+    overflow: auto;
+}
+
+.dialog-header,
+.dialog-title,
+.dialog-main {
+    padding: 20px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.dialog-content-item-content1 {
+    font-size: 15px;
+    font-weight: 550;
+}
+
+.dialog-content-item-content1+.dialog-content-item-content1 {
+    margin-top: 20px;
 }
 
 .changeTitle div {
@@ -152,9 +174,8 @@ export default {
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #f0f2f5;
-    height: 54px;
+    height: 36px;
     outline: none;
-    box-sizing: border-box;
 }
 
 .input>>>.el-input--suffix .el-input__inner {
@@ -164,7 +185,6 @@ export default {
 /* 用户协议框架 */
 .user_p {
     height: 50px;
-    margin-top: 20px;
 }
 
 .user_p p {
@@ -183,7 +203,7 @@ export default {
     font-size: 16px;
     cursor: pointer;
     text-align: center;
-    margin-top: 40px;
+    margin-top: 10px;
     outline: none;
 }