update

src/packages/mobile/views/mine/Index.vue

@@ -11,21 +11,23 @@
                             <img class="g-image--avatar" :src="userStore.userAvatar" />
                         </div>
                         <div class="profile-user__info">
-                            <div>
-                                <Tag :type="authStatus ? 'success' : 'primary'">{{ getAuthStatusName(authStatus) }}</Tag>
+                            <div class="top">
+                                <span>{{ accountInfo.accountname }}</span>
+                                <Icon name="checked" color="var(--van-tag-success-color)" v-if="authStatus" />
+                                <Icon name="warning" color="var(--van-tag-warning-color)" v-else />
                             </div>
-                            <span>{{ loginStore.loginId }}</span>
+                            <div class="bottom">{{ loginStore.loginId }}</div>
                         </div>
                     </div>
                     <div class="profile-account">
                         <span>正常</span>
-                        <span>{{ accountInfo?.accountid ?? 0 }}</span>
+                        <span>{{ accountInfo.accountid ?? 0 }}</span>
                     </div>
                 </div>
                 <div class="bank">
                     <div class="bank-item">
                         <span>余额</span>
-                        <span>{{ accountInfo?.currentbalance.toFixed(2) ?? '0.00' }}</span>
+                        <span>{{ accountInfo.currentbalance?.toFixed(2) ?? '0.00' }}</span>
                     </div>
                     <div class="bank-item">
                         <span>冻结</span>
@@ -117,10 +119,10 @@
 
 <script lang="ts" setup>
 import { shallowRef, onActivated } from 'vue'
-import { Cell, CellGroup, Button, Tag } from 'vant'
+import { Cell, CellGroup, Button, Icon } from 'vant'
 import { fullloading, dialog } from '@/utils/vant'
 import { useNavigation } from '@mobile/router/navigation'
-import { AuthStatus, getAuthStatusName } from '@/constants/account'
+import { AuthStatus } from '@/constants/account'
 import { queryBankAccountSign } from '@/services/api/bank'
 import { queryUserAccount } from '@/services/api/account'
 import { useLoginStore, useAccountStore, useUserStore } from '@/stores'

src/packages/mobile/views/mine/index.less

