修改文本

src/components/ComparePlanUser.vue

@@ -160,10 +160,120 @@
           <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
           <div ref="echarts_zhu" style="width: 100%; height: 600px"></div>
           <div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
+            <div v-for="(item, index) in userData1" :key="item.id">
+              <div v-show="index < userData2.length - 1">
+                <div class="dimensionality_out">
+                  <div class="left">
+                    <span class="totol_all">维度：</span
+                    >{{ userData1[index].dimensionName }}
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">维度：</span
+                    >{{ userData2[index].dimensionName }}
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">总分：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionScore }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <!-- {{userData1[index].dimensionScore>userData2[index].dimensionScore}} -->
+                    <span class="totol_all">总分：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionScore }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">结论：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionSymptom }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">结论：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionSymptom }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">说明：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionDesc }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">说明：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionDesc }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">建议：</span
+                    >{{ userData1[index].dimensionSuggestion }}
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">建议：</span
+                    >{{ userData2[index].dimensionSuggestion }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
             <div class="compare_score_detail_left">
               <div v-for="(item, index) in userData1" :key="item.id">
                 <div class="compare_score_inner" v-show="userData1.length - 1 !== index">
-                  <!-- {{index}}{{item}} -->
                   <div class="compare_score_left_back">
                     维度：{{ item.dimensionName }}
                   </div>
@@ -207,7 +317,7 @@
                 </div>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </el-dialog>
     </div>
@@ -814,4 +924,69 @@ export default {
     }
   }
 }
+.cpmpare_all {
+  // height: 100px;
+  display: flex;
+  flex-direction: column;
+  .dimensionality_out {
+    display: flex;
+    width: 100%;
+
+    .left {
+      margin-right: 10px;
+      flex: 1;
+
+      margin-top: 20px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      background-color: #f1f7ff;
+      .totol_all {
+        color: #006fff;
+      }
+    }
+    .right {
+      margin-left: 10px;
+      flex: 1;
+      margin-top: 20px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      background-color: #f1f7ff;
+      .totol_all {
+        color: #006fff;
+      }
+    }
+  }
+  .allScore_out {
+    display: flex;
+    width: 100%;
+
+    .left {
+      margin-right: 10px;
+      flex: 1;
+
+      // margin-top: 10px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      // background-color: #f1f7ff;
+      .totol_all {
+        color: #006fff;
+      }
+    }
+    .right {
+      margin-left: 10px;
+      flex: 1;
+      // margin-top: 10px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      // background-color: #f1f7ff;
+      .totol_all {
+        color: #006fff;
+      }
+    }
+  }
+}
 </style>

src/components/CompareUser.vue

@@ -147,10 +147,120 @@
           <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
           <div ref="echarts_zhu" style="width: 100%; height: 600px"></div>
           <div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
