简历分析样式修改

yangzhi
1 parent 97bf7b2f
Showing 4 changed files with 108 additions and 41 deletions
src/common/mixins.js
src/views/resume/femalestaff.vue
src/views/resume/malestaff.vue
src/views/resume/style/style.scss
@@ -20,6 +20,32 @@ export default {
         },
     },
     methods: {
+        initRem() {
+            var html = document.documentElement;
+            var w = html.getBoundingClientRect().width;
+            var fontSize = w / 1000;
+            html.style.fontSize = fontSize + "px";
  
+            if (this.echartOption1) {
+                this.echartOption1.textStyle = {
+                    fontSize: fontSize * 9
+                };
+            }
+            if (this.echartOption2) {
+                this.echartOption2.textStyle = {
+                    fontSize: fontSize * 9
+                };
+            }
+            if (this.echartOption3) {
+                this.echartOption3.textStyle = {
+                    fontSize: fontSize * 9
+                };
+            }
+            if (this.resetChart) {
+                setTimeout(() => {
+                    this.resetChart()
+                }, 2000)
+            }
+        },
     }
 }
 \ No newline at end of file
@@ -7,12 +7,17 @@
           <div class="user-info">
             <h2>{{ userDetail.fullName }}</h2>
             <img
-              style="height: 30px; margin: 0 20px"
+              style="height: 16rem; margin: 0 20px"
               src="/static/resume/female/resume13.png"
               alt=""
             />
             <div class="star-progress">
-              <div :style="{'width':'calc(140px / 7 * '+(userDetail.stars||0)+')'}" class="star-progress-bar"></div>
+              <div
+                :style="{
+                  width: 'calc(140px / 7 * ' + (userDetail.stars || 0) + ')',
+                }"
+                class="star-progress-bar"
+              ></div>
             </div>
           </div>
           <ul class="user-items">
@@ -54,10 +59,14 @@
             <div class="info-content">
               <ul
                 v-if="
-                  userDetail.educationalExperience && userDetail.educationalExperience.length
+                  userDetail.educationalExperience &&
+                  userDetail.educationalExperience.length
                 "
               >
-                <li v-for="item in userDetail.educationalExperience" :key="item.date">
+                <li
+                  v-for="item in userDetail.educationalExperience"
+                  :key="item.date"
+                >
                   <h3 class="flex flex-between">
                     <span>{{ item.school }}</span>
                     <span style="font-size: 16px">{{ item.date }}</span>
@@ -79,14 +88,10 @@
           <div class="info-content">
             <ul
               v-if="
-                userDetail.workExperience &&
-                userDetail.workExperience.length
+                userDetail.workExperience && userDetail.workExperience.length
               "
             >
-              <li
-                v-for="item in userDetail.workExperience"
-                :key="item.date"
-              >
+              <li v-for="item in userDetail.workExperience" :key="item.date">
                 <h3 class="flex flex-between">
                   <span>{{ item.company }}</span>
                   <span>{{ item.position }}</span>
@@ -102,7 +107,14 @@
         </div>
       </div>
     </div>
-    <div class="bottom-panel flex1" v-if="abilityEchart1VisibleComputed || abilityEchart2VisibleComputed || natureEchartVisibleComputed">
+    <div
+      class="bottom-panel flex1"
+      v-if="
+        abilityEchart1VisibleComputed ||
+        abilityEchart2VisibleComputed ||
+        natureEchartVisibleComputed
+      "
+    >
       <div class="panel" v-if="abilityEchart1VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
@@ -112,7 +124,7 @@
           <div id="echarts1"></div>
         </div>
       </div>
-      <div class="panel"  v-if="abilityEchart2VisibleComputed">
+      <div class="panel" v-if="abilityEchart2VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
           <img src="/static/resume/female/resume11.png" alt="" />
@@ -121,7 +133,7 @@
           <div id="echarts2"></div>
         </div>
       </div>
-      <div class="panel"  v-if="natureEchartVisibleComputed">
+      <div class="panel" v-if="natureEchartVisibleComputed">
         <div class="panel-title">
           <span>性格统计图</span>
           <img src="/static/resume/female/resume12.png" alt="" />
