feat(sideBarUserInfo): 样式调整

src/api/goods.js

@@ -95,14 +95,7 @@ export function getSmallCount(params) {
     params,
   });
 }
-// 切换语言
+
-export function getLanguages(params) {
-  return request({
-    url: "/system/pub/enums/get-languages",
-    method: "get",
-    params,
-  });
-}
 // 菜单权限
 export function menuList(params) {
   return request({

src/components/HeaderTop.vue

@@ -294,7 +294,6 @@ export default {
   },
   created() {
     this.getSpecialArea();
-    this.getLanguages();
     this.getMenuList();
     this.getIndexMailCount();
   },
@@ -400,30 +399,7 @@ export default {
         this.userInfo.memberCode;
       window.open(src, "_blank");
     },
-    getLanguages() {
+
-      api.getLanguages().then((res) => {
-        if (res.code == 200) {
-          res.data.forEach((item) => {
-            if (item.field == localStorage.getItem("lang")) {
-              this.selLabl = item.label;
-            }
-          });
-          if (
-            localStorage.getItem("lang") == undefined ||
-            localStorage.getItem("lang") == "undefined"
-          ) {
-            localStorage.setItem("lang", "zh-CN");
-          }
-          this.languageList = res.data;
-        }
-      });
-    },
-    setLanguage(item) {
-      localStorage.setItem("lang", item.field);
-      this.selLabl = item.label;
-      this.$i18n.locale = item.field;
-      location.reload();
-    },
     goPersonInfo(index) {
       this.$router.push({
         path: "/personal",

src/views/index/components/sidebarUserInfo.vue

@@ -52,6 +52,21 @@
 
     <!--! 用户卡片信息 -->
     <div class="awardscard">
+      <!-- NEW: Awards Sprint Text -->
+      <div
+        v-if="awards.tarAwardsName && sprintProgress"
+        class="awards-progress-summary"
+      >
+        <span class="descriptive-text">当前距离</span>
+        <span class="highlight-name">
+          {{ awards.tarAwardsName }}
+        </span>
+        <span class="descriptive-text">奖衔,小区仅需</span>
+        <span class="highlight-pv">
+          {{ sprintProgress.gapText }}
+        </span>
+      </div>
+
       <div class="user-cards">
         <div class="user-cards-left">
           <div class="progress-wrapper">
@@ -137,6 +152,23 @@
               </div>
             </div>
           </div>
+          <!-- NEW: Awards Sprint Progress Bar -->
+          <div
+            v-if="awards.tarAwardsName && sprintProgress"
+            class="progress-wrapper"
+          >
+            <div class="progress-wrapper__label">奖衔冲刺</div>
+            <div class="sprint-progress-container">
+              <div
+                class="sprint-current-progress"
+                :style="{ width: sprintProgress.percentageString }"
+              ></div>
+              <div class="sprint-progress-text">
+                已完成 {{ sprintProgress.actualAchievedText }} / 目标
+                {{ sprintProgress.targetText }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -174,6 +206,62 @@ export default {
       return user;
     },
     ...mapGetters(["userInfo"]),
+    sprintProgress() {
+      const awardsData = this.awards || {}; // Handle case where awards might be null/undefined initially
+      const targetPvStr = awardsData.targetPv;
+      const sumRealPvStr = awardsData.sumRealPv; // User comment: 这是"小区仅需"的量，即差距
+
+      if (
+        typeof targetPvStr === "undefined" ||
+        typeof sumRealPvStr === "undefined"
+      ) {
+        return {
+          percentageString: "0%",
+          actualAchievedText: "0.00",
+          targetText: "0.00",
+          gapText: "0.00",
+        };
+      }
+
+      const targetPv = parseFloat(targetPvStr);
+      const gapPv = parseFloat(sumRealPvStr); // sumRealPv is the gap
+
+      let actualAchievedPv = 0;
+      let percentage = 0;
+      const numericTargetPv = Math.max(0, isNaN(targetPv) ? 0 : targetPv);
+
+      if (numericTargetPv > 0) {
+        actualAchievedPv =
+          numericTargetPv - (isNaN(gapPv) ? numericTargetPv : gapPv);
+        actualAchievedPv = Math.max(0, actualAchievedPv);
+        actualAchievedPv = Math.min(actualAchievedPv, numericTargetPv);
+        percentage = (actualAchievedPv / numericTargetPv) * 100;
+      } else if (numericTargetPv === 0) {
+        if (!isNaN(gapPv) && gapPv <= 0) {
+          actualAchievedPv = 0;
+          percentage = 100;
+        } else {
+          actualAchievedPv = 0;
+          percentage = 0;
+        }
+      }
+
+      const clampedPercentage = Math.min(
+        100,
+        Math.max(0, isNaN(percentage) ? 0 : percentage)
+      );
+
+      return {
+        percentageString: `${Math.floor(clampedPercentage)}%`,
+        actualAchievedText: (Math.floor(actualAchievedPv * 100) / 100).toFixed(
+          2
+        ),
+        targetText: numericTargetPv.toFixed(2),
+        gapText: (Math.floor((isNaN(gapPv) ? 0 : gapPv) * 100) / 100).toFixed(
+          2
+        ),
+      };
+    },
   },
   data() {
     return {
@@ -319,8 +407,8 @@ export default {
   width: 380px;
   box-sizing: border-box;
   padding: 20px;
-  background: #ffffff;
+  background: #f4f8fb;
-  box-shadow: 5px 5px 20px 0px rgba(233, 233, 233, 0.5);
+  box-shadow: 5px 5px 20px 0px rgba(0, 76, 140, 0.2);
   border-radius: 10px 10px 10px 10px;
   opacity: 1;
   margin-right: 20px;
@@ -345,8 +433,8 @@ export default {
         font-size: 22px;
         margin-right: 12px;
         font-weight: bold;
-        color: #b8860b;
+        color: #005bac;
-        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
       }
     }
     .user-level-info {
@@ -359,7 +447,7 @@ export default {
   }
   .create-time {
     margin: 10px auto 10px auto;
-    color: #666;
+    color: #004c8c;
     font-size: 14px;
     text-align: center;
   }
@@ -368,19 +456,18 @@ export default {
     padding: 0 40px;
     line-height: 40px;
     font-size: 14px;
-    color: #666;
+    color: #004c8c;
     justify-content: center;
     .margin-s {
       margin: 0 10px;
     }
     .divs {
       padding: 0 10px;
-      //width: 40px;
       height: 40px;
       border-radius: 8px 8px 8px 8px;
       opacity: 1;
-      border: 1px solid #979797;
+      border: 1px solid #b3d1ee;
-      color: var(--primary-color);
+      color: #005bac;
       font-size: 18px;
       text-align: center;
       line-height: 40px;
@@ -391,18 +478,14 @@ export default {
     width: 100%;
     margin: 0 auto;
     margin-top: 10px;
-    background: url("~@/assets/images/id-card-bg.png") no-repeat;
+    background-image: linear-gradient(180deg, #005bac 0%, #003f8c 100%);
-    background-size: 100% 100%;
-    //background: linear-gradient(180deg, #f8d869 0%, #f48b1f 100%);
     border-radius: 10px;
     position: relative;
     .user-cards {
       cursor: pointer;
 
-      padding: 16px 10px;
+      padding: 0px 10px 16px;
-      // position: absolute;
       z-index: 1;
-      // display: flex;
       .user-card-bg {
         position: absolute;
         right: 0;
@@ -419,20 +502,15 @@ export default {
           border-radius: 10px;
           margin: 5px;
           position: relative;
-          overflow: hidden; // Hide overflowing parts of bars
+          overflow: hidden;
         }
 
         .progress-bar-container.no-value {
-          background: rgba(
+          background: rgba(255, 255, 255, 0.1);
-            255,
-            255,
-            255,
-            0.3
-          ); // Transparent background when no values
         }
 
         .progress-bar-container.has-value {
-          background: #fff; // White background when has values
+          background: rgba(255, 255, 255, 0.2);
         }
 
         .left-bar {
@@ -440,33 +518,32 @@ export default {
           left: 0;
           top: 0;
           height: 100%;
-          background: #fea43c; // Left bar color
+          background: #28a2ff;
-          border-radius: 10px 0 0 10px; // Rounded left corners
+          border-radius: 10px 0 0 10px;
-          z-index: 1; // Below text
+          z-index: 1;
         }
 
         .right-bar {
           position: absolute;
-          right: 0; // Align to the right
+          right: 0;
           top: 0;
           height: 100%;
-          background: #409eff; // Right bar color (changed to blue)
+          background-color: #87cefa;
-          border-radius: 0 10px 10px 0; // Rounded right corners
+          border-radius: 0 10px 10px 0;
-          z-index: 1; // Below text
+          z-index: 1;
         }
-        // Remove old schedule styles if they exist
         .schedule,
         .schedule1 {
-          display: none; // Hide old elements if necessary, or remove them fully
+          display: none;
         }
         .current-schedule {
-          display: none; // Hide old elements if necessary, or remove them fully
+          display: none;
         }
 
         .progress-wrapper {
           display: flex;
           align-items: center;
-          margin-top: 5px;
+          margin-top: 8px;
         }
         .progress-wrapper:first-child {
           margin-top: 0px;
@@ -474,7 +551,9 @@ export default {
         .progress-wrapper__label {
           margin-right: 10px;
           font-size: 12px;
-          color: #fff;
+          color: #b3d1ee;
+          width: 60px;
+          text-align: right;
         }
         .cha {
           position: absolute;
@@ -483,8 +562,9 @@ export default {
           transform: translate(-50%, -50%);
           font-size: 12px;
           white-space: nowrap;
-          color: #fff; // Ensure text is readable (changed to white)
+          color: #002244;
-          z-index: 2; // Above the bars
+          text-shadow: none;
+          z-index: 2;
         }
         .state {
           font-size: 10px;
@@ -513,70 +593,152 @@ export default {
     .honor-title-wrapper {
       flex: 1;
       > div:first-child {
-        color: #757575; // Slightly muted color for the label
+        color: #003366;
-        margin-bottom: 2px; // Add some space between label and value
+        margin-bottom: 2px;
       }
     }
     .honor-title {
-      font-weight: 700; // Bolder
+      font-weight: 700;
-      font-size: 20px; // Larger font size
+      font-size: 20px;
-      color: #333; // Darker color for prominence
+      color: #002244;
+      text-shadow: 0 0 7px rgba(227, 173, 170, 0.5),
+        0 0 12px rgba(227, 173, 170, 0.3);
     }
     .honor-title.is-empty-awards {
       font-weight: normal;
-      font-size: 18px; // Slightly smaller or same as original
+      font-size: 18px;
-      color: #999; // Muted grey color
+      color: #7986cb;
-      // font-style: italic; // Optional: if italics are desired
+      text-shadow: none;
     }
   }
 }
 
 .authority-badge {
   display: inline-block;
-  position: relative; // Needed for pseudo-element positioning
+  position: relative;
   padding: 4px 10px;
-  font-size: 13px; // Slightly increased font size
+  font-size: 13px;
   font-weight: bold;
-  color: #4a3b31; // Dark brown text color for better contrast
+  color: #4a3b31;
-  background: linear-gradient(
+  background: linear-gradient(135deg, #ffd700, #ffa500);
-    135deg,
-    #ffd700,
-    #ffa500
-  ); // Gold to Orange gradient
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   line-height: normal;
-  overflow: hidden; // Keep the shine effect contained
+  overflow: hidden;
-  cursor: default; // Optional: change cursor to indicate it's not a button
+  cursor: default;
 }
 
 .authority-badge::before {
   content: "";
   position: absolute;
   top: 0;
-  left: -120%; // Adjusted to ensure the wider shine starts fully off-screen
+  left: -120%;
-  width: 50%; // Width of the shine
+  width: 50%;
   height: 100%;
   background: linear-gradient(
     90deg,
     transparent,
     rgba(255, 255, 255, 0.6),
-    // Increased opacity for a more prominent shine
     transparent
   );
-  transform: skewX(-25deg); // Angled shine
+  transform: skewX(-25deg);
-  animation: shine 2.5s infinite 1s; // Animation name, duration, iteration, delay
+  animation: shine 2.5s infinite 1s;
 }
 
 @keyframes shine {
   0% {
-    left: -120%; // Adjusted to ensure the wider shine starts fully off-screen
+    left: -120%;
   }
   50% {
-    left: 120%; // Move across the badge
+    left: 120%;
   }
   100% {
-    left: 120%; // Stay off-screen to the right before resetting
+    left: 120%;
   }
 }
+
+.awards-progress-summary {
+  text-align: center;
+  padding: 10px 0 15px 0;
+  .descriptive-text {
+    font-size: 12px;
+    color: #e0e0e0;
+    opacity: 1;
+    margin-right: 4px;
+  }
+
+  .highlight-name,
+  .highlight-pv {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0 3px;
+    margin: 0 1px;
+    display: inline-block;
+    color: #ffffff;
+    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.sprint-progress-container {
+  flex: 1;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.sprint-current-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);
+  transition: width 0.6s ease-in-out;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.sprint-current-progress::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 80%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: skewX(-25deg);
+  animation: sweepingShimmer 2s infinite linear;
+  border-radius: inherit;
+}
+
+@keyframes sweepingShimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 120%;
+  }
+}
+
+.sprint-progress-text {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  text-align: center;
+  font-size: 10px;
+  color: #ffffff;
+  font-weight: bold;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  z-index: 2;
+}
 </style>