+            <div v-for="(item, index) in userData1" :key="item.id">
+              <div v-show="index<userData2.length-1">
+                <div class="dimensionality_out">
+                  <div class="left">
+                    <span class="totol_all">维度：</span
+                    >{{ userData1[index].dimensionName }}
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">维度：</span
+                    >{{ userData2[index].dimensionName }}
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">总分：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionScore }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <!-- {{userData1[index].dimensionScore>userData2[index].dimensionScore}} -->
+                    <span class="totol_all">总分：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionScore }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">结论：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionSymptom }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">结论：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionSymptom }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">说明：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) >
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData1[index].dimensionDesc }}</span
+                    >
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">说明：</span
+                    ><span
+                      :style="{
+                        color:
+                          parseFloat(userData1[index].dimensionScore) <
+                          parseFloat(userData2[index].dimensionScore)
+                            ? 'red'
+                            : '',
+                      }"
+                      >{{ userData2[index].dimensionDesc }}</span
+                    >
+                  </div>
+                </div>
+                <div class="allScore_out">
+                  <div class="left">
+                    <span class="totol_all">建议：</span
+                    >{{ userData1[index].dimensionSuggestion }}
+                  </div>
+                  <div class="right">
+                    <span class="totol_all">建议：</span
+                    >{{ userData2[index].dimensionSuggestion }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
             <div class="compare_score_detail_left">
               <div v-for="(item, index) in userData1" :key="item.id">
                 <div class="compare_score_inner" v-show="userData1.length - 1 !== index">
-                  <!-- {{index}}{{item}} -->
                   <div class="compare_score_left_back">
                     维度：{{ item.dimensionName }}
                   </div>
@@ -194,7 +304,7 @@
                 </div>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </el-dialog>
     </div>
@@ -712,105 +822,68 @@ export default {
   }
 }
 .cpmpare_all {
+  // height: 100px;
   display: flex;
-  .compare_score_detail_left {
-    flex: 1;
-    .compare_score_inner {
-      padding-left: 20px;
+  flex-direction: column;
+  .dimensionality_out {
+    display: flex;
+    width: 100%;
+
+    .left {
+      margin-right: 10px;
       flex: 1;
-      .compare_score_left_back {
+
+      margin-top: 20px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      background-color: #f1f7ff;
+      .totol_all {
         color: #006fff;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-        background-color: #f1f7ff;
-      }
-      .compare_score_right_back {
-        color: #ff3014;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-        background-color: #fff4f2;
       }
-      .compare_score_left {
+    }
+    .right {
+      margin-left: 10px;
+      flex: 1;
+      margin-top: 20px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      background-color: #f1f7ff;
+      .totol_all {
         color: #006fff;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_score_right {
-        color: #ff3014;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_result {
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_result_new {
-        font-size: 20px;
-        letter-spacing: 3px;
-        margin-top: 10px;
-        .title {
-          color: #006fff;
-        }
       }
     }
   }
-
-  .compare_score_detail_right {
-    flex: 1;
+  .allScore_out {
     display: flex;
-    flex-direction: column;
-    .compare_score_inner {
-      padding-left: 20px;
+    width: 100%;
+
+    .left {
+      margin-right: 10px;
       flex: 1;
-      .compare_score_left_back {
+
+      // margin-top: 10px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      // background-color: #f1f7ff;
+      .totol_all {
         color: #006fff;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-        background-color: #f1f7ff;
       }
-      .compare_score_right_back {
-        color: #ff3014;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-        background-color: #fff4f2;
-      }
-      .compare_score_left {
+    }
+    .right {
+      margin-left: 10px;
+      flex: 1;
+      flex: 1;
+
+      // margin-top: 10px;
+      margin-bottom: 4px;
+      font-size: 20px;
+      letter-spacing: 3px;
+      // background-color: #f1f7ff;
+      .totol_all {
         color: #006fff;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_score_right {
-        color: #ff3014;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_result {
-        font-size: 20px;
-        letter-spacing: 3px;
-      }
-      .compare_result_new {
-        font-size: 20px;
-        letter-spacing: 3px;
-        margin-top: 10px;
-        .title {
-          color: #006fff;
-        }
       }
     }
   }

src/components/Report.vue

@@ -116,42 +116,44 @@
                       }}
                     </div>
                   </div>
-                  <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
-                  <div class="report_echarts_out">
-                    <!-- justify-content: space-around; -->
-                    <div
-                      style="
-                        display: flex;
-                        flex-direction: row;
-
-                        width: 100%;
-                        flex-wrap: wrap;
-                        padding-top: 40px;
-                        padding-bottom: 40px;
-                      "
-                    >
+                  <div class="out_p">
+                    <div class="echrts_sty" ref="echarts_ld"></div>
+                    <div class="report_echarts_out">
+                      <!-- justify-content: space-around; -->
                       <div
-                        class="progress_out"
-                        v-for="(item, index) in echarts_name_list"
-                        :key="index"
+                        style="
+                          display: flex;
+                          flex-direction: row;
+
+                          width: 100%;
+                          flex-wrap: wrap;
+                          padding-top: 40px;
+                          padding-bottom: 40px;
+                        "
                       >
-                        <span class="progress_out_name" style="width: 150px">
-                          {{ item.name }}
-                        </span>
-
-                        <el-progress
-                          :percentage="echarts_data_list[index]"
-                          style="width: 100%"
-                          :stroke-width="18"
-                          :show-text="false"
-                          :color="colorPro"
-                        />
-                        <span class="progress_out_score"
-                          >{{ echarts_data_list[index]
-                          }}<span style="color: #000000; font-size: 12px; opacity: 0.4"
-                            >/100</span
-                          ></span
+                        <div
+                          class="progress_out"
+                          v-for="(item, index) in echarts_name_list"
+                          :key="index"
                         >
+                          <span class="progress_out_name" style="width: 150px">
+                            {{ item.name }}
+                          </span>
+
+                          <el-progress
+                            :percentage="echarts_data_list[index]"
+                            style="width: 100%"
+                            :stroke-width="18"
+                            :show-text="false"
+                            :color="colorPro"
+                          />
+                          <span class="progress_out_score"
+                            >{{ echarts_data_list[index]
+                            }}<span style="color: #000000; font-size: 12px; opacity: 0.4"
+                              >/100</span
+                            ></span
+                          >
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -168,21 +170,31 @@
                       class="report_des_out"
                       v-show="reportDataAll.length - 1 != index"
                     >
-                      <div class="score">分数：{{ item.dimensionScore }}<span style="font-size: 16px;color: rgb(153, 153, 153);letter-spacing:0px">&nbsp;&nbsp;满分（100）</span></div>
+                      <div class="score">
+                        分数：{{ item.dimensionScore
+                        }}<span
+                          style="
+                            font-size: 16px;
+                            color: rgb(153, 153, 153);
+                            letter-spacing: 0px;
+                          "
+                          >&nbsp;&nbsp;满分（100）</span
+                        >
+                      </div>
                       <div class="score">结论：{{ item.dimensionSymptom }}</div>
                       <!-- <div class="score">分析：</div> -->
                       <div class="scoreAsy">
                         <span class="scoreAsyTitle">分析：</span
-                        ><span class="scoreAsyDes">{{item.dimensionImprovement }}</span>
+                        ><span class="scoreAsyDes">{{ item.dimensionImprovement }}</span>
                       </div>
                       <!-- <div class="des">{{ item.dimensionImprovement }}</div> -->
                       <div class="scoreAsy">
                         <span class="scoreAsyTitle">说明：</span
-                        ><span class="scoreAsyDes">{{item.dimensionDesc}}</span>
+                        ><span class="scoreAsyDes">{{ item.dimensionDesc }}</span>
                       </div>
                       <div class="scoreAsy">
                         <span class="scoreAsyTitle">建议：</span
-                        ><span class="scoreAsyDes">{{item.dimensionSuggestion}}</span>
+                        ><span class="scoreAsyDes">{{ item.dimensionSuggestion }}</span>
                       </div>
                       <!-- <div class="score">说明：</div>
                       <div class="des">{{ item.dimensionDesc }}</div> -->
@@ -664,8 +676,8 @@ export default {
       .report_bei {
         position: relative;
         img {
-          height: 200px !important;
-          width: 260px !important;
+          height: 150px !important;
+          width: 210px !important;
         }
         // background-color: #111111;
 
@@ -673,61 +685,24 @@ export default {
           width: 100%;
           height: 40px;
           text-align: center;
-          // height: 120px;
-          // background-color: #ffffff;
-          // width: 10px;
           position: absolute;
           left: 0;
           right: 0;
-          top: -40px;
+          top: -20px;
           bottom: 0;
           margin: auto;
           color: #ffffff;
-          font-size: 40px;
+          font-size: 30px;
         }
       }
-
       .totol_result_des {
         font-size: 18px;
-        margin-left: 50px;
+        margin-left: 30px;
         letter-spacing: 3px;
         line-height: 30px;
       }
     }
 
-    .report_echarts_out {
-      margin-top: 100px;
-      // background-color: #f7f7f7;
-      border-radius: 40px;
-      display: flex;
-      flex-direction: row;
-      // justify-content: space-between;
-
-      // height: 200px;
-      .progress_out {
-        margin-bottom: 40px;
-        width: 50%;
-        display: flex;
-        justify-content: start;
-        flex-direction: row;
-        // align-items: center;
-        // padding-right: 40px;
-
-        .progress_out_name {
-          color: #000000;
-          font-weight: 600;
-          padding-left: 20px;
-        }
-
-        .progress_out_score {
-          color: #ff1e00;
-          font-weight: 600;
-          margin-right: 5px;
-          margin-left: 15px;
-        }
-      }
-    }
-
     .des_zhishu {
       color: #222222;
       font-size: 20px;
@@ -757,7 +732,6 @@ export default {
         display: flex;
         flex-direction: row;
         .scoreAsyTitle {
-       
           color: #48d68e;
           font-size: 16px;
           line-height: 30px;
@@ -841,4 +815,47 @@ export default {
     }
   }
 }
+.out_p {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  align-items: center;
+  .echrts_sty {
+    flex: 6;
+    height: 400px;
+  }
+  .report_echarts_out {
+    flex: 4;
+    // margin-top: 100px;
+    // background-color: #f7f7f7;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: row;
+    // justify-content: space-between;
+
+    // height: 200px;
+    .progress_out {
+      margin-bottom: 40px;
+      width: 100%;
+      display: flex;
+      justify-content: start;
+      flex-direction: row;
+      // align-items: center;
+      // padding-right: 40px;
+
+      .progress_out_name {
+        color: #000000;
+        font-weight: 600;
+        padding-left: 20px;
+      }
+
+      .progress_out_score {
+        color: #ff1e00;
+        font-weight: 600;
+        margin-right: 5px;
+        margin-left: 15px;
+      }
+    }
+  }
+}
 </style>