diff --git a/YouBili_front/public/logo1.png b/YouBili_front/public/logo1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and b/YouBili_front/public/logo1.png differ
diff --git a/YouBili_front/src/views/pay/commodity.vue b/YouBili_front/src/views/pay/commodity.vue
index 966eb33c62b59bad550de5fffa3fe4df308cbd95..71c35dae81b41dead477af9f8437c7b9457312bd 100644
--- a/YouBili_front/src/views/pay/commodity.vue
+++ b/YouBili_front/src/views/pay/commodity.vue
@@ -1,61 +1,93 @@
 <!--购买界面-->
 <template>
-  <div>
-  <div>
-    <div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
-height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
-      <div id="change_group">
-        <el-radio-group v-model="radio1">
-          <el-radio-button label="月度"></el-radio-button>
-          <el-radio-button label="季度"></el-radio-button>
-          <el-radio-button label="年度"></el-radio-button>
-        </el-radio-group>
-      </div>
-
-      <div>
-        <el-card class="box-card">
-          <div class="text item">
-
-            <router-link to="/pay">
-              <el-button class="pay_button" type="primary">立即购买</el-button>
-            </router-link>          </div>
-        </el-card>
-      </div>
-      <div>
-        <el-card class="box-card">
-          <div class="text item">
-            <router-link to="/pay">
-              <el-button class="pay_button" type="primary">立即购买</el-button>
-            </router-link>          </div>
-        </el-card>
-      </div>
-      <div>
-        <el-card class="box-card">
-          <div class="text item">
-            <router-link to="/pay">
-              <el-button class="pay_button" type="primary">立即购买</el-button>
-            </router-link>
+  <div id="">
+    <div class="idxs">
+      <el-card class="box-card">
+        <div class="text_item">
+          <h2 style="color:palevioletred;text-align: center">月度会员服务</h2>
+          <img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
+          <div class="rules_d">
+            <p class="el-icon-success">可看电影:15个</p>
+            <p class="el-icon-success">套餐时长:30天</p>
+            <p class="el-icon-success">电影画质:960p</p>
+            <p class="el-icon-success">基础会员弹幕字体颜色</p>
+            <p class="el-icon-error">无专属客服</p>
+            <p class="el-icon-error">不支持多种设备</p>
+            <p class="el-icon-error">不能观看美剧电影</p>
+            <p class="el-icon-error">仅限个人账户使用,不支持他人登录</p>
           </div>
-        </el-card>
-      </div>
+          <router-link to="/pay">
+            <el-button class="pay_button" type="primary">立即购买</el-button>
+          </router-link>
+        </div>
+      </el-card>
+    </div>
+
+
+    <div>
+      <el-card class="box-card">
+        <div class="text_item">
+          <h2 style="color:palevioletred;text-align: center">季度会员服务</h2>
+          <img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
+          <div class="rules_d">
+            <p class="el-icon-success">可看电影:50个</p>
+            <p class="el-icon-success">套餐时长:90天</p>
+            <p class="el-icon-success">电影画质:1080p</p>
+            <p class="el-icon-success">中级会员弹幕字体颜色</p>
+            <p class="el-icon-success">有季度会员专属客服</p>
+            <p class="el-icon-success">支持手机,平板设备</p>
+            <p class="el-icon-success">可以观看10部美剧电影</p>
+            <p class="el-icon-error">仅限个人账户使用,不支持他人登录</p>
+          </div>
+          <router-link to="/pay">
+            <el-button class="pay_button" type="primary">立即购买</el-button>
+          </router-link>
+        </div>
+      </el-card>
+    </div>
+
+
+    <div>
+      <el-card class="box-card">
+        <div class="text_item">
+          <h2 style="color:palevioletred;text-align: center">年度会员服务</h2>
+          <img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
+          <div class="rules_d">
+            <p class="el-icon-success">可看电影:无限看</p>
+            <p class="el-icon-success">套餐时长:365天</p>
+            <p class="el-icon-success">电影画质:蓝光</p>
+            <p class="el-icon-success">高级会员弹幕字体颜色</p>
+            <p class="el-icon-success">年度会员专属客服</p>
+            <p class="el-icon-success">支持多种设备</p>
+            <p class="el-icon-success">无限观看美剧电影</p>
+            <p class="el-icon-success">不限用户使用,支持他人登录</p>
+          </div>
+          <router-link to="/pay">
+            <el-button class="pay_button" type="primary">立即购买</el-button>
+          </router-link>
+        </div>
+      </el-card>
     </div>
   </div>