@@ -41,10 +41,17 @@
 
                 &__info {
                     flex: 1;
-                    display: flex;
-                    flex-direction: column;
 
-                    >span {
+                    .top {
+                        font-size: .24rem;
+                        color: #A1B1C5;
+
+                        .van-icon {
+                            margin-left: .04rem;
+                        }
+                    }
+
+                    .bottom {
                         line-height: .4rem;
                         font-size: .3rem;
                         font-weight: bold;

src/packages/pc/assets/themes/default/default.less

@@ -31,9 +31,6 @@
     --sidebar-menu-item-hover: #3a87f7;
     --sidebar-menu-item-active: #3a87f7;
 
-    --el-button-text-color: #fff;
-    --el-button-bg-color: #7a8a94;
-
     --el-color-primary: #26487c;
     --el-color-primary-light-3: #29538c;
     --el-color-primary-light-5: #70abd8;
@@ -49,287 +46,354 @@
     --el-color-danger: #db5050;
     --el-color-danger-light-3: #e56060;
     --el-color-danger-dark-2: var(--el-color-danger);
+}
 
-    //--el-bg-color-overlay: #424E59;
+.el-button {
+    &--info {
+        --el-button-disabled-bg-color: #aeb8c7;
+        --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
+    }
+}
 
-    .el-form {
-        &-item {
-            &__label {
-                color: #7a8a94;
-            }
+.el-popper {
+    &.is-light {
+        --el-bg-color-overlay: #424E59;
+    }
 
-            &--col {
-                display: flex;
-                width: 100%;
-                gap: 10px;
-            }
-        }
+    &.is-light &__arrow::before {
+        --el-border-color-light: #424E59;
+    }
+}
 
-        &--filter {
-
-            .el-input,
-            .el-select,
-            .el-date-editor {
-                --el-input-bg-color: #252d34;
-                --el-input-border-color: var(--el-input-bg-color);
-                --el-input-hover-border-color: #35434f;
-                --el-input-focus-border-color: var(--el-input-hover-border-color);
-                --el-select-border-color-hover: var(--el-input-hover-border-color);
-                --el-select-input-focus-border-color: var(--el-input-hover-border-color);
-                --el-input-text-color: var(--color-default);
-                --el-text-color-primary: #fff;
-                --el-text-color-placeholder: #4f5f6c;
-                --el-text-color-regular: var(--el-text-color-primary);
-            }
-        }
+.el-select-dropdown {
+    &__item {
+        --el-text-color-regular: #7a8a94;
 
-        &--vertical,
-        &--horizontal {
-            .el-form-item {
-                &:last-child {
-                    margin-bottom: 18px;
-                }
-            }
+        &.hover,
+        &.selected {
+            color: #fff;
+            background-color: #3a87f7;
+        }
+    }
+}
 
-            .el-input,
-            .el-select,
-            .el-textarea {
-                --el-input-bg-color: #15202b;
-                --el-input-border-color: #2b3f52;
-                --el-input-hover-border-color: #1890ff;
-                --el-input-focus-border-color: var(--el-input-hover-border-color);
-                --el-select-border-color-hover: var(--el-input-hover-border-color);
-                --el-select-input-focus-border-color: var(--el-input-hover-border-color);
-                --el-input-text-color: var(--color-default);
-                --el-text-color-placeholder: #4f5f6c;
-            }
+.el-dropdown-menu {
+    &__item {
+        --el-text-color-regular: #7a8a94;
 
-            .el-select {
-                width: 100%;
-            }
+        &:not(.is-disabled):focus {
+            --el-dropdown-menuItem-hover-fill: #1890ff;
+            --el-dropdown-menuItem-hover-color: #fff;
+        }
+    }
+}
+
+.el-picker-panel {
+    --el-color-primary: #1890ff;
+    --el-datepicker-off-text-color: #7a8a94;
+    --el-text-color-regular: #fff;
+    --el-datepicker-icon-color: var(--el-datepicker-off-text-color);
+    --el-datepicker-hover-text-color: var(--el-color-primary);
+    --el-border-color-lighter: #576675;
+    --el-datepicker-inner-border-color: var(--el-border-color-lighter);
+    --el-datepicker-inrange-bg-color: #5a6977;
+    --el-datepicker-inrange-hover-bg-color: var(--el-datepicker-inrange-bg-color);
+    --el-datepicker-active-color: #424E59;
+}
+
+.el-form {
+    &-item {
+        &__label {
+            color: #7a8a94;
+        }
 
-            .el-input-number {
-                width: 100%;
+        &--col {
+            display: flex;
+            width: 100%;
+            gap: 10px;
+        }
+    }
 
-                &__decrease,
-                &__increase {
-                    &:hover {
-                        color: #1890ff;
-                    }
+    &--filter {
+
+        .el-input,
+        .el-select,
+        .el-date-editor {
+            --el-input-bg-color: #252d34;
+            --el-input-border-color: var(--el-input-bg-color);
+            --el-input-hover-border-color: #35434f;
+            --el-input-focus-border-color: var(--el-input-hover-border-color);
+            --el-select-border-color-hover: var(--el-input-hover-border-color);
+            --el-select-input-focus-border-color: var(--el-input-hover-border-color);
+            --el-input-text-color: var(--color-default);
+            --el-text-color-primary: #fff;
+            --el-text-color-placeholder: #4f5f6c;
+            --el-text-color-regular: var(--el-text-color-primary);
+        }
+    }
 
-                    background-color: transparent;
-                    border: 0;
-                }
+    &--vertical,
+    &--horizontal {
+        .el-form-item {
+            &:last-child {
+                margin-bottom: 18px;
             }
         }
 
-        &--horizontal {
-            --el-text-color-regular: var(--color-secondary);
-
-            display: flex;
-            flex-wrap: wrap;
+        .el-input,
+        .el-select,
+        .el-textarea {
+            --el-input-bg-color: #15202b;
+            --el-input-border-color: #2b3f52;
+            --el-input-hover-border-color: #1890ff;
+            --el-input-focus-border-color: var(--el-input-hover-border-color);
+            --el-select-border-color-hover: var(--el-input-hover-border-color);
+            --el-select-input-focus-border-color: var(--el-input-hover-border-color);
+            --el-input-text-color: var(--color-default);
+            --el-text-color-placeholder: #4f5f6c;
+        }
 
-            .el-form-item {
-                width: 50%;
+        .el-select {
+            width: 100%;
+        }
 
-                &__label {
-                    padding: 0 12px;
-                }
+        .el-input-number {
+            width: 100%;
 
-                &__content {
-                    align-items: flex-start;
-                    padding-right: 80px;
+            &__decrease,
+            &__increase {
+                &:hover {
+                    color: #1890ff;
                 }
 
-                &--row {
-                    width: 100%;
-                }
+                background-color: transparent;
+                border: 0;
             }
         }
     }
 
-    .app-tabs {
-        &--primary {
-            height: 100%;
+    &--horizontal {
+        --el-text-color-regular: var(--color-secondary);
 
-            &.app-tabs--top>.app-tabs__navbar {
-                background-color: #181e22;
-                border-bottom: 1px solid #3a87f7;
-                padding: 2px;
-                padding-bottom: 0;
+        display: flex;
+        flex-wrap: wrap;
 
-                .tabs-item {
-                    height: 32px;
-                    line-height: 32px;
-                    min-width: 120px;
-                    color: #88a0ae;
-                    text-align: center;
-                    cursor: pointer;
-                    border-radius: 5px 5px 0px 0px;
-                    background: linear-gradient(0deg, #262e35 0%, #283139 100%);
-                    padding: 0 12px;
-
-                    &:not(:first-child) {
-                        margin-left: 3px;
-                    }
+        .el-form-item {
+            width: 50%;
 
-                    &.is-active {
-                        color: #fff;
-                        background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
-                    }
-                }
+            &__label {
+                padding: 0 12px;
             }
 
-            &.app-tabs--bottom>.app-tabs__navbar {
-                padding: 2px;
-
-                .tabs-item {
-                    height: 26px;
-                    line-height: 26px;
-                    min-width: 120px;
-                    color: #88a0ae;
-                    text-align: center;
-                    cursor: pointer;
-                    background: linear-gradient(0deg, #262e35 0%, #283139 100%);
-                    padding: 0 12px;
-
-                    &:not(:first-child) {
-                        margin-left: 3px;
-                    }
+            &__content {
+                align-items: flex-start;
+                padding-right: 80px;
+            }
 
-                    &.is-active {
-                        color: #fff;
-                        background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
-                    }
-                }
+            &--row {
+                width: 100%;
             }
         }
+    }
+}
 
-        &--info {
-            position: relative;
-            background-color: #181E22;
+.app-tabs {
+    &--primary {
+        height: 100%;
 
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: 0;
-                width: 100%;
-                height: 1px;
-                background-color: #22292C;
-            }
+        &.app-tabs--top>.app-tabs__navbar {
+            background-color: #181e22;
+            border-bottom: 1px solid #3a87f7;
+            padding: 2px;
+            padding-bottom: 0;
 
             .tabs-item {
-                z-index: 1;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #7a8a94;
+                height: 32px;
+                line-height: 32px;
+                min-width: 120px;
+                color: #88a0ae;
+                text-align: center;
                 cursor: pointer;
-                border: 1px solid #22292c;
-                padding: 5px 16px;
+                border-radius: 5px 5px 0px 0px;
+                background: linear-gradient(0deg, #262e35 0%, #283139 100%);
+                padding: 0 12px;
 
-                &:not(:last-child) {
-                    border-right: 0;
+                &:not(:first-child) {
+                    margin-left: 3px;
                 }
 
                 &.is-active {
-                    color: #0D96FF;
-                    background-color: #0D283F;
-                    border-color: #013B6D;
+                    color: #fff;
+                    background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
+                }
+            }
+        }
+
+        &.app-tabs--bottom>.app-tabs__navbar {
+            padding: 2px;
+
+            .tabs-item {
+                height: 26px;
+                line-height: 26px;
+                min-width: 120px;
+                color: #88a0ae;
+                text-align: center;
+                cursor: pointer;
+                background: linear-gradient(0deg, #262e35 0%, #283139 100%);
+                padding: 0 12px;
+
+                // &::before,
+                // &::after {
+                //     content: '';
+                //     display: inline-block;
+                //     width: 20px;
+                //     height: 20px;
+                // }
+
+                // &::before {
+                //     background: linear-gradient(-135deg, #fff 50%, transparent 50%);
+                // }
+
+                // &::after {
+                //     background: linear-gradient(135deg, #fff 50%, transparent 50%);
+                // }
+
+                &:not(:first-child) {
+                    margin-left: 3px;
                 }
 
-                &.is-active+.tabs-item {
-                    border-left-color: #013B6D;
+                &.is-active {
+                    color: #fff;
+                    background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
                 }
             }
         }
     }
 
-    .g-view-detail {
-        &__header {
+    &--info {
+        position: relative;
+        background-color: #181E22;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 1px;
+            background-color: #22292C;
+        }
+
+        .tabs-item {
+            z-index: 1;
             display: flex;
+            justify-content: center;
             align-items: center;
-            gap: 10px;
-            width: 100%;
-            background-color: #181e22;
-            border-bottom: 1px solid #3a87f7;
-            padding: 4px;
+            color: #7a8a94;
+            cursor: pointer;
+            border: 1px solid #22292c;
+            padding: 5px 16px;
 
-            .iconbar {
-                .el-button.is-link {
-                    padding: 5px 10px;
-                }
+            &:not(:last-child) {
+                border-right: 0;
+            }
+
+            &.is-active {
+                color: #0D96FF;
+                background-color: #0D283F;
+                border-color: #013B6D;
+            }
+
+            &.is-active+.tabs-item {
+                border-left-color: #013B6D;
+            }
+        }
+    }
+}
+
+.g-view-detail {
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+        background-color: #181e22;
+        border-bottom: 1px solid #3a87f7;
+        padding: 4px;
+
+        .iconbar {
+            .el-button.is-link {
+                padding: 5px 10px;
             }
+        }
+
+        .breadcrumb {
+            --item-background: #1556b5;
+            display: flex;
+            color: #fff;
 
-            .breadcrumb {
-                --item-background: #1556b5;
+            li {
                 display: flex;
-                color: #fff;
+                align-items: center;
 
-                li {
-                    display: flex;
-                    align-items: center;
+                &:first-child::before {
+                    border-left-color: var(--item-background);
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                }
 
-                    &:first-child::before {
-                        border-left-color: var(--item-background);
-                        border-top-left-radius: 4px;
-                        border-bottom-left-radius: 4px;
-                    }
+                &::before {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    border: 0 solid var(--item-background);
+                    border-width: 16px 0 16px 12px;
+                    border-left-color: transparent;
+                }
 
-                    &::before {
-                        content: '';
-                        width: 0;
-                        height: 0;
-                        border: 0 solid var(--item-background);
-                        border-width: 16px 0 16px 12px;
-                        border-left-color: transparent;
-                    }
+                &::after {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    border: 0 solid transparent;
+                    border-width: 16px 0 16px 12px;
+                    border-left-color: var(--item-background);
+                }
 
-                    &::after {
-                        content: '';
-                        width: 0;
-                        height: 0;
-                        border: 0 solid transparent;
-                        border-width: 16px 0 16px 12px;
-                        border-left-color: var(--item-background);
-                    }
+                span {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 32px;
+                    background-color: var(--item-background);
+                    padding-left: 10px;
 
-                    span {
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        height: 32px;
-                        background-color: var(--item-background);
-                        padding-left: 10px;
-
-                        &:last-child {
-                            padding-right: 10px;
-                        }
+                    &:last-child {
+                        padding-right: 10px;
                     }
                 }
             }
+        }
 
-            .datainfo {
-                display: flex;
-                gap: 20px;
-                color: #7A8A94;
-                font-size: 12px;
-
-                li {
-                    span {
-                        &:last-child {
-                            color: #fff;
-                        }
+        .datainfo {
+            display: flex;
+            gap: 20px;
+            color: #7A8A94;
+            font-size: 12px;
+
+            li {
+                span {
+                    &:last-child {
+                        color: #fff;
                     }
                 }
             }
+        }
 
-            .buttonbar {
-                margin-left: auto;
+        .buttonbar {
+            margin-left: auto;
 
-                .el-button {
-                    min-width: 88px;
-                }
+            .el-button {
+                min-width: 88px;
             }
         }
     }

src/packages/pc/components/modules/listing/index.less

@@ -4,8 +4,12 @@
     background-color: #14181B;
 
     &__forex {
-        width: 160px;
+        width: 200px;
         padding: 10px;
+
+        .app-quote-forex {
+            height: 100%;
+        }
     }
 
     &__form {
@@ -13,18 +17,54 @@
         padding: 10px;
         border-left: 1px solid #363f45;
 
-        .block-title {
+        .header-title {
             text-align: center;
             margin-bottom: 15px;
         }
 
-        .el-form-item {
-            &--small {
-                margin-bottom: 10px;
+        .footer-btnbar {
+            text-align: center;
+        }
+
+        .qty-group {
+            .el-radio-group {
+                flex-wrap: nowrap;
+                width: 100%;
+                margin-top: 5px;
             }
 
-            &__label {
-                color: #ACB8C0;
+            .el-radio {
+                --el-color-primary: #0D96FF;
+                --el-border: 1px solid #22292c;
+
+                flex: 1;
+                justify-content: center;
+                height: 20px;
+                color: #7a8a94;
+                border-radius: 0;
+                padding: 0;
+                margin: 0;
+
+                &:not(:last-child) {
+                    border-right: 0;
+                }
+
+                &.is-bordered.is-checked {
+                    background-color: #0D283F;
+                    border-color: #013B6D;
+
+                    +.el-radio {
+                        border-left-color: #013B6D;
+                    }
+                }
+
+                &__input {
+                    display: none;
+                }
+
+                &__label {
+                    padding: 0;
+                }
             }
         }
     }

src/packages/pc/components/modules/listing/index.vue

@@ -4,7 +4,7 @@
             <Forex v-bind="{ goodsCode: goodsStore.goodsCode }" />
         </div>
         <div class="app-listing__form">
-            <h4 class="block-title">订单挂牌</h4>
+            <h4 class="header-title">订单挂牌</h4>
             <el-form ref="formRef" class="el-form--vertical" size="small" label-width="50px" :model="formData"
                 :rules="formRules">
                 <el-form-item prop="GoodsID" label="商品">
@@ -15,9 +15,9 @@
                 </el-form-item>
                 <el-form-item prop="BuyOrSell" label="方向">
                     <el-radio-group v-model="formData.BuyOrSell">
-                        <el-radio v-for="(item, index) in getBuyOrSellList()" :key="index" :label="item.value">
+                        <el-radio-button v-for="(item, index) in getBuyOrSellList()" :key="index" :label="item.value">
                             {{ item.label }}
-                        </el-radio>
+                        </el-radio-button>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item prop="OrderPrice" label="价格">
@@ -26,29 +26,31 @@
                 </el-form-item>
                 <el-form-item prop="OrderQty" label="数量">
                     <div class="el-form-item--col">
-                        <el-input-number placeholder="请输入" :min="agreeunit" :step="qtyStep" v-model="orderQty" />
+                        <div class="qty-group">
+                            <el-input-number placeholder="请输入" :min="agreeunit" :step="qtyStep" v-model="orderQty" />
+                            <el-radio-group size="small" v-model="qtyStep" @change="onRadioChange">
+                                <el-radio v-for="(value, index) in qtyStepList" :key="index" :label="value" border />
+                            </el-radio-group>
+                        </div>
                         <span>{{ getGoodsUnitName(quote?.goodunitid) }}</span>
                     </div>
-                    <el-radio-group v-model="qtyStep" @change="onRadioChange">
-                        <el-radio-button v-for="(value, index) in qtyStepList" :key="index" :label="value" />
-                    </el-radio-group>
                 </el-form-item>
             </el-form>
-            <div class="block-btnbar">
+            <div class="footer-btnbar">
                 <template v-if="formData.BuyOrSell === BuyOrSell.Buy">
-                    <el-button type="primary" size="small" :loading="loading"
+                    <el-button type="primary" :loading="loading"
                         @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立买入</el-button>
-                    <el-button type="primary" size="small" :loading="loading"
-                        :disabled="(sellQty === 0) || (orderQty > sellQty)" @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
+                    <el-button type="primary" :loading="loading" :disabled="(sellQty === 0) || (orderQty > sellQty)"
+                        @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
                         <span>转让买入</span>
                         <span v-if="sellQty">(≤{{ sellQty }})</span>
                     </el-button>
                 </template>
                 <template v-if="formData.BuyOrSell === BuyOrSell.Sell">
-                    <el-button type="primary" size="small" :loading="loading"
+                    <el-button type="primary" :loading="loading"
                         @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立卖出</el-button>
-                    <el-button type="primary" size="small" :loading="loading"
-                        :disabled="(buyQty === 0) || (orderQty > buyQty)" @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
+                    <el-button type="primary" :loading="loading" :disabled="(buyQty === 0) || (orderQty > buyQty)"
+                        @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
                         <span>转让卖出</span>
                         <span v-if="buyQty">(≤{{ buyQty }})</span>
                     </el-button>

src/packages/pc/components/modules/quote/forex/index.less

@@ -1,11 +1,17 @@
 .app-quote-forex {
+    display: flex;
+    flex-direction: column;
     color: #ACB8C0;
 
     ul {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
         padding: 5px;
 
         +ul {
-            border-top: 1px solid #666;
+            border-top: 1px solid #333;
         }
 
         li {

src/packages/pc/index.html

@@ -9,7 +9,6 @@
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
-  <script type="text/javascript" src="./lib/tinymce/tinymce.min.js"></script>
 </head>
 
 <body>

src/packages/pc/views/market/trade/goods/detail/components/order/index.less

@@ -1,6 +1,7 @@
 .market-trade-goods-detail-order {
     display: flex;
     height: 100%;
+    overflow: hidden;
     background-color: #181e22;
 
     .app-table {

src/packages/pc/views/market/trade/spot/order/index.less

@@ -2,6 +2,7 @@
     .g-view-detail__container {
         display: flex;
         height: 100%;
+        overflow: hidden;
         background-color: #181e22;
 
         .app-table {