设计部分

YouBili_front/src/views/contribute/contribute.vue

@@ -4,8 +4,10 @@
   justify-content: center;align-items: center;  width: calc(100vw - 500px);
   height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
 
+
     <div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
 
+      <el-card>
       <!-- 页面标题   -->
       <h1 style="margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;">
         投稿中心</h1>
@@ -81,12 +83,14 @@
                      :on-success="handleSuccess"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove">
-            <el-button type="primary">点击上传</el-button>
             <div>只能上传mp4文件,且不超过100MB</div>
+            <el-button type="primary" style="margin-left: 150px">点击上传</el-button>
+
           </el-upload>
         </el-form-item>
 
       </el-form>
+      </el-card>
     </div>
   </div>
 </template>

YouBili_front/src/views/personal/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 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>
-                                <el-avatar slot="reference" style="cursor: pointer" shape="square" :size="60" :src="squareUrl"></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: 50px"  >
-                        <p style="margin-left: 50px;margin-top: 0px;color: #99a9bf">{{ v.tag }}</p>
-                    </el-row>
-                    <el-row :span="8" style="margin-left: 650px;margin-top: -30px"  >
-                        <el-button type="primary" round>关注</el-button>
-                    </el-row>
-                </el-col>
-            </el-card>
-        </div>
-
+  <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>
@@ -52,72 +55,117 @@ import Handder from "@/components/Handder.vue";
 import Sidebar from "@/components/sidebar.vue";
 
 export default {
-    name: "personalCenter",
-    components: {Sidebar,Handder},
-    data() {
-        return {
-            radio1: '1',
-            radio2: '2',
-            activeName: 'first',
-            abc: false,
-            number: [
-                {name : '张三',
-                    tag:'美好的生活大概就是白天又说有笑晚上睡个好觉',
-                    fans: 12,follow: 120},
-                {name : '李四',
-                    tag:'我够坚强，但不是所有的伤我都能抗',
-                    fans: 40,follow: 300},
-                {name : '王五',
-                    tag:'你的微博辣妹有那么多，原来我只是其中一个',
-                    fans: 67,follow: 420},
-                {name : '赵六',
-                    tag:'姑娘姑娘我就要嫁人啦',
-                    fans: 80,follow: 720},
-            ]
-        }
+  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);
     },
-    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() {
+  },
+  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 (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;
-    }
+@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{
+.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>
\ No newline at end of file