huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

工作台：px->vw

jiangcheng/feature-20260402142510-现金四期
ZhangYong 2 weeks ago
parent
99b4336a67
commit
90697620f4
2 changed files with 82 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/components/workspace/CashManagement.vue
  2. 114
      src/components/workspace/GoldManagement.vue

50
src/components/workspace/CashManagement.vue
View File

@ -17,9 +17,9 @@
<el-icon <el-icon
class="service-icon" class="service-icon"
style=" style="
margin-left: 5px;
margin-left: .2604vw;
cursor: pointer; cursor: pointer;
font-size: 16px;
font-size: .8333vw;
transition: all 0.3s ease;"> transition: all 0.3s ease;">
<Warning/> <Warning/>
</el-icon> </el-icon>
@ -270,12 +270,12 @@ onMounted( async() => {
<style scoped> <style scoped>
/* 保留你原来的样式 */ /* 保留你原来的样式 */
.cash-management { .cash-management {
margin: 10px 5px;
margin: .5208vw .2604vw;
width: 100%; width: 100%;
height: 550px;
border-radius: 8px;
height: 28.6458vw;
border-radius: .4167vw;
background: #E7F4FD; background: #E7F4FD;
box-shadow: 0 2px 2px 0 #00000040;
box-shadow: 0 .1042vw .1042vw 0 #00000040;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -285,9 +285,9 @@ onMounted( async() => {
width: 100%; width: 100%;
height: 5vh; height: 5vh;
flex-shrink: 0; flex-shrink: 0;
border-radius: 8px;
border-radius: .4167vw;
background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%); background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
box-shadow: 0 .1042vw .1042vw 0 #00152940;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -296,25 +296,25 @@ onMounted( async() => {
.text1 { .text1 {
color: #040a2d; color: #040a2d;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 28px;
font-size: 1.4583vw;
font-weight: 900; font-weight: 900;
} }
.text1-update-time { .text1-update-time {
margin-left: 10px;
margin-left: .5208vw;
color: #040a2d; color: #040a2d;
font-size: 20px;
font-size: 1.0417vw;
font-weight: 700; font-weight: 700;
} }
.text2 { .text2 {
margin: 13px;
margin: .6771vw;
width: 95%; width: 95%;
height: 10vh; height: 10vh;
border-radius: 8px;
border-radius: .4167vw;
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%); background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
box-shadow: 0 .1042vw .1042vw 0 #00152940;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -322,7 +322,7 @@ onMounted( async() => {
.text2-income { .text2-income {
color: #040a2d; color: #040a2d;
font-size: 40px;
font-size: 2.0833vw;
font-weight: 900; font-weight: 900;
} }
@ -331,17 +331,17 @@ onMounted( async() => {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px;
padding: .5208vw;
} }
.market-data { .market-data {
display: flex; display: flex;
width: 265px;
width: 13.8021vw;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 20px;
padding: 10px;
margin-left: 20px;
gap: 1.0417vw;
padding: .5208vw;
margin-left: 1.0417vw;
} }
.market-item { .market-item {
@ -349,18 +349,18 @@ onMounted( async() => {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 16px;
font-size: .8333vw;
color: #040a2d; color: #040a2d;
white-space: nowrap; /* 禁止换行 */ white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */ overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */ text-overflow: ellipsis; /* 溢出显示省略号 */
margin-bottom: 8px; /* 增加项间距，提升可读性 */
margin-bottom: .4167vw; /* 增加项间距，提升可读性 */
cursor: pointer; cursor: pointer;
} }
.market-name { .market-name {
flex: 0 0 auto; /* 名称部分自适应宽度 */ flex: 0 0 auto; /* 名称部分自适应宽度 */
margin-right: 16px; /* 与金额保持距离 */
margin-right: .8333vw; /* 与金额保持距离 */
} }
.market-value { .market-value {
@ -370,9 +370,9 @@ onMounted( async() => {
.chart { .chart {
flex: 1; flex: 1;
height: 300px;
height: 15.625vw;
width: auto; width: auto;
margin-top: 10px;
margin-top: .5208vw;
} }
</style> </style>

114
src/components/workspace/GoldManagement.vue
View File

@ -20,13 +20,13 @@
}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ t('workbench.compareToPreviousDay') }} }}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ t('workbench.compareToPreviousDay') }}
{{ dailyChange / 100 }}&nbsp; {{ dailyChange / 100 }}&nbsp;
<template v-if="dailyChange > 0"> <template v-if="dailyChange > 0">
<el-image :src="upArrow" style="width: 14px;"/>
<el-image :src="upArrow" style="width: .7292vw;"/>
</template> </template>
<template v-else-if="dailyChange < 0"> <template v-else-if="dailyChange < 0">
<el-image :src="downArrow" style="width: 14px;"/>
<el-image :src="downArrow" style="width: .7292vw;"/>
</template> </template>
<template v-else> <template v-else>
<el-image :src="pingArrow" style="width: 14px; padding-top: 12px"/>
<el-image :src="pingArrow" style="width: .7292vw; padding-top: .625vw"/>
</template> </template>
</div> </div>
<div> <div>
@ -50,8 +50,8 @@
</el-col> </el-col>
<!-- 右边图表 --> <!-- 右边图表 -->
<el-col :span="12"> <el-col :span="12">
<!-- <div ref="goldTypeChart" style="width: 100%; height: 100px;"></div>-->
<div style="width: 100%; height: 60px;">&nbsp;</div>
<!-- <div ref="goldTypeChart" style="width: 100%; height: 5.2083vw;"></div>-->
<div style="width: 100%; height: 3.125vw;">&nbsp;</div>
<div class="margin-bottom"> <div class="margin-bottom">
[{{ t('workbench.goldExpireIn12Months')}}{{ currentFreeDecember / 100 }}] [{{ t('workbench.goldExpireIn12Months')}}{{ currentFreeDecember / 100 }}]
</div> </div>
@ -68,12 +68,12 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div class="center-card">{{ t('workbench.convertedSGDCumulativeAmount') }}</div> <div class="center-card">{{ t('workbench.convertedSGDCumulativeAmount') }}</div>
<el-image :src="svg1" style="width: 88px; display: block;margin: 0 auto;"/>
<el-image :src="svg1" style="width: 4.5833vw; display: block;margin: 0 auto;"/>
<div class="center-card">{{ yearlyMoney / 100 }}{{ t('workbench.SGD') }}</div> <div class="center-card">{{ yearlyMoney / 100 }}{{ t('workbench.SGD') }}</div>
</el-col> </el-col>
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 160px">
<el-col :span="12" style="border-left: .1042vw solid #CFE6FE; height: 8.3333vw">
<div class="center-card" style="white-space: nowrap;">{{ t('workbench.yesterdayNew')}}{{ recharge / 100 }}</div> <div class="center-card" style="white-space: nowrap;">{{ t('workbench.yesterdayNew')}}{{ recharge / 100 }}</div>
<div ref="rechargeGoldChart" style="width: 88px; height: 88px; display: block;margin: 0 auto;"></div>
<div ref="rechargeGoldChart" style="width: 4.5833vw; height: 4.5833vw; display: block;margin: 0 auto;"></div>
<div class="center-card" style="white-space: nowrap;">{{ t('workbench.wherePermanentGold')}}{{ money / 100 }}</div> <div class="center-card" style="white-space: nowrap;">{{ t('workbench.wherePermanentGold')}}{{ money / 100 }}</div>
</el-col> </el-col>
</el-row> </el-row>
@ -87,7 +87,7 @@
<!-- 第三个卡片 --> <!-- 第三个卡片 -->
<div class="card-item"> <div class="card-item">
<div class="card-title">{{ t('workbench.annualCumulativeConsume')}}{{ yearlyReduce / 100 }}</div> <div class="card-title">{{ t('workbench.annualCumulativeConsume')}}{{ yearlyReduce / 100 }}</div>
<el-row style="height: 200px;">
<el-row style="height: 10.4167vw;">
<el-col :span="12"> <el-col :span="12">
<div ref="consumeChart" style="width:100%; height: 88%;"></div> <div ref="consumeChart" style="width:100%; height: 88%;"></div>
</el-col> </el-col>
@ -101,21 +101,21 @@
<!-- 第四个卡片 --> <!-- 第四个卡片 -->
<div class="card-item" > <div class="card-item" >
<div class="card-title">{{ t('workbench.annualCumulativeRechargePeople')}}{{ yearlyRechargeNum }}</div> <div class="card-title">{{ t('workbench.annualCumulativeRechargePeople')}}{{ yearlyRechargeNum }}</div>
<el-row style="height: 200px;">
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 200px">
<el-row style="height: 10.4167vw;">
<el-col :span="12" style="border-right: .1042vw solid #CFE6FE; height: 10.4167vw">
<div class="chart5"> <div class="chart5">
<el-image :src="svg2" style="width: 88px; display: block;margin: 0 auto;"/>
<el-image :src="svg2" style="width: 4.5833vw; display: block;margin: 0 auto;"/>
<div class="margin-bottom"> <div class="margin-bottom">
<div style="display: flex; gap: 10px; font-size: 16px;">{{ t('workbench.weekYearOnYear')}}{{ sumWow }}%
<el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/>
<el-image v-else-if="sumWow < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px;"/>
<div style="display: flex; gap: .5208vw; font-size: .8333vw;">{{ t('workbench.weekYearOnYear')}}{{ sumWow }}%
<el-image v-if="sumWow > 0" :src="upArrow" style="width: .5208vw;"/>
<el-image v-else-if="sumWow < 0" :src="downArrow" style="width: .5208vw;"/>
<el-image v-else :src="pingArrow" style="width: .5208vw;"/>
</div> </div>
<div style="display: flex; gap: 10px; font-size: 16px;">
<div style="display: flex; gap: .5208vw; font-size: .8333vw;">
{{ t('workbench.dayYearOnYear')}}{{ sumDaily }}% {{ t('workbench.dayYearOnYear')}}{{ sumDaily }}%
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/>
<el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px; "/>
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: .5208vw;"/>
<el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: .5208vw;"/>
<el-image v-else :src="pingArrow" style="width: .5208vw; "/>
</div> </div>
</div> </div>
@ -570,46 +570,46 @@ onMounted(async () => {
} }
.card-item-row1 { .card-item-row1 {
height: 200px;
height: 10.4167vw;
width: auto; width: auto;
background: #E4F0FC; background: #E4F0FC;
box-shadow: 0 0 4px 0 #00000040;
border-radius: 10px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
padding-bottom: 10px;
box-shadow: 0 0 .2083vw 0 #00000040;
border-radius: .5208vw;
margin-top: 1.0417vw;
margin-left: .2604vw;
margin-right: .2604vw;
margin-bottom: -0.2604vw;
padding-bottom: .5208vw;
} }
.card-item { .card-item {
height: 240px;
height: 12.5vw;
width: auto; width: auto;
background: #E4F0FC; background: #E4F0FC;
box-shadow: 0 0 4px 0 #00000040;
border-radius: 10px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
padding-bottom: 10px;
box-shadow: 0 0 .2083vw 0 #00000040;
border-radius: .5208vw;
margin-top: 1.0417vw;
margin-left: .2604vw;
margin-right: .2604vw;
margin-bottom: -0.2604vw;
padding-bottom: .5208vw;
} }
.card-title { .card-title {
font-weight: bold; font-weight: bold;
height: 36px;
font-size: 17px;
height: 1.875vw;
font-size: .8854vw;
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
border-radius: 8px;
border-radius: .4167vw;
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%); background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
box-shadow: 0 0 2px 0 #00152940;
box-shadow: 0 0 .1042vw 0 #00152940;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: -5px;
margin-bottom: 10px;
margin-top: -0.2604vw;
margin-bottom: .5208vw;
} }
.card-item .el-col { .card-item .el-col {
@ -631,9 +631,9 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 5vh; height: 5vh;
flex-shrink: 0; flex-shrink: 0;
border-radius: 8px;
border-radius: .4167vw;
background: linear-gradient(90deg, #E4F0FC 0%, #FFF178 50%, #E4F0FC 100%); background: linear-gradient(90deg, #E4F0FC 0%, #FFF178 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
box-shadow: 0 .1042vw .1042vw 0 #00152940;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -642,47 +642,47 @@ onMounted(async () => {
.text1 { .text1 {
color: #040a2d; color: #040a2d;
font-family: " PingFang SC "; font-family: " PingFang SC ";
font-size: 28px;
font-size: 1.4583vw;
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
line-height: 31.79px;
line-height: 1.6557vw;
} }
.text1-update-time { .text1-update-time {
width: 100%; width: 100%;
height: 26px;
height: 1.3542vw;
flex-shrink: 0; flex-shrink: 0;
color: #040a2d; color: #040a2d;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 20px;
font-size: 1.0417vw;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
line-height: 31.79px;
line-height: 1.6557vw;
} }
/* 背景卡片大小 */ /* 背景卡片大小 */
.gold-management { .gold-management {
margin: 10px 5px;
margin: .5208vw .2604vw;
width: 100%; width: 100%;
height: 550px;
height: 28.6458vw;
flex-shrink: 0; flex-shrink: 0;
border-radius: 8px;
border-radius: .4167vw;
background: #E7F4FD; background: #E7F4FD;
box-shadow: 0 2px 2px 0 #00000040;
box-shadow: 0 .1042vw .1042vw 0 #00000040;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.margin-bottom { .margin-bottom {
padding-left: 20px;
padding-left: 1.0417vw;
} }
.chart5 { .chart5 {
margin-top: 15px;
margin-top: .7813vw;
.margin-bottom { .margin-bottom {
margin-top: 10px;
padding-left: 20px;
margin-top: .5208vw;
padding-left: 1.0417vw;
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save