career test - migration report from voluntary-ui

src/api/webApi/career-evalua.js

@@ -1,12 +1,13 @@
-import request from "@/utils/request";
+import request from '@/utils/request'
+
 /**
  * 查询测试步骤
  */
 export function selectEvalueSteps() {
   return request({
-    url: "/front/syzy/holland/steps",
-    method: "get"
-  });
+    url: '/front/syzy/holland/steps',
+    method: 'get'
+  })
 }
 
 /**
@@ -15,20 +16,21 @@ export function selectEvalueSteps() {
  */
 export function selectquestions(params) {
   return request({
-    url:`/front/syzy/holland/questions`,
-    method:'get',
-    params:params
+    url: `/front/syzy/holland/questions`,
+    method: 'get',
+    params: params
   })
 }
-//getDetail
+
+// getDetail
 /**
  * 保存测试
  * @param data
  */
-export function saveQuestions(data){
+export function saveQuestions(data) {
   return request({
-    url:`/front/syzy/holland/save`,
-    method:'post',
+    url: `/front/syzy/holland/save`,
+    method: 'post',
     data
   })
 }
@@ -37,10 +39,22 @@ export function saveQuestions(data){
  * 查询记录列表
  * @param params
  */
-export function selectReportList(params){
+export function selectReportList(params) {
+  return request({
+    url: `/front/syzy/holland/record`,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 查询记录详情
+ * @param params
+ */
+export function getHollandReportDetail(params) {
   return request({
-    url:`/front/syzy/holland/record`,
-    method:'get',
+    url: `/front/syzy/holland/record/detail`,
+    method: 'get',
     params
   })
 }
@@ -50,9 +64,9 @@ export function selectReportList(params){
  */
 export function selectMbtiEvalueSteps() {
   return request({
-    url: "/front/syzy/mbti/steps",
-    method: "get"
-  });
+    url: '/front/syzy/mbti/steps',
+    method: 'get'
+  })
 }
 
 /**
@@ -61,9 +75,9 @@ export function selectMbtiEvalueSteps() {
  */
 export function selectMbtiQuestions(params) {
   return request({
-    url:`front/syzy/mbti/questions`,
-    method:'get',
-    params:params
+    url: `front/syzy/mbti/questions`,
+    method: 'get',
+    params: params
   })
 }
 
@@ -71,10 +85,10 @@ export function selectMbtiQuestions(params) {
  * 保存MBTI题目
  * @param data
  */
-export function saveMbtiQuestions(data){
+export function saveMbtiQuestions(data) {
   return request({
-    url:`/front/syzy/mbti/save`,
-    method:'post',
+    url: `/front/syzy/mbti/save`,
+    method: 'post',
     data
   })
 }
@@ -83,10 +97,10 @@ export function saveMbtiQuestions(data){
  * 查询MBTI报告列表
  * @param params
  */
-export function selectMbtiReportList(params){
+export function selectMbtiReportList(params) {
   return request({
-    url:`/front/syzy/mbti/record`,
-    method:'get',
+    url: `/front/syzy/mbti/record`,
+    method: 'get',
     params
   })
 }

src/router/index.js

@@ -605,20 +605,39 @@ export const constantRoutes = [{
         }
       },
       {
-        path: '/career/components/CareerHollandReportList',
+        path: '/career/test/career-holland-report-list',
         component: (resolve) => require(['@/views/career/components/CareerHollandReportList'], resolve),
         name: 'CareerHollandReportList',
         meta: {
           title: '职业兴趣测评-评测列表',
-          parentPath: '/new-gaokao/myTest/CareerEva'
+          parentRoute: 'CareerEva'
         }
       },
       {
-        path: '/career/components/CareerMbtiReportList',
+        path: '/career/test/career-mbti-report-list',
         component: (resolve) => require(['@/views/career/components/CareerMbtiReportList'], resolve),
         name: 'CareerMbtiReportList',
         meta: {
-          title: '职业性格测评-评测列表'
+          title: '职业性格测评-评测列表',
+          parentRoute: 'CareerEva'
+        }
+      },
+      {
+        path: '/career/test/career-holland-report',
+        component: (resolve) => require(['@/views/career/components/CareerHollandReportDetail'], resolve),
+        name: 'CareerHollandReport',
+        meta: {
+          title: '职业兴趣测评报告',
+          parentRoute: 'CareerEva'
+        }
+      },
+      {
+        path: '/career/test/career-mbti-report',
+        component: (resolve) => require(['@/views/career/components/CareerMbtiReportDetail'], resolve),
+        name: 'CareerMbtiReport',
+        meta: {
+          title: '职业性格测评报告',
+          parentRoute: 'CareerEva'
         }
       },
       {

src/views/career/components/CareerHollandReportDetail.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="detail bg-page fx-column fx-cen-cen">
+    <index-card title="测评记录" sub-title="专业兴趣测评" class="width100">
+      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+      <holland :holl-info="hollInfo" />
+    </index-card>
+  </div>
+</template>
+<script>
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import Holland from './result/Holland.vue'
+import { getHollandReportDetail } from '@/api/webApi/career-evalua'
+
+export default {
+  components: {
+    IndexCard,
+    Holland
+  },
+  data() {
+    return {
+      code: '',
+      hollInfo: {}
+    }
+  },
+  created() {
+    const {
+      code
+    } = this.$route.query || {}
+    this.code = code || []
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      getHollandReportDetail({
+        code: this.code
+      }).then(res => {
+        this.hollInfo = res.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/career/components/CareerHollandReportList.vue

@@ -12,8 +12,8 @@
         <el-table-column prop="scoree" label="企业型"  align="center"></el-table-column>
         <el-table-column prop="scorec" label="常规型" align="center"></el-table-column>
         <el-table-column label="评测结果"  align="center">
-          <template slot-scope="scope">
-            <el-link type="primary" :underline="false"> {{scope.row.ruleCode}}</el-link>
+          <template #default="{row}">
+            <el-link type="primary" :underline="false" @click="goHollandDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -80,6 +80,9 @@
           this.tableParams.examRecordTotal=res.total
           this.loading=false
         })
+      },
+      goHollandDetails(item) {
+        this.$router.push({ name: 'CareerHollandReport', query: { code: item.code }})
       }
     }
   }

src/views/career/components/CareerMbtiReportDetail.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="detail bg-page fx-column fx-cen-cen">
+    <index-card title="测评记录" sub-title="迈尔斯布里格斯类型指标" class="width100">
+      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+      <component :is="compName" :scores="scores" />
+    </index-card>
+  </div>
+</template>
+<script>
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import ENFJ from './result/ENFJ.vue'
+import ENFP from './result/ENFP.vue'
+import ENTJ from './result/ENTJ.vue'
+import ENTP from './result/ENTP.vue'
+import ESFJ from './result/ESFJ.vue'
+import ESFP from './result/ESFP.vue'
+import ESTJ from './result/ESTJ.vue'
+import ESTP from './result/ESTP.vue'
+import INFJ from './result/INFJ.vue'
+import INFP from './result/INFP.vue'
+import INTJ from './result/INTJ.vue'
+import INTP from './result/INTP.vue'
+import ISFJ from './result/ISFJ.vue'
+import ISFP from './result/ISFP.vue'
+import ISTJ from './result/ISTJ.vue'
+import ISTP from './result/ISTP.vue'
+export default {
+  components: {
+    IndexCard,
+    ENFJ,
+    ENFP,
+    ENTJ,
+    ENTP,
+    ESFJ,
+    ESFP,
+    ESTJ,
+    ESTP,
+    INFJ,
+    INFP,
+    INTJ,
+    INTP,
+    ISFJ,
+    ISFP,
+    ISTJ,
+    ISTP
+  },
+  data() {
+    return {
+      compName: 'ISTP',
+      scores: []
+    }
+  },
+  created() {
+    this.compName = this.$route.query.code
+    const {
+      code,
+      scores
+    } = this.$route.query || {}
+    this.compName = code || ''
+    this.scores = scores || []
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/career/components/CareerMbtiReportList.vue

@@ -1,14 +1,6 @@
 <template>
-  <div>
-    <div class="mb10">
-      <el-card style="color: #5E5E5E;" ref="navBar">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ path: '/career/plan/CareerEva'}">生涯规划</el-breadcrumb-item>
-          <el-breadcrumb-item>测评记录</el-breadcrumb-item>
-        </el-breadcrumb>
-      </el-card>
-    </div>
+  <div class="app-container">
+    <evaluation-title class="mb10" title="测评记录" nav-back-button></evaluation-title>
     <el-card>
       <el-table :data="tableData" script border v-loading="loading">
         <el-table-column prop="id" width="80" label="ID" align="center"></el-table-column>
@@ -22,8 +14,8 @@
         <el-table-column prop="scoreJ" label="判断" align="center"></el-table-column>
         <el-table-column prop="scoreP" label="认知" align="center"></el-table-column>
         <el-table-column label="评测结果"  align="center">
-          <template slot-scope="scope">
-            <el-link type="primary" :underline="false"> {{scope.row.ruleCode}}</el-link>
+          <template #default="{row}">
+            <el-link type="primary" :underline="false" @click="goMbtiDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -91,6 +83,14 @@
           this.tableParams.examRecordTotal=res.total
           this.loading=false
         })
+      },
+      goMbtiDetails(item) {
+        const { scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP } = item
+        const query = {
+          code: item.ruleCode,
+          scores: [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
+        }
+        this.$router.push({ name: 'CareerMbtiReport', query })
       }
     }
   }

src/views/career/components/careerTestReport.vue

@@ -16,8 +16,8 @@
           <template #time="{ value }">
             {{ value.split(" ")[0] }}
           </template>
-          <template #nav="{ value }">
-            <a href="#" style="color: #47c6a2">{{ value }}</a>
+          <template #nav="{ row, value }">
+            <el-link type="primary" :underline="false" @click="goHollandDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </mx-table>
         <!-- 分页 -->
@@ -33,8 +33,8 @@
           <template #time="{ value }">
             {{ value.split(" ")[0] }}
           </template>
-          <template #nav="{ value }">
-            <a href="#" style="color: #47c6a2">{{ value }}</a>
+          <template #nav="{ row, value }">
+            <el-link type="primary" :underline="false" @click="goMbtiDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </mx-table>
       </div>
@@ -142,6 +142,17 @@ export default {
     this.getMbtiRecord()
   },
   methods: {
+    goHollandDetails(item) {
+      this.$router.push({ name: 'CareerHollandReport', query: { code: item.code }})
+    },
+    goMbtiDetails(item) {
+      const { scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP } = item
+      const query = {
+        code: item.ruleCode,
+        scores: [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
+      }
+      this.$router.push({ name: 'CareerMbtiReport', query })
+    },
     getHollandRecord() {
       hollandRecord(this.hollPageForm).then((res) => {
         this.hollData = res.rows;

src/views/career/components/result/ENFJ.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ENFJ（外倾、直觉、情感和判断）——公共关系专家</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>热忱、易感应及负责任的--具能鼓励他人的领导风格。</span></li>
+        <li><i>2</i><span>对别人所想或希求会表达真正关切且切实用心去处理。</span></li>
+        <li><i>3</i><span>能怡然且技巧性地带领团体讨论或演示文稿提案。</span></li>
+        <li><i>4</i><span>爱交际、受欢迎及富同情心。</span></li>
+        <li><i>5</i><span>对称许及批评很在意。</span></li>
+        <li><i>6</i><span>喜欢带引别人且能使别人或团体发挥潜能。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ENFJ 型的人热爱人类。他们认为人和感情关系是最重要的，而且他们很自然地去关心别人。他们以热情的态度对待生命，感受与个人相关的所有事物。由于他们很理想化，按照自己的价值观生活，因此 ENFJ 型的人对于他们所尊重和敬佩的人、事业和机构非常忠诚。他们精力充沛、满腔热情、富有责任感、勤勤恳恳、锲而不舍。ENFJ 型的人具有自我批评的自然倾向。然而，因为他们对他人的情感具有责任心，所以ENFJ 型的人很少在公共场合批评人。他们敏锐地意识到什么是(或不是)合适的行为。他们彬彬有礼、富有魅力、讨人喜欢、深谙社会。ENFJ型的人具有平和的性格与忍耐力，他们长于外交，擅长在自己的周围激发幽默感。他们是天然的领导者，受人欢迎而有魅力，他们愿意成为出色的传播工作者，常常有利用自己口头表达的天赋。ENFJ 型的人在自己对一种情况的感受的基础上做决定，而不是这种情况事实上如何。他们对显而易见的事物之外的可能性，以及这些可能性以怎样的方式影响他人感兴趣。ENFJ 型的人天生具有条理性，他们喜欢一种有安排的世界，并且希望别人也是如此。即使其他人：正在做决定，他们还是喜欢把问题解决了。ENFJ 型的人显得富有同情心和理解力，愿意培养和支持他人。他们能很好地理解别人，有责任感和关心他人。由于他们是理想主义者，因此他们通常看到别人身上的优点。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型：(ENFJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ENFJ 型的人主导功能是情感（关注情感），辅助功能是直觉。他们倾向于：体谅他人感受、了解他人的需要、喜欢和谐的人际关系、易表露情感、喜去说服他人。探求隐含的原因、可能性或事物的整体。ENFJ 型的人比较少地使用他们的第三、第四功能--感觉和思维。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 ENFJ 型的人：如果你过多地关注情感，你可能会表现得不合乎逻辑、不够客观、没有组织系统的思考、不具批判精神全盘接受、感情用事。如果你过多地使用直觉功能，你可能会表现得不注重细节、不注意实际、不耐沉闷、不合逻辑、把握不住现在、骤下断语。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>情感</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>直觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>感觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>思维</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>能让我与我的同事、客户、主顾建立并维持亲密的、互助的人际关系。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>允许我对于我所负责的项目中出现的问题自己创造性地解决，同时我的努力能让我有所回报。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>能让我看到我的工作有很好的前景，我所作的贡献得到别人的赏识，同时我自身及我的事业能得到发展，我的进步得到同时的鼓励。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>能让我成为另一群富有创造精神的人的一员，同时我还很充实，且有成就感。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>允许我有足够的时间探求解决问题的创造性方法，然后与支持我，关心我的人分享。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>我的工作环境是积极且富有挑战性的，而且在工作中我有权同时操纵多个项目。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>在工作中，我能充分发挥我的组织和决策能力，对我自己负责的项目有自主权，并对其承担一定责任。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>我的工作变化性很强，且允许我有时间对它有条不紊地进行好规划。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>我的工作环境轻松，人们之间没有冲突，也没有相互猜忌。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>让我有机会接触新观念，并允许我探究一些新方法，能让别人生活得更美好。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>优秀的交流及表达能力</li>
+              <li>天生的领导才能及凝聚力</li>
+              <li>热情奔放，及有较强的寻求合作的能力</li>
+              <li>坚决果断，有组织能力</li>
+              <li>渴望推陈出新</li>
+              <li>与别人感情交融，能遇见别人的需要，能真诚地关怀别人</li>
+              <li>兴趣广泛，头脑灵活</li>
+              <li>能统观全局，能洞察行为与意识之间的联系</li>
+              <li>鞭策自己做出成绩，达到目的</li>
+              <li>对自己所信仰的事业尽职尽责</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>不愿干预自己价值观相冲突的事</li>
+              <li>容易把人际关系理想化</li>
+              <li>很难在竞争强、气氛紧张的环境下工作</li>
+              <li>对那些没效率、或死脑筋的人没有耐心</li>
+              <li>逃避矛盾冲突，易于疏忽不愉快的事</li>
+              <li>在没有收集足够证据前，易于仓促做决定</li>
+              <li>不愿训诫下属</li>
+              <li>易于因轻率犯错误</li>
+              <li>易于满足小范围管理，决不放弃控制权</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>交流性职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•广告销售主管 •公共关系专家 •对外交流董事 •作家或新闻工作者 •娱乐表演者或艺术家 •资金筹备人 •招聘人员 •娱乐业导演 •电视制片人 •新闻广播员 •政客 •信息制图设计人 •营销经理(电台、电视、有线播放行业) •编辑(杂志)</p>
+            <p>ENFJ 型人是熟练的交流者。他们善于理解他人，使他人高兴，因此他们常常具有足够的老练和外交手段。他们有时候更喜欢口语而不是书面语言，但许多ENPJ 型人也是很好的作家。他们乐于通过接触和会见人们来了解事情或问题所包含的有关个人的方面，收集种种信息。广告、公共关系和融资领域的工作常常是令人满意的，尤其当一个 ENFJ 型人推崇其中涉及的产品、服务或目标，或者当环境不是太具竞争性或充满冲突的时候。ENFJ 型人可以迅速地与顾客、客户以及同事建立关系，能够成为具有说服力和效率的代理人、制作人、招聘人员和政界人士。他们是天生的具有超凡感召魅力的领导者，以促进大大小小群体之间的交流为乐。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>咨询顾问</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•心理医生 •职业顾问 •牧师/教士 •翻译/口译 •雇员帮助顾问 •便利促进人 •私人顾问 •公司公共活动顾问 •酒精和毒品戒禁顾问</p>
+            <p>许多 ENFJ 型人从帮助他人通过自我了解而获得幸福和满足的职业中得到自己的满足感。他们乐于帮助客户了解个人的问题，克服困难。ENFJ 型人通常热情、富于同情心，是有影响力的治疗医生。他们常喜欢从事牧师的工作，这样可以与他人分享自己的价值观念，帮助自己和他人发挥全部潜力。他们可以很容易地看到可行的选择或解决办法，帮助他们的客户也了解到同样的情况。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+              <p>社会服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•教师：卫生健康/艺术/戏剧/英文 •学生的系主任 •大学教授：人文学科 •儿童福利工作者 •图书馆管理员 •社会工作者 •特殊教育教师 •双语种教育老师 •老年人社会工作者 •住宅安居指导 •非盈利性组织的指导者 •早期教育教师</p>
+            <p>ENFJ 型人常常从事教育，因为这一职业可以给予他们直接与人们打交道从而帮助他人成长和发展的机会。他们喜欢教授那些能够着重于事物的意义并通过解释与表达来讲授的科目。他们曙要和谐而合作的工作环境，能够容纳所有的看法，鼓励人们公开分享各自的看法和情感。社会服务性机构也常常吸引 ENFJ 型人，因为它们提供了以改善自己与他人的生活质量为工作目标的机会 他们喜欢做领导者，尽可能多地驾驭他们的工作，喜欢看到他们的努力带来积极的结果。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•全面健康医生(可替代药物) •饮食学家/营养学家 •语言障碍病理学家/听觉病理学家 •职业治疗医生</p>
+            <p>在迅速扩大的保健行业，这些职业很好地利用了 ENFJ 型人的观察、诊断以及处理对象整体的能力，ENFJ 型人通常对心理学的、感情的以及精神的疾病原因很感兴趣，常常着迷于新型以及替代性的各种治疗方法。他们喜欢职业疗法以及语言病理学所具有的创造性地解决问题的因素。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+              <p>咨询职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•开发人力资源的培训员 •推销培训员 •招聘人员 •旅游代理人 •小型企业经理 •项目设计人 •销售经理 •调职顾问 •公司/工作小组的培训员 •生态旅行专家 •管理顾问</p>
+            <p>咨询性行业中许多不同的工作为 ENFJ 型人提供了职业满足感，这样的工作在与他人保持密切联系的同时也能使人保持独立性。ENFJ 型人是出色的表达者和培训员，尤其当面对个人或团体开展工作而帮助他们提高效率的时候。他们富于创造力且精力充沛，是新方案和新服务的设计者，但这仅仅是在这些方案于他人有益的情况下。他们喜欢在小一些的公司或机构里担任经理职务，这样他们可以具有积极主动的影响力，而以寻求新工作方法过程中出现的种种变化和机会为乐，同时他们仍然可以拥有一定的控制权力。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>放慢你匆忙的脚步</li>
+        <li>适当放弃某些控制权</li>
+        <li>客观对待周围的一切</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要认识人们的局限性，捍卫真正的忠诚。</li>
+          <li>需要学会建设性地处理冲突。</li>
+          <li>需要学会同时关注任务中的细节问题和完成任务的人。</li>
+          <li>需要认真听取客观的评价，少一些自我批评。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ENFP.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ENFP（外倾、直觉、情感和知觉）——天底下没有不可能的事</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>充满热忱、活力充沛、聪明的、富想象力的，视生命充满机会但期能得自他人肯定与支持。</span></li>
+        <li><i>2</i><span>几乎能达成所有有兴趣的事。</span></li>
+        <li><i>3</i><span>对难题很快就有对策并能对有困难的人施予援手。</span></li>
+        <li><i>4</i><span>依赖能改善的能力而无须预作规划准备。</span></li>
+        <li><i>5</i><span>为达目的常能找出强制自己为之的理由。</span></li>
+        <li><i>6</i><span>即兴执行者。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ENFP 型的人充满热情和新思想。他们乐观、自然、富有创造性和自信，具有独创性的思想和对可能性的强烈感受。对于 ENFP 型的人来说，生活是激动人生的戏剧。因为 ENFP 型的人对可能性很感兴趣，所以他们了解所有事物中的深远意义，喜欢许多可供选择的事物的存在。他们具有洞察力，是热情的观察者，注意常规以外的任何事物。ENFP 型的人好奇，他们更喜欢理解而不是判断。ENFP 型的人具有想象力、适应性和可变性，他们视灵感高于—切，常常是足智多谋的发明人。有时他们不墨守成规，善于发觉做事情的新方法。ENFP 型的人为思想或行为开辟新道路，并保持它们的开放。在完成新颖的想法的过程中，ENFP 型的人依赖冲动的能量。他们有大量的主动性，认为问题令人兴奋。他们也从所处的周围其他人中得到能量的输入，能够把自己的才能与别人的力量成功地结合在一起。ENFP型的人具有魅力、充满生机。他们待人热情、彬彬有礼、富有同情心，愿意帮助别人解决问题。他们具有出色的洞察力和观察力，常常关心他人的发展。ENFP 型的人避免冲突，喜欢和睦。他们把更多的精力倾注于维持个人关系而不是客观事物，喜欢保持一种广泛的人际关系。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型：(ENFP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ENFP 型的人主导功能是直觉（喜欢推论），辅助功能是情感。他们倾向于：对事情能面面观之、以整体概念看事、富想象力、尝试新鲜构想、喜欢复杂的工作、喜欢解决新奇的问题。体谅他人感受、了解他人的需要、喜欢和谐的人际关系、易表露情感、喜去说服他人。ENFP 型的人比较少地使用他们的第三、第四功能--感觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 ENFP 型的人：如果你过多的使用直觉功能，你可能会忽视细节和当前的实际，或在信息并不足够得情况下，过快地进行决策。如果你过多地关注情感，你可能会表现得不合乎逻辑、不够客观、没有组织系统的思考、不具批判精神全盘接受、感情用事。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>直觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>情感</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>思考</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>感觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>能让我有机会帮助各种各样的人解决互不相同的问题，而同时我自己也能从中受到灵感的启发。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>允许创造新奇的观点、产品、服务以及解决问题的方法来帮助别人，并能看到我的计划变成现实。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>这份工作要集趣味性、挑战性、多样性于一体。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>工作中尽可能少地要求我处理培训后续工作、日常琐事，也不要要求我维护一个系统或工程。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>允许我以自己的进度或日程安排我的工作，工作中没有太多规章制度，而应该有自主行动的自由。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>能让我有机会遇到一些新的面孔，学习一些新的技能以不断满足自己的求知欲。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>我的工作必须与我的个人信仰和价值观相一致，并能让我创造于别人有利的机会。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>我工作的环境必须友好、轻松，人们幽默、亲切，且彼此之间没有人际冲突。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>能让我自由发挥我的灵感，并参加一些刺激、有趣的冒险。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>在工作中，我的热情、创造力、以及想象力能得到赏识和回报。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>你希望打破常规思考，考虑事情发展可能出现的新情况</li>
+              <li>敢于冒险、敢于尝试新事物，能克服障碍</li>
+              <li>兴趣广泛，对自己感兴趣的东西接受能力强</li>
+              <li>对收集自己所需信息有一种天生的求知欲和技能</li>
+              <li>能通观全局，能看出行为和思想之间的潜在含义</li>
+              <li>交际能力强，能激发别人的热情</li>
+              <li>适应能力强，能迅速改变自己的行事速度及目标</li>
+              <li>能洞察别人，能理解他们的需要和动机</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>不善于把握事物的轻重，难于决定优先处理哪些事</li>
+              <li>对缺乏独创性的人没有耐心</li>
+              <li>不愿以传统或常规的方式行事</li>
+              <li>易于烦躁或不耐烦，尤其是当工作中创造性过程结束后</li>
+              <li>讨厌做重复性任务</li>
+              <li>不能容忍与过于严谨的机构或个人工作</li>
+              <li>倾向于关注可能发生的事情，而非实际的或极可能发生的事情</li>
+              <li>你有变得毫无组织的倾向</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•记者 •编剧或剧作家 •专栏作家 •性格演员 •音乐家或作曲家 •新闻广播员 •室内装潢人 •卡通制作人 •艺术家 •报道人或编辑 •杂志报道人或编辑 •信息图片设计师</p>
+            <p>这些创造性职业明显的吸引力在于其中有机会不断发展新颖而有创见的方法。ENFP 型人喜爱创造过程，尤其是它提供了合作及被与他人合作所激发自身灵感的机会。工作环境越没有压力越灵活，ENFP 型人就越喜欢。他们可以独立地把工作做好，但需要经常自发地与他人接触，以保持他们不断地产生创造力，并使他们愉快地工作。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>营销</p>
+              <p>计划</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•公关专家 •营销顾问 •广告业务经理 •广告撰稿人或公共写作人 •广告创意指导 •战略策划人 •报刊宣传员 •调研助理 •编辑或艺术指导(杂志)</p>
+            <p>ENFP 型人通常是出色的思维广阔的思想家，他们能很容^地看出一个想法、计划或服务对于他人的效果。他们在计划中个考虑别人的需要和关注点，而且经常能想出创新的及富有人情的解决办法，他们喜欢创造性地解决问题，尤其当他们做为一个活泼而精力旺盛的群体的一部分时。ENFP 型人往往聪明有趣，他们为刊登或播送而撰写广告的时候感到很满意。广告的迅速和不断变化是很有吸引力的。而且作为公关经理，他们能成为机构的出色发言人。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+              <p>咨询</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•特殊教育老师 •双语种教育老师 •早期儿童教育老师 •艺术戏剧、音乐及英语老师 •儿童福利顾问 •酒精毒品禁戒顾问 •社会工作者(老年人及儿童日常照顾问题) •发展指导 •职业顾问 •住宅安居指挥 •民意调查员 •主教顾问 •康复中心工作人员 •社会学家 •心理学家</p>
+            <p>许多 ENFP 型人发现对于他人有积极影响力的工作在本质上是令人满意的。他们能成为富于同情心与支持鼓励他人的心理学家，能成为有创造力而热诚的职业顾问，能帮助他们的客户发现新颖而有创见的解决问题的方法。他们关注事物的可能性，尤其是对于别人的可能性，而且他们充满感染力和旺盛精力的风格激励他们的客户试着在生活中进行积极的改变。他们乐于帮助别人发展个人的精神世界，并经常被牧师这类形式的职业所吸引。作为民意调查员，他们是促进机构转变的高效而富于创新的中介人物，作为向导来帮助个人获得可利用的资源。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理</p>
+              <p>社会服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•营养学家 •语言病理学家或听觉学家 •全面健康医生 •按摩治疗专家 •雇员辅助计划顾问 •理疗专家 •法律调停人</p>
+            <p>这些健康护理及社会服务领域的工作对于 ENFP 型人通常是有吸引力的，部分是因为它们能予人帮助的性质及具有运用创造性方法的机会。而且也因为它们是使人们保持独立和灵活的同时进行自我管理的职业。从事这些职业的 ENFP 型人感到非常满意，因为他们能在严格的传统框架之外工作（比如拥有各种不同客户的顾问）。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>企业家</p>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•顾问 •发明家 •无形商品或点子的销售 •人力资源经理 •人力资源发展训练人 •会议安排人 •雇佣发展专家 •饭店老板 •管理顾问：转变管理体制或合作组构建或管理多样化 •公司或小组培训人 •人力资源多样化管理人 •广告业务管理人或经理 •公关专家 •营销主管：广播或电视或有线转播业 •调职顾问 •环境法律师</p>
+            <p>ENFP 型人是天生的企业家!他们喜欢给自己干活，因为这给予他们自由和灵活，也让他们有机会选择想做的工作以及想合作的人。他们通常极富想法并想付诸实现，尤其是那些将影响其他人的。许多ENFP 型人喜欢在建立合作组、解决冲突或提高工作效率等方面作顾问。他们也喜欢成为独立的销售员，尤其是销售。传统的商业世界通常对于 ENFP 型人没有吸引力，因为他们不喜欢过多的规则、规定或标准操作程序。然而，在传统的机构中，ENFP 型人群集中于人力资源部做培训员及顾问。他们发现诸如雇员发展顾问这样的职业可以运用他们事先谋划并提出利于人们完成工作的创造性方法的能力，同时还能不忘机构的目标。记住，上述只是可以为具有独特天分的 ENFP 型人提供满足感的一部分职业领域。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>把握事情轻重，优先处理重要事宜</li>
+        <li>集中精力于某一目标</li>
+        <li>对自己接手的事坚持到底</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要根据重要性事先做好安排，先做最重要的，坚持到底。</li>
+          <li>需要关注重要的细节。</li>
+          <li>需要学会筛选任务，不要试图去做所有具有吸引力的任务。</li>
+          <li>为达成目标，需使用制定计划和进行时间管理的技巧。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ENTJ.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ENTJ（外倾、直觉、思维和判断）——一切顺利，因为我一手掌握</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>坦诚、具决策力的活动领导者。</span></li>
+        <li><i>2</i><span>长于发展与实施广泛的系统以解决组织的问题。</span></li>
+        <li><i>3</i><span>专精于具内涵与智能的谈话如对公众演讲。</span></li>
+        <li><i>4</i><span>乐于经常吸收新知且能广开信息管道。</span></li>
+        <li><i>5</i><span>易生过度自信，会强于表达自已创见。</span></li>
+        <li><i>6</i><span>喜于长程策划及目标设定。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ENTJ 型的人是伟大的领导者和决策人。他们能轻易地看出事物具有的可能性，很高兴指导别人，使他们的想象成为现实。他们是头脑灵活的思想家和伟大的长远规划者。因为 ENTJ 型的人很有条理和分析能力，所以他们通常对要求推理和才智的任何事情都很擅长。为了在完成工作中称职，他们通常会很自然地看出所处情况中可能存在的缺陷，并且立刻知道如何改进。他们力求精通整个体系，而不是简单地把它们作为现存的接受而已。ENTJ 型的人乐于完成一些需要解决的复杂问题，他们大胆地力求掌握使他们感兴趣的任何事情。ENTJ 型的人把事实看得高于一切，只有通过逻辑的推理才会确信。ENTJ 型的人渴望不断增加自己的知识基础，他们系统地计划和研究新情况。他们乐于钻研复杂的理论性问题，力求精通任何他们认为有趣的事物。他们对于行为的未来结果更感兴趣，而不是事物现存的状况。ENTJ 型的人是热心而真诚的天生的领导者。他们往往能够控制他们所处的任何环境。因为他们具有预见能力，并且向别人传播他们的观点，所以他们是出色的群众组织者，他们往往按照一套相当严格的规律生活，并且希望别人也是如此。因此他们往往具有挑战性，同样艰难地推动自我和他人前进。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ENTJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ENTJ 型的人主导功能是思考（喜欢事实），辅助功能是直觉。他们倾向于：对事实和经验做出符合逻辑结论。探求隐含的原因、可能性或事物的整体。ENTJ 型的人比较少地使用他们的第三、第四功能--感觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 ENTJ 型的人：如果你过多的使用思考功能，你可能在需要的时间忘记去称赞他人，或忽视你决策对其它人的影响。如果你过多地关注直觉，你可能错过事物的相关事实、细节或以前的经验。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>思考</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>直觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>感觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>让我领导、控制、组织以及完善一个机构的运行体制，以便它有效地运行并达到计划目的。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>允许我从事长远策略计划，创造性地解决问题，以及对各种不同问题涉及处富有创意且符合逻辑的解决方法。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>我的工作是在一个组织性强的环境中完成，而且在那里我和我的同事要在一些明确的指导方针下工作。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>我的工作观念鼓励并持机我的求知欲，同时允许我从事复杂且通常比较棘手的问题。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>给我机会遇到并与各种不同的人交往，他们必须是由能力、有趣且实力强大的人。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>给我在机构内不断前进、提高并展示自己才能的机会。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>我的工作有刺激性、挑战性及竞争性，在工作中我市公众注意的焦点，同时我的成就要看得见、被认同，且能够得到一定的回报。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>允许我与别人的有才智、有创造性、有抱负以及有理想的人工作，而且他们的能力是我所佩服的。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>让我设立一定目标，并为实现它们而奋斗，允许我运用自己的组织技能来使我自己及别人集中精力于更大的目标，而同时我自己所有的目标都能及时、有效地实现。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>能让我以我的政策来管理并监督别人，运用逻辑、客观的标准及利用每个人的才能，但不必处理人际冲突。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>能看到事情的可能发展情况及潜在含义</li>
+              <li>有创造性解决问题的天资，能客观地审查问题</li>
+              <li>有追求成功的干劲和雄心</li>
+              <li>自信且有天生的领导才能</li>
+              <li>对于在工作中胜任和胜出有强烈动机</li>
+              <li>标准高，工作原则强</li>
+              <li>能创造方法体系和模式来达到你的目标</li>
+              <li>敢于采取大胆行动，又不达目的不罢休的势头</li>
+              <li>能逻辑地、分析地做出决定</li>
+              <li>擅长于从事技术性工作，学习新东西时接受能力强</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>对那些反映不如你敏捷的人缺乏耐心</li>
+              <li>唐突、不机智、缺乏交际手段</li>
+              <li>易于仓促作决定</li>
+              <li>对一些世俗小事没有兴趣</li>
+              <li>有相要去改变那些根本没有必要改善的事物的倾向</li>
+              <li>不愿花时间适当地欣赏、夸奖同事或别人</li>
+              <li>对那些既定问题不愿再审查</li>
+              <li>易于过分强调工作，从而顺还了家庭的和谐</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•经理 •高级主管 •办公室经理 •行政管理人 •人事经理 •销售经理 •营销经理 •网络一体化专家(电讯) •技术培训人员 •信息服务——新业务开发人 •后勤顾问(生产) •广告业务经理 •管理顾问：电脑／信息服务、营销、机构重组 •营销经理：广播／电视／有线播放行业 •媒体策划／买主 •国际销售和营销 •特许权所有人 •销售经理：制药业 •管理人：健康服务</p>
+            <p>ENTJ 型人往往喜欢在商业领域工作。他们喜欢处于权力、控制和领导位置。作为商业经理，他们能够运用远景思维能力来制定随时适应变化的计划，规划出实现目标的最佳过程。ENTJ  型人使用直接管理方式， 能够做出坚决而尚属公平的决定，为雇员制定工作政策。他们喜欢周围的人独立、注重结果，不需太多的   监督和干涉就能完成工作。因 ENTJ 型人有能力影响他人而Ⅱ能轻松地与人交往和联络，他们通常会晋升为机构的最高领导。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>金融</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•个人财务设计人 •经济分析家 •抵押经纪人 •信用调查员 •股票经纪人 •投资银行家 •公司财务律师 •国际银行家 •经济学家</p>
+            <p>ENTJ 型人通常在金融领域做得很出色。他们喜欢赚钱，也喜欢和别人的钱打交道。他们喜欢这一领域的竞争性，能够轻易地快速控制局面。这些职业使  ENTJ 型人能够发挥预测趋势、为自己和客户设计简捷途径来充分把握机会的能力。他们不喜欢细节化、按部就班的工作，但他们可以把这些事情交给一个合格的助手去做。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>咨询</p>
+              <p>培训</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•商业顾问 •管理顾问 •教育顾问 •项目设计人 •管理培训人 •就业开发专家 •劳工关系 •电信安全顾问 •公司工作小组培训人</p>
+            <p>咨询行业所具有的变化和独立性对ENTJ 型人很有吸引力：近年来，这一领域发展迅速，使ENTJ 型人能有机会满足他们所具有的企业家精神，使他们得以与各种各样的商业背景下的各种人打交道，而且能得到与投入的工作相符合的回报。ENTJ 型人往往能够出色地进行商业或管理顾问工作，成为能够激励他人的出色的培训员。他们常常能够通过创造性的设计和生动灵活的学习班来开创有组织而且充满挑战的环境。他们总是喜欢承担新的工作项目，乐于教导雄心勃勃的人们如何提高自己的能力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>专业性职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•律师 •法官 •心理学家 •科学／社会科学教师 •化学工程师 •知识产权律师 •生物医学工程师 •精神病学家 •环境工程师</p>
+            <p>这些专业提供了  ENTJ 型人在职业生涯中寻求的地位和影响力。ENTJ 型人通常喜欢法律领域，能够成为成功的从业律师和法官。心理学和精神病学的智力挑战吸引许多ENTJ 型人，复杂的化学工程行业和日益发展的生物医学工程领域也有同样的吸引力。教育领域中，ENTJ 型人通常愿意教授高年级学生，尤其中等教育，成人教育以及高等教育。他们喜欢将他们的知识运用于周围的世界，常常从事那种可以让他们把教育责任扩展到其它领域的职业——如政治或政治顾问。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>放慢你行动的节拍</li>
+        <li>注重细节</li>
+        <li>体谅他人的需要</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要考虑人的因素，赞赏他人对组织的贡献</li>
+          <li>行动前先检查现实的、人力的、环境的资源是否可获得。</li>
+          <li>决策前花些时间考虑和反思各个方面的因素。</li>
+          <li>需要学会鉴别和重视自己和他人的情感。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ENTP.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ENTP（外倾、直觉、思维和知觉）——天生的企业家</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>反应快、聪明、长于多样事务</span></li>
+        <li><i>2</i><span>具激励伙伴、敏捷及直言讳专长。</span></li>
+        <li><i>3</i><span>会为了有趣对问题的两面加予争辩。</span></li>
+        <li><i>4</i><span>对解决新及挑战性的问题富有策略，但会轻忽或厌烦经常的任务与细节</span></li>
+        <li><i>5</i><span>兴趣多元，易倾向于转移至新生的兴趣。</span></li>
+        <li><i>6</i><span>对所想要的会有技巧地找出逻辑的理由。</span></li>
+        <li><i>7</i><span>长于看清础他人，有智能去解决新或有挑战的问题。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ENTP 型的人喜欢兴奋与挑战。他们热情开放、足智多谋、健谈而聪明，擅于许多事情，不断追求增加能力和个人权力。ENTP 型的人天生富有想象力，他们深深地喜欢新思想，留心一切可能性。他们有很强的首创精神，擅于运用创造冲动。ENTP 型的人视灵感高于其他的一切，力求使他们的新颖想法转变为现实，他们好奇、多才多艺、适应性强，在解决挑战性和理论性问题时善于随机心变。ENTP 型的人灵活而率直，能够轻易地看出任何情况中的缺点，乐于出于兴趣争论问题的某方面。他们有极好的分析能力，是出色的策略谋划者。他们几乎一直能够为他们所希望的事情找出符合逻辑的推理。大多数的ENTP别人喜欢审视周围的环境，认为多数的规则和章程如果不被打破，便意味着屈从。有时他们的态度不从习俗，乐于帮助别人超出可被接受和被期望的事情。他们喜欢自在地生活，在每天的生活中寻找快乐和变化。ENTP 型的人富有想象力地处理社会关系，常常有许多的朋友和熟人。他们表现得很乐观，具有幽默感。ENTP 型的人吸引和鼓励问伴，通过他们富有感染力的热情，鼓舞别人加入他们的行动中。他们喜欢努力理解和回应他人，而不是判断他人。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ENTP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ENTP 型的人主导功能是直觉（喜欢推论），辅助功能是思考。他们倾向于：探求隐含的原因、可能性或事物的整体。对事实和经验进行逻辑的分析，并做出结论。ENTP 型的人比较少地使用他们的第三、第四功能--感觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个  ENTP 型的人：如果你过多地关注直觉，你可能错过事物的相关事实、细节或以前的经验如果你只使用思考进行判断的话，你可能在需要的时间忘记去称赞他人或忽视你决策对其它人的影响。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>直觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>思考</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>感觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>有机会去创造性地解决问题或想出有革新精神的解决问题的方法。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>能把新颖的方法运用到更 有效的系统和制度的创建中去</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>能使我的创造力、胜任工作的能力和即兴发挥的能力得以充分地施展。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>能经历大量有趣、激动和充满活力的场面。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>遵守一定的逻辑规律，以客观、公平的活动力为基础，而不是以个人喜好为基础。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>能增强自己的专业技能，并能提高自身的素质；有大量接触有能力、有地位的人的机会。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>能经常和自己钦佩的人打交道。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>节奏感强，让人充满活力，并且需要和他人进行一些有意义的交流。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>能在较为轻松的气氛下进行工作；因此有较多的个人自由、空闲时间和自在的工作机会。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>有涉及和运用工程项目的机会，并且不必拘于小节。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>出色的交际才能、能使别人对自己的观点感到兴奋</li>
+              <li>急切地 “想知道盒子外边的世界”、能相处一些新的可能性</li>
+              <li>杰出的创造性解决问题的能力</li>
+              <li>探险精神、创新意识以及克服困难的勇气</li>
+              <li>兴趣爱好广泛，易于接受新事物</li>
+              <li>有“ 走自己的路，让别人去说吧”的乐观主义激情</li>
+              <li>学习新知识的信心和动力都很强大</li>
+              <li>天生的好奇心理，快速地搜索所需信息的技能</li>
+              <li>能够把握事情的全局，弄清思想和行为的长远影响</li>
+              <li>同时处理多个问题的能力</li>
+              <li>对别人的需要和意图的知觉</li>
+              <li>能灵活地适应新情况，有熟练的变换能力</li>
+              <li>在社交生活中不会感到拘谨，能舒适地适应大多数社交场合</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>难以使自己有条不紊和富于条理</li>
+              <li>在区分出应该优先对待的事物以及做出决定方面有一定的困难</li>
+              <li>过于自信；可能会不恰当地运用自己的能力和社会经历</li>
+              <li>倾向于用“是不是有可能”来看待问题，而不是以可能性、可行性的大小来衡量事物</li>
+              <li>很可能不切实际地许诺</li>
+              <li>对思维狭窄及思想顽固的人缺乏耐心</li>
+              <li>问题一旦解决，兴趣便不复存在</li>
+              <li>不喜欢按传统的、公式化的以及例行的方式来办事</li>
+              <li>对待细节和后续工作可能缺乏耐心，对自要求不严格</li>
+              <li>对事物很容易感到厌烦，并且可能在不恰当的时候把注意力转移到别的事情上去</li>
+              <li>不喜欢重复地做相同的工作任务</li>
+              <li>对自己不信任的人耐心不够</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>政治</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•政治家 •行政管理人员 •政治分析家 •社会科学家</p>
+            <p>这些职业能让ENTP们充分利用他们的思想学识和老练的处世经验，在气氛紧张的、快节奏的、有权力的政治领域发挥他们的才能。ENTP天生具有看到事物发展趋势、主题和变化方向的能力，而且能够适应这些变化。ENTP型的人有很强的权力欲望。他们喜欢与各种不同的人在一起工作。政治生涯需要他们那种有意识地结交朋友并迅速建立友好关系的能力。ENTP型的人喜欢在公众面前讲话，他们都是杰出的演讲家。他们能利用华丽的、滔滔不绝的语言来表现他们丰富的想象力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>计划与开发</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•战略策划者 •人事部门系统开发者 •房地产 代理商/开发者 •投资经纪人 •计算机分析人员 •工业设计管理者 •后勤顾问/生产顾问 •网络一体化专家/电信专家 •财政计划者 •投资银行家</p>
+            <p>计划和开发性质的工作要求人们有广阔的视野、预测事物发展趋势的能力以及系统地提出并创造地阐释开发计划的能力。开发者从事的工作都带有一定的风险性，因此他们经常需要说服别人看到他们工作的价值和成功的潜力，这正是ENTP非常喜欢做、也做得非常出色的一种工作。开发者同时也需要具有灵活性，要能够适应新情况，随时准备把新的条件与原有方案结合起来，而不必再重新制定方案。ENTP喜欢做战略策划类的工作，因为这类工作允许他们只要  想出创新性方法即可，然后把具体工作交给别人去做。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>创造</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•广告创意人 •公共关系专家 •市场调查员 •电台/电视台访谈节目主持人 •制片人 •艺术总监/期刊总编 •国际市场销售 •信息图表设计者 •信息服务</p>
+            <p>市场、广告和公共关系领域使ENTP能与其他富有创造性的人在一起工作，ENTP可以开发他们创造性的思想，并以令人兴奋的方式去实施这些想法。ENTP喜欢公共关系和广告领域快节奏的、赋予诱惑力的世界。在这里他们可以充分发挥自己的魅力和与人相处的技巧，来推销他们的思想和观点。市场调查需要ENTP运用他们预测事物发展趋势的能力，同时市场调查也刺激和满足了他们无止境的好奇心和活跃的想象力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>企业家</p>
+              <p>商人</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•企业家 •发明家 •业务顾问：经销/企业易主后的改革/赔偿 •风险资本投入者 •摄影师 •新闻记者 •演员 •技术教员 •多样化训练者</p>
+            <p>ENTP天生就是企业家！这类职业需要ENTP具有创立一个全新的、自由的、不断发展变化的工作环境的能力。这些职业经常要与很多人打交道，要求能创造新的观念和方法，要求能以一种全新的的方式思考，而且还会涉及大量的冒险行为。这些职业中涉及到的计划、方案经常是大规模的，需要大量的资金和有能力、有影响的人们参与。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>区别对待</li>
+        <li>集中关注</li>
+        <li>信守承诺</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要注意各个方面的因素和基本的事实。</li>
+          <li>需要承认他人贡献的有效性。</li>
+          <li>需要设立现实性的开始与结束的期限，知道何时该结束。</li>
+          <li>需要学会怎样在组织里如何工作。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ESFJ.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ESFJ（外倾、感觉、情感和判断）——我能为您做些什么？</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>诚挚、爱说话、合作性高、受欢迎、光明正大的—天生的合作者及活跃的组织成员。</span></li>
+        <li><i>2</i><span>重和谐且长于创造和谐。</span></li>
+        <li><i>3</i><span>常作对他人有益事务。</span></li>
+        <li><i>4</i><span>给予鼓励及称许会有更佳工作成效。</span></li>
+        <li><i>5</i><span>最有兴趣于会直接及有形影响人们生活的事务。</span></li>
+        <li><i>6</i><span>喜欢与他人共事去精确且准时地完成工作。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ESFJ 型的人通过直接的行动和合作积极地以真实、实际的方法帮助别人。他们友好、富有同情心和责任感。因为ESFJ 型的人把他们同别人的关系放在十分重要的位置，所以他们往往健谈、受人欢迎、有礼貌、渴望取悦他人。他们具有和睦的人际关系，并且通过很大的努力以获得和维持这种关系。事实上，他们常常理想化自己欣赏的人或物。ESFJ 型的人往往对自己以及自己的成绩十分欣赏，因而他们对于批评或者别人的漠视很敏感。通常他们很果断，表达自己坚定的主张，乐于事情能很快得到解决。ESFJ 型的人很现实，他们讲求实际、实事求是和安排有序。他们参与并能记住重要的事情和细节，乐于别人也能对自己的事情很确信。他们在自己的个人经历或在他们所信赖之人的经验之上制定计划或得出见解。他们知道并参与周围的物质世界，并喜欢具有主动性和创造性。ESFJ型的人十分小心谨慎，也非常传统化，因而他们能恪守自己的责任与承诺。他们支持现存制度，往往是委员会或组织机构中积极主动和乐于合作的成员，他们重视并能保持很好的社交关系。他们不辞劳苦地帮助他人，尤其在遇到困难或取得成功时，他们都很积极活跃。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ESFJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ESFJ 型的人主导功能是情感，辅助功能是感觉。他们倾向于：体谅他人感受、了解他人的需要、喜欢和谐的人际关系、易表露情感、喜去说服他人。注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。ESFJ 型的人比较少地使用他们的第三、第四功能—直觉和思维。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个ESFJ 型的人：如果你过多的使用情感功能，你可能在会表现得不合乎逻辑、不够客观、没有组织系统的思考、不具批判精神全盘接受、感情用事。如果你过多地使用感觉功能，你可能会失去整体的概念、想不出各种可能解决的途径、不住直觉、不求创新、无法应付太复杂的工作、不喜欢预测未来。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>情感</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>感觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>直觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>思维</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>能让我与别人建立并维持友好、真诚的人际关系，通过切实有形的方式来帮助他们提高生活质量。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>能给他人带来切实的利益；让我有时间来学习和精通必要的技能，然后把它们运用到工作中来为他人提供服务。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>能让我具有一定的影响力；工作时能和许多人打交道，领导他们为了共同的目标而和谐地合作。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>有明确的工作要求，工作表现是运用明确的、确定的成文标准来衡量的。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>在一个和谐、合作的气氛下进行的；同事、上司、客户、病人等人彼此之间不会发生冲突和不和。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>为了保证我的任务能够出色地完成，我能自主地做出一些决定，并运用一些高效的方法。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>每天都能让我有大量的与别人交往的机会；而且我能够成为决策过程的重要成员。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>为了确保事情顺利高效地进展，我能够安排自己以及周围其他人的工作。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>在一个友好的气氛中进行的；别人对我的工作成就表示赞赏，我能体会到认可和支持，我和同事之间是朋友关系。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>在一个有章可循的环境中进行的，所有的指令和要求都公开和清晰；而且权威受到充分的重视。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>有很大的精力和动力来完成任务、创造成果</li>
+              <li>能够有效地合别人写作，并且和他人建立起友好和睦的人际关系</li>
+              <li>处理事实和细节问题时，具有客观的态度和得天独厚的天资才能</li>
+              <li>善于培养和帮助他人；对于别人良好的行为举止能够给予赞扬，并使他们更加发扬光大</li>
+              <li>果敢坚决，稳定可靠</li>
+              <li>能够维护组织一向德价值观念和工作原则</li>
+              <li>灵活的组织技能和明确的工作道德</li>
+              <li>信奉工作在一个传统、稳定的组织里有其自身的优点和长处</li>
+              <li>乐意遵循已制定的理性公事和工作程序</li>
+              <li>通情达理，视角现实工作中的劣势</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>不愿意尝试、接受新的和未经考验的观点和想法</li>
+              <li>对于别人的异议和批评耿耿于怀；不喜欢在紧张的气氛中工作</li>
+              <li>可能只关注眼前需要，而对于长远利益重视不够</li>
+              <li>难以适应新境况，在不同工作任务之间来回切换时会有困难</li>
+              <li>容易表现的过于敏感；逃避难堪的场合</li>
+              <li>不愿意长时间独自工作，特及其想要和别人在一起</li>
+              <li>会轻易地把个人喜好表露出来</li>
+              <li>可能由于情感方面的负担而疲惫不堪</li>
+              <li>在掌握的嬉戏和资料还不够的情况下便草率作出决定</li>
+              <li>之关注具体的细节之处，而不能整体地把握一个情况或者事物的长远影响</li>
+              <li>容易固执己见、武断地做出决定</li>
+              <li>不愿意听取和接受反面的观点和意见</li>
+              <li>得不到赞扬或欣赏之辞的时候，可能会灰心丧气</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>保健</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•医师助理／牙医助理 •言语病理学家 •运动生理学家 •家庭医生 •护士 •牙医 •医用秘书 •验光师 •饮食学家／营养学家 •按摩治疗专家 •验光师／配镜技师 •药剂师／制药技师 •呼吸系统治疗专家 •兽医 •领照实习护士 •家庭健康护理 •最初保健护理医师 •理疗专家 •家庭健康社会工作者</p>
+            <p>保健领域对ESFJ 的吸引力主要是它们能够允许ESFJ 以一种直接的方式去帮助他人。无论是内科医生、护士或其他类似的职业，ESFJ 都喜欢通过学习技能帮助他们的病人生活得更加容易，减少痛苦和创伤。这些领域要求有较强的实际操作能力和严格遵守运行程序的标准，这正是  ESFJ 所善长的两件事。这些保健领域的职业还可以使ESFJ 与病人及同事建立并维护亲密的关系。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•小学教师 •特殊教育工怍者 •儿童照管人员 •家庭经济教师 •运动教练 •双语教学老师</p>
+            <p>ESFJ 的教育方式常常是介入个人感情的，并且善于举例。ESFJ 非常喜欢对低年级学生和有特殊需要的学生进行教育，因为他们认为帮助别人掌握一些基本的知识和技能是非常有意义的。直接与小学生们打交道满足了ESFJ 天性中的能量和热情。在学校环境中，常常有许多规章和制度，这是  ESFJ 所喜欢的，他们能在这里找到满足感。很多  ESFJ 喜欢运动，因此他们愿意教给别人一些运动技巧。他们希望在工作中能有重要的地位。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>社会服务</p>
+              <p>咨询</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•社会工作者 •社区福利工作者 •专业自愿者 •顾问 •律师 •儿童福利顾问 •社会工作者</p>
+            <p>ESFJ 都是社区活动的有力支持者，他们经常自愿建立并维护市民组织。因此，他们可以从类似的社会工作中找到职业满足感。帮助个人或家庭解决问题，使他们成为社会积极的一部分，这对很多  ESFJ 可是非常有意义的。他们与人轻松交往的能力和为团体服务的精神使他们容易在社区活动中得到满足感。ESFJ 天性倾向于传统和保守，因此他们喜欢在固定结构的、有传统价值观念的团体中贡献他们的力量。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•公关业务经理 •私人银行家 •销售代表 •电话推销员 •办公室经理 •零售商 •保险代理(家庭) •人力资源／培训 •信贷顾问 •经营策划者</p>
+            <p>商业世界为ESFJ 提供了和许多人打交道的机会以及通过勤奋工作达到自己目标的机会，他们喜欢商业活动中的快节奏和活力，他们喜欢与顾客或客户打交道。当工作中涉及到私人关系时，如房地产或私人银行，很多  ESFJ 都能获得成功。因为他们善于与别人建立积极向上的关系并且能够维持这种关系。公关和推销需要杰出的人际交流技巧，这正是大多数  ESFJ 所具有的。这两种职业都需要密切关注细节，把整个计划贯彻到底。ESFJ 的组织才能在这些领域得到了充分的发挥。最后，销售领域也是  ESFJ 经常能获得大量成功的地方。因为他们能够利用他们的交际能力、他们的机智、和他们的敏感充分满足顾客的需求。贴刃通常喜欢卖有形商品，他们不喜欢销售诸如概念、思想或复杂系统等无形的商品，他们对零售非常感兴趣，因为这个行业可以使他们与公众接触，使他们的能力不断增强并且由于特定的商品而受益。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•飞机乘务员 •顾客服务代表 •高级理发师／美容师 •资金筹集人 •旅行推销员 •环境旅游专家 •不动产代理／经纪人 •翻译 •系谱学家 •家庭保健用品销售 •体育设备／商品销售 •营销经理：无线电／电视／广播电缆工业</p>
+            <p>ESFJ 经常喜欢从事服务行业，主要是因为这个行业可以使他们直接与其他人打交道，使他们为他人提供服务，帮助他人减轻痛苦或者生活得更好。顾客服务代表的工作为他们做到这些提供了机会。ESFJ 在困难的时候是坚定不移、值得依靠的，他们经常在危机的时候站出来承担具体事务。殡仪馆管理人员在工作中必须对他人的需求表现出极大的敏感和关心。作为飞机服务员，ESFJ 喜欢工作对象的变化、旅行和与人打交道。大多数ESFJ 都是热情而殷勤的，他们在饭馆或承办事务中是出色的老板或老板娘。ESFJ 喜欢销售，并且擅长销售，特别是对于有形的、具体的商品。通过销售，他们可以与顾客建立长期的良好关系。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>办事情时要不紧不慢</li>
+        <li>考虑眼前并不存在的可能性</li>
+        <li>不要随便地把事情视为是对自己的人身攻击</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需学会注意差异性和处理冲突。</li>
+          <li>需学会分离出自己的需要。</li>
+          <li>需学会更客观地听取真正需要什么。</li>
+          <li>做决策时，需考虑决策的理性、全局性的意义。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ESFP.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ESFP（外倾、感觉、情感和知觉）——不要担心，高兴起来！</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>外向、和善、接受性、乐于分享喜乐予他人。</span></li>
+        <li><i>2</i><span>喜欢与他人一起行动且促成事件发生，在学习时亦然。</span></li>
+        <li><i>3</i><span>知晓事件未来的发展并会热列参与。</span></li>
+        <li><i>4</i><span>最擅长于人际相处能力及具备完备常识，很有弹性能立即适应他人与环境。</span></li>
+        <li><i>5</i><span>对生命、人、物质享受的热爱者。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ESFP 型的人乐意与人相处，有一种真正的生活热情。他们顽皮活泼，通过真诚和玩笑使别人感到事情更加有趣。ESFP 型的人脾气随和、适应性强，热情友好和慷慨大方。他们擅长交际，常常是别人的“注意中心”。他们热情而乐于合作地去参加各种活动和节目，而且通常立刻能对付几种活动。ESFP型的人是现实的观察者，他们按照事物的本身去对待并接受它们。他们往往信任自己能够听到、闻到、触摸和看到的事物，而不是依赖于理论上的解释。因为他们喜欢具体的事实，对于细节有很好的记忆力，所以他们能从亲身的经历中学到最好的东西。共同的感觉给予他们与人和物相处的实际能力。他们喜欢收集信息，从中观察可能自然出现的解决方法。ESFP 型的人对于自我和他人都能容忍和接受，往往不会试图把自己的愿望强加于他人。ESFP型的人通融和有同情心，通常许多人都真心地喜欢他们，，他们能够让别人采纳他们的建议，所以他们很擅于帮助冲突的各方重归于好。他们寻求他人的陪伴，是很好的交淡者。他们乐于帮助旁人，偏好以真实有形的方式给予协助。ESFP 型的人天真率直，很有魅力和说服力。他们喜欢意料不到的事情，喜欢寻找给他人带来愉快和意外惊喜的方法。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ESFP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ESFP型的人主导功能是感觉（喜欢感受），辅助功能是情感。他们倾向于：活在当下，把生活体验到极致。ESFP型的人比较少地使用他们的第三、第四功能—思考和直觉 。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个ESFP型的人：需要注意发展个人的情感和对现实的感知能力。如果没有发展自己的情感，可能会在决策和与人交往时发生差错，缺乏衡量、评价和把握自己的机制。如果没有发展个人对现实的感知能力，可能会停留在从当前事件中所获得的信息上。那么自己的判断就会很局限，特别是那些涉及到对他人有影响的决定时更是如此。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>感觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>情感</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>思考</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>直觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>让我有实际经验中学习，并由我在权限内收集到的所有信息和使用常识寻求问题的解决之法。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>让我妻子参加实际任务，与客户直接工作，在户外比远离行动好</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>让我和许多人一起在有活力、友善、充满变化乐趣和自然的环境中工作。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>要求技巧地处理人和矛盾，缓解紧张气氛，帮助团队更协作的工作的能力，以及激励别人的能力。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>让我快速地操纵多样的项目和活动，尤其是那些用得上我的审美观和设计感的。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>让我整个工作日与其他分享我的热情、精力和实际观点的易相处且友善的人一起互相影响。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>让我开展有即时效应得机会，满足我周围人的要求。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>在一个友善、放松，没有隐藏的政治议程的环境中工作</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>奖励我的努力工作和好意图，让我觉得自己的贡献让人欣赏。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>让我有乐趣享受每一天的景气，官僚作氛、规矩或限制达到最低程度。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>工作时精力充沛和充满乐趣</li>
+              <li>对迅速发生的改变和转变适应良好的能力</li>
+              <li>对别人的需要敏感和渴望以真正的方法帮助他们</li>
+              <li>喜欢自然；你是个有协作精神的团队成员</li>
+              <li>使工作有去、让人兴奋的能力</li>
+              <li>实际且具有丰富的常识</li>
+              <li>忠实于你关心的人和组织</li>
+              <li>上进心；在工作中，你创造了一个生机勃勃、充满乐趣的气氛</li>
+              <li>柔韧性和愿意冒险，尝试新事物</li>
+              <li>渴望合作，以真实准确的方式帮助他</li>
+              <li>清楚地评估目前的资源和情况，并且立刻看到应该做什么的能力</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：你在工作上的缺陷：</p>
+            <ul>
+              <li>难以独自工作，尤其是持续的一段时间</li>
+              <li>以表面价值接受事物和错失进一步暗示的倾向</li>
+              <li>不喜欢提前准备；在组织时间上有问题</li>
+              <li>难以看到目前不存在的机会和选择</li>
+              <li>将失败当作针对个人的批评和负面回应的倾向</li>
+              <li>难以做出决定</li>
+              <li>冲动和容易被诱惑或迷惑的倾向</li>
+              <li>不喜欢过多的条条框框和官僚作风</li>
+              <li>如果涉及到个人感情，就难以做出有逻辑的决</li>
+              <li>抵制确立长期目标和难以达到最后期限的倾向</li>
+              <li>难以律己或律人</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育及社会服务部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•教师：早期儿童教育及初级教育 •儿童护理员 •家庭保健人员 •体育教练 •特殊教育老师 •酗酒，吸毒劝戒人员 •儿童福利顾问 •海洋生物学家</p>
+            <p>ESFP 型的人在教育行业常获得职业满足。尤其当他们同小孩一块时，更是这样。初级及学龄前教育有时不太正规和固定化，这就为主动实践创造了机会。ESFP 型的人喜欢传授基本技能，乐于教孩子们如何相处，这对早期教育非常重要。他们喜欢初级学校的活动，能力水平，丰富的学科。ESFP 型的人生气勃勃，本身具备熟练的活动技能，因此，他们喜欢体育和体育教练。体育活动、集体活动，积极的户外活动对于ESFP 型的人都喜欢。他们富于热情、勇气，是优秀的教练和教师。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•应急家庭护士 •社会福利工作人员 •训犬员 •医务助理 •牙科专家或牙科助理 •护士 •运动专家 •保健护理医生 •家庭保健服务人员 •按摩专家 •饮食专家或营养学家 •紧急医务工作人员 •运动生理学家 •药剂师 •放射专家 •呼吸系统专家 •营养专家 •职业疗法医师</p>
+            <p>保健护理和社会福利工作为ESFP 型的人提供了帮助别人的机会。那些职业要求学会然后重复使用技能。大多数ESFP型的人喜欢同别人直接接触和快节奏的生活。紧急家用护土要能对经历危险而受到惊吓的人作出快速反应而且必须有让对象平静的本领。许多ESFP型的人喜欢动物，也乐于从事对动物的护理和训练的工作。社会工作领域能让ESFP 型的人同许多不同的人接触和共事，有助于他们发现和确定可利用的资源。他们轻易地建立关系，从帮助别人过得更舒心的过程中得到满足。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>娱乐业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•旅行代办人／旅游组织人员 •摄像师 •电影制片人 •音乐家 •承办人员 •特殊事件统筹人员 •表演艺术人员、舞蹈员、喜剧演员</p>
+            <p>ESFP型的人喜欢同朋友正式和随意地娱乐。他们通常对美有很强的感受，对新鲜和优美的事物有敏锐的洞察力。一些ESFP 型的人喜欢表现自己的技艺，另一些则喜欢娱乐时同别人在一起，ESFP型的人喜欢旅游，同时，由于他们善于倾听游客的不同要求然后找出最佳方案，他们也是好的旅行代办人。他们能适应立刻对付不同事件或同一事情的不同部分，经常在统筹特殊事件时获得满足感。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+              <p>推销业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•零售商或零售策划人员 •公共关系专家 •资金筹措者 •劳资关系调查人员 •接待员 •商业计划人员 •多样化管理者：人力资源 •小组协同培训 •旅行推销人员 •保险代办人经纪人(健康或人寿) •房地产经纪人 •体育设备推销／买卖 •零售推销 •家用保键用品推销</p>
+            <p>ESFP型的人一般不喜欢商业事务，尤其公司事务，但如果那些工作能提供同别人交往的机会或不受严格的条框束缚，也可引起ESFP 人的兴趣。他们喜欢房地产推销是因为由此可在办公室外度过大多数时间，而且可以直接同各种各样的人交往，展示各种各样的居室。他们常喜欢搞公关，筹集资金，调停，从中可以运用他们天生的劝解能力。那些工作能让他们使用他们的人际交往技巧及运用收集信息的能力。许多ESFP 型的人被零售业吸引，尤其是他们能发挥对时尚的洞察力的时候。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>服务业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•飞机服务员 •秘书／接待员 •旅店老板 •花卉设计 •警察</p>
+            <p>服务业吸引ESFP型的人是因为要求使用熟练的人际交往技巧和能力。ESFP 型的人热情友好，有使别人放松的能力。他们喜欢饭店和俱乐部的气氛，以及爱交往和慷慨的老板，他们当场适应的特点让他们走到哪都很快乐，据说，聚会常围着ESFP 型的人转。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>学会考虑将来的暗示</li>
+        <li>不要太个人化地看待事情</li>
+        <li>信守承诺</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>为减少非个体性冲突，做决策时需理智分析决策的意义。</li>
+          <li>进行管理工作前应事先制定计划。</li>
+          <li>需平衡花费在任务和社会性交往上的时间。</li>
+          <li>需致力于完成计划，对时间进行管理。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ESTJ.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ESTJ（外倾、感觉、思维和判断）——事务料理家</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>务实、真实、事实倾向，具企业或技术天份。</span></li>
+        <li><i>2</i><span>不喜欢抽象理论；最喜欢学习可立即运用事理。</span></li>
+        <li><i>3</i><span>喜好组织与管理活动且专注以最有效率方式行事以达致成效。</span></li>
+        <li><i>4</i><span>具决断力、关注细节且很快作出决策—优秀行政者。</span></li>
+        <li><i>5</i><span>会忽略他人感受。</span></li>
+        <li><i>6</i><span>喜作领导者或企业主管。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ESTJ 型的人很善于完成任务；他们喜欢操纵局势和促使事情发生；他们具有责任感、勤勤恳恳，信守他们的承诺；他们喜欢条理性并且能记住和组织安排许多细节。他们及时和尽可能高效率地、系统地开始达到目标。ESTJ 型的人被迫做决定。他们常常以自己过去的经历为基础得出结论。他们很客观，有条理性和分析能力，以及很强的推理能力。事实上，除了符合逻辑外，从他没有什么可以使他们信服。同时，ESTJ 型的人又很现实、有头脑、讲求实际。他们更感兴趣的是“真实的事物”，而不是诸如抽象的想法和理论等无形的东西，他们往往对那些认为没有实用价值的东西不感兴趣。他们知道自己周围将要发生的事情，而首要关心的则是目前。因为ESTJ 型的人依照一套固定的规则生活，所以他们坚持不懈和值得依赖。他们往往很传统，有兴趣维护现存的制度。虽然对于他们来说，感情生活和社会活动并不像生活的其他方向那样重要，但是对于亲情关系，他们却固守不变。他们不但能很轻松地判断别人,而且还是条理分明的纪律执行者。ESTJ 型的人直爽坦率，友善合群、通常他们会很容易地了解事物，这是因为“你看到的便是你得到的”。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ESTJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ESTJ 型的人主导功能是思考（喜欢事实），辅助功能是感觉。他们倾向于：对事实和经验做出符合逻辑结论。注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。ESTJ 型的人比较少地使用他们的第三、第四功能—直觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个  ESTJ 型的人：如果你过多的使用思考功能，你可能在需要的时间忘记去称赞他人，或忽视你决策对其它人的影响。如果你过多的使用思考功能，你可能失去整体的概念、想不出各种可能解决的途径、不住直觉、不求创新、无法应付太复杂的工作、不喜欢预测未来。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>外倾</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>感觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>直觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>让我系统地工作，组织和整理事实、原则或人事档案；为了一个合乎逻辑的目标而有效地利用时间和资源。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>在处理具体的、直接的、有明确属性的任务时能运用我高超的办事技能和强大的推理能力。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>是通过公平、合理、清晰和客观的标准来衡量和评估的。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>在一个友好的气氛中和其他刻苦认真的人们一起工作，而且他们不把个人问题带到工作中来，也不盘问我工作的个人感受。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>有着现实、有形的属性；有时在的应用价值和明确的运行结果。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>要有明确的发展前景和清晰的汇报等级制度。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>让我成果丰硕；去安排和组织一些必要的步骤和资源，遵循一定的工作程序，有权规定最后的期限，并能够在此前完成任务。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>在一个稳定和可预测的环境中工作，但是也能让我和很多人在一起坐很多事情。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>需要和许多人一起来共同完成，使我能支配自己和他人。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>让我有决定权、很大的管理权利和很多职责任务；而且，我的观点、意见和经历很受关注和重视。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>注重实践，关心结果</li>
+              <li>能强有力地承担自己的义务；必要的时候能够快刀斩乱麻、意志坚定</li>
+              <li>能够自始至终地关注着公司（或组织）的目标</li>
+              <li>办事精确、很少出差错，有要把工作做好的强烈愿望</li>
+              <li>有很好地遵循已经建立起的工作安排和工作程序的习惯</li>
+              <li>能够敏感地觉察出不合逻辑、不连贯、不现实以及不称职的人或事</li>
+              <li>很好的组织能力；能很客观地做出决定</li>
+              <li>相信传统模式的可取之处，并能够遵循传统模式</li>
+              <li>很强的责任心；别人可以信任你去实现自己的诺言</li>
+              <li>清楚明白的工作伦理；对效率和成果的追求</li>
+              <li>通情达理，视角现实</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>对不遵循工作程序和忽略重要细节的人有点不耐烦</li>
+              <li>不愿意尝试、接受新的和未经考验的观点和想法</li>
+              <li>对变动感到不安；排斥革新</li>
+              <li>对低效率的或需花很多时间才能完成的程序或工作缺乏耐心</li>
+              <li>只考虑眼前需要而不顾长远利益</li>
+              <li>有为了实现自己的利益而无视别人的需要的趋向</li>
+              <li>难以看到将来的可能性</li>
+              <li>对于方针或决定将会对别人造成什么样的影响缺乏敏感</li>
+              <li>不喜欢听相反的意见,可能频繁地打断别人的发言</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•保险代理 •厨师 •陆军军官 •教师：贸易、工业、技术 •政府雇员 •体育商品／设备经销商 •药品经销商 •电信防护员 •警察／监护官／管教官 •销售(有形的东西)：计算机、不动产</p>
+            <p>这些职业允许ESTJ 在现实生活中从事一些实际的、具体的工作。这些职业中的大多数都需要遵守一些原则和标准，还需要与公众打交道。ESTJ 喜欢处于一个“有权”的位置，他们喜欢发号施令。经营不动产则给他们提供机会使他们能够迅速取得有形的结果。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>科技</p>
+              <p>物理</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•计算机系统分析家 •审计员 •总承包商 •农场主 •建筑工人 •药剂师 •临床医师 •会计学内部审计员 •技术教员 •脑电图技术专家／技师 •工程师：机械领域／应用领域</p>
+            <p>这些领域能够发挥ESTJ 技术和机械方面的才能，每一种工作都需要他们收集、组织、分析事实资料，然后进行演绎的推理。每一种工作都需要一种有逻辑的、系统化的工作方式，这正是  ESTJ 所特有的。他们就喜欢在整齐、有条理的环境中工作，他们不能忍受工作中的混乱状态和效率低下。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>管理</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•银行高级职员／贷款员 •项目经理 •职员总管 •行政官员 •工厂监督人 •数据库经营者 •购物代理人 •信贷分析员 •制定规章制度的官员 •预算分析员 •管理人：社会保健服务 •信息主管 •管理顾问：企业运行 •后勤供给经理 •银行经理／贷款员 •信贷分析员／顾问</p>
+            <p>管理领域非常适合ESTJ，因为他们喜欢处于有权力的位置。ESTJ 都是优秀的管理人员，因为他们喜欢发布命令，喜欢作决定和指导别人。同时，他们对所服务的机构都非常忠心。管理工作需要不断地与人打交道，需要有对别人的工作进行指导、管理和评价的能力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>专门领域</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•牙医 •内科医生：普通医学 •股票经纪人 •法官 •行政领导 •教师：技术／贸易•公司财务律师 •电气工程师 •保健护理医生• 工业工程师 •律师 •药剂师 •土木／机械／冶金工程师</p>
+            <p>这些特定职业的吸引力在于它们能使  ESTJ 在一些已经建立起来的、传统的、具有一定权力的机构中工作。牙科和医学是需要技术的职业，通常包括一些具体工作，工作对象是人或其它有形的东西，如牙齿和牙床(对牙医来说)、人体(对临床医生而言)。这些职业利用了  ESTJ 演绎推理的能力和解释因果关系的能力。ESTJ    喜欢遵循一定的程序办事，这些程序是根据他们自己或其他他们所敬佩的人的经验建立起来的，通常都是非常有效的。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>放慢节奏</li>
+        <li>多为别人着想</li>
+        <li>要能灵活变通</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>决策之前需考虑各种因素，包括人的因素</li>
+          <li>需要促使自己看到他人要求变革而获得的利益。</li>
+          <li>需做特别的努力学会赞赏别人。</li>
+          <li>需从工作中抽点时间考虑和识别自己的情感和价值观。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ESTP.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ESTP（外倾、感觉、思维和知觉）——创业者</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>擅长现场实时解决问题—解决问题者。</span></li>
+        <li><i>2</i><span>喜欢办事并乐于其中及过程。</span></li>
+        <li><i>3</i><span>倾向于喜好技术事务及运动，交结同好友人。</span></li>
+        <li><i>4</i><span>具适应性、容忍度、务实性；投注心力于会很快具成效工作。</span></li>
+        <li><i>5</i><span>不喜欢冗长概念的解释及理论。</span></li>
+        <li><i>6</i><span>最专精于可操作、处理、分解或组合的真实事务。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ESTP 型的人不会焦虑——他们是快乐的。ESTP 型的人活跃、随遇而安、天真率直。他们乐于享受现在的一切而不是为将来计划什么。ESTP 型的人很现实，他们信任和依赖于自己对这个世界的感受。他们是好奇而热心的观察者。因为他们接受现存的一切，所以他们思维开阔，能够容忍自我和他人。ESTP 型的人喜欢处理、分解与恢复原状的真实事物。ESTP 型的人喜欢行动而不是漫谈，当问题出现时，他们乐于去处理。他们是优秀的解决问题的人，这是因为他们能够掌握必要的事实情况，然后找到符合逻辑的明智的解决途径，而无需浪费大量的努力或精力。他们会成为适宜外交谈判的人，他们乐于尝试非传统的方法而且常常能够说服别人给他们一个妥协的机会。他们能够理解晦涩的原则，在符合逻辑的基础上，而不是基于他们对事物的感受之上做出决定。因此，他们讲求实效，在情况必须时非常强硬。在大多数的社交场合中，ESTP 型的人很友善，富有魅力、轻松自如而受人欢迎。在任何有他们的场合中，他们总是爽直、多才多艺和有趣，总有没完没了的笑话和故事。他们善于通过缓和气氛以及使冲突的双方相互协调，从而化解紧张的局势。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ESTP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ESTP 型的人主导功能是感觉（关注细节），辅助功能是思维。他们倾向于：注意细节、重视实际、能记住琐碎细节，耐得住烦闷的工作、有耐性、细心有系统。合乎逻辑擅于分析、客观、公正、有逻辑系统的思考、具判判能力、坚定。ESTP 型的人比较少地使用他们的第三、第四功能—情感和直觉。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个ESTP型的人：如果你过多的使用感觉功能，你可能会失去整体的观念、想不出各种可能解决的途径、不信直觉、不求判断、无法应付太复杂的工作、不喜欢推测未来。如果你过多的使用思考功能，你可能忽略他人感受、误解别人的价值观、不在意和谐的人、不露感情、悯情较少、不能说服他人。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>感觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>思维</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>情感</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>直觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>自然地与许多人接触和互相影响；每天提供不同和有趣的事。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>运用敏锐的观察力、吸收和记忆事实的能力。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>运用找寻解决问题方法的能力，运用第一手经验，然后批判地分析这些解决方法，找出最佳方案。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>充满活力、冒险和趣味，事情迅速地发生，被允许冒险和留意新的机会。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>对计划外的情况做出反应，自由地处理，有技巧地磋商满意的解决方案。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>在没有过多的规则和限制的环境中与其他现实而有趣的人一起工作，在完成任务后可以享受自由时光。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>以我自己习惯和认为有必要的方式安排自己的工作，而不是依照别人的标准。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>实际且有逻辑性，我可以运用自己的推理能力找到系统内逻辑上的矛盾和缺陷，并加以改正。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>让我自己应付危机，以坚持的原则和适宜的态度工作。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>涉及真正的人和事，而不是理论和方法，我的努力可以直接产生有形的产品或服务。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>敏锐的观察力，对实际讯息的出色记忆力</li>
+              <li>明白该做什么的能力，和现实地对完成工作的必要条件在发动和促进项目时的愉快</li>
+              <li>精力充沛；你喜欢在工作中充满活力随机应变的能力</li>
+              <li>使工作有趣和兴奋的能力参加团队的乐趣</li>
+              <li>实际、现实和观察力和丰富的常识</li>
+              <li>逐步上升的方式；你在工作中创造的生动有趣的气氛适应力，愿意冒险和尝试新事物</li>
+              <li>愿意接受不同和“跟随潮流”的能力</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>很难独自工作，尤其是长时间</li>
+              <li>不喜欢事先准备；在组织时间上你有困难</li>
+              <li>对别人的感觉迟钝、麻木的倾向、或者对人们的感觉过于疏忽无法看到一时不存在的机会和选择</li>
+              <li>缺乏耐心或无法忍受行政细节和手续很难作决定或优先考虑计划</li>
+              <li>易冲动的倾向和易受诱惑或迷惑难以看到事情的长远影响</li>
+              <li>不喜欢过多的规矩和条条框框的官僚作分抵抗制定长远目标，难以达到最后期限</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•警察 •消防队员 •护理人员 •侦探 •领航员 •调查研究者 •管教罪犯的人员 •房地产经纪人 •急诊医士 •运动生理学家／运动医学家 •呼吸治疗专家 •空中服务员 •体育用品销售 •调查保险诈骗人员 •私人侦探</p>
+            <p>许多ESTP型的人发现国内服务部门的职业令人感到满意，因为这些职业具有高度的积极活动、多样性以及与来自于不同背景的大量人员接触的机会。这些职业中的大多数要求对迅速变化的形势做出快捷的思考和反应，并在压力下能够保持冷静。ESTP 型的人天生具备好奇心和观察力，他们经常能成为出色的侦探和调查研究人员。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>金融</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•个人财务计划者 •审计员 •股票经纪人 •银行业者 •投资者 •保险推销 •预算分折员 •保险代理人／经纪人(推销商)</p>
+            <p>ESTP 型的人常常对金融界感兴趣，尤其是当它涉及到快速变化的局势，包含着一定冒险之时。对于兴奋事物以及冒险的热爱意味着他们在股票市场中很善于下赌注或“玩” 得很好。他们是注重实际和讲求实效的人，喜欢需要解决问题的职业，即使这意味着要使用非常规的途径。金融方面的大多数职业都要求与公众大量的接触，而ESTP 型人友好和善、易于相处的性格有助于他们认识别人和获得新客户。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>娱乐业</p>
+              <p>体育运动</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•播送体育节目 •新闻报道员 •承办人 •旅游代理人 •舞蹈演员 •酒吧间侍员 •拍卖商 •职业运动员／教练 •体能指导员／训练者</p>
+            <p>这些“娱乐性”的职业提供了大量紧张活动的机会，对于ESTP 型的人来说，这是他们职业满足感中的基本要素。ESTP 型的人为目前而生活，喜欢令他们活跃和有生气的工作。他们是天生的创导者，然而也热衷于完成冒险和令人激动的事情。许多  ESTP 型的人是体育爱好者，他们擅长以运动为中心内容，包括与别人竞争和训练别人的工作。他们喜欢尽可能多得在别人周围工作，而且他们也会成为具有魅力和说服力的酒吧间掌柜和拍卖商。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>技术</p>
+              <p>商贸</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•木匠 •工匠／手艺人 •农民 •总承包商 •建筑工人 •厨师长／厨师 •电气工程师 •电子专家 •集成网络专家(电信学) •工业／机械工程师 •勘测员 •脑电图专家／技术员 •放射学专业人员 •飞机修理工 •海洋生物学家 •技术培训者——课堂环景 •后勤和供给经营人——制造业 •土木工程师</p>
+            <p>对于ESTP 型的人来说，商贸的吸引力在于能与实际的事物打交道，以及以有效、经济、熟练的方式利用工具。通常他们有很好的对机械方面技巧的理解力，并能很好地运用自己的双手。只要周围有别人，ESTP 型的人就喜欢独自地工作。他们喜欢这些职业的具体和活跃的特性。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•房地产经纪人 •中间商 •房地产投资开发者 •批发商 •零售商 •汽车销售商 •业务顾问(业务活动) •特许经营者</p>
+            <p>通常，许多  ESTP 型的人认为商业世界的限制太多，步伐过慢，很难使人满意。然而，这些职业在程序上更具灵活可变性、个人的自由和多样性，这些都吸引了ESTP 型人的兴趣。ESTP 型的人是出色的中间商，他们喜欢在开始—...项新的商业计划或成为投资者中发现的冒险性。因为他们很善于从他人身上体察微妙的暗示，所以他们能成为出色的销售商。他们喜欢淡判的过程和成为公平的仲裁人，也热衷于保险业或汽车销售中激烈竞争的特点．而且在具有为销售目标设有奖励和奖金的体制下，会做得很好。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>学会三思而行</li>
+        <li>考虑别人的感觉</li>
+        <li>善始善终</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需抑制自己的任务型定向，分析他人的情绪感受。</li>
+          <li>需在快速决定之前，事先计划，考虑更多的因素。</li>
+          <li>需完成眼前的任务。</li>
+          <li>需以适当的观点看待工作和娱乐。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/Holland.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="holland-detail">
+    <div class="banner-wrap">
+      <span>霍兰德专业兴趣评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>你的专业兴趣测评结果</p>
+    </div>
+    <div class="block-wrap chart-wrap bg1">
+      <div class="result">
+        <p>{{ natureResult.name_en }}</p>
+        <p>{{ natureResult.name_zh }}</p>
+      </div>
+      <p class="tip">你的专业兴趣倾向：{{ hollInfo.ruleCode }}</p>
+      <div ref="chart" class="chart" />
+    </div>
+    <div class="block-wrap mt20">
+      <p class="title-style">你的专业兴趣测评得分</p>
+      <table class="mt20">
+        <colgroup>
+          <col style="background-color:#ffa400">
+          <col style="background-color:#f5f5fd">
+          <col style="background-color:#f5f5fd">
+          <col style="background-color:#f5f5fd">
+          <col style="background-color:#f5f5fd">
+          <col style="background-color:#f5f5fd">
+          <col style="background-color:#f5f5fd">
+        </colgroup>
+        <tr>
+          <td>类型</td>
+          <td>现实型</td>
+          <td>研究型</td>
+          <td>艺术型</td>
+          <td>社会型</td>
+          <td>企业型</td>
+          <td>传统型</td>
+        </tr>
+        <tr>
+          <td>典型特征</td>
+          <td>使用工具</td>
+          <td>钻研思考</td>
+          <td>活力创造</td>
+          <td>与人交往</td>
+          <td>管理活动</td>
+          <td>执行任务</td>
+        </tr>
+        <tr>
+          <td>得分</td>
+          <td>{{ seriesData[0] }}</td>
+          <td>{{ seriesData[1] }}</td>
+          <td>{{ seriesData[2] }}</td>
+          <td>{{ seriesData[3] }}</td>
+          <td>{{ seriesData[4] }}</td>
+          <td>{{ seriesData[5] }}</td>
+        </tr>
+      </table>
+      <p class="score-tip">
+        *分数说明：你在某种兴趣类型上得分越高，表明您越适合学习与之匹配的专业；反之，您在某类上的得分越低，表明您越不适合学习与之相匹配的专业。
+      </p>
+    </div>
+    <div class="block-wrap mt20">
+      <p class="title-style">价值分析</p>
+      <p class="line-style" style="margin-top: 10px">霍兰德兴趣理论主要从兴趣的角度出发来探索职业指导的问题.他明确提出了职业兴趣的人格观,使人们对职业兴趣的认识有了质的变化.霍兰德兴趣理论反映了他长期专注于职业指导的实践经历,他把对职业环境的研究与对职业兴趣个体差异的研究有机地结合起来,而在霍兰德兴趣类型理论提出之前,二者的研究是相对独立进行的.霍兰德以职业兴趣理论为基础,先后编制了职业偏好量表(VocatIonaI Preference lnventory)和自我导向搜寻表(Self-directed Search)两种职业兴趣量表,作为职业兴趣的测查工具 霍兰德力求为每种职业兴趣找出两种相匹配的职业能力.兴趣测试和能力测试的结合在职业指导和职业咨询的实际操作中起到了促进作用.</p>
+      <p class="line-style" style="margin-top: 20px">霍兰德将其职业人格类型理论运用于美国劳工部制定的职业条目词典,僧助其中职业分析的有关内容,将其中12099种职业赋予霍兰德人格类型代码.编纂了"霍兰德代码词典" (The Dictionary of Hollandoccupational Codes),为各类人员按照自己的职业兴趣类型搜寻合适的职业提供了广泛的应用前景.</p>
+      <p class="line-style" style="margin-top: 20px">霍兰德兴趣理论还提出,兴趣是描述人格的另一种方法,是职业选择中一个更为普遍的概念.在霍兰德的理论中,人格被看作是兴趣、价值、需求、技巧、信仰、态度和学习个性的综合体.就职业选择而言,兴趣是个体和职业匹配的过程中最重要的因素,直至目前,霍兰德兴趣理论是最具影响力的职业发展理论和职业分类体系.</p>
+    </div>
+    <div class="block-wrap mt20">
+      <p class="title-style">六种类型性格</p>
+      <div class="nature-wrap">
+        <div v-for="item,i in natureList" :key="i" class="nature-item">
+          <div class="header">
+            <p>{{ item.name_zh }}</p>
+            <p>{{ item.name_en }}</p>
+          </div>
+          <div class="body">
+            <p style="font-weight: bold;padding-bottom: 5px;font-size: 16px;">共同特征</p>
+            <p class="line-style">{{ item.common }}</p>
+            <p style="font-weight: bold;padding-bottom: 5px;font-size: 16px;margin-top: 15px;">个性特点</p>
+            <p class="line-style">{{ item.special }}</p>
+            <p style="font-weight: bold;padding-bottom: 5px;font-size: 16px;margin-top: 15px;">职业建议</p>
+            <p class="line-style">{{ item.suggestion }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block-wrap mt20">
+      <p class="title-style">适合的专业</p>
+      <div class="majors-wrap">{{ majors }}</div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  props: {
+    hollInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      natureList: [{
+        name_zh: '现实型',
+        name_en: 'Realistic',
+        common: '愿意使用工具从事操作性工作，动手能力强，做事手脚灵活，动作协调。偏好于具体任务，不善言辞，做事保守，较为谦虚。缺乏社交能力，通常喜欢独立做事。',
+        special: '感觉迟钝、不讲究、谦逊的。踏实稳重、诚实可靠。',
+        suggestion: `喜欢使用工具、机器，需要基本操作技能的工作。要求具备机械方面才能、体力、或从事与物件、机器、工具、运动器材、植物、动物相关的职业有兴趣，并具备相应能力。
+                    如：技术性职业（计算机硬件人员、摄影师、制图员、机械装配工）， 技能性职业（木匠、厨师、技工、修理工、农民、一般劳动）`
+      },
+      {
+        name_zh: '研究型',
+        name_en: 'Investigative',
+        common: '思想家而非实干家，抽象思维能力强，求知欲强，肯动脑，善思考，不愿动手。喜欢独立的和富有创造性的工作。知识渊博，有学识才能，不善于领导他人。考虑问题理性，做事喜欢精确，喜欢逻辑分析和推理， 不断探讨未知的领域。',
+        special: '坚持性强，有韧性，喜欢钻研。为人好奇，独立性强。',
+        suggestion: `喜欢智力的、抽象的、分析的、独立的定向任务，要求具备智力或分析才能，并将其用于观察、估测、衡量、形成理论、最终解决问题的工作，并具备相应的能力。
+                  如：科学研究人员、教师、工程师、电脑编程人员、医生、系统分析员。
+                  注：工作中调研兴趣强的人做事较为坚持，有韧性，善始善终，调研兴趣弱的如<20% 通常做事容易浅尝辄止，常性也弱。`
+      },
+      {
+        name_zh: '艺术型',
+        name_en: 'Artistic',
+        common: '有创造力，乐于创造新颖、与众不同的成果，渴望表现自己的个性，实现自身的价值。做事理想化，追求完美，不重实际。具有一定的艺术才能和个性。善于表达，怀旧，心态较为复杂。',
+        special: '有创造性，非传统的，敏感，容易情绪化，较冲动，不服从指挥。',
+        suggestion: `喜欢的工作要求具备艺术修养、创造力、表达能力和直觉，并将其用于语言、行为、声音、颜色和形式的审美、思索和感受，具备相应的能力。不善于事务性工作。如：艺术方面（演员、导演、艺术设计师、雕刻家、建筑师、摄影家、广告制作人） 音乐方面（歌唱家、作曲家、乐队指挥）文学方面（小说家、诗人、剧作家）。
+                  注：艺术兴趣高的人倾向于理想化，做事追求完美。在平常中，艺术的测试不指做艺术工作，而是工作中的艺术，倾向于将事情做得漂亮、有美感、有情调、锦上添花，追求完美。`
+      },
+      {
+        name_zh: '社会型',
+        name_en: 'Social',
+        common: '喜欢与人交往、不断结交新的朋友、善言谈、愿意教导别人。关心社会问题、渴望发挥自己的社会作用。寻求广泛的人际关系，比较看重社会义务和社会道德。',
+        special: '为人友好、热情、善解人意、乐于助人。',
+        suggestion: `喜欢要求与人打交道的工作，能够不断结交新的朋友，从事提供信息、启迪、帮助、培训、开发或治疗等事务，并具备相应能力。
+                   如: 教育工作者（教师、教育行政人员）， 社会工作者（咨询人员、公关人员）`
+      },
+      {
+        name_zh: '企业型',
+        name_en: 'Enterprise',
+        common: '追求权力、权威和物质财富，具有领导才能。喜欢竞争、敢冒风险、有野心/抱负。为人务实，习惯以利益得失、权利、地位、金钱等来衡量做事的价值，做事有较强的目的性。',
+        special: '善辩、精力旺盛、独断、乐观、自信、好交际、机敏、有支配愿望。',
+        suggestion: `喜欢要求具备经营、管理、劝服、监督和领导才能，以实现机构、政治／社会及经济目标的工作，并具备相应的能力。
+                   如：项目经理、销售人员，营销管理人员、政府官员、企业领导、法官、律师。
+                   附：工作中通常要求管理人员和销售人员要有较强的企业兴趣，企业兴趣强则做事目的性强，务实，推动性也较强，若企业兴趣弱<40% 则做事的推动性较弱，速度较慢。`
+      },
+      {
+        name_zh: '传统型',
+        name_en: 'Conventional',
+        common: '尊重权威和规章制度，喜欢按计划办事，细心、有条理，习惯接受他人的指挥和领导，自己不谋求领导职务。喜欢关注实际和细节情况，通常较为谨慎和保守，缺乏创造性，不喜欢冒险和竞争，富有自我牺牲精神。',
+        special: '有责任心、依赖性强、高效率、稳重踏实、细致、有耐心。',
+        suggestion: `喜欢要求注意细节、精确度、有系统有条理，具有记录、归档、据特定要求或程序组织数据和文字信息的职业，并具备相应能力。如：秘 书、办公室人员、记事员、会计、行政助理、图书馆管理员、出纳员、打字员、投资分析员。
+                  注：常规型的人做事有耐心、细致，如果人的常规兴趣弱，若<20%	通常表现做事较为粗心，容易丢三落四，不够踏实。`
+      }
+      ]
+    }
+  },
+  computed: {
+    majors() {
+      const { rule } = (this.hollInfo || {})
+      return rule?.marjors ?? []
+    },
+    seriesData() {
+      const { scorer, scorea, scorei, scores, scoree, scorec } = (this.hollInfo || {})
+      this.$nextTick(() => {
+        this.initChart()
+      })
+      return [scorer, scorei, scorea, scores, scoree, scorec]
+    },
+    natureResult() {
+      const i = this.seriesData.indexOf(Math.max(...this.seriesData))
+      if (!~i) {
+        return {}
+      }
+      return {
+        name_en: this.natureList[i].name_en,
+        name_zh: this.natureList[i].name_zh,
+        code: this.natureList[i].name_en.charAt(0)
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      const maxScore = Math.max(...this.seriesData) + 5
+      const option = {
+        tooltip: {},
+        radar: {
+          indicator: [
+            { name: 'R：现实型', max: maxScore },
+            { name: 'I：研究型', max: maxScore },
+            { name: 'A：艺术型', max: maxScore },
+            { name: 'S：社会型', max: maxScore },
+            { name: 'E：企业型', max: maxScore },
+            { name: 'C：传统型', max: maxScore }
+          ],
+          name: {
+            color: '#000',
+            fontSize: 16
+          },
+          axisLine: {
+            lineStyle: {
+              width: 2
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: ['#fff', '#ffa400'],
+              width: 2
+            }
+          },
+          splitArea: {
+            areaStyle: {
+              color: ['#fff']
+            }
+          }
+        },
+        series: [
+          {
+            name: '',
+            type: 'radar',
+            data: [
+              {
+                value: this.seriesData,
+                name: '评测得分',
+                symbol: 'circle',
+                symbolSize: 10,
+                itemStyle: {
+                  color: '#fff',
+                  borderColor: '#d77c79',
+                  borderWidth: 2
+                },
+                lineStyle: {
+                  color: '#ffa400',
+                  width: 3
+                },
+                areaStyle: {
+                  color: '#ffbf4c'
+                }
+              }
+            ]
+          }
+        ]
+      }
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './holland.scss';
+</style>

src/views/career/components/result/INFJ.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>INFJ（内倾、直觉、情感和判断）——独立的、有独创性的思想家</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>因为坚忍、创意及必须达成的意图而能成功。</span></li>
+        <li><i>2</i><span>会在工作中投注最大的努力。</span></li>
+        <li><i>3</i><span>默默强力的、诚挚的及用心的关切他人。</span></li>
+        <li><i>4</i><span>因坚守原则而受敬重。</span></li>
+        <li><i>5</i><span>提出造福大众利益的明确远景而为人所尊敬与追随。</span></li>
+        <li><i>6</i><span>追求创见、关系及物质财物的意义及关联。</span></li>
+        <li><i>7</i><span>想了解什么能激励别人及对他人具洞察力。</span></li>
+        <li><i>8</i><span>光明正大且坚信其价值观。</span></li>
+        <li><i>9</i><span>有组织且果断地履行其愿景。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">INFJ 型的人生活在思想的世界。他们是独立的、有独创性的思想家，具有强烈的感情、坚定的原则和正直的人性。即使面对怀疑，INFJ 型的人仍相信自己的看法与决定。他们的评价高于其他的一切，包括流行的观点和存在的权威，这种内在的观念激发着他们的积极性。通常INFJ 型的人具有本能的洞察力，能够看到事物更深层的含义。即使他人无法分享他们的热情，但灵感对于他们重要而令人信服。INFJ 型的人忠诚、坚定、富有理想化。他们珍视正直，十分坚定以至达到倔强的地步。因为他们的说服能力，以及对于什么对公共利益最有利有清楚的看法，所以INFJ 型的人会成为伟大的领导者。由于他们的贡献，他们通常会受到尊重或尊敬。因为珍视友好和和睦，INFJ 型的人喜欢说服别人，使之相信他们的观点是正确的。通过运用嘉许和赞扬，而不是争吵和威胁，他们赢得了他人的合作。他们愿意毫无保留地激励同伴，避免争吵。通常INFJ 型的人是深思熟虑的决策者，他们觉得问题使人兴奋，在行动之前他们通常要仔细地考虑。他们喜欢每次全神贯注于一件事情，这会造成一段时期的专心致志。满怀热情与同情心，INFJ 型的人强烈地渴望为他人的幸福做贡献。他们注意其他人的情感和利益，能够很好地处理复杂的人。INFJ 型的人本身具有深厚复杂的性格．既敏感又热切。他们内向，很难被人—了解，但是愿意同自己信任的人分享内在的自我。他们往往有一个交往深厚、持久的小规模的朋友圈，在合适的氛围中能产生充分的个人热情和激情。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (INFJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">INFJ 型的人主导功能是直觉，辅助功能是情感。他们倾向于：探求隐含的原因、可能性或事物的整体。对事实和经验做出符合逻辑结论。INFJ 型的人比较少地使用他们的第三、第四功能—思考和感觉。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个INFJ 型的人：如果你过多地关注直觉，你可能不注重细节、不注意实际、不耐沉闷、不合逻辑、把握不住现在、骤下断语。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>直觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>情感</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>思考</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>感觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>允许我自己考虑并创立新颖的观点或方法来解决工作中出现的各种各样不同的问题，并帮助别人成长和发展。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>能让我提供一种我所信仰且引以为豪的产品或服务。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>承认我的首创、拥有者身份，以及所作的独有的共享。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>能让我自由地表达自己，并让我看到我的洞察力所带来的结果。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>能让我为别人的利益或别人提供服务而实施自己的想法，允许我一对一地展开工作。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>有一个友好、没有紧张关系的工作氛围，其中我的看法能得到重视，而我的努力能得到别人的精神支持。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>允许我独立地工作，且有机会在一个友好、没有人迹冲突的环境中经常与人探讨我的工作。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>可以自由地安排自己的工作时间及环境，对自己的工作进程和工作成果有极大的支配权。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>给予我足够的时间来制定并审查我的机会，以便使我的计划准备得很充分。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>符合我自己的个人价值和观点，能让我在人格上和职业上都保持诚实正直的品质。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>诚实正直，从而固定里这人们重视你的想法</li>
+              <li>对于那些于你很重要的项目你专注且执着</li>
+              <li>坚决果断，并有高度的组织能力</li>
+              <li>有创造力，能提出独树一帜的解决问题的方法</li>
+              <li>与别人感情交融，能预见别人的需要</li>
+              <li>能以透视法看到事情发展的宏观图像以及意识与行动间未来的潜在联系</li>
+              <li>有理解复杂概念的能力</li>
+              <li>对别人真正关心，有帮助别人成长和发展的才能</li>
+              <li>独立，有很强的个人信念</li>
+              <li>有做出成绩，不达不敌不罢休的干劲</li>
+              <li>对自己信仰的事业尽职尽责</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>过分的专心致志，结果可能导致死板</li>
+              <li>对于要做完一件事要花多少时间心中没数</li>
+              <li>很难做与自己价值观相冲突的事</li>
+              <li>对计划的可行性有不切实际的倾向</li>
+              <li>一旦做出决定不愿再回头审视一下，更不愿意撤销决定</li>
+              <li>不会处理矛盾，易于忽略不快</li>
+              <li>很难拉下面子客观、直接地训诫属下</li>
+              <li>很难把复杂的想法简明地表达出来</li>
+              <li>易于仓促下判断</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>—般职业咨询</p>
+              <p>教育职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•职业咨询顾问 •心理学家 •教育顾问 •图书管理员 •特殊教育老师 •双语教育老师 •早期教育老师 •家教工作者 •雇员帮助顾问 •儿童福利顾问 •酒精和毒品禁戒顾问 •教师：高中或大学英语、艺术、音乐、社会科学 •社会：工作人员(老人与儿童口常护理问题)戏剧</p>
+            <p>这些职业允许 INFJ 型人利用他们的想法和知识帮助别人咨询和教育领域非常要求个人之间的交流，常常是一个面对一个的形式，这使 INFJ 以与他人建立深入的关系。INFJ 型人也乐于研究、学习和从教育行业获得发展的机会，他们通常会在学术环境中感到非常轻松自在。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•艺术家 •小说家 •设计师 •通用设计建筑师 •编辑、艺术指导(杂志) •剧作家 •诗人 •信息制图设计者 •自由宣传媒介设计人</p>
+            <p>INFJ 型人对艺术的爱好是由于他们具有运用自己的想法和眼光创造独特作品的能力。艺术品使 INFJ 型人以个人的方式表达自己，结果往往是给予他人一种冲击力。这些职业通常都是独立的工作，使INFJ 型人能够组织并控制环境、过程和成果。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理</p>
+              <p>社会服务职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•保健管理人 •调解人／冲突解决人 •社会工作人员 •饮食学家／营养学家 •全面健康医生 •职业治疗医生 •社会服务代理人 •社会科学家 •心理健康顾问 •语言病理学家／听觉学家 •信息治疗医生</p>
+            <p>社会服务职业要求人致力于帮助他人，这常常是通过有组织的机构进行的。多数 INFJ 型人喜欢在这样的环境中工作，尤其当职员较少而关系密切的时候。社会服务使 INFJ 型人可以对于个人或社会的问题思考并提出新的解决方法。许多时候，社会工作人员的工作是独立而个别地进行的，使他们可以与客户和同事经常展开一对一的交流。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•人事资源经理 •组织机构的发展顾问 •职业分析家 •公司／工作小组培训人 •商业销售计划人 •口译／翻译 •市场人员(提供服务或点子) •雇员帮助方案的协调者／顾问 •人事资源多样化管理人</p>
+            <p>尽管 INFJ 型人中并没有大量的人被商业领域的工作所吸引，他们仍然可能在一些商业领域中获得职业满足感。人力资源或人事和组织机构的发展咨询是商业中有关“人”的部分，要求能够对许多不同的人感兴趣并且易于和人们相处。这些职业使INFJ型人能够帮助他人找到工作，建立有效的工作环境，而且可以效力于创造性地解决以人为焦点的问题。营销工作使 INFJ 型人能够通过工作小组发挥其创造性解决问题的能力。如果 INFJ 型人对于工作过程投入很多而且能够保持令人轻松舒适的个人和工作的统一完整性，他们就会觉得这样的工作是令人满意的。记住，这些仅仅是可以为具有独特天生才能的 INFJ 型人提供职业感的一部分职业领域。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>运用你的长处其实很容易</li>
+        <li>注意细节；学会灵活一点</li>
+        <li>无论做什么事情都要自发自愿，不要让人督促你</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>在提出自己的观点时，需发展政治领悟力和自主性的技策。</li>
+          <li>需学会及时给他人建设性的反馈。</li>
+          <li>需要不断征求他人的建议和获得他人反馈。</li>
+          <li>需要以更放松和开放的态度面对现状。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/INFP.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>INFP（内倾、直觉、情感和知觉）——大智若愚</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>安静观察者，具理想性与对其价值观及重要之人具忠诚心。</span></li>
+        <li><i>2</i><span>希外在生活形态与内在价值观相吻合。</span></li>
+        <li><i>3</i><span>具好奇心且很快能看出机会所在。常担负开发创意的触媒者。</span></li>
+        <li><i>4</i><span>除非价值观受侵犯，行事会具弹性、适应力高且承受力强。</span></li>
+        <li><i>5</i><span>具想了解及发展他人潜能的企图。想作太多且作事全神贯注。</span></li>
+        <li><i>6</i><span>对所处境遇及拥有不太在意。</span></li>
+        <li><i>7</i><span>具适应力、有弹性除非价值观受到威胁。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">INFP 把内在的和谐视为高于其他一切。他们敏感、理想化、忠诚，对于个人价值具有，一种强烈的荣誉感，个人信仰坚定，有为自认为有价值的事业献身的精神。INFP型的人对于已知事物之外的可能性很感兴趣，精力集中于他们的梦想和想象。他们思维开阔、有好奇心和洞察力，常常具有出色的长远目光。在日常事务中，他们通常灵活多变、具有忍耐力和适应性。但是他们非常坚定地对待内心的忠诚，为自己设立了事实上几乎是不可能的标准。INFP型的人具有许多使他们忙碌的理想和忠诚。他们十分坚定地完成自己所选择的事情，他们往往承担得太多，但不管怎样总要完成每件事。虽然对外部世界他们显得冷淡缄默，但 INFP型的人很关心内在。他们富有同情心、理解力，对于别人的情感很敏感。除了他们的价值观受到威胁外，他们总是避免冲突，没有兴趣强迫或支配别人。INFP 型的人常常喜欢通过书写而不是口头来表达自己的感情。当INFP型的人劝说别人相信他们的想法的重要性时，可能是最有说服力的。INFP 很少显露强烈的感情，常常显得沉默而冷静。然而，一旦他们认识了，就会变得热情友好。INFP的人很友好，但也避免浮浅的交往。他们珍视那些花费时间去思考目标与价值的人。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (INFP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">INFP 型的人主导功能是情感（关注情感），辅助功能是直觉。他们倾向于：体谅他人感受、了解他人的需要、喜欢和谐的人际关系、易表露情感、喜去说服他人。探求隐含的原因、可能性或事物的整体。INFP 型的人比较少地使用他们的第三、第四功能--感觉和思维。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 INFP 型的人：如果你过多地关注情感，你可能会表现得不合乎逻辑、不够客观、没有组织系统的思考、不具批判精神全盘接受、感情用事。如果你过多地关注直觉，你可能错过事物的相关事实、细节或以前的经验。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>情感</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>直觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>感觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>思维</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>我的工作与我个人的价值观和信仰相一致，同时允许我通过工作表达我的想象力。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>给我时间发展我的想法到相当深度，同时对这一思维过程以及思维产物操持控制权。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>独立完成工作，有一个私人的工作空间以及大量不受干扰的时间，但必须有机会与我敬重的人交流一下观点。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>我的工作环境是一个灵活性强的组织机构，其中繁琐的规章制度减至最少限度，同时允许我有灵感时工作。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>我要在一个合作的环境中与别的有创造力的、讨人喜欢的人一起工作，且这个工作环境没有紧张的人际关系以及人际纠纷。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>允许我表达我别出心裁的观点，而且在工作中个人的发展受到鼓励与夸奖。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>不要要求我经常在大群人面前介绍我的工作，或者在我的工作还没有完成至我满意之前让我与大家分享。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>愿意帮助别人成长、发展以及实现他们所有的潜能。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>我的工作包括理解别人以及发掘他们行为的动机，允许我发展与别人一对一的深厚关系。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>允许我为实现我的理想而工作，且工作上不要受到政治的、经济的或别的方面的障碍的限制。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>考虑周到细致且能集中注意力深入某个问题或观点</li>
+              <li>渴望打破常规思考，并考虑新的可能情况</li>
+              <li>积极投身于所信仰的事业</li>
+              <li>必要时一个人也能很好地工作</li>
+              <li>对收集所需信息有一种天生的好奇与技巧</li>
+              <li>能通观全局以及看到意识与行为之间的联系</li>
+              <li>能洞察别人的需要与动机</li>
+              <li>适应能力强，能很快改变你的行事速度及目标</li>
+              <li>在一对一的基础上很极好地与人工作</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>必须控制方案/计划，否则你可能会失去兴趣</li>
+              <li>有变得无秩序性的倾向，很难把握优先处理的事</li>
+              <li>不愿做与自己价值观相冲突的工作</li>
+              <li>在做事方式上不愿按照传统方式</li>
+              <li>天生的理想主义，这样可能使你得不到现实的期望</li>
+              <li>讨厌以传统的或惯常的方式行事</li>
+              <li>很难在竞争的、气氛紧张的环境中工作下去</li>
+              <li>在处理及完成顽固的组织和人们打交道时没有耐心</li>
+              <li>在预计做某事要求多长时间时有不切实际的倾向</li>
+              <li>不愿惩戒直接肇事者，不愿意批评别人</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性职业</p>
+              <p>艺术</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•艺术家 •作家：诗人／小说家 •记者 •娱乐人士 •建筑师 •演员 •编辑 •音乐家 •信息制图设计师 •编辑／艺术指导(杂志)</p>
+            <p>INFP 型人为艺术所吸引是由于他们有能力以富于创造的个人方式来表达他们自己和他们的想法。以艺术为工作具有个人的自由和灵活性，这是 INFP 型人信奉的生活方式。无论是写文章、画画还是用其他手段来工作，无论是进行设计还是作为演员或音乐家运用他们自己的身体而工作，INFP 型人都力求创造独到的成果，这是他们心声的真实表现。许多 INFP 型人把自己描述为“内心深沉”的艺术家，即使他们并不以艺术为生。一些 INFP 型人甚至会说，作艺术家并不是他们做出的选择，而是他们必须背负的十字架。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+              <p>咨询职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•大学教授：人文／艺术 •调研员 •心理学家 •顾问 •社会工作者 •图书管理员 •教育顾问 •特殊教育老师 •双语种教育老师 •儿童早期教育老师 •雇员帮助顾问 •儿童福利顾问 •酒精和毒品禁戒顾问 •翻译／口译 •法律调停人 •社会工作者(老年人和儿童日常护理问题)</p>
+            <p>教育和咨询行业都是可以使 INFP 型人为帮助他人成长和发掘人性潜能而工作的领域。INFP 型人为改善他人生活质量的愿望和努力的确非常崇高。他们更喜欢大学，而不是小学或中学，因为大学里来自学生们的动力更强大。他们喜欢学习的过程，喜欢作为调查员或图书管理员来探求更深刻而更有意义的理解。INFP 型人是富于同情心而具洞察力的顾问，心理学家，以及社会工作者，力求帮助他们的客尸在自己的社会关系和生活范围里获得自我理解和和谐。作为顾问，他们高兴的是，在理解他人的时候他们也逐渐理解了自己。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>医疗保健</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•饮食学家／营养学家 •理疗医生 •家庭健康社会工作者 •职业治疗医生 •按摩专家• 全面健康医生 •语言病理学家／听觉病理学家</p>
+            <p>保健领域吸引 INFP 型人的方面在于，它能够让他们对客户或病人进行亲切而亲密的工作。INFP 型人一般都会喜欢这样的职业给予他们的自主性，他们可以自己开业，或者作一家大型健康护理机构的顾问。 理疗、全身治疗以及按摩的诊断治疗工作具有创造性和精神因素，这些都令人满意，它们运用了 INFP 型人的直觉和情感倾向。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>机构发展</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•雇员发展专家 •人力资源开发 •社会科学家 •多样化管理人 •顾问工作组构建</p>
+            <p>尽管INFP型人通常不会对商业领域的工作感到满意，仍然有一些筛选出来的领域有可能让 INFP型人获得成功和满足感。一些INFP型人喜欢合作的环境，有时他们的工作涉及到帮助别人找到适合于自己的工作。他们喜欢人事或人力资源发展方面的工作，喜欢在一个公司内部设计并安置工作。他们需要与支持他们的人共同工作，从而感到他们所做的贡献是独特而且受人重视的。这样，在竞争激烈的商业世界，他们才会找到满足感。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>设定切合实际的期望值</li>
+        <li>重视让步</li>
+        <li>不要太主观地看待问题</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要学会怎样工作而不是只注意寻求理想的反应。</li>
+          <li>需要发展更坚强的意志，并愿意说“不”。</li>
+          <li>需要用自己的准则分清事实和逻辑。</li>
+          <li>需要建立和执行行动计划。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/INTJ.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>INTJ（内倾、直觉、思维和判断）——能力+独立=完美</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>具强大动力与本意来达成目的与创意—固执顽固者。</span></li>
+        <li><i>2</i><span>有宏大的愿景且能快速在众多外界事件中找出有意义的模范。</span></li>
+        <li><i>3</i><span>对所承负职务，具良好能力于策划工作并完成。</span></li>
+        <li><i>4</i><span>具怀疑心、挑剔性、独立性、果决，对专业水准及绩效要求高。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">INTJ 型的人是完美主义者。他们强烈地要求个人自由和能力，同时在他们独创的思想中，不可动摇的信仰促使他们达到目标。INTJ 型的人思维严谨、有逻辑性、足智多谋，他们能够看到新计划实行后的结果和生活中转变为真实物质的理论体系。他们对自己和别人都很苛求，往往几乎同样强硬地逼迫别人和自己。他们并不十分受冷漠与批评的干扰，作为所有性格类型中最独立的，INTJ 型的人更喜欢以自己的方式行事。面对相反意见，他们通常持怀疑态度，十分坚定和坚决。权威本身不能强制他们，只有他们认为这些规则对自己的更重要 的目标有用时，才会去遵守。INTJ 型的人是天生的谋略家，具有独特的思想、伟大的远见和梦想。他们天生精于理论，对于复杂而综合的概念运转灵活。他们是优秀的战略思想家，通常能清楚地看到任何局势的利处和缺陷。对于感兴趣的问题，他们是很好的、具有远见和见解的组织者。如果足他们自己形成的看法和计划，他们会投入不可思议的专心、注意力和能量、积极性。依靠到达或超过自己的高标准的决心和坚韧不拔，他们获得许多成就。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (INTJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">INTJ 型的人主导功能是直觉（关注可能性），辅助功能是思维。他们倾向于：探求隐含的原因、可能性或事物的整体。对事实和经验做出符合逻辑结论。INTJ 型的人比较少地使用他们的第三、第四功能--情感和感觉。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个INTJ型的人：如果你过多地关注直觉，你可能错过事物的相关事实、细节或以前的经验。如果你过多的使用思考功能，你可能在需要的时间忘记去称赞他人，或忽视你决策对其它人的影响。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>直觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>思维</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>情感</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>感觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>允许我创作并发展一些新颖的、创造的解决问题的方法来改善现行的体系。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>允许我集中精力于实施我的想法，以一种逻辑的、系统的方式工作，同时，在工作中我的工作能有所回报。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>让我能和别的队工作尽职尽责的人一起工作，同时他们的专业技术及其聪明才干是我所敬佩的。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>为我新奇的计划而给我应有的荣誉，让我持有该计划的原始创作全，以及允许我对这一计划的事实持有控制权。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>能我让独立工作，但定期与一小群才华横溢的人在一个没有人际冲突的、平和的工作环境中互相交流想法。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>能让我平时常受到新的信息流的冲击，提供给我新的途径来提高卧的机制和胜任能力。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>允许我创作一项成功，它必须符合我自己高标准的要求，而非为了迎合别人的喜好。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>我的工作并不要求我去完成那些琐屑的任务。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>给我提供高度的自主与自我支配。允许我自幼地改变意图，发展人们的潜在能力以及开发新的方法体系。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>所有的一切都以同样的、公平的标准来评价，对工作情况的评估应该给予既定的标准而非给予个性的角逐，同时我的付出要得到相应的回报。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>能看到事情的可能发展情况及其潜在含义</li>
+              <li>喜欢复杂理论及智力上的挑战</li>
+              <li>有创造性地解决问题的天资，能客观地审查问题</li>
+              <li>及时在面对阻扰时也会义无反顾地去实现目标</li>
+              <li>自信，且对自己的设想会不顾一切地采取行动去实行</li>
+              <li>对于在工作中胜任和胜出有强烈动机</li>
+              <li>能很好地适应一个人单独工作，独立、自主</li>
+              <li>标准高，工作原则性强</li>
+              <li>能创造出方法体系和模式来达到你得目标</li>
+              <li>擅长于从事技术性工作</li>
+              <li>能逻辑地、分析地做出决定</li>
+              <li>坚决果断，有高度的组织能力</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>当计划中创造性部分完成后对该计划失去兴趣</li>
+              <li>易于像紧逼自己工作一样去逼着别人工作</li>
+              <li>对那些反应不如你敏捷的人缺乏耐心</li>
+              <li>不愿意和那些你认为能力没有你强的人一起工作</li>
+              <li>唐突、不机智、缺乏交际手段，尤其在你匆忙时</li>
+              <li>对一些世俗小事没有兴趣</li>
+              <li>对自己的观点顽固地坚持</li>
+              <li>有想要去改变那些根本没有必要改善的事物的倾向</li>
+              <li>易于过于理论化而不去考虑实际情况</li>
+              <li>不愿意花时间适当地欣赏、夸奖雇员、同事或别人</li>
+              <li>对那些既定问题不愿再审查</li>
+              <li>易于过分强调工作，从而损害了家庭的和谐</li>
+              <li>对一些工作所要求的“社交细节”没有耐心</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+              <p>金融</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•电信安全 •经济学家 •国际银行家 •药物研究员 •财务计划人 •投资银行家 •管理顾问：电脑／信息服务、营销、机构重组</p>
+            <p>上述商业和金融领域都要求高度发展的分析能力，这是许多INTJ型人所具有的。对于INTJ 型人，智力挑战在获得职业满足感的时候必不可少。而在药物研究这一日益发展的高科技领域以及电信保险领域大量存在这样的挑战。不断变化的投资和国际银行业也充分地利用了 INTJ 型人具有的全球眼光和长期规划的能力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>科技</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•科学家／科学研究员 •技术人员：电力／电子 •设计工程师 •宇航员 •电脑程序员 •环境规划人 •生物医学研究员／工程师 •电脑系统分析员 •操作研究分析员 •信息服务开发人 •软件和系统研究员和开发员 •网络一体化专家(电信业) •信息服务——新业务开发人</p>
+            <p>科技领域吸引了INTJ型人对逻辑体系的兴趣。这些领域提供了迅速发展高科技产品和设备的工作机会。INTJ 型人往往能够发挥他们的创造力来开发天才而富创造的系统。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•大学教师 •学习课程设计人 •行政管理人 •数学家</p>
+            <p>高等教育比初级教育和中级教育更能吸引 INTJ 型人，因为它往往涉及到教授更具整体眼光的理论和系统。制定教育课程或系统并且确保它们有效进行允许 INTJ 型人不断进行改善进步。高等教育领域也使INTJ 型人可以收集和管理各种信息，和其他聪明的人打交道，这使他们得以发展自身的能力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理</p>
+              <p>医药</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•精神病学家 •心理学家 •神经病学家 •生物医学工程师 •心病学家 •药物学家 •药物研究员 •生物医学研究员</p>
+            <p>更要求技术性的医药学领域往往是许多INTJ型人能够获得成功和满足的地方。这些领域包括极其复杂的系统，允许 INTJ 型人独立地进行工作，而具最小限度的外界打扰或投入。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>专门职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•代理人：行政管理／诉讼 •管理顾问 •战略设计人 •投资／商业分析家 •经理 •法官 •新闻分析员／撰稿人 •工程师 •冶金工程师 •知识产权律师 •土木工程师</p>
+            <p>专门职业提供给INTJ型人各种各样有吸引力的方面。其中只有“经理”要求独立的调查和计划。发展战略、体系和长景计划发挥了INTJ型人的未来倾向性(直觉功能)以及设计如何以有序而逻辑的方式达到目标的能力。INTJ 型经理往往会在一个雇员和他或她非常相像的小机构里获得职业满足感。如果职员不要求大量的个人支持或手把手的监督，那么 INTJ 型人在管理中会更可能得到满足感。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•作家／社论作家 •艺术家 •发明家 •设计人 •建筑师 •整体设计建筑师 •信息制图设计师 •自由媒体设计人 •编辑／艺术指导</p>
+            <p>创造性职业的吸引力在于它能让人进行创造性工作。作家和艺术家运用他们的直觉创造新的表现和陈述。发明家能够创造新系统或新装置来改善生活方式或解决令人烦恼的问题。这三种职业都要求INTJ型人独立地工作，达到他们自己的目标和标准，他们自己来做最后的评判人。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>考虑实际情况</li>
+        <li>认同别人所提意见的价值</li>
+        <li>平衡你的工作和个人生活</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>自己的个性化方式和想法可以征求他人的反馈和建议。</li>
+          <li>与参与任务的人早一些沟通和讨论自己的想法和战略计划。</li>
+          <li>当事实资料不支持自己的想法时，应面对现实。</li>
+          <li>明确他人的贡献应受到鼓励和承认的。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/INTP.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>INTP（内倾、直觉、思维和知觉）——聪颖机智解决问题的人</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>安静、自持、弹性及具适应力。</span></li>
+        <li><i>2</i><span>特别喜爱追求理论与科学事理。</span></li>
+        <li><i>3</i><span>习于以逻辑及分析来解决问题—问题解决者。</span></li>
+        <li><i>4</i><span>最有兴趣于创意事务及特定工作，对聚会与闲聊无大兴趣。</span></li>
+        <li><i>5</i><span>追求可发挥个人强烈兴趣的生涯。</span></li>
+        <li><i>6</i><span>追求发展对有兴趣事务之逻辑解释。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">INTP 型的人是解决理性问题者。他们很有才智和条理性，以及创造才华的突出表现。INTP 型的人外表平静、缄默、超然；但内心却专心致志于分析问题。他们苛求、精细、惯于怀疑。他们努力寻找和利用原则以理解许多想法。他们喜欢有条理和目的的交谈，而且可能会仅仅为了高兴。争论一些无益而琐细的问题，只有有条理的推理才会使他们信服。通常 INTP 型的人是足智多谋、有独立见解的思考者。他们重视才智，对于个人能力有强烈的欲望，有能力也很感兴趣向他人挑战。INTP 型的人最主要的兴趣在于理解除了能够准确知道、接受和明显的事物之外的可能性。他们乐于为了改进事物的目前状况或解决难题而发展模式。他们的思考方式极端复杂，而且他们能更好地组织概念和想法而不是人。偶尔，他们的想法非常复杂，以致于很难向别人表达和被他人理解。INTP 型的人十分独立，喜欢冒险和富有想象力的活动。他们灵活易变、思维开阔，更感兴趣的是发现有创见而且合理的解决方法，而不是仅仅看到成为事实的解决方式。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (INTP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">INTP型的人最常用到的功能是思考（喜欢事实），其次是直觉，他们倾向于：对事实和经验做出符合逻辑的结论，探求隐含的原因、可能性或事物的整体。INTP型的人不太常用的和最不可能用到的功能分别是感觉和情感，即使在需要这些功能的场合，他们仍然无法有效使用它们。作为一个INTP类型的人，如果你过多地使用思考功能，你可能在必要的时候忘记去称赞他人，或忽视你的决策对其他人的影响。如果你过多地关注直觉，你可能错过事物的相关事实、细节或以前的经验。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>思考</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>直觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>感觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>让我开发、分析、批判新的想法和主意。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>让我把注意力和精力集中到那些创新的、理论的和逻辑的思维过程中，而不只一心关注着结果和产品会是如何。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>富有挑战性，涉及到许多复杂的问题；因此，我能有机会试行一些部落俗套的方案，通过冒险性的实践找到最佳解决方法。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>让我有充足的安静的私有时间独立地工作，来投入到并完成自己的思维过成。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>让我自己制定并保留评估自己工作的高层次的标准，并在此基础上决定自己的成绩与不足。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>在一个富有的、可以通融的环境中进行，没有那些无用的规章制度，过多的限制和不必要的会议。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>能让我和一小组我所钦佩的亲密朋友和伙伴合作。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>让我经常有机会增长自己的能力和才干，与别的有影响的成功人士会面、合作。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>让我开发有独创性的思想和方案，能把一些具体的实施步骤和细节问题委托给一名高效率的助手。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>不要求我直接管理别人、监督或考虑一些人际关系得协调或不和。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>急切地“想知道盒子外面的世界”，能想出一些新的可能性</li>
+              <li>能够理解非常复杂和高度抽象的概念</li>
+              <li>杰出的创造性地解决问题的技能</li>
+              <li>独立自主；探险精神、创造意识以及克服困难的勇气</li>
+              <li>能够综合运用大量的信息</li>
+              <li>搜集所需信息时理智的好奇心、独特的洞悉力</li>
+              <li>即使在压力很大的情况下也能逻辑地分析事物</li>
+              <li>学习新知识的信心和动力都很大</li>
+              <li>客观性；能够客观地分析和处理问题，而不是感情用事</li>
+              <li>对自己的想法和观点充满信心</li>
+              <li>能够把握事物的全局，弄清行为和思想的长远影响</li>
+              <li>能灵活地适应新情况，有数量的随机应变的能力</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>办事情可能条理不清，容易发生紊乱</li>
+              <li>过于自信；可能会不恰当地运用自己的能力和社会经历</li>
+              <li>对思维狭窄和思想固执的人缺乏耐心</li>
+              <li>不喜欢按传统的、公式化的方式来办事</li>
+              <li>问题一旦解决，兴趣便不复存在</li>
+              <li>不擅长于把复杂的思想和问题用简明的形式表现出来并用简单的形式将其解决</li>
+              <li>可能过于理论化，而忽视或无视现实性</li>
+              <li>不能严格要求自己去考虑且解决重要的细节性问题</li>
+              <li>不喜欢重复地做一件事</li>
+              <li>对程式化的事情和固执的人缺乏耐心</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>计划和开发</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•计算机软件设计员 •计算机程序员 •系统分析人员／数据库管理人员 •调查开发专家 •战略策划者 •新市场或新产品开发者 •网络一体化专家(电信专家) •转换管理方式的咨询 •财政计划者 •投资银行家 •信息服务开发者——计算机程序设计 •信息服务——新的商业开发领域 •管理咨询：计算机／信息服务、销售、重组</p>
+            <p>计划和开发领域为INTP们提供了一个发挥他们特长的机会——分析问题并找到创新性的答案。大多数INTP 喜欢工作在抟术领域，他们运用自己理解复杂系统的能力和发现错误、消除错误的能力，去分析问题、解决问题。INTP 能够轻易地看出产品、服务或系统是否适合整个公司、工厂或整套工艺。他们喜欢以创新的、更有效的方法去处理问题。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>保健</p>
+              <p>技术</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•神经病学家 •物理学家 •整形外科医生 •药剂师 •科学家：化学／生物 •药品调查员 •生物工程学家 •兽医</p>
+            <p>医药卫生和其他科技领域INTP杰出的推理能力和利用科技资料的能力得到运用，INTP 对不断发展的神经病学、整形外科学、生物医学和配药学方面的研究都很感兴趣。因为这些学科使INTP能够站在科学发展的最前沿进行创新，有时甚至还有一些冒险。物理、化学和生物学为INTP提供了复杂的概念以及不断学习新知识和不断问“如果……”的机会。这些学科能够允许INTP进行独立工作，特别是当它们涉及到一些较强的研究工作的时候。同时，由于这些领域有难度、富于竞争性，所以吸引了许多有才华、有智慧的人，这对INTP也是一个刺激和挑战。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>专门领域</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•律师 •经济学家 •心理学家／精神分析学家 •金融分析家 •建筑师 •侦探 •知识产权代理人 •法律调解人 •公司财务代理人 •精神病医生</p>
+            <p>这些专业领域也为INTP提供了许多分析并解决复杂问题的机会。通常，这些领域都是极富挑战性的， 要求研究人员有清晰的逻辑思维能力，对付问题和挑战要有创新性的解决方法。对建筑师和心理学家来说，工作中心都是一个创造的过程。善于看清楚一个因素或一个条件在整个模型或系统中的地位和作用是INTP的一个特别优势，同时也是调查研究者和金融分析家工作中的一个主要内容。从制定毫无纰漏的法律条文到预测经济发展的微妙走势，这些都为 INTP 提供了感受兴奋和接受挑战的机会。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>学术领域</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•数学家 •考古学家 •历史学家 •哲学家 •大学里的高级教师 •学术研究者 •逻辑学家 •大学行政官员 •经济学家 •翻译</p>
+            <p>学术领域充满刺激的世界是INTP非常喜欢的，因为这个领域着重开发新事物，寻找新的解决问题方法。INTP经常在大学教授这个职位上找到职业满足感。他们通常愿意给高年级学生讲授一些比较专深的课程。INTP喜欢做上面所列出的任何一门学科的调查研究工作，他们喜欢这种能够独自工作的机会，然后与同行们共享他们的成果与创新。INTP最喜欢在没有复杂规则限制、没有官僚政治的环境中工作，然而，这两点恰恰是大多数大学院校所不能避免的。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性的职业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•摄影师 •富有创造力的作家 •艺术家 •演员／舞蹈家 •音乐家 •代理人 •发明家 •信息图表设计者</p>
+            <p>对 INTP 来说，这些职业最吸引他们的地方是可以充分发挥想象力、完全自由地进行创造。INTP喜欢利用不同的手段和已往的经验与不同的人共同进行创造的过程。INTP 通常喜欢一个人工作或者只与少量可能会给工作带来转变的人们一起工作。由于对自己的能力和表达自己兴趣的艺术实力的自信，INTP非常欣赏自己的作品。但是，他们并不为了追求满足感而必须完成作品。很多INTP喜欢由富有创造力的人所组成的世界，因此他们喜欢作代理人。他们创造的新事物、新产品和新的服务方式给他们带来了类似于发明家一样的成功。注意，这些职业只能给具有独一无二的、与生俱来的才能的INTP带来职业满足感。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>更加有条理</li>
+        <li>对聪颖不足的人要有耐心</li>
+        <li>设法增进自己的社交能力</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要关注现实中的细节，确立完成任务的具体步骤。</li>
+          <li>需要简单地陈述事实。</li>
+          <li>为获得他人的合作，需要放弃细小的问题。</li>
+          <li>需要更好地认识他人，更多地表达对他人的赞赏。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ISFJ.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ISFJ（内倾、感觉、情感和判断）——我以名誉担保，履行自己的责任和义务</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>安静、和善、负责任且有良心。</span></li>
+        <li><i>2</i><span>行事尽责投入。</span></li>
+        <li><i>3</i><span>安定性高，常居项目工作或团体之安定力量。</span></li>
+        <li><i>4</i><span>愿投入、吃苦及力求精确。</span></li>
+        <li><i>5</i><span>兴趣通常不在于科技方面。对细节事务有耐心。</span></li>
+        <li><i>6</i><span>忠诚、考虑周到、知性且会关切他人感受。</span></li>
+        <li><i>7</i><span>致力于创构有序及和谐的工作与家庭环境。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ISFJ 型的人忠减、有奉献精神和同情心他们意志清醒而有责任心，乐于为人,理解别人的感受。ISFJ型的人十分务实，他们喜欢平和谦逊的人，他们喜欢利用大量的事实情况，对于细节则有很强的记忆力。他们耐心地对待任务的整个阶段，喜欢事情能够清晰明确。因为他们具有强烈的职业道德，所以他们如果知道自己的行为真正有用时，会对需要完成之事承担责 任。他们准确系统地完成任务。他们具有传统的价值观，十分保守。他们利用符合实际的判断标准做决定，通过出色的注重实际的态度增加了稳定性。ISFJ 型的人平和谦虚、勤奋严肃。他们温和、圆通，支持朋友和同伴。他们乐于协助别人，喜欢实际可行地帮助他人。他们利用个人热情与人交往，在困难中与他人和睦相处。ISFJ 型的人不喜欢表达个人情感，但实际上对于大多数的情况和事件都具有强烈的个人反应。他们关心保护朋友，愿意为朋友献身，他们有为他人服务的意识，愿意完成他们的责任和义务。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ISFJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ISFJ 型的人主导功能是感觉（关注细节），辅助功能是情感。他们倾向于：注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。 体谅他人感受、了解他人的需要、喜欢和谐的人际关系、易表露情感、喜去说服他人。ISFJ 型的人比较少地使用他们的第三、第四功能—思维和直觉。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个ISFJ 型的人：如果你过多的使用感觉和情感功能，你可能会失去整体的概念、想不出各种可能解决的途径、不求创新、无法应付太复杂的工作、不喜欢预测未来。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>感觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>情感</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>思维</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>直觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>求仔细观察、一丝不苟和准确无误，因此我能充分发挥记忆事实和分析细节的能力。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>能让我致力于有形的、现实的项目任务，并以此为别人提供帮助和服务；通常需要对细节问题非常关注，对精确性的要求也非常高。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>使我通过默默无闻的努力工作，表达自己对别人的同情与对别人的同情与对工作的热忱；同时我做出的贡献也受到重视和赞赏。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>工作在一个传统、稳定、有序和制度化的环境中，并且能为别人提供使用假合资非常高的服务。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>要求遵循标准化的工作程序，运用现实的判断力，并且仔细、有条不紊地坚持到底。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>每次都全身心地投入到一个项目任务或一个人身上，并且做出的产品或提供的服务能够带来可观的结果。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>能让我有一个独立的工作空间，这样我就能连续地集中注意力，受到最小限度的干扰和打断。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>不论是帮助别人也好，还是与志同道合的人打交道也好，大多数时候都只需要我关注一个对象， 而不是同时为好几个人工作或提供服务。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>在完成工作任务的过程中，要求我条理清晰并且效率很高。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>把工作成果向别人展示之前，能让我事先有充分的时间来准备。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>能够很好地集中、关注焦点</li>
+              <li>很强的工作伦理，工作努力而且很负责任</li>
+              <li>良好的协作技巧，能和别人建立起和谐友好的关系</li>
+              <li>讲求实效的工作态度，办事方法现实可行</li>
+              <li>十分关注细节，能够准确地把握事实</li>
+              <li>乐于助人，给同事和下属职员的工作提供支持和帮助</li>
+              <li>了解公司（或组织）的经历，能够很好地维护公司（或组织）的传统</li>
+              <li>杰出的组织才能</li>
+              <li>愿意在传统的机构中工作，而且兢兢业业、不遗余力</li>
+              <li>能够连续地工作，对相同的工作任务不会感到厌倦</li>
+              <li>非常强的责任意识；别人可以信任你去实现自己的诺言</li>
+              <li>喜欢运用固定的办事程序；尊重别人的地位和能力</li>
+              <li>通情达理，视角现实</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>可能低估自己的能力，那与坚决地维护自己的需要和利益</li>
+              <li>不愿意尝试、接受新的和未经考验的观点和想法</li>
+              <li>对反对意见过于敏感；在紧张的工作环境里感到很受压抑</li>
+              <li>可能只关注细节和眼前之事，而对整体和将来重视不够</li>
+              <li>倾向于同时投入到过多的任务之中</li>
+              <li>难以适应新环境，或者在不同工作任务之间来回切换时会有困难</li>
+              <li>易于被需要同时解决的太多的工作项目或任务弄得晕头转向、无所适从</li>
+              <li>如果自己得不到充分的重视和赞赏，可能会感到灰心丧气</li>
+              <li>一经做出决定，就不愿意从头考虑同一个问题</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理部分</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•牙医 •家庭运动医生 •护士 •医务技术专家 •理疗法专家 •医疗设备推销 •提供健康护理人员 •饮食专家／营养学家 •眼科大夫 •医务记录管理人员 •药剂师／药剂技术人员 •放射专家 •呼吸系统专家 •兽医 •有执照行医护士 •初级保健大夫 •家庭保健助理 •医务／牙科助理</p>
+            <p>这些职业允许ISFJ 型的人在这样一种环境下工作，在这里他们的贡献通过对别人施加的个人的、直接的影响表现出来。那些职业中的很大一部分要求同客户和患者进行亲身的、一对一的交往。ISFJ 型的人喜欢用一种真实的方法帮助别人。那些职位也允许 ISFJ 型的人在一种传统的，组织化的文化中相对独立地工作。医务领域充分利用了 ISFJ 型的入学习和实践技术的能力，为他们提供了同别人建立个人联系的机会。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>社会服务部门</p>
+              <p>教育部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•学前教育／初级学校教师 •图书馆员／建筑师 •教育管理人员 •社会福利工作人员 •咨询服务人员 •个人咨询人员 •宗教教育者 •言语病理学家 •家庭健康社会服务人员 •儿童福利咨询人员 •戒酒和戒毒咨询人员 •小学教师 •图书管理员／档案保管员 •特殊教育老师• (博物馆、美术馆、图书馆等的)馆长 •家谱学家 •教育行政人员 •咨询服务人员 •社会工作人员(老年和儿童每日看护问题)</p>
+            <p>由于教育部门能为ISFJ 型的人提供帮助他人，服务社会的机会，所以很吸引这种类型的人。ISFJ 型的人经常喜欢教初级中学，由于这可以同学生进行个人交往和发挥他们善长教基本技巧的能力。许多 ISFJ 型的人喜欢教育管理类的职业。尤其当他们对特定范围(例如特殊教育)或相对小的服务范围(一个小镇而非大城市)负责时更是这样。ISFJ 型的人喜欢在组织内独立工作，这种组织必须是认可他们的成绩，使他们明白职业目标的那种。研究领域为ISFJ 型人提供满足感是因为它们提供了独立工作和调查具体任务的机会。馆员们要求创造性并保持完整而准确的记录，这使他们能利用自己的组织能力和回忆事实的特长。尽管经常面临挑战，社会福利工作仍给予ISFJ 型的人获得职业满足的机会。因为通过同客户的交往，ISFJ 型的人能对别人的生活给予切实的提高，因此，他们发现贡献是有价值的，这些工作提供了同样的一对一交往和独立工作的环境，这对于 ISFJ 型的人都具有吸引力。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•秘书 •员工监督人 •顾客服务代表 •人事管理人员 •计算机操作者 •记帐员 •信用顾问 •律师的专职助手 •家用保健品推销</p>
+            <p>这些职业要求大量的在一对一基础上同别人交往的机会，因此常为 ISFJ 型的人所喜欢。这些职业中许多都不是独立完成的工作，这能使ISFJ 型的人使用组织方面和深入细节的能力。尤其当他们同受他们尊敬和钦佩的人一块工作时。这些职业同样要求知识及技术和交流技巧以帮助别人获取信息或帮助他们满足需求。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>创造性</p>
+              <p>技术性</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•内部装饰人员 •电工 •零售商 •旅店老板 •艺术家 •音乐家 •优先顾客销售代理人 •商业计划者 •不动产经纪人</p>
+            <p>这些职业彼此未必有关联但它们有一些共同的特征和要求。每种都要求与同日常生活有关的实际东西打交道。作为—个内部装饰人员，ISFJ 型的人运用他或她的审美感给予客户以合适的装潢。这种工作要求注重细节以及同别人合作向满足客户对他或她室内装饰的需要和愿望迈进的能力。ISFJ 型的人很注重自己房间的装饰，因此，他们容易理解客户装饰出使他们舒服的居室的愿望。一个电工要求技术准确性和坚持标准程序和代码。ISFJ 型的人喜欢注意那些要求亲自动手的工作，也喜欢使用他们掌握的技术。如果 ISFJ 型的人感到他或她的贡献是有价值的并为人欣赏，如果他或她赢得了同顾客、同伙、同事的有质量的交往，那么电工的工作也是令人满意的。零售推销和商业是经常为 ISFJ 型所喜欢的职业，尤其当他们在小专卖店或大商场的一个部门工作时。ISFJ 型的人常可以成为小商店的好老板。他们对诸如商店形象之类细节的关注以对顾客的“感觉”经常为他们赢得长期稳定的买卖。他们喜欢一定时间内同一名顾客交流，寻找合适的装饰品与顾客们已有的相配套。他们喜欢长期维持与顾客的关系，对待顾客十分友好和诚实可信。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>清楚地表达自己</li>
+        <li>考虑尚不存在的可能之事</li>
+        <li>设法更加灵活随和，表现自然一些</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>工作中需要估计风险，以积极、全面的观点看待未来。</li>
+          <li>需发展更多的自信和直率。</li>
+          <li>学会宣扬自己的成就。</li>
+          <li>对其它形式的做事方式需保持开放态度。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ISFP.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ISFP（内倾、感觉、情感和知觉）——思想起决定作用</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>羞怯的、安宁和善地、敏感的、亲切的、且行事谦虚。</span></li>
+        <li><i>2</i><span>喜于避开争论，不对他人强加已见或价值观。</span></li>
+        <li><i>3</i><span>无意于领导却常是忠诚的追随者。</span></li>
+        <li><i>4</i><span>办事不急躁，安于现状无意于以过度的急切或努力破坏现况，且非成果导向。</span></li>
+        <li><i>5</i><span>喜欢有自有的空间及照自订的时程办事。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ISFP 型的人平和、敏感，他们保持着许多强烈的个人现想和自己的价值观。他们更多地是通过行为而不是言辞表达自己深沉的情感。ISFP 型的人谦虚而缄默，但实际上他们是具有巨大的友爱和热情的人，但是除了与他们相知和信赖的人在一起外，他们不经常表现出自我的另一面。因为他们不喜欢直接地自我表达，所以常常被误解。ISFP 型的人耐心、灵活，很容易与他人相处，很少支配或控制别人。他们很客观，以一种相当实事求是的方式接受他人的行为。他们善于观察周围的人和物，却不寻求发现动机和含义。因为 ISFP 型的人完全生活在目前之中，所以他们的准备或计划往往不会多于必需，他们是很好的短期计划制定者。因为他们完全投入于现在，喜欢享受目前的经历，而不继续向下一个目标冲刺，所以他们对完成工作感到很放松。他们对于从经历中直接了解和感受的东西很感兴趣，常常富有艺术天赋和审美感，力求为自己创造一个美丽而隐蔽的环境。没有想要成为领导者，ISFP 型的人经常是忠诚的追随者和团体成员。因为他们利用个人的价值标准去判断生活中的每一件事，所以他们喜欢那些花费时间去认识他们和理解他们内心的忠诚人。他们需要最基本的信任和理解，在生活中需要和睦的人际关系，对于冲突和分歧则很敏感。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ISFP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ISFP 型的人主导功能是思考（喜欢事实），辅助功能是感觉。他们倾向于：对事实和经验做出符合逻辑结论。注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。ISFP 型的人比较少地使用他们的第三、第四功能—直觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 ISFP 型的人：如果你过多的使用思考功能，你可能在需要的时间忘记去称赞他人，或忽视你决策对其它人的影响。如果你过多的使用思考功能，你可能失去整体的概念、想不出各种可能解决的途径、不住直觉、不求创新、无法应付太复杂的工作、不喜欢预测未来。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>思维</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>感觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>直觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>是与自身很强的内在价值以及自己所关心和愿意为之贡献自己经历和才智的事业是一致的。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>如果要与他人合作在积极肯定的团队中工作，自己会是其中一名忠诚又富于合作精神的一分子。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>要求注意到细微之处，因为在工作中我所接触到的事对他人有益而又有实际应用价值的具体事物。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>除了与其他和蔼、谦虚地人为伍外，还要给我留有一定的空间，使我能够独立地完成工作，而不会感受到过多的规章和僵化的操作规程的束缚。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>使我成为适应能力极强而且负责的人。在工作中，我明确的目的，能够让我亲眼看到和亲身体会到我所做的工作的结果。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>让我通过审美和品味来增强我工作领域的吸引力，使其更加个性化，并使其他人感到工作在其中会更舒适。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>是在非常愉悦而又充满合作意识的氛围中完成的。人际之间的冲突会保持在最低限度。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>给我一个机会，使我在完成我认为很重要的工作内容过程中体验到自身的成长和发展。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>能让我提供实用的帮助，及时而简洁地处理好问题。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>不要求我做定期的公开演说。以及领导一大群我太熟知的人或给别人消极的反馈评价。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>热情，慷慨</li>
+              <li>对你很关心的和组织的忠诚</li>
+              <li>注意重要的细节，尤其是那些有关他人的细节</li>
+              <li>考虑周到，具备关注目前所需的能力</li>
+              <li>主动愿意支持组织的目标</li>
+              <li>准确评估目前的能力和看出什么是最需要保持稳定的能力</li>
+              <li>仔细评估冒风险和试用新方法时的灵活性和主动性</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>有只接受事物的表面现象而忽略事物深层暗示的倾向</li>
+              <li>没有能力观察到目前不存在的机会和可选择的机会</li>
+              <li>做出对个人的批评和消极的反馈趋势</li>
+              <li>不愿意提早准备；你在利用自己的时间上有问题</li>
+              <li>决断的困难</li>
+              <li>不喜欢过多的规则和结构过于复杂的机构</li>
+              <li>在于自己的感受相矛盾时很难做出符合逻辑的决定</li>
+              <li>不愿意为坚持自己的想法和立场而冒险打破与他人的协调关系</li>
+              <li>有会被大量的极其复杂的任务压得喘不过气来的趋势</li>
+              <li>反对制定长期的目标，很难按时完成任务</li>
+              <li>不会很自觉地做直接的报告或批评他人</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>工艺部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•时装设计 •木匠 •珠宝商 •园艺匠 •织毯工人 •陶工 •漆匠 •舞蹈员 •设计人员 •厨师长</p>
+            <p>这些职业对 ISFP 型的入主要吸引力在于它们能提供用他们的双手创造外观以吸引人，更多的是有用在实际工作中，他们喜欢运用五种感觉，从事实际的工作。那些职业为，ISFP 型的人提供了灵活的时间和自由安排工作的机会。大多数 ISFP 型的人喜欢自主，不必遵守管理规则。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•上门服务护士 •运动专家 •按摩医生 •放射技师 •医务助理 •牙科助理／保健医师 •兽医助理 •动物护理人员／训练人员 •家庭保健助理 •初级保健大夫 •饮食专家／营养学家 •验光师／配镜师 •运动心理专家 •职业疗法医师 •工艺师 •药剂师 •呼吸系统专家 •执行医护士</p>
+            <p>ISFP 型的人常可以从健康护理业中获得满足感，尤其是那些能让他们直接同用户和患者打交道的工作。他们喜欢许多治疗工作的亲手参与的特征——在危机中或危机后，从身体到感情上帮助他人。他们通常善于观察，能对微小变化做出反应，喜欢解决短期问题。对于 ISFP 型的人而言，从这些职业以及其它任何职业获得满足感的最重要成分是能看到或体验对他们成就的反馈以及能意识到他们工作的重要性。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>技术工作</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•调查员 •计算机操作人员 •林务员 •植物学家 •地质学家 •技师 •海洋生物学家</p>
+            <p>ISFP 型的人喜欢实际工作，不喜欢理论工作。他们倾向于喜欢运用实际的积极的技术，户外工作的机会尤其为 ISFP 型的人喜欢，他们对工作中的变化和种类表现出极大的兴趣。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>务业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•教师：初级(自然科学／艺术) •警察／劳改官员 •紧急热线电话操作员 •清洁服务人员 •仓库保管员 •侍者 •美容师 •旅行用品推销 •优质用户销售代表 •商业计划人员 •体育设备推销 •家用保健品推销 •家庭保健护理人员 •儿童福利咨询人员 •戒酒戒毒顾问 •社会工作人员</p>
+            <p>许多 ISFP 型的人在服务部门找到了让他们满意的工作。让他们从事满足人或动物的需要的工作最值得干。他们喜欢能分享他们价值观，培养和鼓励人际和谐、合作，以及能认可他们的成绩的工作环境。许多ISFP 型的人喜欢处在特定的主观环境，通常和小孩在一起，在这种环境中，他们有机会表露自然性和乐趣。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•记帐员 •司法员 •打字员 •职员监督人员 •经理人员 •律师帮办</p>
+            <p>职员工作，如果是处于一种适合的环境，也能给 ISFP 型的人提供满足。关键因素是在一种积极支持的气氛中运用他们实际技能的能力。当作为小组一部分而工作，或处于一种能尊重个人隐私和成长的稳定环境中时，ISFP 型的人工作总很出色。他们喜欢能让他们创造和保持愉快的、个性化的工作环境的职业部门。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>学会声明自己的主张</li>
+        <li>脚踏实地，在更广阔的背景下考虑问题</li>
+        <li>不要太个人化地看待事物</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需发展以怀疑的态度分析他人提供的信息。</li>
+          <li>需学会给他人负面反馈，处理好冲突。</li>
+          <li>需发展更广阔、更朝向未来定向的观念。</li>
+          <li>需对他人更果断，对自己有更多赞赏。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ISTJ.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ISTJ（内倾、感觉、思维和判断）——从容不迫地做好自己的工作</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>严肃、安静、藉由集中心 志与全力投入、及可被信赖获致成功。</span></li>
+        <li><i>2</i><span>行事务实、有序、实际 、 逻辑、真实及可信赖</span></li>
+        <li><i>3</i><span>十分留意且乐于任何事（工作、居家、生活）均有良好组织及有序。</span></li>
+        <li><i>4</i><span>负责任。</span></li>
+        <li><i>5</i><span>照设定成效来作出决策且不畏阻挠与闲言会坚定为之。</span></li>
+        <li><i>6</i><span>重视传统与忠诚。</span></li>
+        <li><i>7</i><span>传统性的思考者或经理。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ISTJ 型的人是严肃的、有责任心的和通情达理的社会坚定分子。他们值得信赖，他们重视承诺，对他们来说，言语就是庄严的宣誓。ISTJ 型的人工作缜密，讲求实际，很有头脑也很现实。他们具有很强的集中力、条理性和准确性。无沦他们做什么，都相当有条理和可靠。他们具有坚定不移、深思熟虑的思想，一旦他们着手自己相信是最好的行动方法时，就很难转变或变得沮丧。ISTJ 型的人特别安静和勤奋，对于细节有很强的汇记忆和判断。他们能够引证准确的事实支持自己的观点，把过去的经历运用到现在的决策中。他们重视和利用符合逻辑、客观的分析，以坚持不懈的态度准时地完成工作，并且总是安排有序，很有条理。他们重视必要的理论体系和传统惯例，对于那些不是如此做事的人则很不耐烦。ISTJ 型的人总是很传统、谨小甚微。他们聆听和喜欢确实、清晰地陈述事物。ISTJ 型的人天生不喜欢显露，即使危机之时，也显得很平静。他们总是显得责无旁贷、坚定不变，但是在他们冷静的外表之下，也许有强烈却很少表露的反应。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ISTJ)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ISTJ 型的人主导功能是（关注细节），辅助功能是思维。他们倾向于：注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。合乎逻辑擅于分析、客观、公正、有逻辑系统的思考、具拟判能力、坚定。ISTJ 型的人比较少地使用他们的第三、第四功能—情感和直觉。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个ISTJ 型的人：如果你过多的使用感觉功能，你可能失去整体的概念、想不出各种可能解决的途径、不住直觉、不求 创新、无法应付太复杂的工作、不喜欢预测未来。如果你过多的使用思考功能，你可能在需要的时间忘记去称赞他人，或忽视你决策对其它人的影响。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>感觉</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>思维</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>情感</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>直觉</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>本质上是技术性的，能让你依靠自己的能力来使用和了解重要的事实和细节。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>涉及很多实际的产品和服务。这些产品或服务是通过严谨周密、合乎逻辑且效率高的方法——最好是运用标准化的工作程序来生产或实现的。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>能让我有大量的时间独立地工作，运用杰出的集中注意力的能力来完成项目和（或）任务。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>是在一个稳定和标准化的环境中完成的，做这些工作时我不必去冒不必要的风险、运用未经检验过的或实验性的方法。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>能看得见的而且可以衡量的结果，而且需要和重视运用精确的标准来评估工作的多少或好坏。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>有明确的目标、清晰的组织制度和模式。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>在演示或递交工作成果之前能让我有充足的时间来准备，最好是单独进行或小组进行。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>能让我具有越来越大的职责和权力，而且只要要求我参与很少的社会政治方面的活动；我的工作表现是根据我完成工作任务的多少或实现工作目标的好坏来衡量的，而且我的努力和贡献很受欣赏和重视。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>在工作过程或气氛中，我的现实的判断和过去的经历很受重视和嘉奖。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>能让我拥有必要的资源（人力方面和财力方面）和材料来订立正式的目标，并且实现这些目标。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>办事精确，希望第一次就能把工作做好</li>
+              <li>乐意遵循确定的日常安排和传统的方针政策</li>
+              <li>每次都能十分专注地把注意力集中在一个项目或任务上</li>
+              <li>能够独立地工作</li>
+              <li>灵敏的组织能力</li>
+              <li>一丝不苟、认真专注地对待具体问题：事实和细节</li>
+              <li>相信传统模式的可取之处，并且能够遵循传统模式</li>
+              <li>非常强的责任意识；别人可以信任你去实现自己的诺言</li>
+              <li>明白清晰的工作伦理；认为高效率和多成果是很重要的</li>
+              <li>对实现目标有毅力和决心</li>
+              <li>通情达理，视角现实</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不 可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>不愿意尝试、接受新的和未经考验的观点和想法</li>
+              <li>对变动感到不安；排斥革新</li>
+              <li>对需要很长时间才能完成的任务缺乏耐心</li>
+              <li>有时会由于近期目标而忽略长远需要</li>
+              <li>办事死板；必要的时候难以或不愿意适应新情况</li>
+              <li>难以看到问题的整体以及行为的长远影响</li>
+              <li>对于方针或决定将会对别人造成什么样的影响缺乏敏感</li>
+              <li>需要的时候不愿意改变努力的方向或调整投入的多少</li>
+              <li>不愿意促成必要的改变，也不愿意支持经过仔细考虑的风险行为</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•审计员 •公司经理 •会计 •管理者／监督人 •文字信息处理专家 •效率专家／效率分析者 •保险业主(保险商) •后勤供给经理 •制定规章制度的官员 •信息总管 •会计／保险统计员</p>
+            <p>ISTJ 经常喜欢与商业有关的一些职业，他们在管理系统和使事物正常运行方面有出色的才能。他们经常喜欢到传统的、已经建立多年的团体或公司去工作，他们的加盟有助于团体或公司机构的正常运行。他们工作富有效率，他们认真而详尽地记录各种花销和税务，不允许有任何未经检查或未经修正的错误或遗漏出现。作为管理者，他们为每一名雇员制定清晰的工作权限、建立起一整套标准的规则。他们喜欢能够生产出具体产品或提供具体服务的商业工作。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售</p>
+              <p>服务</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•警察局高级职员／侦探 •情报检索服务社代理人 •政府雇员 •陆军军官 •管教人员 •房地产代理商 •体育设备／商品销售商 •教养所所长</p>
+            <p>市政服务工作能够满足ISTJ 服务于社区的愿望。他们喜欢维护服务或保护所有人的社会系统。他们喜欢在制度分明的环境中工作。无论是发布命令还是接受命令他们都做得很好。他们运用自己的知识和过去的经验果断地、有效地处理当前的问题。他们对事实和细节有非常好的记忆力，无论做什么，他们都用自己的实践经验做出判断。他们喜欢销售真实有形的产品，从中他们可以获得个人收益。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>金融</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•银行查帐员 •投资担保人 •税收监察员 •预算分析员 •股票经纪人 •房地产策划• 信贷分析员</p>
+            <p>ISTJ 拥有数学方面的天才。他们能记住有关事实和细节的数字，并能在必要时引用它们来支持自己的观点。他们不会轻易转移注意力，工作时特别专心、辛苦，工作成果既准确又细致。金融领域的职业需要以下才能：能很好地独立工作；能够吸收大量数据；能够进行精确的计算，这些都是 ISTJ 所具有的。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>教育</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•学校校长 •教师：技术／工业／数学／物理 •图书管理员 •管理者</p>
+            <p>教育领域的职业对 ISTJ 是非常适合的，尤其是那些管理和技术方面的工作。ISTJ 能够很好地管理学校或课程的运行。他们通过实践寻找维持系统运行的可能性和方法。管理方面和图书馆方面的职业使ISTJ 能够独力工作，运用他们客观的分析能力处理数据，如考试成绩、预算等。教书对 ISTJ 也很适合，特别是一些技术和实践的科目能为他们提供很多学习和教授的机会。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>法律</p>
+              <p>技术</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•法律调查员 •律师秘书 •电工 •工程师 •机械师 •计算机程序设计员 •科学作家 •律师秘书／律师专职助手 •药品经销商／调查员 •脑电图技术专家／技师 •地质学家 •气象学家 •航空机械师 •机械／工业／电子工程师 •农业科学家</p>
+            <p>这些职业为ISTJ 提供了运用他们技术才能的机会，而且他们的工作结果都是要求高度准确的产品。因为他们从不盲目地接受事物，所以他们能够抓住工作中的疏忽和纰漏，并且忠诚地遵循必要的程序和系统。上述职业中有很多还能为 ISTJ 提供独自工作的机会，让他们充分发挥专心工作的优点、出色的记忆力及各种技巧。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>保健</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•兽医 •普通外科医师 •牙医 •护理指导员 •保健指导员 •药剂师 •实验室技术人员 •医学研究者 •最初保健护理医师 •生物学和医学技术专家 •运动生理学家• 药剂师／配药技术员</p>
+            <p>ISTJ 经常投身于医药行业，特别喜欢就职于一些有着传统制度的医院。他们对病人保持密切的关心， 耐心地倾听他们的诉说，并给他们提供一些有思想、有节制的建议，制定出恰当的治疗计划。ISTJ 还是保健方面成功的指导者，他们尽心尽力地工作，承担应尽的义务，履行应负的责任。他们喜欢有条理的工作环境，在这种环境中他们能朝着目标前进，按时完成应做的工作。牙科和药剂学需要更多的技巧，因此为ISTJ 所喜爱。因为他们善于抓住事实信息，并且能够永远保留这些信息。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>要敢于探索新的可能性</li>
+        <li>更多考虑人性的因素</li>
+        <li>要乐于接受新事物</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>除了关注现实问题，需关注更深远的、定向于未来的问题。</li>
+          <li>需考虑人的因素，向他人表达其应得的赞赏。</li>
+          <li>为避免陈规，尝试寻找新的选择。</li>
+          <li>需培养耐心，应付那些需要用不同方式沟通或忽视规则和程序的人。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/ISTP.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="mbti-detail">
+    <div class="banner-wrap">
+      <span>迈尔斯布里格斯类型指标（MBTI）评测报告</span>
+    </div>
+    <div class="start">
+      <div class="start-content line-style">
+        <p>亲爱的同学</p>
+        <p>你好！高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>ISTP（内倾、感觉、思维和知觉）——用我已经得到的，做到最好</p>
+    </div>
+    <div class="block-wrap bg1">
+      <ul class="ul-style">
+        <li><i>1</i><span>冷静旁观者—安静、预留余地、弹性及会以无偏见的好奇心与未预期原始的幽默观察与分析。</span></li>
+        <li><i>2</i><span>有兴趣于探索原因及效果，技术事件是为何及如何运作且使用逻辑的原理组构事实、重视效能。</span></li>
+        <li><i>3</i><span>擅长于掌握问题核心及找出解决方式。</span></li>
+        <li><i>4</i><span>分析成事的缘由且能实时由大量资料中找出实际问题的核心。</span></li>
+      </ul>
+    </div>
+    <div class="subhead">
+      <p>个性特征描述</p>
+    </div>
+    <div class="block-wrap mb20">
+      <p class="line-style">ISTP 型的人坦率、诚实、讲求实效，他们喜欢行动而非漫谈。他们很谦逊，对于完成工作的方法有很好的理解力。ISTP 型的人擅长分析，所以他们对客观含蓄的原则很有兴趣。他们对于技巧性的事物有天生的理解力， 通常精于使用工具和进行手工劳动。他们往往做出有条理而保密的决定，他们仅仅是按照自己所看到的、有条理而直接地陈述事实。ISTP 型的人好奇心强，而且善于观察，只有理性、可靠的事实才能使他们信服。他们重视事实，简直就是有关他们知之甚深的知识的宝库。他们是现实主义者，所以能够很好地利用可获得的资源，同时他们擅于把握时机，这使他们变得很讲求实效。ISTP 型的人平和而寡言，往往显得冷酷而清高，而且容易害羞，除了是与好朋友在一起时。他们平等、公正。他们往往受冲动的驱使，对于即刻的挑战和问题具有相当的适应性和反应能力。因为他们喜欢行动和兴奋的事情，所以他们乐于户外活动和运动。</p>
+      <div class="pl30 pr30 pt30 pb30">
+        <score-chart :scores="scores" />
+      </div>
+    </div>
+    <div class="subhead">
+      <p>功能运用</p>
+    </div>
+    <div class="block-wrap mb20 bg2 line-style">
+      <p>外向与内向是指我们心理能量的作用方向，判断与知觉是我们做事的两种方式。心理学称之为“态度”。感觉与直觉是我们获取信息的方式，思考和情感是做决定的方式，心理学称之为“功能”，功能是人格理论的精髓、核心。每一个人在都会用到四种功能，但对功能应用的喜好程度不一样。等级中第一位的称为“主导功能”，第二位的称为“辅助功能”。每个人都需要运用到这两个过程。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">有效地使用你的类型： (ISTP)</p>
+      <hr class="gap-style">
+      <p style="width: 58%;">ISTP 型的人主导功能是思考（喜欢事实），辅助功能是感觉。他们倾向于：合乎逻辑擅于分析、客观、公正、有逻辑系统的思考、具拟判能力、坚定。注意细节、重视实际、能记住琐碎细节、耐得住烦闷的工作、有耐性、细心有系统。ISTP 型的人比较少地使用他们的第三、第四功能——感觉和情感。即使在需要这些功能的场合，他们仍然无法有效使用。作为一个 ISTP 型的人：如果你过多的使用思考功能，你可能忽略他人感受、误解别人的价值观、不在意和谐的人、不露感情、悯情较少、不能说服他人。如果你过多地关注细节，你可能失去整体的概念、想不出各种可能解决的途径、不住直觉、不求创新、无法应付太复杂的工作、不喜欢预测未来。</p>
+    </div>
+    <div class="subhead">
+      <p>问题解决方式</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>每个人都会用自己的方式进行决策，决策通常来自于你的主导功能，并且完全忽视你的第四功能。你的功能运用如下：</p>
+      <div class="card-wrap mt30">
+        <div class="card-item card1">
+          <p>思维</p>
+          <p>主导功能</p>
+        </div>
+        <div class="card-item card2">
+          <div>02</div>
+          <div>
+            <p>感觉</p>
+            <p>辅助功能</p>
+          </div>
+        </div>
+        <div class="card-item card3">
+          <div>03</div>
+          <div>
+            <p>直觉</p>
+            <p>第三功能</p>
+          </div>
+        </div>
+        <div class="card-item card4">
+          <p>情感</p>
+          <p>第四功能</p>
+        </div>
+      </div>
+      <div class="mt30">
+        <p>人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：</p>
+        <p>一个好的决策通常来自于四个功能的合理运用。当你尝试去解决问题时，你可以利用上表指导这个过程，但在整个的执行过程是非常困难的，因为每个人都不愿意用他不喜欢的功能去解决问题。就算你有意识地努力运用所有这些功能，你也不可能会在“真实生活”中以这种顺序运用它们。关键是要利用它们提醒自己，完善决策，就算你不按这种方式行事。工作中选择符合你的主导功能和辅助功能的岗位是非常重要的。第三功能要经过发展锻炼才能合适运用，第四功能可能永远不会在你的职业生涯中起到关键作用，因此你应当避免那种要求长期使用它的工作。</p>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>适合岗位特质</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>研究发现：职业满足会使你的工作主动性更强，积极性更高，更愿意去工作。以下不是简单的告诉你什么样的工作适合你，而是细化的帮你分析工作中的哪些特质对你重要，你还需要从中选出你认为最重要的，因为不同经历的人对特质的重要程度要求是不同的。每个岗位的工作内容都在随企业的发展而发展，不是一成不变的，有时候岗位的发展方向需要我们自己去争取。所以找到适合的工作不如找到适合自己发展的岗位更直接。这些特质可以帮助明确如何主动的发展或争取你岗位中的那些特质。</p>
+      <p>下面的条目从各个侧面上认证了您怎样才能受到真正的职业满足，看完这些条目之后，我们建议您根据它们对您的重要程序进行排序，排序的时候，回想一下您过去的学习、工作经历以及当前学习环境和工作感受，并思考：“哪一些是令你感到特别满意，有哪些令你极其不高兴”。试着寻找贯穿这些经历的主题。你的岗位特质：</p>
+      <div class="tag-wrap mt30">
+        <div class="tag-item tag1">
+          <div><span>01</span></div>
+          <div>让我确认和使用以最有效的可能方式提供的资源。</div>
+        </div>
+        <div class="tag-item tag2">
+          <div><span>02</span></div>
+          <div>让我实践掌握，然后运用拥有的技能，尤其是机械技能和那些需要使用工具的能力。</div>
+        </div>
+        <div class="tag-item tag3">
+          <div><span>03</span></div>
+          <div>让我运用自己对周围世界的理解和技术上的知识，看到工作中潜在的逻辑原理；让我参与解决困难和难题。</div>
+        </div>
+        <div class="tag-item tag4">
+          <div><span>04</span></div>
+          <div>有明确的方向；在那儿我能方便地工作，生产真实、实际的产品。</div>
+        </div>
+        <div class="tag-item tag5">
+          <div><span>05</span></div>
+          <div>有趣且充满活力，让我独立地进行工作，并且经常有机会到工作领域外和户外活动。</div>
+        </div>
+        <div class="tag-item tag6">
+          <div><span>06</span></div>
+          <div>在一个没有其他人强加的过多规则和操作标准的环境中工作；在那儿我能享受自然发生的冒险， 并且逐步应付任何危机。</div>
+        </div>
+        <div class="tag-item tag7">
+          <div><span>07</span></div>
+          <div>让我在最小限度的监督下独立工作，而且我也没有被要求去密切监督别人。</div>
+        </div>
+        <div class="tag-item tag8">
+          <div><span>08</span></div>
+          <div>给我足够的时间去发展自己的兴趣、爱好。</div>
+        </div>
+        <div class="tag-item tag9">
+          <div><span>09</span></div>
+          <div>给我相当数量的娱乐和不断地挑战。</div>
+        </div>
+        <div class="tag-item tag10">
+          <div><span>10</span></div>
+          <div>让我有效地利用装置和能源，而不要求必要的路线和步骤。</div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>工作中的优劣势</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <div class="strenth-wrap">
+        <div class="good">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_youshi.png">
+            <p>对于不同的人格类型和不同的动力等极而言，没有“好”与“坏”之分，每一个人都是一个独一无二的个体，都有其特别的优势和劣势，但问题的关键在于如何认识这些优势和劣势,完善自己。我们对于成功的建议是：“取已之长，补已之短”。学会了这一点将会影响到你的成败及你对工作的喜好。你在工作中的优势：</p>
+            <ul>
+              <li>出色处理限定任务和实质产品的能力</li>
+              <li>敏锐的观察力和对事实信息的出色记忆力</li>
+              <li>将混乱的数据和可辨认的事实有序排列的能力</li>
+              <li>独自工作或与你敬佩的人并肩工作的态度</li>
+              <li>在压力之下面对危机保持头脑冷静的能力</li>
+              <li>知道完成工作需要做什么和必须作什么的能力</li>
+              <li>用手和工具工作的态度</li>
+              <li>对突然变化和迅速发生的转变适应良好的能力</li>
+              <li>实际性和丰富的常识</li>
+              <li>确认和利用有效资源的能力</li>
+              <li>柔韧性和愿意冒险以及尝试新事物</li>
+            </ul>
+          </div>
+        </div>
+        <div class="bad">
+          <div class="view">
+            <img draggable="false" src="@/assets/images/career/img_lieshi.png">
+            <p>下面列出了你工作中可能存在的缺点，这些缺点有的比较明显，有的并不明显或你没有意识到，目的是为了让你“注意”到它们，并考虑产生的原因。缺点有些是天生的，而有些是长时间形成的，因此你不可能在一两天内改变，而是去提醒、思考。注意：其实知道存在的问题就是改变提高中很重要的一步，你会发现你正在慢慢发生变化。您工作中的劣势：</p>
+            <ul>
+              <li>难以看到行动的深远影响</li>
+              <li>缺乏进行言语交流的兴趣，尤其是表面上的交流</li>
+              <li>不喜欢事先准备，你在组织时间上有一定困难</li>
+              <li>对抽象、复杂的理论缺乏耐心</li>
+              <li>有对别人的感觉迟钝麻木的倾向</li>
+              <li>有容易变得厌烦和焦躁的倾向</li>
+              <li>难以看到不前不存在的机会和选择</li>
+              <li>对行政上的细节和程序缺乏耐心</li>
+              <li>不愿意重复自己</li>
+              <li>难以做出决定</li>
+              <li>很强的独立性，不喜欢过多的条条框框、官僚作风</li>
+              <li>地址确定长期目标，难以到达最后期限</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>职业类型——您适合的职业：</p>
+    </div>
+    <div class="block-wrap mb20 line-style">
+      <p>也许你会觉得下面的工作种类繁杂，但仔细分析你就会发现，这些工作各自的特色正是你对工作的要求，我们会在下面列出各类工作的特质。当然，这不可能是一个完美的适合你的工作的综合，但是，却能够向你展示你以前不曾考虑过的工作的可能性。在列出这些工作的同时，我们也要敬告您：每种职业中都有各种性格类型的成功人士；即使是相同的工作，不同公司的要求也不尽相同，所以除了工作名称外，你还要对贵公司要求的工作内容和公司文化作详细的了解。我们希望在经济快速发展、新型工作不断涌现将来，这份报告上列举的工作种类不是限制了你的选择，而是告诉你，面对新工作的选择或机会时，应该从哪些因素来分析这些工作对你的适合程度。</p>
+      <div class="job-wrap mt30">
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>销售部门</p>
+              <p>服务部门</p>
+              <p>劳改部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•警员或劳教人员 •赛车手 •飞机驾驶员 •武器操作员 •猎人 •情报人员 •司法官 •消防员 •调查员 •运动器材商品推销 •药品推销 •私人调查或私人侦探</p>
+            <p>ISTP 型人的职业偏好源于他们不愿受一大堆条框束缚的观念。他们激动时总发挥得很好。他们也喜欢那种自主的环境，他们可以发挥他们的能力很快地对手头的资源作出估计。然后采取适宜的步骤。他们善于各自工作，必要时，也乐于作为集体成员。ISTP 型的人喜欢掌握某种特别工具或机器的使用方法，也喜欢户外生活和身体运动。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>技术部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•电器设备专家 •信息产业开发人员 •技术培训人员 •后勤和供给制造商或经理 •网络调查专家(通讯部门) •电脑程序设计师 •海洋生物学家 •电器工程师、机械工程师、土木工程师</p>
+            <p>ISTP 类型的人常可以从技术行业中获得满足感是因为他们对物体如何和如何运作感兴趣。他们在机械领域表现优秀是因为、他们有很强的观察能力和记忆使用事实细节的能力。他们通常喜欢手工活，也喜欢能不断给他们提供感官信息的工作。当他们的逻辑分析是建立在通过自己五种感觉获得的可靠事实上时，总能取得良好的结果。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>健康护理业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•心电图专家或技师 •透射技师 •急救医生 •运动保健医生 •牙医牙科助理</p>
+            <p>这些医疗保健工作对于 ISTP 型人而言具有吸引力是源于他们的较高的技术天分。这里的每一种工作都要求严格的准确性，良好的实践和操作能力、耐性和投入，这些对使用和保养敏感的诊断设备都是必需的。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>商业</p>
+              <p>金融业</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•证券分析家 •采购员 •办公室管理人员 •银行家 •经济学家 •法律顾问 •业务顾问 •律师帮办</p>
+            <p>由于对数字的注重和精确意识，ISTP 型的人在商业和金融业也可以获得满足。工作环境是相当重要，但 ISTP 型的人更容易喜欢个人自由不受限制的职业。自主的工作，没有太多的会议和复杂的人际关系都是必要的。ISTP 型的人常常能使混乱的数据和事实有序化。他们可以轻易地发掘经济情况之间的关系，易于和能够对紧急变化做出反应。</p>
+          </div>
+        </div>
+        <div class="job-item">
+          <div class="job-category">
+            <div>
+              <p>贸易部门</p>
+            </div>
+          </div>
+          <div class="job-desc">
+            <p>•计算机维修 •飞机技师 •农场人员 •教练 •木工 •汽车部件零售商 •商业家</p>
+            <p>贸易行业的独立性和实践性常常吸引 ISTP 类型的人。ISTP 型的人偏爱切实具体的，能上手的工作。如果项目本身能完全吸引他们的注意力，他们会坚忍不拔地做下去。所以如果他们对体育感兴趣，相似的贸易职业中他们更愿选择作教练员。从业余爱好中成就一项事业，是 ISTP 型的绝好的策略。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subhead">
+      <p>个人发展建议</p>
+    </div>
+    <div class="block-wrap mb20 bg3 line-style">
+      <p>现在你对自己的人格类型和动力已经有了一个比较清楚的了解，但这还不够。“如何通过这些信息使你在这份工作上取得更大的成功”，这是关键所在。运用你的能力非常容易，你成功的秘诀在于：</p>
+      <ul style="font-weight: bold;font-size: 16px;">
+        <li>学会交流</li>
+        <li>考虑别人的感受</li>
+        <li>信守承诺</li>
+      </ul>
+      <p>个人发展建议是咨询师多年测评职业咨询和职业生涯规划的心得体会和经验总结，我们意识到以下的建议中有很多是难以完全照办的，但只要你花时间认真思考，一定会对你有极大的帮助和改变。</p>
+      <p style="margin-top: 30px;font-weight: bold;font-size: 16px;">发展建议：</p>
+      <hr class="gap-style">
+      <div style="width: 58%;">
+        <ul style="font-weight: bold;font-size: 16px;list-style: decimal;">
+          <li>需要增强开放性，关心他人，与他人共享信息。</li>
+          <li>需发展坚持性，改变沟通模式。</li>
+          <li>加强计划性，付出更多努力获取想要的成功。</li>
+          <li>需发展设置和保持目标的方法。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="end mt30">
+      <div class="end-content line-style">
+        <p>结束语</p>
+        <p style="margin-top: 10px;">本报告对你的人格特点进行了详细描述，他能够帮助你拓展思路，接受更多的可能性，而不是限制你的选择，报告结果没有“好”与“坏”之分，但不同特点对于不同的工作存在“适合”与“不适合”的区别，从而表现出具体条件下的优、劣势。报告展示了你的性格偏好和做事的动力状况，而不是你的知识、经验、技巧。你的动力、人格特点由遗传、成长环境和生活经历决定，我们可以通过对报告有效利用，扬长补短，更好的发挥个人潜力。本测评的目的在于更准确地了解自己的职业倾向和人格特点，为我们未来职业生涯的规划提供一个有价值的参考。</p>
+        <p>当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：</p>
+        <ul style="list-style: decimal;">
+          <li>回忆做题时的情景，是否认真作答。</li>
+          <li>您的选择尚未完全分化，在过多题目上做出了相同的回答。</li>
+          <li>您在测评过程中有没有受到外界因素的干扰。</li>
+          <li>重新审视自己，在适当的时候再次参加测试。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ScoreChart from './score-chart.vue'
+export default {
+  components: { ScoreChart },
+  props: {
+    scores: Array
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './mbti.scss';
+</style>

src/views/career/components/result/holland.scss

@@ -0,0 +1,207 @@
+.holland-detail {
+  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
+  font-size: 14px;
+
+  p {
+    margin: 0;
+  }
+
+  .banner-wrap {
+    height: 214px;
+    background: url(~@/assets/images/career/banner.png);
+    background-size: 100% 100%;
+    position: relative;
+
+    span {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 24px;
+    }
+  }
+
+  .start {
+    margin: 23px 48px;
+    margin-bottom: 16px;
+    height: 260px;
+
+    .start-content {
+      background: url(~@/assets/images/career/start-bg.png);
+      background-size: 100% 100%;
+      height: 100%;
+      padding: 50px 60px;
+      color: #D47B2E;
+      font-size: 14px;
+
+      p:last-child {
+        margin-top: 10px !important;
+      }
+    }
+  }
+
+  .end {
+    margin: 60px 48px 23px 48px;
+    margin-bottom: 16px;
+    height: 460px;
+
+    .end-content {
+      background: url(~@/assets/images/career/end-bg.png);
+      background-size: 100% 100%;
+      height: 100%;
+      padding: 50px 60px;
+      color: #D47B2E;
+      font-size: 14px;
+    }
+  }
+
+  .subhead {
+    height: 60px;
+    line-height: 60px;
+    padding-left: 45px;
+    background: url(~@/assets/images/career/subhead-bg.png);
+    background-size: 100% 100%;
+    position: relative;
+    color: #FFA400;
+    font-weight: 600;
+    font-size: 24px;
+
+    &::before {
+      content: "";
+      width: 7px;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      background-color: currentColor;
+    }
+  }
+
+  .block-wrap {
+    padding: 23px 48px;
+  }
+
+  .chart-wrap {
+    height: 400px;
+    position: relative;
+
+    .result {
+      height: 20%;
+
+      P:first-child {
+        color: #C8D1E8;
+        font-size: 48px;
+      }
+
+      p:last-child {
+        margin-left: 20px;
+        font-size: 24px;
+      }
+    }
+
+    .tip {
+      position: absolute;
+      top: 8%;
+      right: 0;
+      color: #0a0a0a;
+      font-size: 24px;
+      background-color: #FFA400;
+      width: 50%;
+      padding: 5px;
+      padding-left: 30px;
+      border-radius: 30px 0 0 30px;
+    }
+
+    .chart {
+      position: absolute;
+      bottom: 0;
+      left: 50px;
+      width: 360px;
+      height: 280px;
+    }
+  }
+
+  .score-tip {
+    color: #DA9253;
+    margin-top: 10px;
+  }
+
+  .nature-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 20px;
+    row-gap: 20px;
+    margin-top: 20px;
+
+    .nature-item {
+      width: calc(50% - 20px);
+      height: 520px;
+      border: 1px solid #e6e6e6;
+
+      .header {
+        height: 70px;
+        width: 94%;
+        margin-top: 20px;
+        padding: 10px 30px;
+        background-color: #FFA400;
+
+        p:first-child {
+          color: white;
+          font-size: 24px;
+        }
+
+        p:last-child {
+          text-transform: uppercase;
+          color: #c5c5c5;
+          font-size: 24px;
+        }
+      }
+
+      .body {
+        padding: 20px 30px;
+      }
+    }
+  }
+
+  .majors-wrap {
+    background-color: #F7C893;
+    text-align: center;
+    border-radius: 30px;
+    padding: 5px;
+    color: #0a0a0a;
+    font-size: 24px;
+    padding: 10px;
+    word-break: keep-all;
+    margin-top: 10px;
+  }
+
+  .title-style {
+    font-size: 24px;
+  }
+
+  .line-style {
+    line-height: 24px;
+  }
+
+  .bg1 {
+    background: url(~@/assets/images/career/holland-bg.png);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: 60%;
+  }
+
+  table {
+    width: 100%;
+    color: #666;
+    border: 1px solid #e6e6e6;
+    border-collapse: collapse;
+
+    td {
+      border: 1px solid #e6e6e6;
+      padding: 9px 15px;
+      min-height: 20px;
+      line-height: 20px;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}

src/views/career/components/result/mbti.scss

@@ -0,0 +1,432 @@
+.mbti-detail {
+  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
+  font-size: 14px;
+
+  p {
+    margin: 0;
+  }
+
+  .banner-wrap {
+    height: 214px;
+    background: url(~@/assets/images/career/banner.png);
+    background-size: 100% 100%;
+    position: relative;
+
+    span {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 24px;
+    }
+  }
+
+  .start {
+    margin: 23px 48px;
+    margin-bottom: 16px;
+    height: 260px;
+
+    .start-content {
+      background: url(~@/assets/images/career/start-bg.png);
+      background-size: 100% 100%;
+      height: 100%;
+      padding: 50px 60px;
+      color: #D47B2E;
+      font-size: 14px;
+
+      p:last-child {
+        margin-top: 10px !important;
+      }
+    }
+  }
+
+  .end {
+    margin: 60px 48px 23px 48px;
+    margin-bottom: 16px;
+    height: 460px;
+
+    .end-content {
+      background: url(~@/assets/images/career/end-bg.png);
+      background-size: 100% 100%;
+      height: 100%;
+      padding: 50px 60px;
+      color: #D47B2E;
+      font-size: 14px;
+    }
+  }
+
+  .subhead {
+    height: 60px;
+    line-height: 60px;
+    padding-left: 45px;
+    background: url(~@/assets/images/career/subhead-bg.png);
+    background-size: 100% 100%;
+    position: relative;
+    color: #FFA400;
+    font-weight: 600;
+    font-size: 24px;
+
+    &::before {
+      content: "";
+      width: 7px;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      background-color: currentColor;
+    }
+  }
+
+  .block-wrap {
+    margin: 23px 48px;
+  }
+
+  .ul-style {
+    list-style: none;
+    padding: 80px 0;
+    margin: 0;
+
+    li {
+      line-height: 50px;
+    }
+
+    i {
+      color: #414141;
+      font-size: 14px;
+      background-color: #D8D9FD;
+      display: inline-block;
+      vertical-align: middle;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-right: 8px;
+      text-align: center;
+      line-height: 24px;
+      font-style: normal;
+    }
+
+    span {
+      font-size: 24px;
+      vertical-align: middle;
+    }
+  }
+
+  .line-style {
+    line-height: 24px;
+  }
+
+  .gap-style {
+    background-color: #414141;
+    width: 40px;
+    height: 4px;
+    margin: 15px 0 15px 0;
+  }
+
+  .card-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 30px;
+
+    .card-item {
+      height: 68px;
+      flex: 1;
+      color: #fff;
+
+      p:first-child {
+        font-size: 30px;
+        font-weight: bold;
+        text-align: right;
+        line-height: 1.1;
+        padding-top: 8px;
+        transform: skew(-15deg);
+        width: 95%;
+      }
+
+      p:last-child {
+        font-size: 16px;
+        text-align: right;
+        font-style: normal;
+        width: 95%;
+      }
+    }
+
+    .card1 {
+      background: url(~@/assets/images/career/01.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .card4 {
+      background: url(~@/assets/images/career/04.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .card2 {
+      div {
+        background: linear-gradient(213deg, rgb(76, 208, 233), rgb(67, 189, 229), rgb(62, 180, 228));
+      }
+    }
+
+    .card3 {
+      div {
+        background: linear-gradient(213deg, rgb(84, 231, 197), rgb(125, 226, 177), rgb(151, 223, 164));
+      }
+    }
+
+    .card2,
+    .card3 {
+      position: relative;
+
+      div:first-child {
+        color: #525252;
+        display: inline-block;
+        width: 130px;
+        height: 68px;
+        line-height: 68px;
+        clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
+        padding-left: 10px;
+        font-size: 32px;
+        font-weight: 900;
+        padding-left: 20px;
+        color: #525252;
+      }
+
+      div:last-child {
+        display: inline-block;
+        width: 180px;
+        height: 100%;
+        clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .tag-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 15px;
+
+    .tag1,
+    .tag2 {
+      div:first-child {
+        background: linear-gradient(to right, #7bccb8, #c1ece1);
+      }
+
+      div:last-child {
+        background: #f7fffd;
+      }
+    }
+
+    .tag3,
+    .tag4 {
+      div:first-child {
+        background: linear-gradient(to right, #ececbf, #f6f6d7);
+      }
+
+      div:last-child {
+        background: #fffff7;
+      }
+    }
+
+    .tag5,
+    .tag6 {
+      div:first-child {
+        background: linear-gradient(to right, #ebc3c3, #f0d4d4);
+      }
+
+      div:last-child {
+        background: #f9f7ff;
+      }
+    }
+
+    .tag7,
+    .tag8 {
+      div:first-child {
+        background: linear-gradient(to right, #d7ac99, #f6d2c2);
+      }
+
+      div:last-child {
+        background: #fff7f7;
+      }
+    }
+
+    .tag9,
+    .tag10 {
+      div:first-child {
+        background: linear-gradient(to right, #85b7be, #c1cde0);
+      }
+
+      div:last-child {
+        background: #e6edf6;
+      }
+    }
+
+    .tag-item {
+      width: 50%;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      div {
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+      div:first-child {
+        width: 100px;
+        transform: skew(-15deg);
+        margin-left: -10px;
+        justify-content: center;
+
+        span {
+          transform: skew(15deg);
+          display: block;
+          font-size: 20px;
+          padding-left: 10px;
+        }
+      }
+
+      div:last-child {
+        flex: 1;
+        padding-left: 30px;
+        margin-left: -10px;
+        justify-content: flex-start;
+        padding-right: 10px;
+      }
+    }
+  }
+
+  .strenth-wrap {
+    height: 587px;
+    background-color: #FFF;
+    color: #414141;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+
+    .good {
+      display: inline-block;
+      width: 54%;
+      background: linear-gradient(213deg, rgba(190, 57, 177, 1), rgba(113, 209, 200, 1), rgba(90, 159, 235, 1));
+      clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
+      position: relative;
+
+      .view {
+        background-color: white;
+        padding: 30px 60px 30px 30px;
+        clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
+        position: absolute;
+        left: 4px;
+        right: 4px;
+        top: 4px;
+        bottom: 4px;
+      }
+    }
+
+    .bad {
+      display: inline-block;
+      width: 54%;
+      background: linear-gradient(213deg, rgba(190, 57, 177, 1), rgba(113, 209, 200, 1), rgba(90, 159, 235, 1));
+      clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
+      position: relative;
+
+      .view {
+        background-color: white;
+        margin: 4px;
+        padding: 30px 30px 30px 111px;
+        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
+        height: 98.5%;
+      }
+    }
+
+    ul {
+      padding-left: 2em;
+      margin: 0;
+      margin-top: 10px;
+    }
+  }
+
+  .job-wrap {
+    .job-item {
+      display: flex;
+      align-items: center;
+      column-gap: 20px;
+
+      &+.job-item {
+        margin-top: 25px;
+      }
+
+      .job-category {
+        width: 146px;
+        height: 200px;
+        background-image: url(~@/assets/images/career/icon_zhiye.png), linear-gradient(180deg, #FFE87D 0%, #FFC75C 100%);
+        background-size: 60px 60px, 100% 100%, ;
+        background-position: center 20px, center;
+        background-repeat: no-repeat;
+        position: relative;
+
+        div {
+          position: absolute;
+          top: 80px;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 10px;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          p {
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+
+            &+p {
+              margin-top: 5px;
+            }
+          }
+        }
+      }
+
+      .job-desc {
+        flex: 1;
+        width: 1px;
+
+        p:first-child {
+          font-weight: bold;
+        }
+
+        p:last-child {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+
+  .bg1 {
+    background: url(~@/assets/images/career/img_1.png);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: 45%;
+  }
+
+  .bg2 {
+    background: url(~@/assets/images/career/img_2.png);
+    background-position: right 60px;
+    background-repeat: no-repeat;
+  }
+
+  .bg3 {
+    background: url(~@/assets/images/career/img_3.png);
+    background-position: right 150px;
+    background-repeat: no-repeat;
+    background-size: 35%;
+  }
+}

src/views/career/components/result/score-chart.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="score-chart">
+    <div v-for="item,i in labels" :key="i" :class="['wrap', {'is-odd': isOdd(i)}]">
+      <div v-if="!isOdd(i)" class="label">{{ labels[i] }}</div>
+      <div class="score-wrap">
+        <div class="bg" :style="{width: scores[i] * ratio + 'px'}">
+          <span class="value">{{ scores[i] }}</span>
+        </div>
+      </div>
+      <div v-if="isOdd(i)" class="label">{{ labels[i] }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    scores: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      labels: ['E', 'I', 'S', 'N', 'T', 'F', 'J', 'P']
+    }
+  },
+  computed: {
+    ratio() {
+      const totalWidth = (1050 - 72 - 10 - 40) / 2
+      return totalWidth / (Math.max(...this.scores) + 5)
+    }
+  },
+  methods: {
+    isOdd(i) {
+      return (i + 1) % 2 === 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+	.score-chart {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		column-gap: 10px;
+		row-gap: 15px;
+	}
+
+	.wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: calc(50% - 10px);
+	}
+
+	.score-wrap {
+		width: 1px;
+		flex: 1;
+		height: 28px;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.label {
+		width: 40px;
+		font-weight: 600;
+    font-size: 22px;
+	}
+
+	.bg {
+		height: 100%;
+		background-color: #FFA400;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		.value {
+			color: #fff;
+			font-size: 13px;
+			padding-left: 4px;
+			font-weight: 500;
+		}
+	}
+
+	.is-odd {
+		.score-wrap {
+			justify-content: flex-start;
+		}
+
+		.bg {
+			justify-content: flex-end;
+
+			.value {
+				padding-right: 4px;
+			}
+		}
+	}
+</style>