commit

src/assets/styles/variables.less

@@ -14,6 +14,10 @@
 @m-grey9: #252D34;
 @m-grey10: #394753;
 @m-grey11: #0F1A25;
+@m-grey12: #343D46;
+@m-grey12-hover: rgba(@m-grey12, .8);
+@m-grey13: #38444F;
+@m-grey13-hover: rgba(@m-grey13, .8);
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;
@@ -27,13 +31,16 @@
 @m-black6: #1B2F41;
 @m-black7: #15293A;
 @m-blue0: #3a87f7;
+@m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;
+@m-blue2-hover: rgba(@m-blue2, .8);
 @m-blue3: #172B56;
 @m-blue4: #112C43;
 @m-blue5: #084258;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
+@m-white0-hover: rgba(@m-white0, .8);
 @m-green0: #1FF195;
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

src/views/market/warehouseTrade/components/listed/index.vue

@@ -60,10 +60,11 @@
             <a-row :gutter="24">
                 <a-col
                 :span="24"
+                :style="{ 'text-align': center }"
                 >
                     <a-form-item>
-                        <a-button>挂牌</a-button>
-                        <a-button>取消</a-button>
+                        <a-button class="listedBtn">挂牌</a-button>
+                        <a-button class="ml10 cancelBtn">取消</a-button>
                     </a-form-item>
                 </a-col>
             </a-row>
@@ -192,4 +193,29 @@ export default defineComponent({
         color: #7A8A94;
     }
 }
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background:  linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover {
+        background:  linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
 </style>;