theme color update

src/assets/styles/mixin.less

@@ -984,6 +984,28 @@
         border: 0;
     }
 }
+.ant-btn.historyBtn {
+    margin-left: 10px;
+    .rounded-corners(3px);
+    height: 40px;
+    border-color: @m-blue29;
+    background: @m-blue30;
+    color: @m-grey43;
+    .anticon {
+        color: @m-grey44;
+    }
+    &:hover,
+    &:focus,
+    &:active,
+    &::after {
+        border-color: @m-blue29-hover;
+        background: @m-blue30-hover;
+        color: @m-grey43-hover;
+        .antion {
+            color: @m-grey44-hover;
+        }
+    }
+}
 // .ant-input-affix-wrapper:focus, .ant-btn:focus {
 //     box-shadow: none;
 // }
@@ -1850,8 +1872,8 @@ input:-internal-autofill-selected {
         div {
             align-self: center;
             align-items: center;
-            height: 40px;
-            line-height: 40px;
+            // height: 40px;
+            // line-height: 40px;
         }
         .backIcon {
             width: 52px;
@@ -1905,6 +1927,9 @@ input:-internal-autofill-selected {
         .numBlock {
             display: inline-flex;
             white-space: nowrap;
+            text-align: left;
+            min-width: 80px;
+            margin-left: 15px;
             .first {
                 font-size: 14px;
             }

src/assets/styles/theme.css

@@ -43,6 +43,10 @@
     --m-grey40-hover: rgba(64, 80, 102, .8);
     --m-grey41: #7A8A94;
     --m-grey42: #7A8A94;
+    --m-grey43: #88a0ae;
+    --m-grey43-hover: rgba(136, 160, 174, .8);
+    --m-grey44: #7A8A94;
+    --m-grey44-hover: rgba(122, 138, 148, .8);
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -121,6 +125,10 @@
     --m-blue26: #3A87F7;
     --m-blue27: #1F3245;
     --m-blue28: #15293a;
+    --m-blue29: #193778;
+    --m-blue29-hover: rgba(25, 55, 120, .8);
+    --m-blue30: #172B56;
+    --m-blue30-hover: rgba(23, 43, 86,.8);
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -199,6 +207,10 @@
     --m-grey40-hover: rgba(64, 80, 102, .8);
     --m-grey41: #7A8A94;
     --m-grey42: #7A8A94;
+    --m-grey43: #88a0ae;
+    --m-grey43-hover: rgba(136, 160, 174, .8);
+    --m-grey44: #7A8A94;
+    --m-grey44-hover: rgba(122, 138, 148, .8);
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -276,6 +288,10 @@
     --m-blue26: #3A87F7;
     --m-blue27: #1F3245;
     --m-blue28: #15293a;
+    --m-blue29: #193778;
+    --m-blue29-hover: rgba(25, 55, 120, .8);
+    --m-blue30: #172B56;
+    --m-blue30-hover: rgba(23, 43, 86,.8);
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -353,6 +369,10 @@
     --m-grey40-hover: rgba(81, 121, 226, .8);
     --m-grey41: #ACBBC5;
     --m-grey42: #b4cedd;
+    --m-grey43: #5179E2;
+    --m-grey43-hover: rgba(81, 121, 226, .8);
+    --m-grey44: #718FAE;
+    --m-grey44-hover: rgba(113, 143, 174, .8);
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -429,6 +449,10 @@
     --m-blue26: #3A87F7;
     --m-blue27: #ECF2F5;
     --m-blue28: #DBF3FF;
+    --m-blue29: #5179E2;
+    --m-blue29-hover: rgba(81, 121, 226, .8);
+    --m-blue30: #D4E0FF;
+    --m-blue30-hover: rgba(212, 224, 255, .8);
 
     --body-bg: #FFFFFF;
     --m-white0: #ffffff;

src/assets/styles/variables.less

@@ -53,6 +53,10 @@
 @m-grey40-hover: var(--m-grey40-hover);
 @m-grey41: var(--m-grey41);
 @m-grey42: var(--m-grey42);
+@m-grey43: var(--m-grey43);
+@m-grey43-hover: var(--m-grey43-hover);
+@m-grey44: var(--m-grey44);
+@m-grey44-hover: var(--m-grey44-hover);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -132,6 +136,10 @@
 @m-blue26: var(--m-blue26);
 @m-blue27: var(--m-blue27);
 @m-blue28: var(--m-blue28);
+@m-blue29: var(--m-blue29);
+@m-blue29-hover: var(--m-blue29-hover);
+@m-blue30: var(--m-blue30);
+@m-blue30-hover: var(--m-blue30-hover);
 
 @body-bg: #e9eef3;
 @m-white0: var(--m-white0);

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/index.vue

@@ -392,8 +392,15 @@ export default defineComponent({
             .flex;
             line-height: 25px;
             padding: 5px;
-            color: @m-white0;
+            color: @m-white6;
             font-size: 14px;
+            text-overflow: -o-ellipsis-lastline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
         .right {
             width: 40px;

src/views/market/spot_trade/components/buy-sell-market/index.vue

@@ -1,104 +1,108 @@
 <template>
-  <!-- 买卖大厅 -->
-  <div class="buy-sell-market">
-    <div class="buy-sell-market-title">
-      <a class="backIcon"
-         @click="cancel">
-        <LeftOutlined />
-      </a>
-      <div class="titleBtn">
-        <div class="name">{{selectedRow.deliverygoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.wrgoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.warehousename}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn3"
-           v-if="!isWR(enumName)">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">
-          <a-month-picker :allowClear="false"
-                          v-model:value="time"
-                          @change="timeChange"
-                          class="commonDatePicker conditionPicker" />
-        </div>
-        <DownOutlined />
-      </div>
-      <div class="green bdf1 ml20">
-        <div class="numBlock ml15"
-             v-if="isFloat()">
-          <div class="first">卖基差</div>
-          <div class="last">{{selectedRow.sellpricemove}}</div>
-        </div>
-        <div class="numBlock ml15"
-             v-else>
-          <div class="first">卖价</div>
-          <div class="last">{{selectedRow.sellprice}}</div>
-        </div>
-        <div class="numBlock">
-          <div class="first">卖量</div>
-          <div class="last">{{selectedRow.sellqty}}</div>
-        </div>
-      </div>
-      <div class="red ml35">
-        <div class="numBlock"
-             v-if="isFloat()">
-          <div class="first">买基差</div>
-          <div class="last">{{selectedRow.buypricemove}}</div>
-        </div>
-        <div class="numBlock"
-             v-else>
-          <div class="first">买价</div>
-          <div class="last">{{selectedRow.buyprice}}</div>
-        </div>
-        <div class="numBlock">
-          <div class="first">买量</div>
-          <div class="last">{{selectedRow.buyqty}}</div>
+    <!-- 买卖大厅 -->
+    <div class="buy-sell-market">
+        <div class="buy-sell-market-title">
+            <a class="backIcon" @click="cancel">
+                <LeftOutlined />
+            </a>
+            <div class="titleBtn">
+                <div class="name">{{selectedRow.deliverygoodsname}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{selectedRow.wrgoodsname}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{selectedRow.warehousename}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn3" v-if="!isWR(enumName)">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">
+                    <a-month-picker
+                        :allowClear="false"
+                        v-model:value="time"
+                        @change="timeChange"
+                        class="commonDatePicker conditionPicker"
+                    />
+                </div>
+                <DownOutlined />
+            </div>
+
+            <div class="priceBar bdf1 ml20">
+                <div class="greenBar green">
+                    <div class="numBlock" v-if="isFloat()">
+                        <div class="first">卖基差</div>
+                        <div class="last">{{selectedRow.sellpricemove}}</div>
+                    </div>
+                    <div class="numBlock" v-else>
+                        <div class="first">卖价</div>
+                        <div class="last">{{selectedRow.sellprice}}</div>
+                    </div>
+                    <div class="numBlock">
+                        <div class="first">卖量</div>
+                        <div class="last">{{selectedRow.sellqty}}</div>
+                    </div>
+                </div>
+                <div class="redBar red">
+                    <div class="numBlock" v-if="isFloat()">
+                        <div class="first">买基差</div>
+                        <div class="last">{{selectedRow.buypricemove}}</div>
+                    </div>
+                    <div class="numBlock ml15" v-else>
+                        <div class="first">买价</div>
+                        <div class="last">{{selectedRow.buyprice}}</div>
+                    </div>
+                    <div class="numBlock">
+                        <div class="first">买量</div>
+                        <div class="last">{{selectedRow.buyqty}}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="market" v-if="isFloat()">
+                <div class="first">{{selectedRow.goodscode}}</div>
+                <div class="last red">{{getGoodsPrice()}}</div>
+                <LineChartOutlined />
+            </div>
+            <a-button class="historyBtn">
+                历史走势
+                <LineChartOutlined />
+            </a-button>
+            <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
         </div>
-      </div>
-      <div class="market"
-           v-if="isFloat()">
-        <div class="first">{{selectedRow.goodscode}}</div>
-        <div class="last red">{{getGoodsPrice()}}</div>
-        <LineChartOutlined />
-      </div>
-      <BtnList :btnList="firstBtn"
-               :record="selectedRow"
-               @click="openComponent" />
+        <a-row class="buySellHall">
+            <a-col :span="12" v-if="sellMarket.isMarket">
+                <Sell
+                    :enumName="enumName"
+                    ref="sellRef"
+                    :parantSelectedRow="selectedRow"
+                    :time="time"
+                    :btnList="handleBtnList(sellMarket.btnList)"
+                />
+            </a-col>
+            <a-col :span="12" v-if="buyMarket.isMarket">
+                <Buy
+                    :enumName="enumName"
+                    ref="buyRef"
+                    :time="time"
+                    :parantSelectedRow="selectedRow"
+                    :btnList="handleBtnList(buyMarket.btnList)"
+                />
+            </a-col>
+        </a-row>
+        <component
+            :is="componentId"
+            v-if="componentId"
+            :selectedRow="selectedRow"
+            :goodsPrice="getGoodsPrice()"
+            :enumName="enumName"
+            :time="time"
+            @cancel="closeComponent"
+        ></component>
     </div>
-    <a-row class="buySellHall">
-      <a-col :span="12"
-             v-if="sellMarket.isMarket">
-        <Sell :enumName="enumName"
-              ref="sellRef"
-              :parantSelectedRow="selectedRow"
-              :time="time"
-              :btnList="handleBtnList(sellMarket.btnList)" />
-      </a-col>
-      <a-col :span="12"
-             v-if="buyMarket.isMarket">
-        <Buy :enumName="enumName"
-             ref="buyRef"
-             :time="time"
-             :parantSelectedRow="selectedRow"
-             :btnList="handleBtnList(buyMarket.btnList)" />
-      </a-col>
-    </a-row>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :goodsPrice="getGoodsPrice()"
-               :enumName="enumName"
-               :time="time"
-               @cancel="closeComponent"></component>
-  </div>
 </template>
 
 <script lang="ts">
@@ -230,4 +234,14 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
+.priceBar {
+    .flex;
+    flex-direction: column;
+    height: 40px;
+    .greenBar,
+    .redBar {
+        height: 20px;
+        line-height: 20px;
+    }
+}
 </style>