底部

src/assets/css/main.css

@@ -28,7 +28,7 @@ li {
 
 
 .content-box {
-    min-height: calc(100vh - 233px);
+    min-height: calc(100vh);
     padding-bottom: 30px;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;

src/components/page/PersonalCenter.vue

@@ -2,7 +2,8 @@
     <div class="wrap">
         <!-- 头像部分 -->
         <div class="header">
-            <img :src="this.$store.state.avatar" class="HeadPortrait" />
+            <!-- <img :src="this.$store.state.avatar" class="HeadPortrait" /> -->
+            <el-avatar :size="80" :src="this.$store.state.avatar" class="Headtop"></el-avatar>
             <div style="color:#9278FF;font-size:14px;font-family:MicrosoftYaHei;margin-top:5px;">
                 <el-upload
                     class="upload-demo"
@@ -154,7 +155,7 @@
             </div>
 
             <div class="information" style="margin-top: 20px;">
-                <div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch || archive.isNew">
+                <div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch">
                     <div class="line">
                         <div class="item">
                             <span>职业</span>
@@ -258,7 +259,7 @@
             </div>
 
             <div class="fold" v-if="archivesList.length > 1">
-                <img style="width: 21px;height: 17px;" src="../../assets/img/open.png" alt="" @click="foldArch">
+                <img :class="{ 'arrowTransform': showArch, 'arrowTransformReturn': !showArch}" style="width: 21px;height: 17px;" src="../../assets/img/open.png" alt="" @click="foldArch">
             </div>
         </div>
 
@@ -711,10 +712,10 @@ export default {
         },
         foldArch() {
             this.showArch = !this.showArch
-            this.$nextTick(() => {
-                document.body.scrollTop = document.querySelector('.content-box').scrollHeight
-                document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
-            })
+            // this.$nextTick(() => {
+            //     document.body.scrollTop = document.querySelector('.content-box').scrollHeight
+            //     document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
+            // })
         },
         // 获取学科类别
         getSubject(){
@@ -1022,6 +1023,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.arrowTransform{
+    transition: 0.5s;
+    transform-origin: center;
+    transform: rotateZ(180deg);
+}
+.arrowTransformReturn{
+    transition: 0.5s;
+    transform-origin: center;
+    transform: rotateZ(0deg);
+}
 .wrap{
     // height: calc(100vh - 60px);
     margin: -20px;
@@ -1064,12 +1075,12 @@ input:focus {
 .openfile {
     cursor: pointer;
 }
-.HeadPortrait {
+.Headtop {
     margin-top: 10px;
-    width: 80px;
-    height: 80px;
+    // width: 80px;
+    // height: 80px;
     // background: url('../../assets/img/img.jpg');
-    border-radius: 50%;
+    // border-radius: 50%;
 
     .head {
         width: 34px;