hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(样式调整): 充值页

Browse Source
This commit is contained in:
hzj 2025-09-25 14:46:02 +08:00
parent 001d3ba07f
commit 4e7277f9f7
1 changed files with 10 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/ExchangeGoldCoinsView.vue
View File

@ -39,7 +39,14 @@
<!-- 兑换部分 --> <!-- 兑换部分 -->
<div> <div>
<div style="font-weight: 600; margin-bottom: 10px">Exchange Gold Coins</div> <div style="font-weight: 600; margin-bottom: 10px">Exchange Gold Coins</div>
<div class="exchange-section"> <div
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
"
>
<!-- 金币选择 --> <!-- 金币选择 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px"> <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
<div <div
@ -48,7 +55,7 @@
@click="selectCoin(coin)" @click="selectCoin(coin)"
:class="['coin-item', { selected: selectedCoin === coin.id }]" :class="['coin-item', { selected: selectedCoin === coin.id }]"
> >
<img src="../assets/icon/coin.png" alt="" style="width: 50%" /> <img src="../assets/icon/coin.png" alt="" style="width: 40%" />
<div style="font-weight: 500; color: #373232">{{ coin.amount }}</div> <div style="font-weight: 500; color: #373232">{{ coin.amount }}</div>
<div style="font-weight: 500; color: #131111">${{ coin.price }}</div> <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
</div> </div>
@ -313,21 +320,6 @@ onMounted(() => {
font-style: italic; font-style: italic;
} }
/* 兑换部分 */
.exchange-section {
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.exchange-section h3 {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.coin-item { .coin-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -341,10 +333,6 @@ onMounted(() => {
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
.coin-item:hover {
border-color: #8b5cf6;
}
.coin-item.selected { .coin-item.selected {
border-color: #8b5cf6; border-color: #8b5cf6;
background-color: #f3f4f6; background-color: #f3f4f6;
@ -362,12 +350,10 @@ onMounted(() => {
border: none; border: none;
padding: 12px; padding: 12px;
color: white; color: white;
cursor: pointer;
transition: background-color 0.2s;
} }
.exchange-btn:disabled { .exchange-btn:disabled {
cursor: not-allowed; background: #ccc;
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {