图表更新

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://103.40.249.123:38280/cfg?key=mtp_20"
+    "apiUrl": "http://103.40.249.123:28280/cfg?key=mtp_20"
 }

src/assets/styles/index.less

@@ -6,17 +6,17 @@
 
 // globals
 html {
-    font-family: @font-family;
-    -webkit-text-size-adjust: 100%;
+    font-family                : @font-family;
+    -webkit-text-size-adjust   : 100%;
     -webkit-tap-highlight-color: @m-black;
     // better Font Rendering
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing     : antialiased;
+    -moz-osx-font-smoothing    : grayscale;
 }
 
 body {
-    margin: 0;
-    overflow: hidden;
+    margin          : 0;
+    overflow        : hidden;
     background-color: @body-bg;
 }
 
@@ -37,7 +37,7 @@ body {
     >section {
         header {
             background: @m-white0;
-            padding: 0;
+            padding   : 0;
         }
 
         main {
@@ -57,11 +57,11 @@ body {
         border-bottom: 1px solid @m-white2;
 
         .ant-card-head-title {
-            text-align: left;
-            font-size: 16px;
+            text-align : left;
+            font-size  : 16px;
             font-family: Source Han Sans CN;
             font-weight: 500;
-            color: @m-grey24;
+            color      : @m-grey24;
         }
     }
 }
@@ -77,16 +77,16 @@ body {
 }
 
 .ant-modal-title {
-    font-size: 18px;
+    font-size  : 18px;
     font-family: Source Han Sans CN;
     font-weight: 500;
-    color: @m-green3;
+    color      : @m-green3;
 }
 
 .submit {
-    background: @m-green3;
+    background   : @m-green3;
     border-radius: 3px;
-    color: @m-white0;
+    color        : @m-white0;
 }
 
 .ant-btn-primary {
@@ -141,7 +141,7 @@ body {
 }
 
 ::selection {
-    color: @m-white0;
+    color     : @m-white0;
     background: @m-white2;
 }
 
@@ -154,11 +154,11 @@ body {
 }
 
 .icon {
-    width: 1em;
-    height: 1em;
+    width         : 1em;
+    height        : 1em;
     vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
+    fill          : currentColor;
+    overflow      : hidden;
 }
 
 .ant-spin-nested-loading>div>.ant-spin {
@@ -167,12 +167,12 @@ body {
 }
 
 .ant-spin-nested-loading {
-    width: 100%;
+    width : 100%;
     height: 100%;
 
     .ant-spin-container {
-        width: 100%;
-        height: 100%;
+        width  : 100%;
+        height : 100%;
         display: flex;
     }
 }
@@ -186,11 +186,11 @@ body {
 }
 
 .ant-empty {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+    height         : 100%;
+    display        : flex;
+    flex-direction : column;
     justify-content: center;
-    align-items: center;
+    align-items    : center;
 }
 
 .mt15 {
@@ -202,21 +202,21 @@ body {
 }
 
 .ellipsis {
-    font-size: 12px;
-    display: block/inline-block;
-    overflow: hidden;
-    white-space: nowrap;
+    font-size    : 12px;
+    display      : block/inline-block;
+    overflow     : hidden;
+    white-space  : nowrap;
     text-overflow: ellipsis;
-    width: 120px;
-    display: inline-block;
+    width        : 120px;
+    display      : inline-block;
 }
 
 .ellipsis_temp {
-    white-space: nowrap;
-    overflow: hidden;
+    white-space  : nowrap;
+    overflow     : hidden;
     text-overflow: ellipsis;
-    width: 250px;
-    display: inline-block;
+    width        : 250px;
+    display      : inline-block;
 }
 
 
@@ -225,7 +225,7 @@ body {
     background-color: @m-grey18;
 
     .ant-menu-submenu-title {
-        font-size: 16px;
+        font-size : 16px;
         text-align: left;
     }
 
@@ -233,10 +233,10 @@ body {
         background-color: @m-black4;
 
         .ant-menu-item {
-            font-size: 14px;
+            font-size  : 14px;
             font-family: @menu-item-family;
-            color: @menu-item-color;
-            text-align: left;
+            color      : @menu-item-color;
+            text-align : left;
         }
 
         .ant-menu-item-selected {
@@ -258,7 +258,7 @@ body {
 
 .mine_layout .ant-menu .ant-menu-item-selected,
 .mine_layout .ant-menu .ant-menu-item:hover {
-    color: @theme;
+    color        : @theme;
     border-bottom: 2px solid @theme;
 }
 
@@ -269,9 +269,9 @@ body {
 .ant-table-wrapper {
     .ant-table-thead {
         tr th {
-            background: @m-black8;
-            color: @m-grey17;
-            font-size: 14px;
+            background : @m-black8;
+            color      : @m-grey17;
+            font-size  : 14px;
             font-family: Adobe Heiti Std;
         }
 
@@ -292,25 +292,25 @@ body {
 
     .ant-table-body tr td {
         background-color: @m-black2;
-        color: white;
-        cursor: pointer;
+        color           : white;
+        cursor          : pointer;
     }
 
     .ant-table-bordered .ant-table-thead>tr>th,
     .ant-table-bordered .ant-table-tbody>tr>td {
-        padding: 0;
-        height: 34px;
-        line-height: 34px;
+        padding     : 0;
+        height      : 34px;
+        line-height : 34px;
         border-color: @m-black9;
-        font-family: Adobe Heiti Std;
-        font-size: 16px;
+        font-family : Adobe Heiti Std;
+        font-size   : 16px;
     }
 
     .ant-table-fixed {
-        width: max-content !important;
-        color: @m-white1;
-        background: @m-black2;
-        border-top-color: @m-black2  !important;
+        width            : max-content !important;
+        color            : @m-white1;
+        background       : @m-black2;
+        border-top-color : @m-black2  !important;
         border-left-color: @m-black9  !important;
     }
 }
@@ -329,18 +329,18 @@ body {
 
     >iframe {
         border: 0;
-        width: 100%;
+        width : 100%;
         height: 100%;
     }
 }
 
 // 行情涨跌颜色
 .up-quote-color {
-    color: @m-red1;
+    color: @m-red1  !important;
 }
 
 .down-quote-color {
-    color: @m-green4;
+    color: @m-green4  !important;
 }
 
 // 不可复制

src/views/market/spot_trade/spot_trade_reference_market/components/chart/index.less

@@ -1,24 +1,27 @@
 .chart-container {
     [theme='light'] & {
-        --bgcolor: #fff;
-        --tab-border-color: #dae5ec;
-        --tab-checked-color: #0866b8;
+        --bgcolor            : #fff;
+        --tab-border-color   : #dae5ec;
+        --tab-checked-color  : #0866b8;
         --tab-checked-bgcolor: #d4e0ff;
         --slider-border-color: #b2c4dd;
-        --slider-bgcolor: #edf2f7;
+        --slider-bgcolor     : #edf2f7;
         --slider-button-color: #b2c4dd;
+        --row-border-color   : #dae5ec;
+        --row-title-color    : #acb8c0;
+        --row-content-color  : #3c454b;
     }
 
-    display: flex;
-    width: 100%;
-    height: calc(100% - 41px);
+    display         : flex;
+    width           : 100%;
+    height          : calc(100% - 41px);
     background-color: var(--bgcolor, #0e0e0f);
 
     .chart-content {
-        display: flex;
+        display       : flex;
         flex-direction: column;
-        flex: 1;
-        height: 100%;
+        flex          : 1;
+        height        : 100%;
 
         &__main {
             flex: 1;
@@ -30,18 +33,19 @@
 
         &__tabs {
             .ant-radio-button-wrapper {
-                height: 22px;
-                line-height: 20px;
-                color: #7a8a94;
-                border-color: var(--tab-border-color, #22292c) !important;
+                height          : 22px;
+                line-height     : 20px;
+                color           : #7a8a94;
+                border-color    : var(--tab-border-color, #22292c) !important;
                 background-color: transparent;
 
                 &:not(:first-child)::before {
                     background-color: var(--tab-border-color, #22292c) !important;
                 }
             }
+
             .ant-radio-button-wrapper-checked {
-                color: var(--tab-checked-color, #0866b8);
+                color           : var(--tab-checked-color, #0866b8);
                 background-color: var(--tab-checked-bgcolor, #0e2f4c);
 
                 &:not(.ant-radio-button-wrapper-disabled)::before {
@@ -56,31 +60,31 @@
     }
 
     .chart-slider {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 6px;
-        border-left: 1px solid var(--slider-border-color, #33393d);
-        border-right: 1px solid var(--slider-border-color, #33393d);
+        display         : flex;
+        justify-content : center;
+        align-items     : center;
+        width           : 6px;
+        border-left     : 1px solid var(--slider-border-color, #33393d);
+        border-right    : 1px solid var(--slider-border-color, #33393d);
         background-color: var(--slider-bgcolor, #0e0e0f);
 
         &__button {
-            width: 2px;
-            height: 30px;
-            font-size: 0;
+            width           : 2px;
+            height          : 30px;
+            font-size       : 0;
             background-color: var(--slider-button-color, #3c454b);
-            border-radius: 1px;
+            border-radius   : 1px;
         }
     }
 
     .chart-tips {
-        width: 300px;
+        width : 300px;
         height: 100%;
 
         &__nav {
-            display: flex;
+            display        : flex;
             justify-content: center;
-            align-items: center;
+            align-items    : center;
 
             .content {
                 &:first-child:not(:last-child) {
@@ -89,49 +93,50 @@
 
                 &--left {
                     font-size: 16px;
-                    color: #3c454b;
+                    color    : var(--row-content-color, #ACB8C0);
                 }
 
                 &--right {
                     font-size: 24px;
-                    color: #fc9618;
+                    color    : #fc9618;
                 }
             }
         }
 
         &__last {
-            display: flex;
+            display        : flex;
             justify-content: center;
-            align-items: center;
+            align-items    : center;
+            padding        : 16px 0;
 
             .content {
                 &--left {
-                    font-size: 24px;
+                    font-size   : 24px;
                     margin-right: 16px;
                 }
 
                 &--right {
-                    display: flex;
+                    display       : flex;
                     flex-direction: column;
-                    align-items: flex-start;
+                    align-items   : flex-start;
                 }
             }
         }
 
         &__volume {
             .ant-row {
-                border-top: 1px solid #dae5ec;
-                padding: 8px;
+                border-top: 1px solid var(--row-border-color, #171B1D);
+                padding   : 8px;
 
                 .ant-col {
                     text-align: left;
 
                     &:first-child {
-                        color: #acb8c0;
+                        color: var(--row-title-color, #3c454b);
                     }
 
                     &:last-child {
-                        color: #3c454b;
+                        color     : var(--row-title-color, #acb8c0);
                         text-align: right;
                     }
                 }
@@ -139,8 +144,8 @@
         }
 
         &__info {
-            border-top: 1px solid #dae5ec;
-            padding: 8px 8px 8px 0;
+            border-top: 1px solid var(--row-border-color, #171B1D);
+            padding   : 8px 8px 8px 0;
 
             .ant-row {
                 margin-top: 8px;
@@ -149,11 +154,12 @@
                     text-align: left;
 
                     &:nth-child(odd) {
-                        color: #acb8c0;
+                        color       : var(--row-title-color, #3c454b);
                         padding-left: 8px;
                     }
 
                     &:nth-child(even) {
+                        color     : var(--row-content-color, #ACB8C0);
                         text-align: right;
                     }
                 }

src/views/market/spot_trade/spot_trade_reference_market/components/chart/index.vue

@@ -11,7 +11,7 @@
             </div>
             <echart-time class="chart-content__main" :quote-data="selectedRow" v-if="activeCycleType === -1"></echart-time>
             <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType" v-else></echart-kline>
-            <!-- <component :is="componentId" v-if="componentId" :series-data="chartData" :quote-data="selectedRow"></component> -->
+            <!-- <component :is="componentId" v-if="componentId" :quote-data="selectedRow"></component> -->
             <div class="chart-content__footer"></div>
         </div>
         <div class="chart-slider">
@@ -24,22 +24,22 @@
                     <div class="content content--right">{{ selectedRow.goodsname }}</div>
                 </div>
                 <div class="chart-tips__last">
-                    <div :class="['content content--left', priceColor]">{{ selectedRow.last }}</div>
+                    <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">{{ selectedRow.last }}</div>
                     <div class="content content--right">
-                        <span :class="priceColor">{{ quoteChange(selectedRow) }}</span>
-                        <span :class="priceColor">{{ quoteAmplitude(selectedRow) }}</span>
+                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
+                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
                     </div>
                 </div>
                 <div class="chart-tips__volume">
                     <a-row>
                         <a-col :span="8">卖一</a-col>
-                        <a-col :span="8">{{ selectedRow.ask }}</a-col>
-                        <a-col :span="8">{{ selectedRow.askvolume }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ selectedRow.ask }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)" :span="8">{{ selectedRow.askvolume }}</a-col>
                     </a-row>
                     <a-row>
                         <a-col :span="8">买一</a-col>
-                        <a-col :span="8">{{ selectedRow.bid }}</a-col>
-                        <a-col :span="8">{{ selectedRow.bidvolume }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ selectedRow.bid }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)" :span="8">{{ selectedRow.bidvolume }}</a-col>
                     </a-row>
                 </div>
             </div>
@@ -53,39 +53,39 @@
             <div class="chart-tips__info">
                 <a-row>
                     <a-col :span="4">最新</a-col>
-                    <a-col :span="8">{{ selectedRow.last }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ selectedRow.last }}</a-col>
                     <a-col :span="4">均价</a-col>
-                    <a-col :span="8">{{ selectedRow.averageprice }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ selectedRow.averageprice }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">涨跌</a-col>
-                    <a-col :span="8">{{ quoteChange(selectedRow) }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteChange(selectedRow) }}</a-col>
                     <a-col :span="4">今开</a-col>
-                    <a-col :span="8">{{ selectedRow.opened }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ selectedRow.opened }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">涨幅</a-col>
-                    <a-col :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
                     <a-col :span="4">最高</a-col>
-                    <a-col :span="8">{{ selectedRow.highest }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ selectedRow.highest }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">总量</a-col>
                     <a-col :span="8">{{ selectedRow.totalvolume }}</a-col>
                     <a-col :span="4">最低</a-col>
-                    <a-col :span="8">{{ selectedRow.lowest }}</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ selectedRow.lowest }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">金额</a-col>
-                    <a-col :span="8">{{ selectedRow.totalturnover }}</a-col>
+                    <a-col :span="8" style="color: #0d96ff">{{ selectedRow.totalturnover }}</a-col>
                     <a-col :span="4">量比</a-col>
                     <a-col :span="8">{{ '--' }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">涨停</a-col>
-                    <a-col :span="8">{{ selectedRow.limitup }}</a-col>
+                    <a-col class="red1" :span="8">{{ selectedRow.limitup }}</a-col>
                     <a-col :span="4">跌停</a-col>
-                    <a-col :span="8">{{ selectedRow.limitdown }}</a-col>
+                    <a-col class="green" :span="8">{{ selectedRow.limitdown }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">外盘</a-col>
@@ -149,10 +149,6 @@ export default defineComponent({
         }
         const { goodscode } = props.selectedRow;
 
-        const priceColor = computed(() => {
-            return handleQuotePriceColor(props.selectedRow.last, props.selectedRow.presettle);
-        });
-
         // 周期类型
         const chartType = [
             { name: '分时', type: -1 },
@@ -183,7 +179,7 @@ export default defineComponent({
             selectCycleType,
             quoteChange,
             quoteAmplitude,
-            priceColor,
+            handleQuotePriceColor,
         };
     },
 });