bocai_supplyChain_pc/src/components/userinfo/accountsetting/inedex.vue

<template>
  <div class="accountsetting-container">
    <div class="accountcontent w">
      <div class="accountSetList">
        <div class="userinfobox">
          <div class="avatarbox">
            <i class="iconfont icon-morentouxiang"></i>
          </div>
          <div class="username">Hi,{{ 1 }}</div>
        </div>
        <ul>
          <li>
            <span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
            ><i class="iconfont icon-youjiantou"></i>
          </li>
          <li>
            <span
              ><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i
              >绑定手机</span
            ><i class="iconfont icon-youjiantou"></i>
          </li>
          <li>
            <span><i class="iconfont icon-weixin1"></i>绑定微信</span
            ><i class="iconfont icon-youjiantou"></i>
          </li>
          <li>
            <span
              ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
            ><i class="iconfont icon-youjiantou"></i>
          </li>
        </ul>
      </div>
      <div class="rightcontent"></div>
    </div>
  </div>
</template>

<script>
import { userBaseInfoApi } from "../../../api/userinfo";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserInfo();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async getUserInfo() {
      try {
        const { data } = await userBaseInfoApi();
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="less">
.accountcontent {
  height: 1000px;
  margin-top: 16px;
  background-color: pink;
  display: flex;
  .accountSetList {
    width: 346px;
    height: 500px;
    background-color: skyblue;
    margin-right: 16px;
    .userinfobox {
      width: 346px;
      height: 158px;
      background: #ffffff;
      border-radius: 4px;
      padding: 24px 0;
      .avatarbox {
        text-align: center;
        i {
          font-size: 60px;
          line-height: 60px;
          color: #ff6a00;
        }
      }
    }
    > ul {
      background-color: #fff;
      margin-top: 16px;
      // padding: 0 16px;
      border-radius: 4px;
      overflow: hidden;
      li {
        position: relative;
        display: flex;
        padding: 16px;
        line-height: 24px;
        justify-content: space-between;
        // border-bottom: 1px solid #f3f4f4;
        cursor: pointer;
        &:nth-child(1):after {
          position: absolute;
          content: "";
          display: inline-block;
          height: 1px;
          width: 314px;
          bottom: 0;
          left: 16px;
          background-color: #f3f4f4;
        }
        span {
          font-size: 16px;
          i {
            margin-right: 12px;
            font-size: 20px;
          }
        }
        > i {
          color: #888;
          font-size: 22px;
        }
      }
    }
  }
  .rightcontent {
    width: 838px;
    height: 600px;
    background-color: gray;
  }
}
</style>