样式更改

src/common/components/capitalInfo/index.vue

@@ -1,54 +1,59 @@
 <template>
-  <div class="capital-info">
-    <!-- 资金信息 -->
-    <a-select style="width: 135px"
-              @change="accountChange"
-              v-model:value="selectedAccountId">
-      <a-select-option v-for="item in getAllTaAccount()"
-                       :value="item.accountid"
-                       :key="item.accountid">
-        {{item.accountid}}
-      </a-select-option>
-    </a-select>
-    <!-- <a-collapse class="capitalCollapse"
+    <div class="capital-info">
+        <!-- 资金信息 -->
+        <a-select
+            class="capitalSelect"
+            style="width: 180px"
+            @change="accountChange"
+            v-model:value="selectedAccountId"
+        >
+            <a-select-option
+                v-for="item in getAllTaAccount()"
+                :value="item.accountid"
+                :key="item.accountid"
+            >{{item.accountid}}</a-select-option>
+        </a-select>
+        <!-- <a-collapse class="capitalCollapse"
                 default-active-key="1"
                 :bordered="false"
                 expand-icon-position="right">
       <a-collapse-panel key="1"
-                        header="南山铜加工厂（074345345345345345）"> -->
-    <div class="capitalItem">
-      <div class="firstLine">
-        <div>净值</div>
-        <div>
-          <i class="iconfont icon-zhengyan"></i>
+        header="南山铜加工厂（074345345345345345）">-->
+        <div class="numBlocks">
+            <div class="capitalItem">
+                <div class="firstLine">
+                    <div>净值</div>
+                    <div>
+                        <i class="iconfont icon-zhengyan"></i>
+                    </div>
+                </div>
+                <div class="numBar">128,000.00</div>
+            </div>
+            <div class="capitalItem">
+                <div class="firstLine">
+                    <div>占用</div>
+                </div>
+                <div class="numBar green">128,000.00</div>
+            </div>
+            <div class="capitalItem">
+                <div class="firstLine">
+                    <div>冻结</div>
+                </div>
+                <div class="numBar red">128,000.00</div>
+            </div>
+            <div class="capitalItem">
+                <div class="firstLine">
+                    <div>可用</div>
+                </div>
+                <div class="numBar blue">128,000.00</div>
+            </div>
         </div>
-      </div>
-      <div class="numBar">128,000.00</div>
-    </div>
-    <div class="capitalItem">
-      <div class="firstLine">
-        <div>占用</div>
-      </div>
-      <div class="numBar green">128,000.00</div>
-    </div>
-    <div class="capitalItem">
-      <div class="firstLine">
-        <div>冻结</div>
-      </div>
-      <div class="numBar red">128,000.00</div>
-    </div>
-    <div class="capitalItem">
-      <div class="firstLine">
-        <div>可用</div>
-      </div>
-      <div class="numBar blue">128,000.00</div>
-    </div>
-    <!-- <a-icon slot="extra"
+        <!-- <a-icon slot="extra"
                 type="setting"
                 @click="handleClick" />
       </a-collapse-panel>
-    </a-collapse> -->
-  </div>
+        </a-collapse>-->
+    </div>
 </template>
 
 <script lang="ts">
@@ -109,6 +114,59 @@ export default defineComponent({
     width: 100%;
     height: 100%;
     background: @m-grey6;
+    .ant-select.capitalSelect {
+        .ant-select-selector {
+            width: 180px;
+            height: 40px;
+            line-height: 40px;
+            background: @m-grey6;
+            border: 1px solid @m-blue0;
+            .ant-select-selection-item {
+                font-size: 14px;
+                color: @m-white0;
+                line-height: 40px;
+            }
+        }
+    }
+    .numBlocks {
+        padding: 10px 12px 18px 12px;
+    }
+    .capitalItem {
+        width: 100%;
+        padding-top: 10px;
+        font-size: 14px;
+        color: @m-grey1;
+        .firstLine {
+            width: 100%;
+            .inlineflex;
+            justify-content: space-between;
+            height: 18px;
+            line-height: 18px;
+            .iconfont {
+                font-size: 18px;
+                color: @m-black3;
+            }
+        }
+        .numBar {
+            width: 100%;
+            margin-top: 12px;
+            height: 16px;
+            line-height: 16px;
+            font-size: 16px;
+            text-align: left;
+            color: @m-white0;
+            margin-bottom: 8px;
+        }
+        .green {
+            color: @m-green0;
+        }
+        .red {
+            color: @m-red1;
+        }
+        .blue {
+            color: @m-blue0;
+        }
+    }
     .capitalCollapse {
         height: 100%;
         background: transparent;
@@ -137,42 +195,6 @@ export default defineComponent({
                     padding: 10px 12px;
                     .flex();
                     flex-direction: column;
-                    .capitalItem {
-                        width: 100%;
-                        padding-top: 10px;
-                        font-size: 14px;
-                        color: @m-grey1;
-                        .firstLine {
-                            width: 100%;
-                            .inlineflex;
-                            justify-content: space-between;
-                            height: 18px;
-                            line-height: 18px;
-                            .iconfont {
-                                font-size: 18px;
-                                color: @m-black3;
-                            }
-                        }
-                        .numBar {
-                            width: 100%;
-                            margin-top: 8px;
-                            height: 16px;
-                            line-height: 16px;
-                            font-size: 16px;
-                            text-align: left;
-                            color: @m-white0;
-                            margin-bottom: 5px;
-                        }
-                        .green {
-                            color: @m-green0;
-                        }
-                        .red {
-                            color: @m-red1;
-                        }
-                        .blue {
-                            color: @m-blue0;
-                        }
-                    }
                 }
             }
         }