vue+element仿原神实现好看的个人中心

企业开发 2023-05-05 07:52:00 阅读次数: 0

目录

一、仿原神效果图

 二、代码实现

1.项目截图

2.路由配置 完整源码

3.个人中心index源码

4.用户信息页面源码

5.我的合集源码

三、总结

一、仿原神效果图

2011年，24岁的上海交通大学研究生刘伟、蔡浩宇、罗宇皓三人拿到上海市科技创业中心大学生创业基金会“雏鹰计划”10万元资助创办米哈游 [1]  。

2012年2月，蔡浩宇、刘伟、罗宇皓、靳志成共同设立米哈游有限（系米哈游前身）；同年3月，靳志成退出公司；10月，米哈游推出“崩坏”系列首款产品《崩坏学园》上线。 [15] 

2014年1月，米哈游研发的2D 射击类游戏《崩坏学园2》上线。 [15] 

2016年10月， 3D 动作类游戏《崩坏3》上线。

2017年初，米哈游向证监会提交A股上市申请。同年，《崩坏学园2》账户数量超过4400万个 [4]  。

2022年2月14日，米哈游旗下全新品牌HoYoverse正式公布，该品牌旨在通过各种娱乐服务为全球玩家创造和提供沉浸式虚拟世界体验 [9]  。

2022年，米哈游的《Genshin Impact》（《原神》海外版）斩获了出海手游年度收入第一的佳绩。

2023年1月份，中国游戏厂商出海收入TOP30榜单中，米哈游依旧稳坐前五。 [14]

最近看到原神社区-米游社的个人中心真的蛮好看的，所以就仿照了一个，以下是效果图对比

demo效果图

官方截图：

 二、代码实现

1.项目截图

2.路由配置 完整源码

路由配置是两层children,三层component，第一层是整体框架的布局，既是顶部+内容容器+底部，整个个人中心其实就处在内容容器的位置，然后个人中心又有自己的左侧菜单，右侧对应菜单显示不同的功能，也就是以个人中心自己的index作为第二层component，第三层component就是右侧具体功能了，理解路由后思维就很清晰了。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
import Layout from '@/page/index/index'


export const constantRoutes = [
    {
      path: '/',
      name: '主页',
      redirect: '/personal'
    },
    {
      path: '/index',
      name: '主页',
      redirect: '/personal'
    },
    {
      path: '/personal',
      component: Layout,
      redirect: '/personal/user_info',
      children: [{
        path: 'user_info',
        name: '个人中心',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/personal/index'),
        redirect: '/personal/user_info',
        children:[
          {
            path: '/personal/user_info',
            name: '个人简介',
            component: () => import( '@/views/personal/user_info.vue')
          },
          {
            path: '/personal/myCollect',
            name: '我的合集',
            component: () => import( '@/views/personal/my_collect.vue')
          },
          // {
          //   path: '/personal/follow',
          //   name: '我的关注',
          //   component: () => import( '@/views/personal/follow.vue')
          // },
          // {
          //   path: '/personal/fans',
          //   name: '我的粉丝',
          //   component: () => import( '@/views/personal/fans.vue')
          // }
        ]
      }]
    },

  ];

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

3.个人中心index源码

