marymelisa 4 lat temu
rodzic
commit
4e732ed873

BIN
src/assets/images/titleArrow.png


+ 33 - 8
src/assets/styles/mixin.less

@@ -1645,15 +1645,40 @@ input:-internal-autofill-selected {
             line-height: 60px;
         }
         .titleBtn {
-            min-width: 90px;
+             min-width: 90px;
             height: 40px;
-            background: @m-blue12;
-            .rounded-corners(3px);
-            color: @m-white0;
-            line-height: 40px;
-            text-align: center;
-            font-size: 16px;
-            padding: 0 16px;
+            display: inline-flex;
+            .name {
+                background: @m-blue12;
+                text-align: center;
+                flex: 1;
+                padding: 0 16px;
+                .rounded-corners(3px, 0, 0, 3px);
+                 color: @m-white0;
+                 height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+            }
+            .arrowRightIcon,.arrowLeftIcon {
+                width: 12px;
+                height: 40px;
+                background-image: url(../images/titleArrow.png);
+                background-position: 0 0;
+                background-repeat: no-repeat;
+            }
+            .arrowLeftIcon {
+                background-position: -12px 0;
+            }
+        }
+        .titleBtn2 {
+            .name {
+                .rounded-corners(0);
+            }
+        }
+        .titleBtn3 {
+            .name {
+                .rounded-corners(0, 5px, 5px, 0);
+            }
             margin-right: 20px;
         }
         .numBlock {

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

@@ -8,9 +8,19 @@
             <a class="backIcon">
                 <LeftOutlined />
             </a>
-            <div class="titleBtn">螺纹钢</div>
-            <div class="titleBtn">12mm-江铜</div>
-            <div class="titleBtn">华南仓库</div>
+            <div class="titleBtn">
+                <div class="name">螺纹钢</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">12mm-江铜</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn3">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">华南仓库</div>
+            </div>
             <div class="green">
                 <div class="numBlock">
                     <div class="first">卖基差</div>