-  </div>
+
 </template>
 
 <script>
 
+import Handder from "@/components/Handder";
+import Sidebar from "@/components/sidebar";
+
 export default {
   name: "commodity",
+  components: {Handder, Sidebar},
   data() {
     return {
-      radio1: '月度',
+      items: [
+        {type: '', label: '月度会员'}]
 
     }
   },
-  methods: {
-
-  },
+  methods: {},
   created() {
 
   }
@@ -63,56 +95,73 @@ export default {
 </script>
 
 <style scoped>
-#change_group{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.text {
+
+.text_item {
   font-size: 14px;
+  padding: 10px 0;
 }
 
-.item {
-  padding: 10px 0;
+@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;
+  }
 }
 
 .box-card {
   position: relative;
   width: 350px;
   height: 700px;
-  margin-top: 30px;
-  margin-left:100px;
+  margin-top: 95px;
+  margin-left: 130px;
   float: left;
 }
-.pay_button{
+
+.pay_button {
   position: absolute;
-  bottom: 30px;
+  bottom: 45px;
   /* 宽度与卡片内容一致 */
   width: 300px;
   /* 高度为 50px，即按钮的高度 */
   height: 50px;
   left: 24px;
 }
-/*@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;*/
-/*  }*/
-/*}*/
+
+.el-icon-success {
+  color: cornflowerblue;
+  display: flex;
+  line-height: 2;
+  margin-top: 10px;
+}
+
+.rules_d {
+  margin-top: 85px;
+}
+
+.el-icon-error {
+  color: orangered;
+  display: flex;
+  line-height: 2;
+  margin-top: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/pay/pay.vue b/YouBili_front/src/views/pay/pay.vue
index 422c5f78421fe85232c1c23b72df0d9a4606832e..35134cfbf04984ffd0fe8cc2203251a651c23751 100644
--- a/YouBili_front/src/views/pay/pay.vue
+++ b/YouBili_front/src/views/pay/pay.vue
@@ -1,8 +1,7 @@
 <!--支付界面-->
 <template>
   <div>
-  <div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
-height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
+  <div class="idxs" >
     <div class="wai_d">
       <div class="nei_d">
         <div class="h">
@@ -66,21 +65,24 @@ height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视
             <el-button class="pay_b" type="info" plain disabled>下载订单</el-button>
             <el-button class="pay_b" type="info" plain disabled>打印订单</el-button>
             <router-link to="/commodity">
-            <el-button class="pay_b" type="info">取消订单</el-button>
+              <el-button class="pay_b" type="info">取消订单</el-button>
             </router-link>
             <el-button class="pay_b" type="primary">确认购买</el-button>
           </div>
         </el-card>
       </div>
     </div>
-  </div>
+    </div>
   </div>
 </template>
 
 <script>
+import Handder from "@/components/Handder";
+import Sidebar from "@/components/sidebar";
 
 export default {
   name: "pay",
+  components: {Handder, Sidebar},
   data() {
     return {
       options: [{
@@ -113,8 +115,33 @@ export default {
   width: 100%;
   margin-top: 2%;
   margin-left: 2%;
+  color: red;
+}
+@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;
+  }
+}
 .head_div {
   background-color: white;
   border: 1px solid #ccc;
@@ -174,27 +201,5 @@ export default {
 .content_p{
   color: red;
 }
-/*@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;*/
-/*  }*/
-/*}*/
 
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/fans.vue b/YouBili_front/src/views/personal/fans.vue
index f45096d9e52b59374d2a4f31c678a39b2c856e9a..e4a06e37c2871423820c6a6edb38801f09d31eea 100644
--- a/YouBili_front/src/views/personal/fans.vue
+++ b/YouBili_front/src/views/personal/fans.vue
@@ -1,42 +1,123 @@
-<!--粉丝-->
+<!--个人中心-->
 <template>
-  <div>粉丝</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 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>
 </template>
 
 <script>
+import Handder from "@/components/Handder.vue";
+import Sidebar from "@/components/sidebar.vue";
+
 export default {
-  name: "fans",
-  data() {
-    return {}
-  },
-  methods: {},
-  created() {
-
-  }
+    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},
+            ]
+        }
+    },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
+        }
+    },
+    created() {
+
+    }
 }
+
 </script>
 
 <style scoped>
+
 @media screen and (min-width: 1970px){
-  .idxs {
-    margin: 60px auto;
-    width: calc(100% - 290px);
-    max-width: 1570px;
-    min-width: 1200px;
-  }
+    .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 {
+        /*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{
+
+}
+
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/follow.vue b/YouBili_front/src/views/personal/follow.vue
index f2de63dbbe548ebf5433048db131e1690d639d2f..6c85bd795a28dbc98124753d824ee8ecd8814168 100644
--- a/YouBili_front/src/views/personal/follow.vue
+++ b/YouBili_front/src/views/personal/follow.vue
@@ -1,115 +1,123 @@
 <!--个人中心-->
 <template>
-  <div>
-    <div style="display: flex;
-  justify-content: center; width: calc(100vw - 500px);
-  height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
-        <div style="width: 100%;height: 1000px;position: absolute;">
-            <h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
-            <div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px;position: relative">
-                <el-card>
-                    <el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
-                               alt="头像" :round="true"></el-avatar>
-                    <ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
-                        <li>昵称:</li>
-                        <li>生日:</li>
-                        <li>会员等级:</li>
-                    </ul>
-                    <div style="width: 300px;float: right;padding-top: 20px">
-                        <div style="margin-left: 130px;height: 36px">
+    <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-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
-                                         :colon="false">
-                            <el-descriptions-item label="关注数">1</el-descriptions-item>
-                            <el-descriptions-item label="粉丝数">1</el-descriptions-item>
-                            <el-descriptions-item label="获赞数">1</el-descriptions-item>
-                            <el-descriptions-item label="播放数">1</el-descriptions-item>
-                        </el-descriptions>
-                    </div>
-                </el-card>
-            </div>
-        </div>
-
-        <div>
-            <el-card style="margin-top:300px;margin-left: 5px;">
-                <div class="text_item">
-                    佩奇
-                </div>
-            </el-card>
-            <el-card class="box_card">
-                <div class="text_item">
-                    佩奇
-                </div>
-            </el-card>
-            <el-card class="box_card">
-                <div class="text_item">
-                    佩奇
-                </div>
+                    </el-row>
+                    <el-row :span="8" style="margin-top: -55px;margin-left: 50px"  >
+                        <h3 style="margin-left: 50px;margin-top: 0px">{{ v.name }}</h3>
+                    </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: -50px"  >
+                        <el-button type="primary" round>取消关注</el-button>
+                    </el-row>
+                </el-col>
             </el-card>
         </div>
+
     </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 {
-            size: "200",
-            avatarUrl: require('@/assets/a.jpg')
+            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},
+            ]
+        }
+    },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
         }
     },
-    methods: {},
     created() {
 
     }
 }
+
 </script>
 
 <style scoped>
-h2 {
-    font-weight: normal;
-}
 
-i {
-    display: inline-block;
-    margin-left: 20px;
-}
-
-.text_item {
-    font-size: 14px;
-    padding: 18px 0;
-}
-
-.box_card {
-    width: 1300px;
-    margin-left: 5px;
-}
 @media screen and (min-width: 1970px){
-  .idxs {
-    margin: 60px auto;
-    width: calc(100% - 290px);
-    max-width: 1570px;
-    min-width: 1200px;
-  }
+    .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;
-  }
+@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{
 
+}
 
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/history.vue b/YouBili_front/src/views/personal/history.vue
index 702b9336ffd64504ee5aad8a004dff733cabc3f0..a11e48261f310d1cedb7eddfa9a3af0c4ba76001 100644
--- a/YouBili_front/src/views/personal/history.vue
+++ b/YouBili_front/src/views/personal/history.vue
@@ -1,14 +1,14 @@
 <!--历史记录-->
 <template>
-  <div>
+  <div class="idxs">
   <div style="
-  height:1000px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
-    <div style="height: 1000px;position: absolute;">
+  height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
+    <div style="width: 1400px;height: 1000px;position: absolute;">
       <span>历史记录</span>
       <span class="button-container"> <el-button>搜索历史记录</el-button></span>
       <span class="button-container"> <el-button>清空历史记录</el-button></span>
       <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
-      <div style="height: 1000px;position: absolute;">
+      <div style="width: 1400px;height: 1000px;position: absolute;">
 
         <br>
         <div style="width:1200px;height:300px;margin-left:100px">
@@ -69,9 +69,12 @@
 </template>
 
 <script>
+import Handder from "@/components/Handder.vue";
+import Sidebar from "@/components/sidebar.vue";
 
 export default {
   name: "history",
+  components: {Sidebar, Handder},
   data() {
     return {
       size:"200",
@@ -96,29 +99,29 @@ export default {
   display: flex;
   align-items: center;
 }
-/*@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;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/notify.vue b/YouBili_front/src/views/personal/notify.vue
index 8bb98ca14ae3d9cabb4919b5c90b1dead96b85d0..a64e2c080df8611601278b3f68a16e585ad30737 100644
--- a/YouBili_front/src/views/personal/notify.vue
+++ b/YouBili_front/src/views/personal/notify.vue
@@ -1,84 +1,109 @@
 <!--通知-->
 <template>
-  <div>
-  <div style="
-  height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
-    <div style="height: 1000px;position: absolute;">
-
-      <div><el-page-header @back="goBack" content="返回"></el-page-header></div>
-      <br>
-      <!--卡片 -->
-      <el-card>
-        <!--让编辑按钮处于一行的右侧-->
-        <div style="display: flex; justify-content: space-between;">
-          <span>全部消息</span>
-          <el-button type="primary">编辑</el-button>
+  <div class="idxs">
+    <div style="height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
+      <div style="width: 1400px;height: 1000px;position: absolute;">
+        <div>
+          <el-page-header @back="goBack" content="系统消息"></el-page-header>
+        </div>
+        <br>
+        <!--卡片 -->
+        <el-card style="height: 1000px">
+          <!--让编辑按钮处于一行的右侧-->
+          <div style="display: flex; justify-content: space-between;">
+            <span>全部消息</span>
+          </div>
+          <!--分隔行-->
+          <el-divider content-position="right"></el-divider>
+
+          <!--表格组件-->
+          <el-table @click="f()"
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange">
+            <el-table-column class="aaa"
+                             type="selection"
+                             width="55">
+            </el-table-column>
+            <el-table-column class="aaa"
+                             label="日期"
+                             width="120">
+              <template slot-scope="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column class="aaa"
+                             prop="title"
+                             label="标题"
+                             width="120">
+            </el-table-column>
+            <el-table-column class="aaa"
+                             prop="content"
+                             label="内容"
+                             show-overflow-tooltip>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top: 20px" v-show="this.deleate">
+            <el-button><i class="el-icon-delete"></i></el-button>
+          </div>
+
+
+        </el-card>
         </div>
-        <el-divider content-position="right"></el-divider>
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        <b>标题</b>
-        <br>内容
-        <br><span style="display: inline-block;margin-left:1200px">日期</span>
-        <el-divider content-position="right"></el-divider>
-
-        
-      </el-card>
-
-
-      <div style="height: 1000px;position: absolute;">
-
-
       </div>
     </div>
-  </div>
-  </div>
 </template>
 
 <script>
+import Handder from "@/components/Handder.vue";
+import Sidebar from "@/components/sidebar.vue";
 
 export default {
   name: "notify",
+  components: {Sidebar, Handder},
   data() {
     return {
-      size:"200",
-      avatarUrl:""
+      size: "200",
+      avatarUrl: "",
+      tableData: [{
+        date: '2016-05-03',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        title: '王小虎',
+        content: '上海市普陀区金沙江路 1518 弄'
+      }],
+      multipleSelection: [],
+      deleate: false,
+    }
+  },
+  methods: {
+
+    handleSelectionChange() {
+      this.deleate = true;
     }
   },
-  methods: {},
   created() {
 
   }
@@ -86,38 +111,32 @@ export default {
 </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;*/
-/*  }*/
-/*}*/
-.button-container {
-  display: flex;
-  justify-content: flex-end;
-  float:right;
+@media screen and (min-width: 1970px) {
+  .idxs {
+    margin: 60px auto;
+    width: calc(100% - 290px);
+    max-width: 1570px;
+    min-width: 1200px;
+  }
 }
-.box {
-  display: flex;
-  align-items: center;
+
+@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: 350px;
+  }
 }
+
+
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/otherSpace.vue b/YouBili_front/src/views/personal/otherSpace.vue
index 205a6917fed5d4df287e819b0ecc7c6408bad1c1..879a45903c9bbf9f8a5632990052b1466e344767 100644
--- a/YouBili_front/src/views/personal/otherSpace.vue
+++ b/YouBili_front/src/views/personal/otherSpace.vue
@@ -2,12 +2,13 @@
 <template>
   <div>
 
-  <div>
-    <div >
-      <h1 >XXX的个人中心</h1>
-      <div >
+      <div>
+          <div class="idxs">
+              <h1 style="display: inline-block;margin-left: 530px;font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
 
-        <el-card>
+              <div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px">
+
+                  <el-card>
 
           <el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
                      alt="头像" :round="true"></el-avatar>
@@ -18,12 +19,12 @@
           </ul>
 
           <div style="width: 300px;float: right;padding-top: 20px">
-            <div style="margin-left: 130px">
-                            <span><el-button plain style="padding: 10px">
-                            <i style="margin-left: 0" class="el-icon-edit"></i>关注他</el-button></span>
-              <span><el-button plain style="padding: 10px">
+              <div style="margin-left: 130px" >
+                            <span><el-button  plain style="padding: 10px;width: 90px" @click="focus()">
+                            <i style="margin-left: 0" class="el-icon-edit"></i>{{ focu }}</el-button></span>
+                  <span><el-button plain style="padding: 10px">
                             <i style="margin-left: 0" class="el-icon-edit"></i>动态</el-button></span>
-            </div>
+              </div>
             <el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
                              :colon="false">
               <el-descriptions-item label="关注数">1</el-descriptions-item>
@@ -38,7 +39,7 @@
 
 
       </div>
-      <div style="margin-top: 30px;margin-left: 50px;height: 900px;">
+      <div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 900px;">
         <el-card>
 
           <h2>XXX的视频</h2>
@@ -105,15 +106,26 @@
 
 <script>
 
+
+import Handder from "@/components/Handder.vue";
+import Sidebar from "@/components/sidebar.vue";
+
 export default {
   name: "personalCenter",
+  components: {Sidebar, Handder},
   data() {
     return {
       size: "200",
-      avatarUrl: "../../assets/1.png"
+      avatarUrl: require("@/assets/1.png"),
+        focu:"关注他", isFollowing: false
     }
   },
-  methods: {},
+  methods: {
+      focus(){
+          this.isFollowing = !this.isFollowing;
+          this.focu = this.isFollowing ? '取消关注' : '关注他';
+      }
+  },
   created() {
 
   }
@@ -122,27 +134,30 @@ export default {
 
 <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;*/
-/*  }*/
-/*}*/
+@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: 130px;
+    }
+}
 
 h2 {
   font-weight: normal;
diff --git a/YouBili_front/src/views/personal/personalCenter.vue b/YouBili_front/src/views/personal/personalCenter.vue
index 8056c717a9b6412b04443f28a1f6dd134bf1eefe..c6d9bfb7ec2a522dbd88edeed0b7459e5fa72d41 100644
--- a/YouBili_front/src/views/personal/personalCenter.vue
+++ b/YouBili_front/src/views/personal/personalCenter.vue
@@ -1,11 +1,9 @@
 <!--个人中心-->
 <template>
-  <div>
-    <div style="display: flex;
-  justify-content: center;
-  height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
+  <div >
     <div>
-        <h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
+    <div class="idxs">
+        <h1 style="display: inline-block;margin-left: 530px;font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
 
         <div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px">
 
@@ -22,11 +20,11 @@
                     <div style="margin-left: 130px;height: 36px">
 
                     </div>
-                    <el-descriptions  style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical" :colon="false">
-                        <el-descriptions-item  label="关注数">1</el-descriptions-item>
-                        <el-descriptions-item  label="粉丝数">1</el-descriptions-item>
-                        <el-descriptions-item  label="获赞数">1</el-descriptions-item>
-                        <el-descriptions-item  label="播放数">1</el-descriptions-item>
+                    <el-descriptions   style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical" :colon="false">
+                        <el-descriptions-item class="aa"  label="关注数">1</el-descriptions-item>
+                        <el-descriptions-item class="aa" label="粉丝数">1</el-descriptions-item>
+                        <el-descriptions-item class="aa" label="获赞数">1</el-descriptions-item>
+                        <el-descriptions-item class="aa"label="播放数">1</el-descriptions-item>
                     </el-descriptions></div>
 
 
@@ -35,60 +33,47 @@
 
         </div>
         <div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 1000px;">
-            <el-card>
-
-                <h2>我的视频</h2><el-divider></el-divider>
+            <el-card >
+                <div v-for="p in videoArr">
+                <h2>{{ p.category }}</h2><el-divider></el-divider>
                 <div>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span><br>
+                    <span><img :src="p.imgUrl1" style="width: 300px;height: 200px;margin-left: 80px"></span>
+                    <span><img :src="p.imgUrl2" style="width: 300px;height: 200px;margin-left: 100px"></span>
+                    <span><img :src="p.imgUrl3" style="width: 300px;height: 200px;margin-left: 100px"></span><br>
 
-                    <span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
-                </div>
-                <el-divider></el-divider>
-                <h2>我的收藏</h2><el-divider></el-divider>
-                <div>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
-                    <span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
+                    <span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"></i><i class="el-icon-folder-opened"></i></span>
+                    <span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"></i><i class="el-icon-folder-opened"></i></span>
+                    <span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"></i><i class="el-icon-folder-opened"></i></span>
                     <div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
                 </div>
                 <el-divider></el-divider>
-                <h2>我的历史</h2><el-divider></el-divider>
-                <div>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
-                    <span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
-                    <span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
-                    <div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
-                </div>
-                <el-divider></el-divider>
-
+        </div>
 
             </el-card>
         </div>
 
     </div>
+    </div>
   </div>
-  </div>
+
 </template>
 
 <script>
+import Sidebar from "@/components/sidebar.vue";
+import Handder from "@/components/Handder.vue";
 
 export default {
   name: "personalCenter",
+  components: {Handder, Sidebar},
   data() {
     return {
         size:"200",
-        avatarUrl:""
+        avatarUrl:require("@/assets/1.png"),
+        videoArr:[
+            {category:"我的视频",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")},
+            {category:"我的收藏",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")},
+            {category:"我的历史",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")}
+        ]
     }
   },
   methods: {},
@@ -99,28 +84,31 @@ export default {
 </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;*/
-/*  }*/
-/*}*/
+@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: 130px;
+    }
+}
 h2{
     font-weight: normal;
 }
@@ -128,5 +116,11 @@ i{
     display: inline-block;
     margin-left: 20px;
 }
+.aa:hover{
+    cursor: pointer;
+}
+img:hover{
+    transform: scale(1.1);cursor: pointer;
+}
 
 </style>
\ No newline at end of file
diff --git a/YouBili_front/src/views/personal/report.vue b/YouBili_front/src/views/personal/report.vue
index c2dcf3842ad4a881b046e18d44afca57fad05b33..b4ddf5ad347aadb8c9a153acdd958773c55bcb10 100644
--- a/YouBili_front/src/views/personal/report.vue
+++ b/YouBili_front/src/views/personal/report.vue
@@ -1,9 +1,7 @@
 <!--举报-->
 <template>
-  <div>
-    <div style="display: flex;
-  justify-content: center;align-items: center;  width: calc(100vw - 500px);
-  height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
+  <div class="idxs">
+    <div class="idxs">
 
         <div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
 
@@ -78,9 +76,12 @@
 </template>
 
 <script>
+import Sidebar from "@/components/sidebar.vue";
+import Handder from "@/components/Handder.vue";
 
 export default {
     name: "report",
+  components: {Handder, Sidebar},
     data() {
         return {
             form: {
@@ -110,28 +111,31 @@ export default {
 </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;*/
-/*  }*/
-/*}*/
+@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: 170px;
+    }
+}
 .el-form-item {
     margin-bottom: 50px;
 }
diff --git a/youbili-project-backend/pom.xml b/youbili-project-backend/pom.xml
index b9c01b408e24e2d81fc42a3c2b6475e272eeaf55..e5ce6da7f4d71e9a1335effb208a046a2a1890f2 100644
--- a/youbili-project-backend/pom.xml
+++ b/youbili-project-backend/pom.xml
@@ -17,44 +17,53 @@
 		<java.version>17</java.version>
 	</properties>
 	<dependencies>
+		<!-- JDBC -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-data-jdbc</artifactId>
 		</dependency>
+		<!-- security -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-security</artifactId>
 		</dependency>
+		<!-- Spirng Web -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
 		</dependency>
+		<!-- Mybatis整合 -->
 		<dependency>
 			<groupId>org.mybatis.spring.boot</groupId>
 			<artifactId>mybatis-spring-boot-starter</artifactId>
 			<version>3.0.2</version>
 		</dependency>
-
+		<!-- Mysql -->
 		<dependency>
 			<groupId>com.mysql</groupId>
 			<artifactId>mysql-connector-j</artifactId>
 			<scope>runtime</scope>
 		</dependency>
+
+		<!-- Lombok -->
 		<dependency>
 			<groupId>org.projectlombok</groupId>
 			<artifactId>lombok</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<!-- Spring测试 -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-test</artifactId>
 			<scope>test</scope>
 		</dependency>
+		<!-- security测试单元 -->
 		<dependency>
 			<groupId>org.springframework.security</groupId>
 			<artifactId>spring-security-test</artifactId>
 			<scope>test</scope>
 		</dependency>
+		<!-- SecurityConfig配置 -->
 		<dependency>
 			<groupId>org.springframework.security</groupId>
 			<artifactId>spring-security-config</artifactId>
@@ -73,7 +82,7 @@
 			<artifactId>spring-boot-starter-validation</artifactId>
 		</dependency>
 
-		<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
+		<!-- Mybatis-Plus -->
 		<dependency>
 			<groupId>com.baomidou</groupId>
 			<artifactId>mybatis-plus-boot-starter</artifactId>
@@ -87,33 +96,34 @@
 			<version>4.1.0</version>
 		</dependency>
 
-		<!-- security -->
+		<!-- Security-core 包含认证和访问权限控制功能 -->
 		<dependency>
 			<groupId>org.springframework.security</groupId>
 			<artifactId>spring-security-core</artifactId>
 		</dependency>
-		<!--mail-->
+		<!-- mail -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-mail</artifactId>
 		</dependency>
-		<!--redis-->
+		<!-- redis -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-data-redis</artifactId>
 		</dependency>
-		<!--转换成JSON格式-->
+		<!-- fastjson 转换成JSON格式 -->
 		<dependency>
 			<groupId>com.alibaba</groupId>
 			<artifactId>fastjson</artifactId>
 			<version>2.0.31</version>
 		</dependency>
-		<!-- durid -->
+		<!-- 阿里durid -->
 		<dependency>
 			<groupId>com.alibaba</groupId>
 			<artifactId>druid-spring-boot-starter</artifactId>
 			<version>1.2.18</version>
 		</dependency>
+		<!-- Spring提供的监控模块 -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-actuator</artifactId>
diff --git a/youbili-project-backend/src/main/resources/application.yaml b/youbili-project-backend/src/main/resources/application.yaml
index 025a0d3c43eec6209799e2a59ec8bdfd87898ab0..f96e3738f480aad1370be80a6dab9d935aa9b8a1 100644
--- a/youbili-project-backend/src/main/resources/application.yaml
+++ b/youbili-project-backend/src/main/resources/application.yaml
@@ -7,7 +7,10 @@ spring:
     url: jdbc:mysql://localhost:3306/youbili_test?characterEncoding=utf8
     username: root
     password: root
-#邮箱配置
+    druid:
+      initial-size: 5
+      max-active: 50
+  #邮箱配置
   mail:
     host: smtp.163.com
     username: 15901029458@163.com
@@ -32,18 +35,18 @@ spring:
 #      static-locations: file:c:/files,classpath:static
 
 # mybatis
-mybatis:
-  mapper-locations: classpath:mapper/*.xml
-  configuration:
-    map-underscore-to-camel-case: true   # 配置表字段名和属性名规范不一致时自动匹配
+#mybatis:
+#  mapper-locations: classpath:mapper/*.xml
+#  configuration:
+#    map-underscore-to-camel-case: true   # 配置表字段名和属性名规范不一致时自动匹配
+
 
 mybatis-plus:
   configuration:
     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
+  mapper-locations: classpath:mapper/**/*.xml
 
 
 logging:
   level:
     cn.tedu: debug
-
-