<template>
    <div class="root-page-container">
      <div class="mhy-main-page mhy-account-center">
        <div class="mhy-layout">
          <!--顶部头像栏-->
          <div class="mhy-container mhy-account-center-header">
            <div class="mhy-avatar mhy-account-center-header__avatar mhy-avatar__xxl">
              <img src="https://img-static.mihoyo.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png" class="mhy-avatar__img">
            </div>
            <div class="mhy-account-center-user">
              <div class="mhy-account-center-user__header">
                <div class="mhy-account-center-user__title">
                  <span class="mhy-account-center-user__name">hellofang</span>
                  <!---->
                  <img src="https://img-static.mihoyo.com/level/level1.png" class="mhy-img-icon mhy-account-center-user__level mhy-account-center-user__level--self">
                  <!---->
                </div>
                <div class="mhy-account-center-header__buttons">
                  <div class="mhy-button mhy-account-center-header__edit mhy-button-outlined mhy-button-md">
                    <button class="mhy-button__button" @click="updateMyInfo">编辑</button>
                  </div>
                  <!---->
                </div>
              </div>
              <div class="mhy-account-center-user__audit">
                <span class="mhy-account-center-user__uid">通行证ID:378888828</span>
                <!---->
              </div>
              <div class="mhy-account-center-user__intro">
                <p><i class="el-icon-tickets" style="color: #ad4e69;margin-right: 10px;font-size: 18px;"></i>系统原装签名，送给每一位小可爱~</p>
              </div>
              <div class="mhy-account-center-user__intro">
                <p><i class="el-icon-location-information" style="color: #00c3ff;margin-right: 10px;font-size: 18px;"></i>IP属地：广东</p>
              </div>
              <div class="mhy-account-center-header__data">
                <div class="mhy-account-center-header__data-item">
                  <a class="mhy-router-link mhy-account-center-header__data-num mhy-account-center-header__data-link">5</a>
                  <div class="mhy-account-center-header__data-label">粉丝</div>
                </div>
                <div class="mhy-account-center-header__data-item">
                  <a class="mhy-router-link mhy-account-center-header__data-num mhy-account-center-header__data-link">
                    10
                  </a>
                  <div class="mhy-account-center-header__data-label">关注</div>
                </div>
                <div class="mhy-account-center-header__data-item">
                  <div class="mhy-account-center-header__data-num">45</div>
                  <div class="mhy-account-center-header__data-label">获赞</div>
                </div>
              </div>
            </div>
          </div>

          <!--左侧菜单栏-->
          <div class="mhy-container mhy-side-menu mhy-account-center__menu">
            <header class="mhy-side-menu__header">个人中心</header>
            <ul class="mhy-side-menu__list">
              <li v-for="(item,index) in menus" :key="index" @click="selMenu(item)">
                <a :class="'mhy-router-link mhy-side-menu__item '+ (activeIndex === item.path?'nuxt-link-active':'')">
                  <i :class="item.icon" style="font-size: 18px;margin-right: 10px;"></i>
                  <span>{
   
   {item.name}}</span>
                </a>
              </li>
            </ul>
          </div>

          <!-- 右侧内容-->
          <div class="mhy-container mhy-account-center-content">
            <router-view></router-view>
          </div>

        </div>

      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '/index',
        menus: [
          {name:'个人简介',path:'/personal/user_info',icon:'el-icon-document'},
          {name:'我的合集',path:'/personal/myCollect',icon:'el-icon-document'},
        ]
      };
    },
    mounted() {
      let that = this;
      setInterval(function(){//定位当前菜单
        that.activeIndex = that.$router.currentRoute.path;
      },300);
    },
    methods: {
      selMenu(item){
        this.activeIndex = item.path;
        this.$router.push({path: item.path});
      },
      updateMyInfo(){
        this.$router.push({path: '/personal/user_info'});
      }
    }
  };
</script>

