邮箱修改密码样式

src/views/changePwd.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="fle bgColor">
+  <div class="fle bgColor changePwd">
     <h2 style="font-size: 0.36rem; margin-bottom: 0.36rem; font-weight: 700">
       邮箱密码修改
     </h2>
     <div style="width: 5rem">
-      <div class="account">当前邮箱：{{ loginUser.account }}@zuel.edu.cn</div>
+      <cube-input v-model="email" disabled placeholder="请输入新的密码"></cube-input>
       <br />
       <cube-input v-model="pwd" type="password" placeholder="请输入新的密码">
       </cube-input>
@@ -16,7 +16,7 @@
       ></cube-input>
       <br />
       <cube-button @click="zlogin()" style="background: #005395"
-        >登录</cube-button
+        >保存</cube-button
       >
     </div>
   </div>
@@ -28,20 +28,21 @@ export default {
     return {
       loginUser: {},
       pwd: "",
+      email: "",
       confirmPwd: ""
     };
   },
   methods: {
     // 账号密码登录
     zlogin() {
-      if(this.pwd !== this.confirmPwd){
+      if (this.pwd !== this.confirmPwd) {
         this.$createDialog({
-            type: "alert",
-            title: "提示",
-            content: '两次输入的密码不一致',
-            icon: "cubeic-warn",
-            color: "red"
-          }).show();
+          type: "alert",
+          title: "提示",
+          content: "两次输入的密码不一致",
+          icon: "cubeic-warn",
+          color: "red"
+        }).show();
         return;
       }
       let postData = { account: this.loginUser.account, password: this.pwd };
@@ -77,14 +78,16 @@ export default {
   created() {
     let loginUser = localStorage.getItem("loginUser");
     this.loginUser = loginUser ? JSON.parse(loginUser) : {};
+    this.email = this.loginUser.account + "@zuel.edu.cn";
   }
 };
 </script>
 
 <style scoped>
-.account {
-  font-size: 0.3rem;
-  color: #333;
+.changePwd >>> .cube-input-field[disabled]{
+  color: #000!important;
+  background-color: rgba(0,0,0,0.2)!important;
+  border: 1px solid #e4e7ed!important;
 }
 .color {
   color: red;
@@ -99,9 +102,6 @@ export default {
   background: url(./../../static/images/weChartBackImage.jpg);
   background-size: cover;
 }
-/* .bgColor{
-    background-color: white
-  } */
 input {
   border: 0.02rem #999999 solid;
   width: 60%;