Vue+element ui实现好看的个人中心

一、效果图

仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图：

原神社区个人中心效果图：

我画的个人中心效果图：

下面上代码

二、项目结构

router文件夹里的index.js为路由注册文件，person文件夹里Info文件为个人简介页，MyArticle文件为发布页，MyCollect为文件收藏页，MyFanAndFollow文件为粉丝和关注页，Personal文件为个人中心主页，PersonalDia文件为编辑按钮弹窗。

三、界面效果和代码实现

1.路由注册

首先要去router文件夹的index.js文件进行路由注册

代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/',
          component: r => require.ensure([], () => r(require('@/views/Index')), 'index')
        },
        {
          path: '/newsuser/personal/:id',
          component: r => require.ensure([], () => r(require('@/views/person/Personal')), 'personal'),
          meta: {
            requireLogin: true
          },
          children: [
            {
              // path: '/personal/info/:id',
              path: '/newsuser/personal/info/:id',
              name:'info',
              component: r => require.ensure([], () => r(require('@/views/person/Info')), 'info')
            },
            {
              path:'/newsuser/personal/myarticle/:id',
              name:'myarticle',
              component: r => require.ensure([], () => r(require('@/views/person/MyArticle')), 'myarticle')
            },
            {
              path:'/newsuser/personal/mycollect/:id',
              name:'mycollect',
              component: r => require.ensure([], () => r(require('@/views/person/MyCollect')), 'mycollect')
            },
            {
              path:'/newsuser/personal/myfan/:id',
              name:'myfan',
              component: r => require.ensure([], () => r(require('@/views/person/MyFanAndFollow')), 'myfan')
            },
            {
              path:'/newsuser/personal/myfollow/:id',
              name:'myfollow',
              component: r => require.ensure([], () => r(require('@/views/person/MyFanAndFollow')), 'myfollow')
            }
          ]
        }
      ]
    },
  
export default router

2.个人主页实现

Personal.vue:

<template>
  <div>
    <div class="PersonTop">
      <div class="PersonTop_img">
        <img v-image-preview :src="avatar" />
      </div>
      <div class="PersonTop_text">
        <div class="user_text">
          <div class="user_name">
            <span> {{ nickname }} </span>
          </div>
          <div class="user-v" v-if="v === 3">
            <img src="@/assets/img/V.png" class="user-v-img" />
            <span class="user-v-font">优质媒体作者</span>
          </div>
          <div class="user_qianming">
            <span> {{ design }}</span>
          </div>
          <div class="user_anniu">
            <el-button
              class="el-icon-edit"
              v-if="this.$route.params.id === this.$store.state.id"
              type="primary"
              size="medium"
              plain
              @click="edit"
              >编辑</el-button
            >
            <el-button
              v-else
              @click="follow"
              type="primary"
              size="medium"
              icon="el-icon-check"
              v-text="
                isfollowid.indexOf(this.$route.params.id) > -1
                  ? '已关注'
                  : '关注'
              "
            ></el-button>
          </div>
        </div>
        <div class="user_num">
          <div style="cursor: pointer" @click="myfan">
            <div class="num_number">{{ fanCounts }}</div>
            <span class="num_text">粉丝</span>
          </div>
          <div style="cursor: pointer" @click="myfollow">
            <div class="num_number">{{ followCounts }}</div>
            <span class="num_text">关注</span>
          </div>
          <div>
            <div class="num_number">{{ goodCounts }}</div>
            <span class="num_text">获赞</span>
          </div>
        </div>
      </div>
    </div>
    <div class="person_body">
      <div class="person_body_left">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span class="person_body_list" style="border-bottom: none"
              >个人中心</span
            >
          </div>
          <!-- <div
            class="person_body_list"
            v-for="(item, index) in person_body_list"
            :key="index"
          >
            <router-link :to="{ name: item.name, params: item.params }">{{
              item.label
            }}</router-link>
          </div> -->
          <el-menu
            router
            active-text-color="#00c3ff"
            class="el-menu-vertical-demo"
          >
            <el-menu-item
              index="info"
              :route="{ name: 'info', params: $route.params.id }"
            >
              <i class="el-icon-user"></i>
              <span slot="title">个人简介</span>
            </el-menu-item>
            <el-menu-item
              index="myarticle"
              :route="{ name: 'myarticle', params: $route.params.id }"
            >
              <i class="el-icon-edit-outline"></i>
              <span slot="title">发帖</span>
            </el-menu-item>
            <el-menu-item
              index="mycollect"
              :route="{ name: 'mycollect', params: $route.params.id }"
            >
              <i class="el-icon-document"></i>
              <span slot="title">收藏</span>
            </el-menu-item>
            <el-menu-item
              index="myfan"
              :route="{ name: 'myfan', params: $route.params.id }"
            >
              <i class="el-icon-tableware"></i>
              <span slot="title">粉丝</span>
            </el-menu-item>
            <el-menu-item
              index="myfollow"
              :route="{ name: 'myfollow', params: $route.params.id }"
            >
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">关注</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </div>
      <div class="person_body_right">
        <router-view></router-view>
      </div>
    </div>
    <personal-dia ref="dia" @flesh="reload" />
  </div>