<style scoped>
  .root-page-container {
    background: url(https://www.miyoushe.com/_nuxt/img/background.cd0a312.png) no-repeat 0 62px;
    background-size: 100%;
  }
  .mhy-main-page {
    padding-top: 30px;
    position: relative;
  }
  .mhy-layout {
    width: 1000px;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 100px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
   .mhy-layout {
     zoom: 1;
   }
  .mhy-account-center-header {
    padding: 20px 50px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
  }
   .mhy-container {
     background-color: #fff;
     border-radius: 4px;
   }
  .mhy-account-center-header__avatar {
    margin-right: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
   .mhy-avatar__xxl {
     width: 120px;
     height: 120px;
   }
   .mhy-avatar {
     display: inline-block;
     position: relative;
   }
  .mhy-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    vertical-align: top;
  }
   .mhy-avatar__img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 1px solid #ebebeb;
     vertical-align: top;
   }
   img {
     border-style: none;
   }
  .mhy-account-center-user {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
  }
  .mhy-account-center-user__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .mhy-account-center-user__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-account-center-user__name {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
  }
  .mhy-account-center-user__level.mhy-img-icon {
    margin-left: 10px;
    height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
   .mhy-account-center-user__level--self {
     cursor: pointer;
   }
   .mhy-img-icon {
     height: 1em;
     fill: currentColor;
     overflow: hidden;
   }
  .mhy-account-center-header__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .mhy-button.mhy-button-md.mhy-button-outlined {
    line-height: 32px;
  }
   .mhy-button.mhy-button-md {
     width: 86px;
     height: 34px;
     line-height: 34px;
   }
   .mhy-button {
     display: inline-block;
     cursor: pointer;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
  .mhy-button-outlined .mhy-button__button {
    background-color: #fff;
    color: #00b2ff;
    border: 1px solid #00c3ff;
    border-radius: 4px;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: border-color,color;
    -o-transition-property: border-color,color;
    transition-property: border-color,color;
  }
   .mhy-button__button {
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     font-size: inherit;
     color: inherit;
     width: 100%;
     height: 100%;
     background-color: transparent;
     border: none;
     border-radius: 0;
     font-weight: inherit;
     line-height: inherit;
   }
  input, button, textarea {
    color: inherit;
    font: inherit;
  }
  .mhy-account-center-user__audit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-account-center-user__uid {
    font-size: 12px;
    color: #ccc;
  }
  a {
    text-decoration: none;
  }
  .mhy-account-center-user__certification, .mhy-account-center-user__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    color: #666;
    line-height: 18px;
  }
  .mhy-account-center-user__certification span, .mhy-account-center-user__intro span {
    margin-top: 2px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    line-height: 1;
  }
  p {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
  }
  .mhy-account-center-user__certification, .mhy-account-center-user__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    color: #666;
    line-height: 18px;
  }
  .mhy-account-center-user__certification .ip-icon, .mhy-account-center-user__intro .ip-icon {
    color: #76bfe3;
    font-size: 16px;
    margin-right: 8px;
  }
   .mhy-icon {
     font-size: inherit;
   }
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
  .icon-ip:before {
    content: "";
  }
  .mhy-account-center-header__data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 19px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-link {
    cursor: pointer;
  }
   .mhy-account-center-header__data-num {
     color: #333;
     font-size: 20px;
   }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-link {
    cursor: pointer;
  }
   .mhy-account-center-header__data-num {
     color: #333;
     font-size: 20px;
   }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-num {
    color: #333;
    font-size: 20px;
  }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }

  /*左侧菜单栏*/
  .mhy-side-menu {
    width: 280px;
    float: left;
  }
   .mhy-container {
     background-color: #fff;
     border-radius: 4px;
   }
  .mhy-side-menu__header {
    width: 100%;
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
  }
  .mhy-side-menu__list {
    padding: 0 30px 10px;
  }
  ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul, li {
    list-style: none;
  }
  .mhy-account-center__menu li:nth-of-type(3), .mhy-account-center__menu li:nth-of-type(5) {
    border-bottom: 1px solid #f0f0f0;
  }
  .mhy-side-menu .nuxt-link-active {
    color: #00c3ff;
  }
   .mhy-side-menu__item {
     padding: 0 20px;
     line-height: 50px;
     font-size: 14px;
     color: #666;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     cursor: pointer;
   }
  .mhy-side-menu .nuxt-link-active .mhy-icon {
    color: #00c3ff;
  }
   .mhy-side-menu__item .mhy-icon {
     width: 18px;
     font-size: 18px;
     vertical-align: top;
     display: inline-block;
     color: #d9d9d9;
     margin-right: 15px;
   }
  .mhy-icon {
    font-size: inherit;
  }
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
  .icon-wodefatie:before {
    content: "";
  }

  /*右侧内容*/
  .mhy-account-center-content {
    width: 700px;
    float: right;
  }
</style>

4.用户信息页面源码

