PersonLod.vue 2.1 KB
<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-22 16:58:52
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div>

    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>
    <van-row type="flex" class="iconImg">
      <van-col span="24">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-touxiang"></use>
        </svg>
      </van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-field v-model="name" label="姓名" :border="true" placeholder="请输入姓名" />
      </van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-field v-model="IdCard" label="身份证号" :border="true" placeholder="请输入身份证号" />
      </van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-field v-model="phone" label="电话" :border="true" placeholder="请输入电话" />
      </van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-field v-model="liveAdress" label="居住地址" :border="true" placeholder="请输入居住地址" />
      </van-col>
    </van-row>
    <div style="margin: 16px;">
      <van-button square block type="info" native-type="submit">修改</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "PersonLod"
})
export default class PersonLod extends Vue {
  tatleName="个人信息"//个人信息
  name: string = ""//姓名
  IdCard: string = ""//身份证号
  phone: string = ""//手机号
  liveAdress: string = ""//居住地址
}
</script>
<style scoped lang="scss">
.iconImg{
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.icon {
  width: 80px;
  height: 80px;
}
</style>