feat(global): 全局样式调整
This commit is contained in:
woody
parent
4e877a1ea0
commit
3756238278
|
|
@ -37,6 +37,7 @@
|
|||
@mouseleave="removeActive(1)"
|
||||
>
|
||||
会员专区<i class="el-icon-arrow-down"></i>
|
||||
<transition name="fade-slide">
|
||||
<div class="aBsolt" v-show="vipShow">
|
||||
<div
|
||||
v-for="item in zoneList"
|
||||
|
|
@ -44,10 +45,11 @@
|
|||
:key="item.value"
|
||||
v-show="item.isShow"
|
||||
@mouseover="childrenActive(item.value)"
|
||||
@mouseleave="childrenRemActive(item.value)"
|
||||
@mouseleave="childrenRemActive()"
|
||||
@click="openZone(item)"
|
||||
>
|
||||
<div class="aBsolt_ii">{{ item.label }}</div>
|
||||
<transition name="fade-slide">
|
||||
<div
|
||||
class="aBsolt_c"
|
||||
v-if="
|
||||
|
|
@ -66,8 +68,10 @@
|
|||
{{ ctem.label }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div
|
||||
class="fHeigh"
|
||||
|
|
@ -76,6 +80,7 @@
|
|||
@mouseleave="removeActive(2)"
|
||||
>
|
||||
{{ "市场动态" }} <i class="el-icon-arrow-down"></i>
|
||||
<transition name="fade-slide">
|
||||
<div class="aBsolt" v-show="marketShow">
|
||||
<div
|
||||
v-for="item in marketList"
|
||||
|
|
@ -87,6 +92,7 @@
|
|||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div
|
||||
class="fHeigh"
|
||||
|
|
@ -95,6 +101,7 @@
|
|||
@mouseleave="removeActive(3)"
|
||||
>
|
||||
{{ "会员中心" }} <i class="el-icon-arrow-down"></i>
|
||||
<transition name="fade-slide">
|
||||
<div class="aBsolt" v-show="vipcShow">
|
||||
<div
|
||||
v-for="item in vipList"
|
||||
|
|
@ -106,6 +113,7 @@
|
|||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_btm_r">
|
||||
|
|
@ -121,6 +129,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- v-show="memberShow" -->
|
||||
<transition name="fade-slide">
|
||||
<div
|
||||
class="aBsolts"
|
||||
v-show="memberShow"
|
||||
|
|
@ -167,6 +176,7 @@
|
|||
></div>
|
||||
<div class="aBsolt_i" @click="logout">{{ "退出登录" }}</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -537,7 +547,7 @@ export default {
|
|||
this.$set(this, "childShow", id);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
childrenRemActive(id) {
|
||||
childrenRemActive() {
|
||||
this.$set(this, "childShow", 0);
|
||||
},
|
||||
//鼠标移入
|
||||
|
|
@ -601,6 +611,22 @@ export default {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
/* Transition styles */
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
.fade-slide-enter,
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
.fade-slide-enter-to,
|
||||
.fade-slide-leave {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.size-s {
|
||||
font-size: 24px;
|
||||
margin-left: 0px;
|
||||
|
|
@ -625,16 +651,39 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
padding: 5px 60px;
|
||||
background: #cccccc;
|
||||
color: #333333;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.page_top_l {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
gap: 30px;
|
||||
height: 44px;
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
color: #4a5568;
|
||||
font-size: 18px;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
.el-icon-message,
|
||||
.el-icon-chat-dot-round {
|
||||
color: #4a5568;
|
||||
transition: color 0.2s ease-in-out;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
.el-icon-message,
|
||||
.el-icon-chat-dot-round {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page_top_r {
|
||||
|
|
@ -643,12 +692,30 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 30px;
|
||||
height: 44px;
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
color: #4a5568;
|
||||
font-size: 18px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
||||
|
||||
.el-icon-message,
|
||||
.el-icon-chat-dot-round {
|
||||
color: #4a5568;
|
||||
transition: color 0.2s ease-in-out;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: #f8f9fa;
|
||||
.el-icon-message,
|
||||
.el-icon-chat-dot-round {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -659,7 +726,7 @@ export default {
|
|||
height: 63px;
|
||||
font-size: 18px;
|
||||
padding: 0 30px;
|
||||
background: rgba(24, 24, 24, 0.84);
|
||||
background: #2d3748;
|
||||
color: #ffffff;
|
||||
|
||||
.fHeigh {
|
||||
|
|
@ -667,6 +734,7 @@ export default {
|
|||
line-height: 63px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.page_btm_l {
|
||||
|
|
@ -693,6 +761,14 @@ export default {
|
|||
|
||||
.page_btm_r1 {
|
||||
margin-right: 20px;
|
||||
|
||||
// Styles for the div containing userInfo.memberCode and the caret icon
|
||||
.disflex > div:last-child {
|
||||
font-weight: 600; // Semi-bold for better prominence
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // Subtle shadow for depth
|
||||
display: flex; // Ensures text and icon are aligned well
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page_btm_r2 {
|
||||
|
|
@ -711,13 +787,13 @@ export default {
|
|||
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 10px 0; // padding: 10px 36px;
|
||||
transform: translate(-62px, 0);
|
||||
transform: translate(-52px, 0);
|
||||
// bottom: 0;
|
||||
}
|
||||
|
||||
.aBsolts {
|
||||
width: 200px;
|
||||
transform: translateX(0);
|
||||
transform: translateX(-10px);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #333;
|
||||
|
|
@ -726,7 +802,7 @@ export default {
|
|||
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 10px 0;
|
||||
margin-left: -30px; // padding: 10px 36px;
|
||||
// margin-left: -30px; // padding: 10px 36px;
|
||||
// transform: translate(-72px, 0);
|
||||
}
|
||||
|
||||
|
|
@ -813,7 +889,41 @@ export default {
|
|||
.page_btm_c {
|
||||
flex: 1;
|
||||
padding: 0 40px;
|
||||
padding-right: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* New hover effects for main menu items and user menu trigger */
|
||||
.page_btm_c > .fHeigh,
|
||||
.page_btm_r .page_btm_r1.fHeigh {
|
||||
/* position: relative; is already on .fHeigh via .page_btm .fHeigh */
|
||||
}
|
||||
|
||||
.page_btm_c > .fHeigh::before,
|
||||
.page_btm_r .page_btm_r1.fHeigh::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
width: 0; /* Initial width for animation */
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
opacity: 0; /* Initial opacity for animation */
|
||||
transform: translateX(-50%);
|
||||
transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
z-index: -1; /* Behind the text */
|
||||
border-radius: 8px; /* Match submenu border-radius */
|
||||
}
|
||||
|
||||
.page_btm_c > .fHeigh:hover::before,
|
||||
.page_btm_r .page_btm_r1.fHeigh:hover::before {
|
||||
width: 200px; /* Target width matching submenus */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.page_btm_c > .fHeigh:hover,
|
||||
.page_btm_r .page_btm_r1.fHeigh:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,8 +102,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.area-product-list {
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
padding: 0 20px 0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
|
|
@ -115,10 +114,10 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
height: 46px;
|
||||
padding: 10px 0 10px;
|
||||
height: 36px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
|
|
@ -166,15 +165,16 @@ export default {
|
|||
}
|
||||
|
||||
.product-item {
|
||||
width: 20%;
|
||||
padding: 0 10px;
|
||||
width: 33%;
|
||||
padding: 0 10px 8px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -186,6 +186,11 @@ export default {
|
|||
background-color: #f5f5f5;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.product-item:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.product-info {
|
||||
|
|
|
|||
|
|
@ -400,15 +400,6 @@ const routes = [
|
|||
component: () => import("@/views/login.vue"),
|
||||
},
|
||||
|
||||
//成长之路
|
||||
{
|
||||
path: "/roadtoGrowth",
|
||||
name: "RoadtoGrowth",
|
||||
component: () => import("@/views/roadtoGrowth/index.vue"),
|
||||
meta: {
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
//乡村振兴礼包
|
||||
{
|
||||
path: "/spaceMallList",
|
||||
|
|
|
|||
|
|
@ -10,24 +10,41 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="nameCountry">
|
||||
<div class="username">{{ userInfo.memberName }}</div>
|
||||
<img :src="userInfo.countrySquareIcon" alt="" />
|
||||
<div class="username">{{ userInfo.memberCode }}</div>
|
||||
<div v-if="userExtraInfo.registerAuthorityVal" class="authority-badge">
|
||||
{{ userExtraInfo.registerAuthorityVal }}
|
||||
</div>
|
||||
<!-- <div class="username">{{ userData.registerAuthorityVal }}</div> -->
|
||||
<!-- <img :src="userInfo.countrySquareIcon" alt="" /> -->
|
||||
</div>
|
||||
<!-- 如果是0表示没有奖衔 只显示等级徽章!-->
|
||||
<div class="gradeClass">
|
||||
<img
|
||||
@error="defaultSrc"
|
||||
v-if="userInfo.gradeIcon || defaultSrc == true"
|
||||
@click="goRouter(1)"
|
||||
:src="userInfo.gradeIcon"
|
||||
alt=""
|
||||
/>
|
||||
<div class="user-level-info">
|
||||
<div class="honor_wrapper">
|
||||
<div class="honor1">
|
||||
<div class="honor-title-wrapper">
|
||||
<div>结算等级</div>
|
||||
<div class="honor-title">{{ userInfo.pkGradeVal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="honor_wrapper">
|
||||
<div class="honor1">
|
||||
<div class="honor-title-wrapper">
|
||||
<div>荣誉奖衔</div>
|
||||
<div class="honor-title">{{ userInfo.pkAwardsVal }}</div>
|
||||
<div
|
||||
class="honor-title"
|
||||
:class="{
|
||||
'is-empty-awards':
|
||||
!userInfo.pkAwardsVal || userInfo.pkAwardsVal === '无',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
userInfo.pkAwardsVal && userInfo.pkAwardsVal !== "无"
|
||||
? userInfo.pkAwardsVal
|
||||
: "无"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -147,6 +164,7 @@
|
|||
|
||||
<script>
|
||||
import * as sid from "@/api/sidebaruserinfo.js";
|
||||
import { memberInfo } from "@/api/person.js";
|
||||
import { mapGetters } from "vuex";
|
||||
import user from "@/store/modules/user";
|
||||
export default {
|
||||
|
|
@ -168,17 +186,24 @@ export default {
|
|||
intervalTimer: "",
|
||||
toLiveBtn: "",
|
||||
isHandImg: true,
|
||||
userExtraInfo: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.countdown();
|
||||
this.getUserAwards();
|
||||
this.getMemberInfo();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
clearInterval(this.intervalTimer);
|
||||
},
|
||||
methods: {
|
||||
getMemberInfo() {
|
||||
memberInfo().then((res) => {
|
||||
this.userExtraInfo = res.data;
|
||||
});
|
||||
},
|
||||
clickTap() {
|
||||
this.$router.push({
|
||||
path: "/personal",
|
||||
|
|
@ -319,23 +344,17 @@ export default {
|
|||
.username {
|
||||
font-size: 22px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
img {
|
||||
width: 39px;
|
||||
height: 26px;
|
||||
font-weight: bold;
|
||||
color: #b8860b;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
.gradeClass {
|
||||
.user-level-info {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
img {
|
||||
width: 55px;
|
||||
//height: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.create-time {
|
||||
|
|
@ -493,11 +512,71 @@ 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
|
||||
}
|
||||
}
|
||||
.honor-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
font-weight: 700; // Bolder
|
||||
font-size: 20px; // Larger font size
|
||||
color: #333; // Darker color for prominence
|
||||
}
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authority-badge {
|
||||
display: inline-block;
|
||||
position: relative; // Needed for pseudo-element positioning
|
||||
padding: 4px 10px;
|
||||
font-size: 13px; // Slightly increased font size
|
||||
font-weight: bold;
|
||||
color: #4a3b31; // Dark brown text color for better contrast
|
||||
background: linear-gradient(
|
||||
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
|
||||
cursor: default; // Optional: change cursor to indicate it's not a button
|
||||
}
|
||||
|
||||
.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
|
||||
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
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -120%; // Adjusted to ensure the wider shine starts fully off-screen
|
||||
}
|
||||
50% {
|
||||
left: 120%; // Move across the badge
|
||||
}
|
||||
100% {
|
||||
left: 120%; // Stay off-screen to the right before resetting
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -166,14 +166,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">
|
||||
<specialAreaList
|
||||
<div v-if="areaGoodsList.length > 0" style="margin-top: 15px">
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
:span="12"
|
||||
v-for="(item, index) in areaGoodsList"
|
||||
:key="index"
|
||||
>
|
||||
<specialAreaList
|
||||
:list="item.waresList"
|
||||
:title="item.specialAreaName"
|
||||
:specialAreaId="item.specialArea"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- <div style="height: 300px"></div> -->
|
||||
</div>
|
||||
|
|
@ -392,7 +398,7 @@ export default {
|
|||
});
|
||||
this.dialogVisible = false;
|
||||
})
|
||||
.catch((err) => {});
|
||||
.catch(() => {});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -404,10 +410,10 @@ export default {
|
|||
if (valid) {
|
||||
this.startTime();
|
||||
forgetSms(this.loginObj)
|
||||
.then((res) => {
|
||||
.then(() => {
|
||||
// this.bankCode = res.data
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(() => {
|
||||
this.beginTime = 0;
|
||||
});
|
||||
} else {
|
||||
|
|
@ -426,7 +432,6 @@ export default {
|
|||
if (this.isSend) return;
|
||||
this.isSend = true;
|
||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||
let that = this;
|
||||
this.timer = setInterval(() => {
|
||||
this.beginTime--;
|
||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||
|
|
@ -628,13 +633,12 @@ html,
|
|||
font-size: 18px;
|
||||
}
|
||||
.add-target {
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 7px 5px 10px 0px rgba(59, 59, 59, 0.14);
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background-color: #fff;
|
||||
// height: 580px;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
margin-top: 15px;
|
||||
width: 1040px;
|
||||
}
|
||||
.target {
|
||||
|
|
|
|||
|
|
@ -1506,6 +1506,8 @@ export default {
|
|||
|
||||
.padRow {
|
||||
padding: 0 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
::v-deep .el-input__suffix {
|
||||
|
|
|
|||
|
|
@ -1,329 +0,0 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="toproad">
|
||||
<div class="topimg"><img :src="theData.thisAvatarUrl" alt="" /></div>
|
||||
|
||||
<template v-if="ifindex == 1">
|
||||
<div class="roadtitle" :style="{ color: theData.color }">
|
||||
{{ theData.thisGradeName }}
|
||||
</div>
|
||||
<div class="thecode">{{'全球编码'}} {{ theData.globalCode }}</div>
|
||||
<div class="thecode">{{'国家编码'}} {{ theData.countryCode }}</div>
|
||||
<!-- <div class="thecode">全球编号 {{ theData.memberCode }}</div>
|
||||
<div class="thepv">累计业绩：{{ theData.achievement }}</div>
|
||||
<div class="themember">
|
||||
尊敬的会员 {{ theData.memberName }} 欢迎您！
|
||||
</div> -->
|
||||
</template>
|
||||
<template v-if="ifindex == 2">
|
||||
<div class="roadtitle">{{ theData.thisAwardsName }}</div>
|
||||
<!-- <div class="thepv">累计业绩：{{ theData.achievement }}</div>
|
||||
<div></div> -->
|
||||
</template>
|
||||
</div>
|
||||
<div class="awards-content" v-if="ifindex==2">
|
||||
<div class="awards-list" v-for="(item,index) in theData.awardsList">
|
||||
<div class="awards-img" v-if="item.image">
|
||||
<img :src="item.image" >
|
||||
</div>
|
||||
<div class="award-name">{{ item.awardsName }}</div>
|
||||
<!-- {{item.awardsValue*index}}-->
|
||||
<div class="height" :style="{height:item.awardsValue*index+200+'px',background:item.color}">
|
||||
<div class="price">{{item.communityCheckStr}}PV</div>
|
||||
|
||||
<div class="bottom" :style="{fontSize:item.size}" v-if="item.textContent && index>=5 && item.awardsValue>=15" >{{ item.textContent }}</div>
|
||||
<div class="bottom bottom-s" :style="{fontSize:item.size}" v-if="item.textContent && index<5 && item.awardsValue>=15" >{{ item.textContent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart" id="mychart" v-if="ifindex==1" :style="myChartStyle"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import * as gro from "@/api/wallet.js";
|
||||
export default {
|
||||
name: "RoadtoGrowth",
|
||||
data() {
|
||||
return {
|
||||
ifindex: "", //1等级2奖衔
|
||||
thexAxis: [],
|
||||
iconList: [],
|
||||
myChart: {},
|
||||
myChartStyle: {
|
||||
float: "center",
|
||||
width: "1800px",
|
||||
height: "600px",
|
||||
paddingTop: "20px",
|
||||
// margin: "20px",
|
||||
}, //图表样式
|
||||
indexList: [], //高度
|
||||
theData: {},
|
||||
textList:[],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initEcharts();
|
||||
this.ifindex = this.$route.query.index;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
if (this.$route.query.index == 1) {
|
||||
gro.getGrowUpGrade().then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.theData = res.data;
|
||||
res.data.gradeList.forEach((ele) => {
|
||||
this.thexAxis.push(ele.gradeName);
|
||||
ele.value = ele.gradeValue;
|
||||
ele.symbol = "image://" + ele.image;
|
||||
ele.symbolSize = [90, 80];
|
||||
|
||||
this.indexList.push(ele.gradeValue);
|
||||
});
|
||||
this.iconList = res.data.gradeList;
|
||||
this.initEcharts();
|
||||
}
|
||||
});
|
||||
} else if (this.$route.query.index == 2) {
|
||||
gro.getGrowUpAwards().then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.theData = res.data;
|
||||
res.data.awardsList.forEach((ele,index) => {
|
||||
if(index==3 || index==4){
|
||||
ele.size = '28px'
|
||||
}
|
||||
if(index>=5){
|
||||
let size = 24
|
||||
ele.size = size+(index*2)+'px'
|
||||
}
|
||||
this.thexAxis.push(ele.awardsName);
|
||||
ele.value = ele.awardsValue + 10;
|
||||
ele.symbol = "image://" + ele.image;
|
||||
ele.symbolSize = [110, 80];
|
||||
|
||||
this.indexList.push(ele.awardsValue);
|
||||
});
|
||||
this.iconList = res.data.awardsList;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
initEcharts() {
|
||||
const globalIndex = this.$route.query.index;
|
||||
const option = {
|
||||
grid: {
|
||||
// bottom:140,
|
||||
// // 距离左方轴数值
|
||||
// x: 248,
|
||||
// // y:200,
|
||||
// x2: 264,
|
||||
// // 距离下方轴数值
|
||||
// // y2: 120,
|
||||
// containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
data: this.thexAxis,
|
||||
show: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
width: 5,
|
||||
fontSize: "18px",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
padding: [14, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
max: 80,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: "100",
|
||||
data: this.iconList,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
fontSize: 16,
|
||||
color: "#000",
|
||||
formatter: function (params) {
|
||||
// console.log('🌈',params)
|
||||
// var inner =
|
||||
// params.data.thename)
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 8,
|
||||
|
||||
color: function (param) {
|
||||
const color = param.data.color;
|
||||
return color;
|
||||
},
|
||||
},
|
||||
paddingTop: 20,
|
||||
borderRadius: 8,
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "red", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "yellow", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "pictorialBar",
|
||||
barGap: "100%",
|
||||
symbolPosition: "end",
|
||||
// symbolSize: 20,
|
||||
symbolOffset: [0, "-150%"],
|
||||
data: this.iconList,
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
position:"insideTop",
|
||||
offset:[0,130],
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
align: "center",
|
||||
formatter: function (params) {
|
||||
if (globalIndex == 2) {
|
||||
var inner =params.data.communityCheckStr ;
|
||||
}
|
||||
if (globalIndex == 1) {
|
||||
var inner = Number(params.data.startValue);
|
||||
}
|
||||
return inner;
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const myChart = echarts.init(document.getElementById("mychart"));
|
||||
myChart.setOption(option);
|
||||
//随着屏幕大小调节图表
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.awards-list:nth-child(1){
|
||||
margin-top: 110px !important;
|
||||
}
|
||||
.bottom-s{
|
||||
color: #fff;
|
||||
width: 50px !important;
|
||||
font-size: 24px !important;
|
||||
bottom: 0;
|
||||
}
|
||||
.bottom{
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 44px;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.award-name{
|
||||
text-align: center;
|
||||
}
|
||||
.height{
|
||||
border-radius: 8px;
|
||||
width: 110px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.price{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.awards-img{
|
||||
img{
|
||||
width: 124px;
|
||||
height: 109px;
|
||||
}
|
||||
}
|
||||
.awards-list{
|
||||
margin-left:30px;
|
||||
position: relative;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
.awards-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
|
||||
}
|
||||
.page {
|
||||
padding: 20px;
|
||||
.toproad {
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
padding: 50px 0;
|
||||
.topimg {
|
||||
img {
|
||||
width: 190px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
.roadtitle {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
// line-height: 34px;
|
||||
}
|
||||
.thecode {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
color: #666666;
|
||||
}
|
||||
.thepv {
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
// line-height: 16px;
|
||||
}
|
||||
.themember {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue