Ivan/xtraderClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：颜色样式优化

Browse Source
This commit is contained in:
ivan 2026-02-10 18:06:42 +08:00
parent a572fdfa99
commit c6e896efc3
5 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/MarketCard.vue
View File

@ -47,7 +47,7 @@
<div class="options-section">
<v-btn
class="option-yes"
:color="'#e6f9e6'"
:color="'#b8e0b8'"
:rounded="'sm'"
:text="true"
elevation="0"
@ -57,7 +57,7 @@
</v-btn>
<v-btn
class="option-no"
:color="'#ffe6e6'"
:color="'#f0b8b8'"
:rounded="'sm'"
:text="true"
elevation="0"
@ -92,7 +92,7 @@
<div class="outcome-buttons">
<v-btn
class="option-yes option-yes-no-compact"
:color="'#e6f9e6'"
:color="'#b8e0b8'"
:rounded="'sm'"
:text="true"
elevation="0"
@ -102,7 +102,7 @@
</v-btn>
<v-btn
class="option-no option-yes-no-compact"
:color="'#ffe6e6'"
:color="'#f0b8b8'"
:rounded="'sm'"
:text="true"
elevation="0"
@ -237,7 +237,7 @@ const semiProgressOffset = computed(() => {
// 进度条纯色：0% 红 → 50% 图片橙黄 #FFBB5C → 100% 绿（两段 RGB 插值）
const COLOR_RED = { r: 239, g: 68, b: 68 }
const COLOR_ORANGE_YELLOW = { r: 255, g: 187, b: 92 }
const COLOR_GREEN = { r: 34, g: 197, b: 94 }
const COLOR_GREEN = { r: 22, g: 163, b: 74 }
function rgbToHex(r: number, g: number, b: number): string {
const toByte = (v: number) => Math.min(255, Math.max(0, Math.round(v)))
return `#${toByte(r).toString(16).padStart(2, '0')}${toByte(g).toString(16).padStart(2, '0')}${toByte(b).toString(16).padStart(2, '0')}`
@ -423,7 +423,8 @@ function openTradeMulti(side: 'yes' | 'no', outcome: EventCardOutcome) {
.option-yes {
flex: 1;
background-color: #e6f9e6;
background-color: #b8e0b8;
border-radius: 6px;
height: 40px;
}
@ -431,12 +432,13 @@ function openTradeMulti(side: 'yes' | 'no', outcome: EventCardOutcome) {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
color: #008000;
color: #006600;
}
.option-no {
flex: 1;
background-color: #ffe6e6;
background-color: #f0b8b8;
border-radius: 6px;
height: 40px;
}
@ -444,7 +446,7 @@ function openTradeMulti(side: 'yes' | 'no', outcome: EventCardOutcome) {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
color: #ff0000;
color: #cc0000;
}
/* Bottom Section：禁止被挤压，避免与 multi-section 重叠 */

19
src/components/OrderBook.vue
View File

@ -28,13 +28,13 @@
<div class="order-list-header-total">TOTAL</div>
</div>
<!-- Asks Orders -->
<div class="asks-label">Asks</div>
<div v-for="(ask, index) in asksWithCumulativeTotal" :key="index" class="order-item">
<div class="order-progress">
<HorizontalProgressBar
:max="maxAsksTotal"
:value="ask.total"
:fillStyle="{ backgroundColor: '#ffb3ba' }"
:fillStyle="{ backgroundColor: '#e89595' }"
:trackStyle="{ backgroundColor: 'transparent' }"
/>
</div>
@ -43,6 +43,7 @@
<div class="order-total">{{ ask.cumulativeTotal.toFixed(2) }}</div>
</div>
<!-- Bids Orders -->
<div class="asks-label">Asks</div>
<div class="bids-label">Bids</div>
<div
v-for="(bid, index) in bidsWithCumulativeTotal"
@ -53,7 +54,7 @@
<HorizontalProgressBar
:max="maxBidsTotal"
:value="bid.total"
:fillStyle="{ backgroundColor: '#b3ffb3' }"
:fillStyle="{ backgroundColor: '#7acc7a' }"
:trackStyle="{ backgroundColor: 'transparent' }"
/>
</div>
@ -311,11 +312,11 @@ const maxBidsTotal = computed(() => {
}
.asks-bar {
background-color: #ffb3ba;
background-color: #e89595;
}
.bids-bar {
background-color: #b3ffb3;
background-color: #7acc7a;
}
.order-list {
@ -379,12 +380,12 @@ const maxBidsTotal = computed(() => {
.asks-label {
color: #ffffff;
background-color: #ff0000;
background-color: #cc0000;
}
.bids-label {
color: #ffffff;
background-color: #008000;
background-color: #006600;
}
.order-item {
@ -402,11 +403,11 @@ const maxBidsTotal = computed(() => {
}
.asks-price {
color: #ff0000;
color: #cc0000;
}
.bids-price {
color: #008000;
color: #006600;
}
.order-price {

14
src/components/TradeComponent.vue
View File

@ -806,8 +806,8 @@ function submitOrder() {
}
.yes-btn.active {
background-color: #e6f9e6;
color: #008000;
background-color: #b8e0b8;
color: #006600;
}
.no-btn {
@ -820,7 +820,7 @@ function submitOrder() {
}
.no-btn.active {
background-color: #ff0000;
background-color: #cc0000;
color: #ffffff;
}
@ -960,7 +960,7 @@ function submitOrder() {
align-items: center;
gap: 4px;
font-size: 12px;
color: #4caf50;
color: #3d8b40;
}
.expiration-header {
@ -1003,7 +1003,7 @@ function submitOrder() {
.to-win-value {
font-size: 15px;
font-weight: 500;
color: #4caf50;
color: #3d8b40;
}
.action-btn {
@ -1103,7 +1103,7 @@ function submitOrder() {
.mobile-bar-yes {
flex: 1;
min-width: 0;
background: #22c55e;
background: #16a34a;
color: #fff;
padding: 14px 16px;
}
@ -1111,7 +1111,7 @@ function submitOrder() {
.mobile-bar-no {
flex: 1;
min-width: 0;
background: #ef4444;
background: #dc2626;
color: #fff;
padding: 14px 16px;
}

2
src/router/index.ts
View File

@ -35,7 +35,7 @@ const router = createRouter({
}
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (savedPosition && from?.name) return savedPosition
if (to.hash) return { el: to.hash }
return { top: 0 }
},

8
src/views/TradeDetail.vue
View File

@ -604,7 +604,7 @@ onUnmounted(() => {
.option-yes {
flex: 1;
background-color: #e6f9e6;
background-color: #b8e0b8;
height: 56px;
font-size: 18px;
}
@ -612,12 +612,12 @@ onUnmounted(() => {
.option-text-yes {
font-size: 18px;
font-weight: 600;
color: #008000;
color: #006600;
}
.option-no {
flex: 1;
background-color: #ffe6e6;
background-color: #f0b8b8;
height: 56px;
font-size: 18px;
}
@ -625,7 +625,7 @@ onUnmounted(() => {
.option-text-no {
font-size: 18px;
font-weight: 600;
color: #ff0000;
color: #cc0000;
}
.market-info-section {