xx-sys/src/views/user/index.vue

<template>
  <div class="userBox">
    <div class="userInfo">
      <div class="userT">
        <el-avatar :size="150" :src="circleUrl" />
      </div>
      <div class="userName">用户名</div>
      <div class="userName" @click="router.push('/');">返回首页</div>
    </div>
    <div class="collectionTopic">
      <div class="title">收藏</div>
      <div class="collectionList">
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <div class="collectionTme"></div>
        <!-- <div class="collectionTme"></div> -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.userBox {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/image/userbg.jpg");
  background-size: cover; // 背景图片铺满元素
  background-position: center; // 背景图片居中显示
  background-repeat: no-repeat; // 背景图片不重复
  display: flex;
  justify-content: center;
  align-items: center;
  .userInfo {
    height: 90%;
    width: 20%;
    // background-color: #fff;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    .userName {
      margin-top: 30px;
      font-size: 30px;
    }
    .userT {
      margin-top: 90px;
    }
  }
  .collectionTopic {
    margin-left: 30px;
    width: 60%;
    height: 90%;
    // background-color: #ff0;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    .title {
      margin-top: 10px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
      height: 5%;
      background-color: #d2fce3;
      border-radius: 70px;
    }
    .collectionList {
      overflow-y: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
}
      flex: 1;
      width: 90%;
      box-sizing: border-box;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      padding: 10px;
      .collectionTme {
        /* 宽度是固定好的 */
        width: 30%;
        height: 47%;
        background-color: #D2FCE3;
        margin-bottom: 10px;
        // border: 1px solid red;
        /*这个数值需要自己去调*/
        margin-right: 17px;
      }
    }
    .collectionList:after {
      content: "";
      flex: auto;
    }
  }
}
</style>
<script setup>
import router from '@/router'
</script>