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

19
src/components/OrderBook.vue
View File

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

14
src/components/TradeComponent.vue
View File

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

2
src/router/index.ts
View File

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

8
src/views/TradeDetail.vue
View File

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