gcb_zc/pages/me/index.vue

<template>
  <div class="page_me">
    <!-- 顶部个人消息 -->
    <div class="top_info">
      <!-- 头像名字 -->
      <div class="user_info clear-both">
        <h2>
          <img src="../../static/img/img_head.png" alt="">
        </h2>
        <div>
          <p class="user_name">用户名-已登录</p>
          <p>当前在线（扩展使用）</p>
        </div>
      </div>
      <!-- end:头像名字结束 -->

      <div class="verify">
        <p>VIP会员尊享</p>
        <a href="#" class="grad">立即开通</a>
      </div>
      <div class="real_name">
        <p class="list_item">实名认证</p>
      </div>
    </div>
    <!-- end:顶部个人消息结束 -->
    
    <!-- 带单列表 -->
    <ul class="menu-list">
      <li>
        <a href="#"></a>
        <img src="../../static/img/img_head.png" alt="">
        <p class="list_item">我的会员</p>
      </li>
      <li>
        <a href="#"></a>
         <img src="../../static/img/hide.png" alt="">
        <p class="list_item">我的账户</p>
      </li>
      <li>
        <a href="#"></a>
         <img src="../../static/img/img_head.png" alt="">
        <p class="list_item">我的购买</p>
      </li>
      <li>
        <a href="#"></a>
         <img src="../../static/img/img_head.png" alt="">
        <p class="list_item">我的收藏</p>
      </li>
      <li>
        <a href="#"></a>
         <img src="../../static/img/img_head.png" alt="">
        <p class="list_item">我的记录</p>
      </li>
    </ul>
    <!-- end:带单列表 -->
    <!-- 带单列表 -->
    <ul class="menu-list">
      <li>
        <a href="#"></a>
        <img src="../../static/img/icon_V.png" alt="">
        <p class="list_item">退出登录</p>
      </li>
      
    </ul>
    <!-- end:带单列表 -->
    
  </div>

</template>


<script>
import '~/assets/new.scss' // 引入
import '~/static/css/style.css' // 引入

export default {
 
}
</script>

<style>
html{
 
}
body{
  padding: 0;
  padding-bottom: 6rem;
  background-color: #f8f9fa
}
.page_me{
  padding-bottom: 6rem;
}
.list_item{
  font-size: 1.6rem;
  font-weight: bold;
  color: #202020;
  line-height: 5.5rem;
}
.user_name{
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

</style>