您现在的位置是：首页 >技术交流 >vue+element仿原神实现好看的个人中心网站首页技术交流

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

愛芳芳 2023-07-08 04:00:03
简介vue+element仿原神实现好看的个人中心

目录

一、仿原神效果图

 二、代码实现

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>
          124343@qq.com
        </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是一个简简单单的个人中心，希望能帮到有这样需求的同学。

祝大家五一快乐！

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

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

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