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

<template>
  <div class="userBox">
    <div class="userInfo">
      <div class="userT" @click="drawer = true">
        <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>
    </div>
  </div>
  <el-drawer
    v-model="drawer"
    title="个人信息"
    direction="ltr"
    :before-close="handleClose"
  >
    <div class="info">
      <div class="infoItme">
        <image-upload
          ref="imgUpload"
          img="123"
          style="width: 200px; height: 200px; display: inline-block"
          @upload="upload"
        ></image-upload>
      </div>
      <div class="infoItme">
        <div class="text">账号</div>
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="Please input"
          :disabled="true"
        />
      </div>
      <div class="infoItme">
        <div class="text">签名</div>
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="Please input"
          :rows="2"
          type="textarea"
          :disabled="true"
        />
      </div>
      <div class="infoItme">
        <div class="text">手机号</div>
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="Please input"
          :disabled="true"
        />
      </div>
    </div>
    <template #footer>
      <el-button type="success">更改信息</el-button>
      <el-button type="danger">更改密码</el-button>
    </template>
  </el-drawer>
</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;
    }
  }
}
.infoItme {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 20px auto;
  .text {
    width: 30%;
    text-align: right;
    margin-right: 30px;
  }
}
.info {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>
<script setup>
import router from "@/router";
import ImageUpload from "@/components/ImageUpload.vue";
import { ref } from "vue";
const drawer = ref(false);
</script>