TBA_GXPT/ruoyi-ui/src/views/UserCenter.vue

<template>
  <el-row>
    <el-col :span="24">
      <div class="index_head">
        <h3>打造数字平台，建设魅力中国</h3>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="user-center" style="margin: 20px 0">
    <el-col :span="3" :offset="2">
      <el-card>
        <h4 class="menu_title">个人中心</h4>
        <el-menu router :default-active="$route.path">
          <el-menu-item-group>
            <el-menu-item index="/userCenter/appInfo">开发者应用</el-menu-item>
            <el-menu-item index="/userCenter/myService">我的服务</el-menu-item>
            <el-menu-item index="/userCenter/serviceApplyInfo">
              服务申请
            </el-menu-item>
            <el-menu-item index="/userCenter/attention">我的收藏</el-menu-item>
          </el-menu-item-group>
          <!--           <el-menu-item-group>
            <template #title>
              <el-icon><location /></el-icon>
              <h4>用户中心</h4>
            </template>
            <el-menu-item index="/userCenter/userInfo">基本信息</el-menu-item>
            <el-menu-item index="/userCenter/myComments">我的评论</el-menu-item>
          </el-menu-item-group> -->
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="17">
      <el-card>
        <router-view/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Breadcrumb from '../components/Breadcrumb.vue'

export default {
  name: 'userCenter',
  components: {
    Breadcrumb,
  },
}
</script>
<style scoped>
.index_head {
  background: url('../assets/slogan_bg3.jpg') no-repeat;
  background-size: 100% 100%;
  height: 120px;
}

.index_head h3 {
  font-size: 26px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 120px;
}

:deep(.el-menu) {
  border: none;
}

:deep(.el-menu-item-group__title) {
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
</style>