gdy_pc_8/course/course/home.vue

<template>
  <div class="page">
    <div class="userInfo">
      <van-row type="flex" justify="space-between" align="center">
        <div class="user_tit">
          <p>{{ user_info.name }}</p>
          <span>ID:{{ user_info.wx_id }}</span>
          <div class="user_leave">{{ user_info.isDearler?'经销商':'学员' }}</div>
        </div>
        <div class="userImage">
          <userImage
            class="about-me__avatar"
            :img_url="user_info.img_url"
            :user_name="user_info.name"
            width="1.12rem"
            height="1.12rem"
          ></userImage>
        </div>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Col, Row } from "vant";
Vue.use(Col);
Vue.use(Row);
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      user_info: {
        img_url: "",
        wx_id: "wx15451154555",
        name: "新人",
        isDearler: true
      }
    };
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {}
};
</script>
<style scoped lang="scss">
.page {
  box-sizing: border-box;
  padding: 0.4rem 0 0;
  background-color: #efefef;
  .userInfo {
    padding: 0.24rem 0.32rem;
    // border: 1px solid #888;
    border-radius: 0.2rem;
    background: linear-gradient(
      180deg,
      #efefef 0%,
      #ccc 40%,
      #ccc 60%,
      #efefef 100%
    );
    .user_tit {
      p {
        font-size: 0.32rem;
        color: #000;
        line-height: 2;
        margin: 0;
      }
      span {
        font-size: 0.24rem;
        color: #888;
        line-height: 1.4;
        display: block;
      }
    }
    .user_leave {
        padding: 0 .1rem;
        font-size: .23rem;
        color: #888;
        background-color: #fff;
        line-height: 1.5;
        border-radius: .2rem;
    }
  }
}
</style>