feat(global): 全局样式调整
This commit is contained in:
woody
parent
4e877a1ea0
commit
3756238278
|
|
@ -37,37 +37,41 @@
|
||||||
@mouseleave="removeActive(1)"
|
@mouseleave="removeActive(1)"
|
||||||
>
|
>
|
||||||
会员专区<i class="el-icon-arrow-down"></i>
|
会员专区<i class="el-icon-arrow-down"></i>
|
||||||
<div class="aBsolt" v-show="vipShow">
|
<transition name="fade-slide">
|
||||||
<div
|
<div class="aBsolt" v-show="vipShow">
|
||||||
v-for="item in zoneList"
|
|
||||||
class="aBsolt_iu"
|
|
||||||
:key="item.value"
|
|
||||||
v-show="item.isShow"
|
|
||||||
@mouseover="childrenActive(item.value)"
|
|
||||||
@mouseleave="childrenRemActive(item.value)"
|
|
||||||
@click="openZone(item)"
|
|
||||||
>
|
|
||||||
<div class="aBsolt_ii">{{ item.label }}</div>
|
|
||||||
<div
|
<div
|
||||||
class="aBsolt_c"
|
v-for="item in zoneList"
|
||||||
v-if="
|
class="aBsolt_iu"
|
||||||
childShow == item.value &&
|
:key="item.value"
|
||||||
item.children &&
|
v-show="item.isShow"
|
||||||
item.children.length > 0
|
@mouseover="childrenActive(item.value)"
|
||||||
"
|
@mouseleave="childrenRemActive()"
|
||||||
|
@click="openZone(item)"
|
||||||
>
|
>
|
||||||
<div
|
<div class="aBsolt_ii">{{ item.label }}</div>
|
||||||
v-for="ctem in item.children"
|
<transition name="fade-slide">
|
||||||
class="aBsolt_ic"
|
<div
|
||||||
:key="ctem.value"
|
class="aBsolt_c"
|
||||||
v-show="ctem.isShow"
|
v-if="
|
||||||
@click.stop="openZone(item, ctem)"
|
childShow == item.value &&
|
||||||
>
|
item.children &&
|
||||||
{{ ctem.label }}
|
item.children.length > 0
|
||||||
</div>
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="ctem in item.children"
|
||||||
|
class="aBsolt_ic"
|
||||||
|
:key="ctem.value"
|
||||||
|
v-show="ctem.isShow"
|
||||||
|
@click.stop="openZone(item, ctem)"
|
||||||
|
>
|
||||||
|
{{ ctem.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="fHeigh"
|
class="fHeigh"
|
||||||
|
|
@ -76,17 +80,19 @@
|
||||||
@mouseleave="removeActive(2)"
|
@mouseleave="removeActive(2)"
|
||||||
>
|
>
|
||||||
{{ "市场动态" }} <i class="el-icon-arrow-down"></i>
|
{{ "市场动态" }} <i class="el-icon-arrow-down"></i>
|
||||||
<div class="aBsolt" v-show="marketShow">
|
<transition name="fade-slide">
|
||||||
<div
|
<div class="aBsolt" v-show="marketShow">
|
||||||
v-for="item in marketList"
|
<div
|
||||||
class="aBsolt_i"
|
v-for="item in marketList"
|
||||||
:key="item.id"
|
class="aBsolt_i"
|
||||||
v-show="item.isShow"
|
:key="item.id"
|
||||||
@click="openPage1(item)"
|
v-show="item.isShow"
|
||||||
>
|
@click="openPage1(item)"
|
||||||
{{ item.text }}
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="fHeigh"
|
class="fHeigh"
|
||||||
|
|
@ -95,17 +101,19 @@
|
||||||
@mouseleave="removeActive(3)"
|
@mouseleave="removeActive(3)"
|
||||||
>
|
>
|
||||||
{{ "会员中心" }} <i class="el-icon-arrow-down"></i>
|
{{ "会员中心" }} <i class="el-icon-arrow-down"></i>
|
||||||
<div class="aBsolt" v-show="vipcShow">
|
<transition name="fade-slide">
|
||||||
<div
|
<div class="aBsolt" v-show="vipcShow">
|
||||||
v-for="item in vipList"
|
<div
|
||||||
class="aBsolt_i"
|
v-for="item in vipList"
|
||||||
:key="item.id"
|
class="aBsolt_i"
|
||||||
v-show="item.isShow"
|
:key="item.id"
|
||||||
@click="openPage(item)"
|
v-show="item.isShow"
|
||||||
>
|
@click="openPage(item)"
|
||||||
{{ item.text }}
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page_btm_r">
|
<div class="page_btm_r">
|
||||||
|
|
@ -121,52 +129,54 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- v-show="memberShow" -->
|
<!-- v-show="memberShow" -->
|
||||||
<div
|
<transition name="fade-slide">
|
||||||
class="aBsolts"
|
<div
|
||||||
v-show="memberShow"
|
class="aBsolts"
|
||||||
@mouseover="changeActive(4)"
|
v-show="memberShow"
|
||||||
@mouseleave="removeActive(4)"
|
@mouseover="changeActive(4)"
|
||||||
>
|
@mouseleave="removeActive(4)"
|
||||||
<div class="aBsolt_i disflex cen" @click="goPersonInfo(1)">
|
>
|
||||||
<img
|
<div class="aBsolt_i disflex cen" @click="goPersonInfo(1)">
|
||||||
class="hImg"
|
<img
|
||||||
:src="
|
class="hImg"
|
||||||
userInfo.headPath
|
:src="
|
||||||
? userInfo.headPath
|
userInfo.headPath
|
||||||
: userInfo.settleCountrySquareIcon
|
? userInfo.headPath
|
||||||
|
: userInfo.settleCountrySquareIcon
|
||||||
|
"
|
||||||
|
alt=""
|
||||||
|
/>{{ userInfo.memberName }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 170px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #999;
|
||||||
|
margin: 10px auto;
|
||||||
"
|
"
|
||||||
alt=""
|
></div>
|
||||||
/>{{ userInfo.memberName }}
|
<div class="aBsolt_i" @click="goPersonInfo(0)">
|
||||||
|
{{ "个人资料" }}
|
||||||
|
</div>
|
||||||
|
<div class="aBsolt_i" @click="goPersonInfo(2)">
|
||||||
|
{{ "账号安全" }}
|
||||||
|
</div>
|
||||||
|
<div class="aBsolt_i" @click="goPersonInfo(4)">
|
||||||
|
{{ "地址管理" }}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="aBsolt_i"
|
||||||
|
@click="goPersonInfo(3)">商城积分</div> -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 170px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #999;
|
||||||
|
margin: 10px auto;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div class="aBsolt_i" @click="logout">{{ "退出登录" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</transition>
|
||||||
style="
|
|
||||||
width: 170px;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #999;
|
|
||||||
margin: 10px auto;
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div class="aBsolt_i" @click="goPersonInfo(0)">
|
|
||||||
{{ "个人资料" }}
|
|
||||||
</div>
|
|
||||||
<div class="aBsolt_i" @click="goPersonInfo(2)">
|
|
||||||
{{ "账号安全" }}
|
|
||||||
</div>
|
|
||||||
<div class="aBsolt_i" @click="goPersonInfo(4)">
|
|
||||||
{{ "地址管理" }}
|
|
||||||
</div>
|
|
||||||
<!-- <div class="aBsolt_i"
|
|
||||||
@click="goPersonInfo(3)">商城积分</div> -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 170px;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #999;
|
|
||||||
margin: 10px auto;
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div class="aBsolt_i" @click="logout">{{ "退出登录" }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -537,7 +547,7 @@ export default {
|
||||||
this.$set(this, "childShow", id);
|
this.$set(this, "childShow", id);
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
childrenRemActive(id) {
|
childrenRemActive() {
|
||||||
this.$set(this, "childShow", 0);
|
this.$set(this, "childShow", 0);
|
||||||
},
|
},
|
||||||
//鼠标移入
|
//鼠标移入
|
||||||
|
|
@ -601,6 +611,22 @@ export default {
|
||||||
right: 0px;
|
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 {
|
.size-s {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
|
|
@ -625,16 +651,39 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 44px;
|
|
||||||
padding: 5px 60px;
|
padding: 5px 60px;
|
||||||
background: #cccccc;
|
background: #ffffff;
|
||||||
color: #333333;
|
border-bottom: 1px solid #e9ecef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_top_l {
|
.page_top_l {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #333;
|
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 {
|
.page_top_r {
|
||||||
|
|
@ -643,12 +692,30 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
height: 44px;
|
|
||||||
|
|
||||||
div {
|
div {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #333;
|
color: #4a5568;
|
||||||
font-size: 18px;
|
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;
|
height: 63px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
background: rgba(24, 24, 24, 0.84);
|
background: #2d3748;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
||||||
.fHeigh {
|
.fHeigh {
|
||||||
|
|
@ -667,6 +734,7 @@ export default {
|
||||||
line-height: 63px;
|
line-height: 63px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_btm_l {
|
.page_btm_l {
|
||||||
|
|
@ -693,6 +761,14 @@ export default {
|
||||||
|
|
||||||
.page_btm_r1 {
|
.page_btm_r1 {
|
||||||
margin-right: 20px;
|
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 {
|
.page_btm_r2 {
|
||||||
|
|
@ -711,13 +787,13 @@ export default {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||||||
border-radius: 8px 8px 8px 8px;
|
border-radius: 8px 8px 8px 8px;
|
||||||
padding: 10px 0; // padding: 10px 36px;
|
padding: 10px 0; // padding: 10px 36px;
|
||||||
transform: translate(-62px, 0);
|
transform: translate(-52px, 0);
|
||||||
// bottom: 0;
|
// bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aBsolts {
|
.aBsolts {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
transform: translateX(0);
|
transform: translateX(-10px);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
@ -726,7 +802,7 @@ export default {
|
||||||
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||||||
border-radius: 8px 8px 8px 8px;
|
border-radius: 8px 8px 8px 8px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
margin-left: -30px; // padding: 10px 36px;
|
// margin-left: -30px; // padding: 10px 36px;
|
||||||
// transform: translate(-72px, 0);
|
// transform: translate(-72px, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -813,7 +889,41 @@ export default {
|
||||||
.page_btm_c {
|
.page_btm_c {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
padding-right: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -102,8 +102,7 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.area-product-list {
|
.area-product-list {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 20px;
|
padding: 0 20px 0;
|
||||||
padding-top: 0;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -115,10 +114,10 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 20px 0;
|
padding: 10px 0 10px;
|
||||||
height: 46px;
|
height: 36px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -166,15 +165,16 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-item {
|
.product-item {
|
||||||
width: 20%;
|
width: 33%;
|
||||||
padding: 0 10px;
|
padding: 0 10px 8px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -186,6 +186,11 @@ export default {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item:hover .product-image {
|
||||||
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-info {
|
.product-info {
|
||||||
|
|
|
||||||
|
|
@ -400,15 +400,6 @@ const routes = [
|
||||||
component: () => import("@/views/login.vue"),
|
component: () => import("@/views/login.vue"),
|
||||||
},
|
},
|
||||||
|
|
||||||
//成长之路
|
|
||||||
{
|
|
||||||
path: "/roadtoGrowth",
|
|
||||||
name: "RoadtoGrowth",
|
|
||||||
component: () => import("@/views/roadtoGrowth/index.vue"),
|
|
||||||
meta: {
|
|
||||||
keepAlive: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
//乡村振兴礼包
|
//乡村振兴礼包
|
||||||
{
|
{
|
||||||
path: "/spaceMallList",
|
path: "/spaceMallList",
|
||||||
|
|
|
||||||
|
|
@ -10,24 +10,41 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="nameCountry">
|
<div class="nameCountry">
|
||||||
<div class="username">{{ userInfo.memberName }}</div>
|
<div class="username">{{ userInfo.memberCode }}</div>
|
||||||
<img :src="userInfo.countrySquareIcon" alt="" />
|
<div v-if="userExtraInfo.registerAuthorityVal" class="authority-badge">
|
||||||
|
{{ userExtraInfo.registerAuthorityVal }}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="username">{{ userData.registerAuthorityVal }}</div> -->
|
||||||
|
<!-- <img :src="userInfo.countrySquareIcon" alt="" /> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- 如果是0表示没有奖衔 只显示等级徽章!-->
|
<!-- 如果是0表示没有奖衔 只显示等级徽章!-->
|
||||||
<div class="gradeClass">
|
<div class="user-level-info">
|
||||||
<img
|
<div class="honor_wrapper">
|
||||||
@error="defaultSrc"
|
<div class="honor1">
|
||||||
v-if="userInfo.gradeIcon || defaultSrc == true"
|
<div class="honor-title-wrapper">
|
||||||
@click="goRouter(1)"
|
<div>结算等级</div>
|
||||||
:src="userInfo.gradeIcon"
|
<div class="honor-title">{{ userInfo.pkGradeVal }}</div>
|
||||||
alt=""
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="honor_wrapper">
|
<div class="honor_wrapper">
|
||||||
<div class="honor1">
|
<div class="honor1">
|
||||||
<div class="honor-title-wrapper">
|
<div class="honor-title-wrapper">
|
||||||
<div>荣誉奖衔</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -147,6 +164,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as sid from "@/api/sidebaruserinfo.js";
|
import * as sid from "@/api/sidebaruserinfo.js";
|
||||||
|
import { memberInfo } from "@/api/person.js";
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
import user from "@/store/modules/user";
|
import user from "@/store/modules/user";
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -168,17 +186,24 @@ export default {
|
||||||
intervalTimer: "",
|
intervalTimer: "",
|
||||||
toLiveBtn: "",
|
toLiveBtn: "",
|
||||||
isHandImg: true,
|
isHandImg: true,
|
||||||
|
userExtraInfo: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.countdown();
|
this.countdown();
|
||||||
this.getUserAwards();
|
this.getUserAwards();
|
||||||
|
this.getMemberInfo();
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
clearInterval(this.intervalTimer);
|
clearInterval(this.intervalTimer);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getMemberInfo() {
|
||||||
|
memberInfo().then((res) => {
|
||||||
|
this.userExtraInfo = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
clickTap() {
|
clickTap() {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/personal",
|
path: "/personal",
|
||||||
|
|
@ -319,23 +344,17 @@ export default {
|
||||||
.username {
|
.username {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
font-weight: bold;
|
||||||
img {
|
color: #b8860b;
|
||||||
width: 39px;
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
height: 26px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gradeClass {
|
.user-level-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-top: 20px;
|
margin-top: 16px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
img {
|
|
||||||
width: 55px;
|
|
||||||
//height: 45px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.create-time {
|
.create-time {
|
||||||
|
|
@ -493,11 +512,71 @@ export default {
|
||||||
|
|
||||||
.honor-title-wrapper {
|
.honor-title-wrapper {
|
||||||
flex: 1;
|
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 {
|
.honor-title {
|
||||||
font-weight: 600;
|
font-weight: 700; // Bolder
|
||||||
font-size: 18px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -166,14 +166,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 20px">
|
<div v-if="areaGoodsList.length > 0" style="margin-top: 15px">
|
||||||
<specialAreaList
|
<el-row :gutter="20">
|
||||||
v-for="(item, index) in areaGoodsList"
|
<el-col
|
||||||
:key="index"
|
:span="12"
|
||||||
:list="item.waresList"
|
v-for="(item, index) in areaGoodsList"
|
||||||
:title="item.specialAreaName"
|
:key="index"
|
||||||
:specialAreaId="item.specialArea"
|
>
|
||||||
/>
|
<specialAreaList
|
||||||
|
:list="item.waresList"
|
||||||
|
:title="item.specialAreaName"
|
||||||
|
:specialAreaId="item.specialArea"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div style="height: 300px"></div> -->
|
<!-- <div style="height: 300px"></div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -392,7 +398,7 @@ export default {
|
||||||
});
|
});
|
||||||
this.dialogVisible = false;
|
this.dialogVisible = false;
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch(() => {});
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
@ -404,10 +410,10 @@ export default {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.startTime();
|
this.startTime();
|
||||||
forgetSms(this.loginObj)
|
forgetSms(this.loginObj)
|
||||||
.then((res) => {
|
.then(() => {
|
||||||
// this.bankCode = res.data
|
// this.bankCode = res.data
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(() => {
|
||||||
this.beginTime = 0;
|
this.beginTime = 0;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -426,7 +432,6 @@ export default {
|
||||||
if (this.isSend) return;
|
if (this.isSend) return;
|
||||||
this.isSend = true;
|
this.isSend = true;
|
||||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||||
let that = this;
|
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
this.beginTime--;
|
this.beginTime--;
|
||||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||||
|
|
@ -628,13 +633,12 @@ html,
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.add-target {
|
.add-target {
|
||||||
padding: 20px;
|
padding: 10px 20px;
|
||||||
box-shadow: 7px 5px 10px 0px rgba(59, 59, 59, 0.14);
|
box-shadow: 7px 5px 10px 0px rgba(59, 59, 59, 0.14);
|
||||||
border-radius: 10px 10px 10px 10px;
|
border-radius: 10px 10px 10px 10px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
// height: 580px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 20px;
|
margin-top: 15px;
|
||||||
width: 1040px;
|
width: 1040px;
|
||||||
}
|
}
|
||||||
.target {
|
.target {
|
||||||
|
|
|
||||||
|
|
@ -1506,6 +1506,8 @@ export default {
|
||||||
|
|
||||||
.padRow {
|
.padRow {
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-input__suffix {
|
::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