<template>
  <div class="mhy-container mhy-account-center-content">
    <div class="mhy-account-center-content-container mhy-account-center-collection">
      <div class="mhy-account-center__subheader">
        <span>个人简介</span>
        <div class="mhy-account-center-collection-menu">
          <div class="mhy-button mhy-account-center-collection-menu__create mhy-button-outlined">
            <button class="mhy-button__button" @click="updateModal">编辑</button>
          </div>
          <!---->
        </div>
      </div>
    </div>
    <div style="margin: 20px;">
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            头像
          </template>
          <div>
            <el-image src="https://img-static.mihoyo.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png" style="width: 50px;height: 50px;"></el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            账户名
          </template>
          jack
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            昵称
          </template>
          jack
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            年龄
          </template>
          <el-tag size="small">43</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            性别
          </template>
          <el-tag size="small">男</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            邮箱Email
          </template>
          [email protected]
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            联系地址
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!--编辑窗口-->
    <el-dialog
      title="修改信息"
      :visible.sync="box"
      v-loading="loading"
      width="50%"
      :close-on-click-modal="true"
      center>
      <div>
        <el-form status-icon
                 :rules="rules"
                 ref="form"
                 :model="form"
                 label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="头像：">
                <el-upload
                  class="avatar-uploader"
                  action=""
                  ref="upload"
                  :show-file-list="false"
                  :auto-upload="false"
                  :before-upload="beforeUpload"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                >
                  <img v-if="form.avatar" :src="form.avatar" class="avatar" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="请输入昵称" clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                  <el-radio label="0">保密</el-radio>
                  <el-radio label="1">男</el-radio>
                  <el-radio label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爱好" prop="hobby">
                <el-input v-model="form.hobby" placeholder="请输入爱好" clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="职业" prop="job">
                <el-input v-model="form.job" placeholder="请输入职业" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人简介" prop="remark">
                <el-input type="textarea" resize="none" v-model="form.remark" placeholder="请输入个人简介" clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="text-align: center;">
            <el-button type="primary" style="width: 100px;" @click="submitFun">提交</el-button>
            <el-button type="primary" plain style="width: 100px;" @click="box=false">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        box: false,
        form: {
          avatar:'https://img-static.mihoyo.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png',//回显头像
          nickname: '',
          gender: '',
          file: null,
          hobby:'',
          job:'',
          remark: ''
        },
        rules: {
          nickname: [
            { required: true, message: '请输入昵称', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ]
        },
      };
    },
    mounted() {
    },
    methods: {
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      handleRemove(file, fileList) {
        this.form.file = null;
        console.info(this.form);
      },
      handleChange(file, fileList){
        console.info(fileList);
        this.form.file = file;
        let URL = window.URL || window.webkitURL;
        this.form.avatar = URL.createObjectURL(file.raw);
      },
      updateModal(){//打开窗口
        if(this.$refs.form){
          this.$refs.form.resetFields();
        }
        this.form.gender = this.form.gender + '';
        console.info(this.form);
        this.box = true;
      },
      submitFun(){//提交
        console.info(this.form);
      }
    }
  };
</script>

<style scoped>
  .mhy-account-center-content {
    width: 700px;
    float: right;
  }
  .mhy-container {
    background-color: #fff;
    border-radius: 4px;
  }
  p{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
  }
  .mhy-account-center__subheader {
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .mhy-account-center-collection-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
  }
  .mhy-account-center-collection-menu .mhy-button {
    height: 28px;
    line-height: 28px;
    font-weight: 600;
  }
  .mhy-account-center-collection-menu__create {
    width: 88px;
  }
  .mhy-button {
    display: inline-block;
    cursor: pointer;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .mhy-button-outlined .mhy-button__button {
    background-color: #fff;
    color: #00b2ff;
    border: 1px solid #00c3ff;
    border-radius: 4px;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: border-color,color;
    -o-transition-property: border-color,color;
    transition-property: border-color,color;
  }
  .mhy-button__button {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-size: inherit;
    color: inherit;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-weight: inherit;
    line-height: inherit;
  }
</style>

5.我的合集源码

<template>
  <div class="mhy-container mhy-account-center-content">
    <div class="mhy-account-center-content-container mhy-account-center-collection">
      <div class="mhy-account-center__subheader">
        <span>我的合集</span>
        <div class="mhy-account-center-collection-menu">
          <div class="mhy-button mhy-account-center-collection-menu__create mhy-button-outlined">
            <button class="mhy-button__button">创建合集</button>
          </div>
          <!---->
        </div>
      </div>
      <div class="mhy-account-center-content-container__list">
        <div class="mhy-collection-card mhy-account-center-collection-card">
          <a class="mhy-router-link mhy-collection-card__link">
            <div class="mhy-collection-card__cover" style="background-image: url(https://upload-bbs.miyoushe.com/upload/2023/04/13/378888828/76171646a64fa87d316f7d7ddbfb8efd_4456710405302802792.jpg?x-oss-process=image/resize,s_150/quality,q_80/auto-orient,0/interlace,1/format,jpg);">
            </div>
          </a>
          <div class="mhy-collection-card__info">
            <a class="mhy-router-link mhy-collection-card__link" target="_blank">
              <p class="mhy-collection-card__name">hello</p>
              <p class="mhy-collection-card__desc">hello word</p>
            </a>
            <div class="mhy-collection-card__stats">
              <span>0篇作品</span>
              <span>0浏览</span>
              <span>49分钟前</span>
            </div>
          </div>
          <!---->
        </div>
        <div class="mhy-container__footer">
          <div class="mhy-loadmore mhy-loadmore-scroll">
            <div class="mhy-loadmore__nomore">没有更多数据了</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    mounted() {
    },
    methods: {
    }
  };
