新增我的信息页面

 <!--
 <!--
- * @Date: 2024-10-18 17:57:33
+ * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 17:59:36
- * @FilePath: /hager/src/views/login/info.vue
+ * @LastEditTime: 2024-10-20 12:56:26
+ * @FilePath: /hager/src/views/user/info.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
-  <div class="hager-info-page"></div>
+  <div class="hager-info-page">
+    <div class="input-title">我的信息</div>
+    <div style="padding: 1rem;">
+      <hagerInput type="email" :disable="status !== 'edit'" required v-model="email" placeholder="请输入注册邮箱地址" />
+      <hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" />
+      <hagerInput type="username" :disable="status !== 'edit'" v-model="username" placeholder="请输入姓名" />
+      <hagerInput type="tel" :disable="status !== 'edit'" v-model="tel" placeholder="请输入联系电话" />
+      <hagerInput type="corp" :disable="status !== 'edit'" v-model="corp" placeholder="请输入公司名称" />
+      <hagerInput type="department" :disable="status !== 'edit'" v-model="department" placeholder="请输入所属部门和职位" />
+    </div>
+    <div class="info-footer">
+      <div v-if="status !== 'edit'" class="submit-btn" @click="onHandle">修改信息</div>
+      <div v-else class="edit-box">
+        <div class="cancel btn" @click="status=''">取消</div>
+        <div class="confirm btn" @click="onSubmit">确定</div>
+      </div>
+      <div class="info-subsidiary">
+        <div class="privacy"><span>隐私政策</span></div>
+      </div>
+    </div>
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
+import hagerInput from '@/components/common/hagerInput.vue';
 
 
 export default {
 export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {
-
+      email: 'hr.communication@hager.com',
+      pwd: 'hager123',
+      username: '王二虎',
+      tel: '15650569910',
+      corp: '海格电气集团',
+      department: '研发部产品经理',
+      status: ''
     }
     }
   },
   },
   mounted () {
   mounted () {
 
 
   },
   },
   methods: {
   methods: {
-
+    onHandle () {
+      this.status = 'edit';
+    },
+    onSubmit () {
+      console.log('提交');
+      setTimeout(() => {
+        this.status = '';
+      }, 1000);
+    }
   }
   }
 }
 }
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
   .hager-info-page {
   .hager-info-page {
+    padding: 2rem 0.5rem 0;
+    box-sizing: border-box;
+    .input-title {
+      color: @secondary-color;
+      font-weight: bold;
+      font-size: 1.25rem;
+      text-align: center;
+    }
+    .submit-btn {
+      background-color: #FFF;
+      color: @secondary-color;
+      padding: 0.5rem 1rem;
+      text-align: center;
+      border-radius: 5px;
+      border: 1px solid @secondary-color;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .edit-box {
+      display: flex;
+      justify-content: space-between;
+      .cancel {
+        margin-right: 1%;
+        color: @secondary-color;
+      }
+      .confirm {
+        margin-left: 1%;
+        background-color: @secondary-color;
+        color: #FFF;
+      }
+      .btn {
+        width: 48%;
+        text-align: center;
+        padding: 0.5rem 1rem;
+        border-radius: 5px;
+        border: 1px solid @secondary-color;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    .info-footer {
+      padding: 0 1rem 1rem 2rem;
+      .info-subsidiary {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.85rem;
+        margin-top: 1rem;
+        span {
+          color: @primary-color;
+          text-decoration: underline;
+          font-weight: bold;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+        .privacy {
 
 
         }
         }
+        .login {
+
+        }
+      }
+    }
+  }
 </style>
 </style>