</template>

<script>
import { userInfo } from "@/api/user";
import {
  myFollow,
  addFollow,
  deleteFollow,
  followAndFanCount,
} from "@/api/follow.js";
import { mygoodCount } from "@/api/good";
import PersonalDia from "./PersonalDia.vue";

export default {
  components: { PersonalDia },
  name: "Personal",
  inject: ["reload"],
  data() {
    return {
      avatar: "",
      nickname: "",
      v: 1,
      design: "",
      followCounts: "",
      fanCounts: "",
      goodCounts: "",
      isfollow: true,
      followData: {
        fanId: "",
        followId: "",
      },
      isfollowid: [],
    };
  },
  mounted() {
    this.load();
  },
  watch: {
    $route(to, from) {
      if (to.path == `/newsuser/personal/${this.$store.state.id}`) {
        this.reload();
      } else if (to.path == `/newsuser/personal/${this.$route.params.id}`) {
        this.reload();
      }
    },
  },
  methods: {
    load() {
      userInfo(this.$route.params.id)
        .then((res) => {
          console.log(res);
          this.avatar = res.data.avatar;
          this.nickname = res.data.nickname;
          this.v = res.data.v;
          this.design = res.data.design;
        })
        .catch((err) => {
          console.log(err);
        });

      myFollow(this.$store.state.id)
        .then((res) => {
          res.data.forEach((res) => {
            this.isfollowid.push(res.id);
          });
        })
        .catch((err) => {
          console.log(err);
        });

      followAndFanCount(this.$route.params.id)
        .then((res) => {
          this.followCounts = res.data.followCounts;
          this.fanCounts = res.data.fanCounts;
        })
        .catch((err) => {
          console.log(err);
        });

      mygoodCount(this.$route.params.id)
        .then((res) => {
          this.goodCounts = res.data.goodCounts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    myfan() {
      this.$router.push({
        path: `/newsuser/personal/myfan/${this.$route.params.id}`,
      });
    },
    myfollow() {
      this.$router.push({
      path:`/newsuser/personal/myfollow/${this.$route.params.id}`,
      });
    },
    follow() {
      if (!this.$store.state.id) {
        this.$message({
          showClose: true,
          message: "请登录后再进行操作哦",
          type: "warning",
        });
      } else {
        this.followData.followId = this.$route.params.id;
        this.followData.fanId = this.$store.state.id;
        if (this.isfollowid.indexOf(this.followData.followId) > -1) {
          this.isfollow = true;
        } else {
          this.isfollow = false;
        }
        if (this.isfollow) {
          deleteFollow(this.followData)
            .then((res) => {
              this.isfollow = false;
              this.$message({
                showClose: true,
                message: "已取消关注",
                type: "success",
              });
              this.reload();
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (!this.isfollow) {
          addFollow(this.followData)
            .then((res) => {
              this.isfollow = true;
              this.$message({
                showClose: true,
                message: "已成功关注",
                type: "success",
              });
              this.reload();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
    edit() {
      this.$refs.dia.open();
    },
  },
};
</script>

<style scoped>
.me-video-player {
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  position: fixed;
  left: 0;
  z-index: 0;
  top: 0;
}
.PersonTop {
  width: 1000px;
  height: 140px;
  padding-top: 20px;
  background-color: white;
  margin-top: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 5px;
}

.PersonTop_img {
  width: 150px;
  height: 120px;
  background-color: #8c939d;
  margin-right: 24px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.PersonTop_img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.PersonTop_text {
  height: 120px;
  width: 880px;
  display: flex;
}

.user_text {
  width: 60%;
  height: 100%;
  line-height: 30px;
}

.user_name {
  font-weight: bold;
}
.user-v {
  margin-bottom: -5px;
}
.user-v-img {
  width: 15px;
  height: 15px;
}
.user-v-font {
  font-size: 15px;
  color: #00c3ff;
}
.user_qianming {
  font-size: 14px;
  color: #999;
}

.user_num {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.user_num > div {
  text-align: center;
  border-right: 1px dotted #999;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  line-height: 20px;
}

.num_text {
  color: #999;
}

.num_number {
  font-size: 20px;
  color: #333;
}
.el-menu-item>span {
  font-size: 16px;
  color: #999;
}

/*下面部分样式*/
.person_body {
  width: 1000px;
  margin-top: 210px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

.person_body_left {
  width: 27%;
  height: 600px;
  border-radius: 5px;
  margin-right: 3%;
  text-align: center;
}

.person_body_list {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  font-size: 22px;
  border-bottom: 1px solid #f0f0f0;
  background-image: -webkit-linear-gradient(
    left,
    rgb(42, 134, 141),
    #e9e625dc 20%,
    #3498db 40%,
    #e74c3c 60%,
    #09ff009a 80%,
    rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}

.el-menu-item {
  margin-top: 22px;
}

.person_body_right {
  width: 70%;
  /* height: 500px; */
  border-radius: 5px;
  background-color: white;
}

.box-card {
  height: 500px;
}

/*ui样式*/
.el-button {
  width: 84px;
}
</style>

3.编辑弹窗按钮实现

效果图：

代码如下：
PersonalDia.vue:

<template>
  <div>
      <el-dialog
  title="修改个人信息"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <el-form :model="form" :rules="rules" ref="form" label-width="150px">
      <div class="updateinfo">
  <div class="left">
      <el-form-item label="头像" prop="avatar">
            <img style="width:150px;height:110px" :src="form.avatar"></img>
          </el-form-item>
                    <el-form-item label="账号密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-switch
              v-model="form.sex"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="男"
              inactive-text="女"
              :active-value= "1"
               :inactive-value= "0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          
  </div>
  <div class="right">
      <el-form-item label="用户编号" prop="id">
            <el-input v-model="form.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" disabled></el-input>
          </el-form-item>
          <el-form-item label="地区" prop="area">
            <el-input v-model="form.area"></el-input>
          </el-form-item>
          <el-form-item label="兴趣爱好" prop="hobby">
            <el-input v-model="form.hobby"></el-input>
          </el-form-item>
          <el-form-item label="职业" prop="work">
            <el-input v-model="form.work"></el-input>
          </el-form-item>
                    <el-form-item label="个性签名" prop="design">
            <el-input v-model="form.design"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobilePhoneNumber">
            <el-input v-model="form.mobilePhoneNumber"></el-input>
          </el-form-item>
  </div>
  </div>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submit">提 交</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { userInfo, updateUser } from "@/api/user.js";

export default {
  name: "PersonalDia",
  data() {
    return {
      dialogVisible: false,
      form: {
        avatar: "",
        password: "",
        nickname: "",
        age: Number,
        email: "",
        mobilePhoneNumber: "",
        sex: Number,
        id: Number,
        account: "",
        area: "",
        hobby: "",
        work: "",
        design: "",
      },
      rules: {
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "账号密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    load() {
      userInfo(this.$store.state.id)
        .then((res) => {
          console.log(res);
          Object.assign(this.form, res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit() {
      updateUser(this.form)
        .then((res) => {
          console.log(res);
          this.dialogVisible = false;
          this.$emit("flesh");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("flesh");
    },
  },
};
</script>

<style scoped>
.updateinfo {
  height: 350px;
  overflow: auto;
}
.left {
  /* width: 330px; */
  float: left;
}
.right {
  overflow: hidden;
}
</style>

4.个人简介实现

效果图：

代码如下：
Info.vue:

<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <template slot="extra">
          <el-button type="primary" v-if="$route.params.id==$store.state.id" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            头像
          </template>
          <img class="img" :src="avatar" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            账户名
          </template>
          {{ account }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            昵称
          </template>
          {{ nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-odometer"></i>
            年龄
          </template>
          {{ age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            <i class="el-icon-female"></i>
            性别
          </template>
          <el-tag size="small">{{ sex }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱Email
          </template>
          {{ email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号码
          </template>
          {{ mobilePhoneNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地区
          </template>
          {{ area }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            职业
          </template>
          {{ work }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-basketball"></i>
            兴趣爱好
          </template>
          {{ hobby }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            个性签名
          </template>
          {{ design }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            注册日期
          </template>
          {{ createDate | formatDate }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { userInfo } from "@/api/user.js";
export default {
  name: "Info",
  data() {
    return {
      avatar: String,
      account: String,
      age: Number,
      email: String,
      mobilePhoneNumber: String,
      area: String,
      createDate: Number,
      nickname: String,
      sex: String,
      work: String,
      hobby: String,
      design: String,
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      userInfo(this.$route.params.id)
        .then((res) => {
          this.avatar = res.data.avatar;
          this.account = res.data.account;
          this.age = res.data.age;
          this.email = res.data.email;
          this.mobilePhoneNumber = res.data.mobilePhoneNumber;
          this.area = res.data.area;
          this.createDate = res.data.createDate;
          this.nickname = res.data.nickname;
          this.sex = res.data.sex == 1 ? "男" : "女";
          this.work = res.data.work;
          this.design = res.data.design;
          this.hobby = res.data.hobby;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.img {
  width: 80px;
  height: 80px;
}
</style>

5.发贴页实现

效果图：

代码：
MyArticle.vue:

<template>
  <div class="myart1">
    <article-item v-for="a in allData" :key="a.id" v-bind="a"/>
        <el-empty
        v-if="allData.length == 0"
        :image-size="250"
        description="暂未发表任何新闻额"
      ></el-empty>
  </div>
</template>

<script>
import { myArticle } from "@/api/user.js";
import ArticleItem from '../../components/article/ArticleItem.vue';
export default {
  components: { ArticleItem },
  name: "MyArticle",
  data() {
    return {
      allData:[]
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      myArticle(this.$route.params.id)
        .then((res) => {
          console.log(res);
          this.allData=res.data
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
  .myart1{
    line-height: 30px;
  }
</style>

6.收藏页实现

效果图：

代码：
MyCollect.vue:

<template>
  <div class="myart1">
    <article-item v-for="a in allData" :key="a.id" v-bind="a"/>
    <el-empty
        v-if="allData.length == 0"
        :image-size="250"
        description="暂未收藏任何新闻额"
      ></el-empty>
  </div>
</template>

<script>
import { myCollect } from "@/api/collect.js";
import ArticleItem from '../../components/article/ArticleItem.vue';
export default {
  components: { ArticleItem },
  name: "MyCollect",
  data() {
    return {
      allData:[]
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      myCollect(this.$route.params.id)
        .then((res) => {
          console.log(res);
          res.data.forEach(element => {
          element.createDate=this.$options.filters['formatDate'](parseInt(element.createDate))
          });
          this.allData=res.data
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 5px;

  }
  .myart1{
    line-height: 30px;
  }
</style>

7.关注和收藏页实现

效果图：


代码：
MyFanAndFollow.vue:

<template>
  <div class="fanorfollow_box">
    <div class="fanorfollow" v-for="(item, index) in allData">
      <div class="fanorfollow_left">
        <img class="fanorfollow_img" v-image-preview :src="item.avatar" />
      </div>
      <div class="fanorfollow_info">
        <div class="fanorfollow_info_top">
          <span
            style="color: #666; max-width: 180px"
            @click="personal(item.id)"
            >{{ item.nickname }}</span
          >
        </div>
        <div class="fanorfollow_info_bottom">
          <span @click="personal(item.id)">{{ item.design }}</span>
        </div>
      </div>
      <div class="fanorfollow_botton">
        <el-button
          @click="follow(item.id)"
          type="primary"
          size="small"
          round
          icon="el-icon-check"
          v-text="isfollowid.indexOf(item.id) > -1 ? '已关注' : '关注'"
        ></el-button>
      </div>
    </div>
    <div>
      <el-empty
        v-if="allData.length == 0"
        :image-size="250"
        description="这里什么都没有哟"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { myFollow, myFan, addFollow, deleteFollow } from "@/api/follow.js";

export default {
  name: "MyFanAndFollow",
  inject: ["reload"],
  data() {
    return {
      allData: [],
      isfollow: true,
      followData: {
        fanId: "",
        followId: "",
      },
      isfollowid: [],
    };
  },
  watch: {
    $route(to, from) {
      if (to.path == `/newsuser/personal/myfan/${this.$route.params.id}`) {
        myFan(this.$route.params.id)
          .then((res) => {
            console.log(res);
            this.allData = res.data;
            myFollow(this.$route.params.id).then((res) => {
                res.data.forEach((element) => {
                  this.isfollowid.push(element.id);
                });
              });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        myFollow(this.$route.params.id)
          .then((res) => {
            console.log(res);
            this.allData = res.data;
            res.data.forEach((element) => {
              this.isfollowid.push(element.id);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      if (
        this.$route.path == `/newsuser/personal/myfan/${this.$route.params.id}`
      ) {
        myFan(this.$route.params.id)
          .then((res) => {
            console.log(res);
            this.allData = res.data;
              myFollow(this.$route.params.id).then((res) => {
                res.data.forEach((element) => {
                  this.isfollowid.push(element.id);
                });
              });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        myFollow(this.$route.params.id)
          .then((res) => {
            console.log(res);
            this.allData = res.data;
            res.data.forEach((element) => {
              this.isfollowid.push(element.id);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    follow(id) {
      if (!this.$store.state.id) {
        this.$message({
          showClose: true,
          message: "请登录后再进行操作哦",
          type: "warning",
        });
        return;
      }
      if (this.$store.state.id != this.$route.params.id) {
        this.$message({
          showClose: true,
          message: "此页面不是你的个人中心哦",
          type: "warning",
        });
        return;
      }
      this.followData.followId = id;
      this.followData.fanId = this.$store.state.id;
      if (this.isfollowid.indexOf(this.followData.followId) > -1) {
        this.isfollow = true;
      } else {
        this.isfollow = false;
      }
      if (this.isfollow) {
        deleteFollow(this.followData)
          .then((res) => {
            console.log(res.data);
            this.isfollow = false;
            this.$message({
              showClose: true,
              message: "已取消关注",
              type: "success",
            });
            this.reload();
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (!this.isfollow) {
        addFollow(this.followData)
          .then((res) => {
            console.log(res.data);
            this.isfollow = true;
            this.$message({
              showClose: true,
              message: "已成功关注",
              type: "success",
            });
            this.reload();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    personal(id) {
      this.$router.push({ path: `/newsuser/personal/${id}` });
    },
  },
};
</script>

<style>
.fanorfollow_box :hover {
  border-width: 1px;
  border-color: deepskyblue;
}
.fanorfollow {
  padding: 15px 40px 15px 30px;
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #ebebeb;
}
.fanorfollow :hover {
  border-width: 1px;
  border-color: deepskyblue;
}
.fanorfollow_left {
  width: 60px;
  height: 60px;
}
.fanorfollow_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ebebeb;
  vertical-align: top;
}
.fanorfollow_info {
  display: inline-block;
  margin-left: 20px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: hidden;
}
.fanorfollow_info_top {
  display: inline-block;
  font-size: 10;
  line-height: 14px;
  vertical-align: top;
  cursor: pointer;
}
.fanorfollow_info_top :hover {
  color: deepskyblue;
}
.fanorfollow_info_bottom {
  line-height: 14px;
  color: #999;
  margin-top: 5px;
  cursor: pointer;
}
.fanorfollow_info_bottom :hover {
  color: deepskyblue;
}
</style>

四、总结

差不多就这些，关注我后续会有更多精彩内容文章来源地址https://www.toymoban.com/news/detail-780240.html

到了这里，关于Vue+element ui实现好看的个人中心的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！