</script>

<style scoped>
  .mhy-account-center-content {
    width: 700px;
    float: right;
  }
   .mhy-container {
     background-color: #fff;
     border-radius: 4px;
   }
  p{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
  }
  .mhy-account-center__subheader {
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .mhy-account-center-collection-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
  }
  .mhy-account-center-collection-menu .mhy-button {
    height: 28px;
    line-height: 28px;
    font-weight: 600;
  }
   .mhy-account-center-collection-menu__create {
     width: 88px;
   }
   .mhy-button {
     display: inline-block;
     cursor: pointer;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
  .mhy-button-outlined .mhy-button__button {
    background-color: #fff;
    color: #00b2ff;
    border: 1px solid #00c3ff;
    border-radius: 4px;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: border-color,color;
    -o-transition-property: border-color,color;
    transition-property: border-color,color;
  }
   .mhy-button__button {
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     font-size: inherit;
     color: inherit;
     width: 100%;
     height: 100%;
     background-color: transparent;
     border: none;
     border-radius: 0;
     font-weight: inherit;
     line-height: inherit;
   }
  input, button, textarea {
    color: inherit;
    font: inherit;
  }
  .mhy-account-center-collection-card {
    padding: 15px 40px 15px 30px;
  }
   .mhy-collection-card {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
   }
  .mhy-collection-card__link {
    color: #333;
  }
  a {
    text-decoration: none;
  }
  .mhy-collection-card__cover {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .mhy-collection-card__info {
    display: inline-block;
    margin-left: 20px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
  }
  .mhy-collection-card__desc, .mhy-collection-card__name, .mhy-collection-card__info .mhy-collection-card__link {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
   .mhy-collection-card__link {
     color: #333;
   }
  .mhy-collection-card__name {
    position: relative;
    line-height: 1;
    height: 20px;
  }
   .mhy-collection-card__desc, .mhy-collection-card__name, .mhy-collection-card__info .mhy-collection-card__link {
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
  .mhy-collection-card__desc {
    color: #999;
    font-size: 12px;
    line-height: 1;
    height: 22px;
  }
   .mhy-collection-card__desc, .mhy-collection-card__name, .mhy-collection-card__info .mhy-collection-card__link {
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
  .mhy-collection-card__stats {
    color: #ccc;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-collection-card__stats span {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-collection-card__stats span {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
   .mhy-collection-card__stats span:not(:first-child)::before {
     content: "";
     display: inline-block;
     width: 2px;
     height: 2px;
     border-radius: 50%;
     background-color: #ccc;
     margin: 0 6px;
   }
  .mhy-container__footer {
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #ebebeb;
  }
  .mhy-loadmore__btn .mhy-button__button, .mhy-loadmore__nomore {
    color: #ccc;
    font-size: 16px;
  }
</style>

三、总结

以上是仿原神个人中心的核心源码，此demo是一个简简单单的个人中心，希望能帮到有这样需求的同学。

祝大家五一快乐！

欢迎交流，关注作者，及时了解更多好项目！

获取源码或如需帮助，可通过博客后面名片+作者即可！

猜你喜欢

转载自blog.csdn.net/lucky_fang/article/details/130466636
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022