@@ -152,6 +164,9 @@ export default {
         { title: "户籍所在地", value: "", icon: "resume9.png" },
       ],
       echartOption1: {
+        textStyle:{
+          fontSize:'8rem'
+        },
         grid: {
           top: 30,
           bottom: 20,
@@ -312,26 +327,35 @@ export default {
     };
   },
   computed: {
-    abilityEchart1VisibleComputed(){
-      return this.natureList.reduce((total,item)=>{
-        return total + item.value;
-      },0)>0;
+    abilityEchart1VisibleComputed() {
+      return (
+        this.natureList.reduce((total, item) => {
+          return total + item.value;
+        }, 0) > 0
+      );
     },
-    abilityEchart2VisibleComputed(){
-      return this.natureList.length>6 && this.natureList.slice(6).reduce((total,item)=>{
-        return total + item.value;
-      },0)>0;
+    abilityEchart2VisibleComputed() {
+      return (
+        this.natureList.length > 6 &&
+        this.natureList.slice(6).reduce((total, item) => {
+          return total + item.value;
+        }, 0) > 0
+      );
     },
-    natureEchartVisibleComputed(){
-      return this.abilityList.reduce((total,item)=>{
-        return total + item.value;
-      },0)>0;
+    natureEchartVisibleComputed() {
+      return (
+        this.abilityList.reduce((total, item) => {
+          return total + item.value;
+        }, 0) > 0
+      );
     },
     userDetail() {
-      let user = {...this.user};
-      user.educationalExperience = JSON.parse(user.educationalExperience || '[]');
-      user.skillAdvantages = JSON.parse(user.skillAdvantages || '[]')
-      user.workExperience = JSON.parse(user.workExperience || '[]')
+      let user = { ...this.user };
+      user.educationalExperience = JSON.parse(
+        user.educationalExperience || "[]"
+      );
+      user.skillAdvantages = JSON.parse(user.skillAdvantages || "[]");
+      user.workExperience = JSON.parse(user.workExperience || "[]");
       return user;
     },
     infoListComputed() {
@@ -354,8 +378,10 @@ export default {
   },
   mounted() {
     this.init();
+    this.initRem();
   },
   methods: {
+    
     init() {
       getOuterUserInfo(this.id).then((res) => {
         let { nature, ability, user } = res.data;
@@ -389,12 +415,24 @@ export default {
         });
       });
     },
+    resetChart(){
+      console.log('resetChart');
+      console.log('this.echartOption1',this.echartOption1);
+      console.log('this.echartOption2',this.echartOption2);
+      console.log('this.echartOption3',this.echartOption3);
+      this.$nextTick(()=>{
+        echarts.init(document.getElementById("echarts1")).setOption(this.echartOption1);
+        echarts.init(document.getElementById("echarts2")).setOption(this.echartOption2);
+        echarts.init(document.getElementById("echarts3")).setOption(this.echartOption3);
+      })
+      
+    },
     initEchart() {
       this.initNengliEchart();
     },
     initXinggeEchart(list) {
       let dom = document.getElementById("echarts3");
-      if(!dom){
+      if (!dom) {
         return;
       }
       let myChart = echarts.init(dom);
@@ -407,7 +445,7 @@ export default {
     },
     initNengliEchart(list) {
       let dom = document.getElementById("echarts1");
-      if(!dom){
+      if (!dom) {
         return;
       }
       //第一个echart图
@@ -432,6 +470,7 @@ export default {
 };
 </script>
   <style lang="scss" scoped>
+
 @import "style/style.scss";
 @import "style/style_famale.scss";
 </style>
 \ No newline at end of file
@@ -7,7 +7,7 @@
           <div class="user-info">
             <h2>{{ userDetail.fullName }}</h2>
             <img
-              style="height: 30px; margin: 0 20px"
+              style="height: 16rem; margin: 0 20px"
               src="/static/resume/male/resume13.png"
               alt=""
             />
@@ -337,6 +337,7 @@ export default {
   },
   mounted() {
     this.init();
+    this.initRem();
   },
   methods: {
     init() {
@@ -39,6 +39,7 @@ li {
     color: #fff;
     display: flex;
     flex-direction: column;
+    font-size: 10rem;
 }
  
 .flex {
@@ -46,16 +47,16 @@ li {
 }
  
 .star-progress {
-    width: 140px;
-    height: 20px;
+    width: 70rem;
+    height: 10rem;
     background-image: url(/static/resume/male/resume7.png);
     background-repeat: repeat-x;
-    background-size: 20px 20px;
+    background-size: 10rem 10rem;
     .star-progress-bar {
         background-image: url(/static/resume/male/resume10.png);
         background-repeat: repeat-x;
-        background-size: 20px 20px;
-        height: 20px;
+        background-size: 10rem 10rem;
+        height: 10rem;
     }
 }
  
@@ -69,8 +70,8 @@ li {
         margin-bottom: 20px;
     }
     .user-head {
-        width: 120px;
-        height: 120px;
+        width: 87rem;
+        height: 87rem;
         border-radius: 20px;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
@@ -88,7 +89,7 @@ li {
         flex-wrap: wrap;
         padding: 0;
         margin: 0;
-        max-width: 1000px;
+        max-width: 80%;
         li {
             margin: 10px 20px 10px 0;
             display: flex;
@@ -159,7 +160,7 @@ li {
         .panel-title {
             display: flex;
             align-items: center;
-            font-size: 18px;
+            font-size: 10rem;
             img {
                 height: 20px;
                 margin-left: 10px;