feat(sideBarUserInfo): 样式调整
This commit is contained in:
woody
parent
7b6d35606f
commit
4011c7d5b2
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
box-shadow: 5px 5px 20px 0px rgba(233, 233, 233, 0.5);
|
||||
background: #f4f8fb;
|
||||
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;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
color: #005bac;
|
||||
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;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid #b3d1ee;
|
||||
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-size: 100% 100%;
|
||||
//background: linear-gradient(180deg, #f8d869 0%, #f48b1f 100%);
|
||||
background-image: linear-gradient(180deg, #005bac 0%, #003f8c 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.user-cards {
|
||||
cursor: pointer;
|
||||
|
||||
padding: 16px 10px;
|
||||
// position: absolute;
|
||||
padding: 0px 10px 16px;
|
||||
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(
|
||||
255,
|
||||
255,
|
||||
255,
|
||||
0.3
|
||||
); // Transparent background when no values
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.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
|
||||
border-radius: 10px 0 0 10px; // Rounded left corners
|
||||
z-index: 1; // Below text
|
||||
background: #28a2ff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
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)
|
||||
border-radius: 0 10px 10px 0; // Rounded right corners
|
||||
z-index: 1; // Below text
|
||||
background-color: #87cefa;
|
||||
border-radius: 0 10px 10px 0;
|
||||
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)
|
||||
z-index: 2; // Above the bars
|
||||
color: #002244;
|
||||
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
|
||||
margin-bottom: 2px; // Add some space between label and value
|
||||
color: #003366;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
.honor-title {
|
||||
font-weight: 700; // Bolder
|
||||
font-size: 20px; // Larger font size
|
||||
color: #333; // Darker color for prominence
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
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
|
||||
color: #999; // Muted grey color
|
||||
// font-style: italic; // Optional: if italics are desired
|
||||
font-size: 18px;
|
||||
color: #7986cb;
|
||||
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
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#ffd700,
|
||||
#ffa500
|
||||
); // Gold to Orange gradient
|
||||
color: #4a3b31;
|
||||
background: linear-gradient(135deg, #ffd700, #ffa500);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
line-height: normal;
|
||||
overflow: hidden; // Keep the shine effect contained
|
||||
cursor: default; // Optional: change cursor to indicate it's not a button
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.authority-badge::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -120%; // Adjusted to ensure the wider shine starts fully off-screen
|
||||
width: 50%; // Width of the shine
|
||||
left: -120%;
|
||||
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
|
||||
animation: shine 2.5s infinite 1s; // Animation name, duration, iteration, delay
|
||||
transform: skewX(-25deg);
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue