<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::v-deep .q-field__control {
  height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card {
  width: 434px;
  height: 75px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 15px 35px;
  margin-top: 16px;
}
.img-box {
  width: 50px;
height: 50px;
background: #F5F5F5;
border-radius: 25px;
}.img {
  width: 50px;
height: 50px;
display: block;
padding: 11px;
}
</style>
<template>
  <div class="content q-ma-lg bg-white">
    <div class="q-ma-lg">
      <div class="tips">登陸方式管理</div>
      <div class="card">
        <div class="flex justify-between">
          <div>郵箱<span class="text-grey-6">(默認地址)</span></div>
          <div><span>修改</span><span>删除</span></div>
        </div>
      </div>
      <div class="card flex justify-between">
        <div class="img-box">
        <img class="img" src="../../assets/img/wechat.png" />
        </div>
        <div class="flex justify-between">
          <div>郵箱<span class="text-grey-6">(默認地址)</span></div>
          <div><span>修改</span><span>删除</span></div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        lastName: "",
        firstName: "",
      },
      model: "",
      date: "",
      options: [],
    };
  },
  methods: {
    submit() {
      const verifyArr = ["fastName", "lastName"];
      verifyArr.forEach((item) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (item.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if ((this.formHasError = true)) {
        return;
      }
    },
  },
};
</script>