fans.vue

<template>
  <div class="idxs">
    <!--        设置关注和粉丝之间的跳转-->
    <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" active-text-color="orange" router>
      <el-menu-item index="/fans">粉丝</el-menu-item>
      <el-menu-item index="/follow">关注</el-menu-item>
    </el-menu>
    <el-empty description="没有关注" v-if="abc"></el-empty>
    <div v-for="v of number">
      <el-card class="zoom" style="height: 120px;
  width: 800px;
  margin-left: 200px;
  margin-top: 30px;">
        <el-col>
          <el-row :span="8" style="margin-top: 10px">
            <div>
              <el-popover
                  placement="bottom"
                  width="200"
                  trigger="hover"
              >
                <el-row :gutter="10">
                  <el-col :span="12">
                    <span><i class="el-icon-user"></i><span>粉丝数:</span></span>
                    <span>{{ v.fans }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span><i class="el-icon-user"></i><span>关注数:</span></span>
                    <span>{{ v.follow }}</span>
                  </el-col>
                </el-row>
                <div>
                  {{ v.tag }}
                </div>
                <el-avatar slot="reference" style="cursor: pointer" shape="square" :size="60"
                           src="../../../public/logo1.png"></el-avatar>
              </el-popover>
            </div>
          </el-row>
          <el-row :span="8" style="margin-top: -45px;margin-left: 50px">
            <div style="margin-left: 50px;margin-top: 0px"><h3>{{ v.name }}</h3></div>
          </el-row>
          <el-row :span="8" style="margin-left: 650px;margin-top: -30px">
            <el-button :type="v.type ? 'danger' : 'primary'" round @click="toggleFollow($event)" v-model="v.type" :value="v.id">
              {{ v.type ? '取消关注' : '关注' }}</el-button>
          </el-row>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";

export default {
  name: "personalCenter",
  components: {Sidebar, Handder},
  data() {
    return {
      activeName: 'first',
      abc: false,
      number: [
        {
          id: 1,
          name: '张三',
          tag: '美好的生活大概就是白天又说有笑晚上睡个好觉',
          type: false,
          fans: 12, follow: 120
        },
        {
          id: 2,
          name: '李四',
          tag: '我够坚强，但不是所有的伤我都能抗',
          type: true,
          fans: 40, follow: 300
        },
        {
          id: 3,
          name: '王五',
          tag: '你的微博辣妹有那么多，原来我只是其中一个',
          type: false,
          fans: 67, follow: 420
        },
        {
          id: 4,
          name: '赵六',
          tag: '姑娘姑娘我就要嫁人啦',
          type: false,
          fans: 80, follow: 720
        },
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toggleFollow(event) {
      // 获取点击的按钮对应的用户 id
      let id = event.target.value;
      // 在 number 数组中找到对应的用户对象
      let user = this.number.find(v => v.id == id);
      // 切换用户的关注状态
      user.type = !user.type;
      if (user.type) {
        // 弹出关注成功的框框
        Notification(this.$notify)({
          title: '关注成功',
          offset: 100,
          type: "success"
        });
      } else {
        // 弹出取消关注成功的框框
        Notification(this.$notify)({
          title: '取消关注',
          offset: 100,
          type: "error"
        });
      }
    },
  },
  created() {

  }
}

</script>

<style scoped>

@media screen and (min-width: 1970px) {
  .idxs {
    margin: 60px auto;
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
  }
}

@media screen and (max-width: 1969px) {
  .idxs {
    /*width: 1270px;*/
    /*min-width: 1000px;*/
    /*margin-top: 60px;*/
    /*margin-left: 270px;*/
    /*padding: 40px;*/
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
    margin: 60px auto;
  }

  .idxs {
    margin-left: 250px;
  }
}

.el-card:hover {

}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.zoom {
  transition: transform 0.3s; /* Animation */
}

</style>