update

src/hooks/echarts/candlestick/index.ts

@@ -15,7 +15,6 @@ export function useCandlestickChart(goodscode: string) {
     const loading = ref(false);
     const isEmpty = ref(true);
     const dataIndex = ref(-1); // 当前数据索引值
-    const cycleType = ref(ChartCycleType.Minutes);
     const quote = futuresStore.getQuoteInfo(goodscode); // 实时行情
 
     // 当前选中的数据项
@@ -58,7 +57,7 @@ export function useCandlestickChart(goodscode: string) {
     const initData = (cycletype: ChartCycleType) => {
         clearData();
         dataIndex.value = -1;
-        cycleType.value = cycletype;
+        options.cycleType = cycletype;
         loading.value = true;
         isEmpty.value = true;
 
@@ -88,7 +87,7 @@ export function useCandlestickChart(goodscode: string) {
      */
     const getCycleMilliseconds = () => {
         const milliseconds = 60 * 1000; // 一分钟毫秒数
-        switch (cycleType.value) {
+        switch (options.cycleType) {
             case ChartCycleType.Minutes5: {
                 return milliseconds * 5;
             }

src/hooks/echarts/candlestick/options.ts

@@ -1,6 +1,7 @@
 import { reactive, watch } from 'vue'
 import { ECOption } from '@/components/base/echarts/core'
 import { timerInterceptor } from '@/utils/timer'
+import { ChartCycleType } from '@/constants/chart'
 import { useGlobalStore } from '@/stores'
 import { EchartsDataset, EchartsOptions, Colors } from './types'
 import moment from 'moment'
@@ -33,6 +34,7 @@ function getColors() {
 export function useOptions(dataset: EchartsDataset) {
     // 图表配置项
     const options = reactive<EchartsOptions>({
+        cycleType: ChartCycleType.Minutes,
         colors: getColors(),
         candlestick: {},
         macd: {},
@@ -68,12 +70,30 @@ export function useOptions(dataset: EchartsDataset) {
             xAxis: {
                 type: 'category',
                 axisLabel: {
-                    formatter: (val: string) => moment(val).format('YYYY-MM-DD'),
+                    formatter: (val: string) => {
+                        switch (options.cycleType) {
+                            case ChartCycleType.Day: {
+                                return moment(val).format('YYYY-MM-DD')
+                            }
+                            default: {
+                                return moment(val).format('HH:mm')
+                            }
+                        }
+                    },
                     margin: 12,
                 },
                 axisPointer: {
                     label: {
-                        formatter: (params) => moment(params.value).format('YYYY-MM-DD HH:mm:ss'),
+                        formatter: (params) => {
+                            switch (options.cycleType) {
+                                case ChartCycleType.Day: {
+                                    return moment(params.value).format('YYYY-MM-DD')
+                                }
+                                default: {
+                                    return moment(params.value).format('YYYY-MM-DD HH:mm:ss')
+                                }
+                            }
+                        },
                     }
                 },
                 axisTick: {

src/hooks/echarts/candlestick/types.ts

@@ -77,6 +77,7 @@ export type CCI = {
  * 图表配置项
  */
 export interface EchartsOptions {
+    cycleType: Number; // 周期类型
     colors: Colors;
     candlestick: ECOption;
     macd: ECOption;

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

@@ -1,4 +1,4 @@
-[theme='default'] {
+:root {
     /* 字体大小规范 */
     --font-x-large: 18px;
     --font-large: 16px;
@@ -187,4 +187,89 @@
             }
         }
     }
+
+    .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;
+
+                li {
+                    display: flex;
+                    align-items: center;
+
+                    &:first-child::before {
+                        border-left-color: var(--item-background);
+                        border-top-left-radius: 3px;
+                        border-bottom-left-radius: 3px;
+                    }
+
+                    &::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);
+                    }
+
+                    span {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 32px;
+                        background-color: var(--item-background);
+                        padding-left: 10px;
+
+                        &:last-child {
+                            padding-right: 10px;
+                        }
+                    }
+                }
+            }
+
+            .datainfo {
+                display: flex;
+                gap: 20px;
+                color: #7A8A94;
+                font-size: 12px;
+
+                li {
+                    span {
+                        &:last-child {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
+            .buttonbar {
+                margin-left: auto;
+            }
+        }
+    }
 }

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

@@ -0,0 +1,72 @@
+[class*='g-image'] {
+    position: relative;
+    object-fit: cover;
+    overflow: hidden;
+
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: url("~@pc/assets/images/avatar.png") no-repeat center;
+        background-size: cover;
+    }
+}
+
+.g-price-up {
+    color: #ff3333;
+}
+
+.g-price-normal {
+    color: #333333;
+}
+
+.g-price-down {
+    color: #0baf1f;
+}
+
+.el-form {
+    &-item:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.el-popper {
+    &.is-light {
+        border: 0;
+    }
+
+    .el-menu {
+        border-radius: 4px;
+        box-shadow: 0 2px 30px 0 rgba(0, 0, 0, .15);
+
+        &--popup {
+            min-width: 160px;
+        }
+
+        &--vertical {
+            .el-menu {
+                &-item {
+                    height: 44px;
+                    line-height: 44px;
+                    color: #666;
+
+                    &.is-active {
+                        color: var(--sidebar-menu-item-active);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.el-dropdown-menu {
+    padding: 10px 0;
+
+    &__item {
+        line-height: 36px;
+        padding: 0 20px;
+    }
+}

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

@@ -1,76 +1,4 @@
 @import './base/reset.less';
-@import './default/variable.less';
-@import './dark/variable.less';
-
-[class*='g-image'] {
-    position: relative;
-    object-fit: cover;
-    overflow: hidden;
-
-    &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background: url("~@pc/assets/images/avatar.png") no-repeat center;
-        background-size: cover;
-    }
-}
-
-.el-form {
-    &-item:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.el-popper {
-    &.is-light {
-        border: 0;
-    }
-
-    .el-menu {
-        border-radius: 4px;
-        box-shadow: 0 2px 30px 0 rgba(0, 0, 0, .15);
-
-        &--popup {
-            min-width: 160px;
-        }
-
-        &--vertical {
-            .el-menu {
-                &-item {
-                    height: 44px;
-                    line-height: 44px;
-                    color: #666;
-
-                    &.is-active {
-                        color: var(--sidebar-menu-item-active);
-                    }
-                }
-            }
-        }
-    }
-}
-
-.el-dropdown-menu {
-    padding: 10px 0;
-
-    &__item {
-        line-height: 36px;
-        padding: 0 20px;
-    }
-}
-
-.g-price-up {
-    color: #ff3333;
-}
-
-.g-price-normal {
-    color: #333333;
-}
-
-.g-price-down {
-    color: #0baf1f;
-}
+@import './global/global.less';
+@import './default/default.less';
+@import './dark/dark.less';

src/packages/pc/components/base/table/index.less

@@ -82,4 +82,34 @@
             }
         }
     }
+
+    .el-table {
+
+        &.buy,
+        &.sell {
+            --el-table-row-hover-bg-color: var(--el-table-bg-color); // 表格行鼠标经过背景色
+            --el-table-current-row-bg-color: var(--el-table-bg-color); // 当前行高亮颜色
+
+            td.el-table {
+
+                &__cell:not(&__expanded-cell):first-child,
+                &__cell:is(&__expand-column)+td {
+                    background-color: var(--el-table-header-bg-color);
+                }
+
+                &__expanded-cell,
+                &__expanded-cell:hover {
+                    background-color: #000 !important;
+                }
+            }
+        }
+
+        &.buy {
+            --el-table-bg-color: #271112; //表格背景颜色
+        }
+
+        &.sell {
+            --el-table-bg-color: #10251d; //表格背景颜色
+        }
+    }
 }

src/packages/pc/components/base/table/index.vue

@@ -14,8 +14,9 @@
       </div>
     </div>
     <div class="app-table__container">
-      <el-table ref="tableRef" height="100%" :header-cell-class-name="selectionType" v-bind="$attrs" highlight-current-row
-        scrollbar-always-on @row-click="onRowClick" @expand-change="onRowClick" @select="onSelect" border>
+      <el-table ref="tableRef" height="100%" :header-cell-class-name="selectionType" v-bind="$attrs"
+        :highlight-current-row="highlightCurrentRow" scrollbar-always-on @row-click="onRowClick"
+        @expand-change="onRowClick" @select="onSelect" border>
         <!-- 展开行 -->
         <el-table-column type="expand" v-if="$slots.expand">
           <template #default="{ row, $index }">
@@ -68,6 +69,11 @@ export default defineComponent({
     showToolbar: Boolean,
     loading: Boolean,
     showIndex: Boolean,
+    // 是否要高亮当前行
+    highlightCurrentRow: {
+      type: Boolean,
+      default: true
+    },
     // 选择列类型
     selectionType: {
       type: String as PropType<'single' | 'multiple'>,

src/packages/pc/components/layouts/page/index.vue

@@ -2,11 +2,11 @@
   <div class="app-page">
     <div class="app-page__header">
       <app-header>
-        <template #left>
+        <!-- <template #left>
           <i class="icon-fold-expand" title="折叠/展开" @click="isCollapse = !isCollapse">
             <span :class="isCollapse ? 'g-icon--expand' : 'g-icon--fold'"></span>
           </i>
-        </template>
+        </template> -->
       </app-header>
     </div>
     <div class="app-page__wrapper">

src/packages/pc/components/modules/echarts-kline/index.less

@@ -1,57 +0,0 @@
-.app-echats-kline {
-    display       : flex;
-    flex-direction: column;
-    height        : 100%;
-
-    &__tip {
-        margin: auto;
-    }
-
-    &__container {
-        display       : flex;
-        flex-direction: column;
-
-        .app-echarts {
-            flex: 1;
-        }
-
-        .legend {
-            display  : flex;
-            flex-wrap: wrap;
-            color    : #7a8a94;
-            font-size: 12px;
-            padding  : 10px;
-            margin   : 0;
-
-            &-item {
-                &:not(:first-child) {
-                    margin-left: 10px;
-                }
-            }
-        }
-    }
-
-    &__container.main {
-        flex: 2;
-    }
-
-    &__container.indicator {
-        position: relative;
-        flex    : 1.2;
-
-        .section {
-            flex          : 1;
-            display       : flex;
-            flex-direction: column;
-            overflow      : hidden;
-
-            &.is-hide {
-                position: absolute;
-                z-index : -1;
-                width   : 100%;
-                height  : 100%;
-                opacity : 0;
-            }
-        }
-    }
-}

src/packages/pc/components/modules/echarts-kline/index.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="app-echats-kline">
-    <template v-if="loading">
-      <div class="app-echats-kline__tip">正在加载...</div>
-    </template>
-    <template v-else-if="isEmpty">
-      <div class="app-echats-kline__tip">暂无数据</div>
-    </template>
-    <template v-else>
-      <div class="app-echats-kline__container main">
-        <ul class="legend">
-          <li class="legend-item">开: {{ selectedItem.open }}</li>
-          <li class="legend-item">收: {{ selectedItem.close }}</li>
-          <li class="legend-item">高: {{ selectedItem.highest }}</li>
-          <li class="legend-item">低: {{ selectedItem.lowest }}</li>
-          <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
-          <li class="legend-item">MA10: {{ selectedItem.ma10 }}</li>
-          <li class="legend-item">MA15: {{ selectedItem.ma15 }}</li>
-        </ul>
-        <app-echarts :option="options.candlestick" v-model:dataIndex="dataIndex" @ready="mainReady" />
-      </div>
-      <app-tabs class="app-tabs--info" :data-list="chartSeriesTypeList" @change="tabChange" v-if="showIndicator">
-        <div class="app-echats-kline__container indicator">
-          <!-- MACD -->
-          <section class="section" v-if="activeSeriesType === ChartSeriesType.MACD">
-            <ul class="legend">
-              <li class="legend-item">MACD: {{ selectedItem.macd }}</li>
-              <li class="legend-item">DIF: {{ selectedItem.dif }}</li>
-              <li class="legend-item">DEA: {{ selectedItem.dea }}</li>
-            </ul>
-            <app-echarts :option="options.macd" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
-          </section>
-          <!-- VOL -->
-          <section class="section" v-if="activeSeriesType === ChartSeriesType.VOL">
-            <ul class="legend">
-              <li class="legend-item">VOL: {{ selectedItem.vol }}</li>
-            </ul>
-            <app-echarts :option="options.vol" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
-          </section>
-          <!-- KDJ -->
-          <section class="section" v-if="activeSeriesType === ChartSeriesType.KDJ">
-            <ul class="legend">
-              <li class="legend-item">K: {{ selectedItem.k }}</li>
-              <li class="legend-item">D: {{ selectedItem.d }}</li>
-              <li class="legend-item">J: {{ selectedItem.j }}</li>
-            </ul>
-            <app-echarts :option="options.kdj" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
-          </section>
-          <!-- CCI -->
-          <section class="section" v-if="activeSeriesType === ChartSeriesType.CCI">
-            <ul class="legend">
-              <li class="legend-item">CCI: {{ selectedItem.cci }}</li>
-            </ul>
-            <app-echarts :option="options.cci" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
-          </section>
-        </div>
-      </app-tabs>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, PropType, watch } from 'vue'
-import { echarts } from '@/components/base/echarts/core'
-import { ChartCycleType, ChartSeriesType, getChartSeriesTypeList } from '@/constants/chart'
-import { useCandlestickChart } from '@/hooks/echarts/candlestick'
-import AppEcharts from '@/components/base/echarts/index.vue'
-import AppTabs from '@/components/base/tabs/index.vue'
-
-const props = defineProps({
-  goodscode: {
-    type: String,
-    required: true,
-  },
-  // 周期类型
-  cycleType: {
-    type: Number as PropType<ChartCycleType>,
-    default: ChartCycleType.Minutes,
-  },
-  // 是否显示指标
-  showIndicator: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const { loading, dataIndex, isEmpty, options, selectedItem, initData, initOptions } = useCandlestickChart(props.goodscode);
-const activeSeriesType = ref(ChartSeriesType.MACD); // 当前选中的指标
-const chartGroup = new Map<string, echarts.ECharts>(); // 图表联动实例组
-const chartSeriesTypeList = getChartSeriesTypeList();
-
-// 指标切换
-const tabChange = (index: number) => {
-  activeSeriesType.value = chartSeriesTypeList[index].value;
-  setTimeout(() => {
-    initOptions();
-  }, 0);
-}
-
-const mainReady = (chart: echarts.ECharts) => {
-  chartGroup.set('main', chart);
-  initOptions();
-}
-
-const indicatorReady = (chart: echarts.ECharts) => {
-  chartGroup.set('indicator', chart);
-  echarts.connect([...chartGroup.values()]); // 图表联动
-}
-
-// 监听周期选择变化
-watch(() => props.cycleType, (val) => {
-  initData(val);
-}, {
-  immediate: true
-})
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>

src/packages/pc/components/modules/echarts-timeline/index.less

@@ -1,23 +0,0 @@
-.app-echats-timeline {
-    display       : flex;
-    flex-direction: column;
-    height        : 100%;
-
-    &__tip {
-        margin: auto;
-    }
-
-    .legend {
-        display  : flex;
-        color    : #7a8a94;
-        font-size: 12px;
-        padding  : 10px;
-        margin   : 0;
-
-        &-item {
-            &:not(:first-child) {
-                margin-left: 10px;
-            }
-        }
-    }
-}

src/packages/pc/components/modules/echarts-timeline/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="app-echats-timeline">
-    <template v-if="loading">
-      <div class="app-echats-timeline__tip">正在加载...</div>
-    </template>
-    <template v-else-if="isEmpty">
-      <div class="app-echats-timeline__tip">暂无数据</div>
-    </template>
-    <template v-else>
-      <ul class="legend">
-        <li class="legend-item">收: {{ selectedItem.close }}</li>
-        <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
-      </ul>
-      <app-echarts :option="options.timeline" v-model:dataIndex="dataIndex" @ready="initOptions" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useTimelineChart } from '@/hooks/echarts/timeline'
-import AppEcharts from '@/components/base/echarts/index.vue'
-
-const props = defineProps({
-  goodscode: {
-    type: String,
-    required: true,
-  },
-})
-
-const { loading, dataIndex, isEmpty, options, selectedItem, initOptions } = useTimelineChart(props.goodscode);
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>

src/packages/pc/views/account/receipt/components/edit/index.vue

@@ -2,7 +2,7 @@
 <template>
     <app-drawer :title="selectedRow?.autoid ? '修改发票' : '新增发票'" :width="460" v-model:show="show" :loading="loading"
         :refresh="refresh">
-        <el-form ref="formRef" label-width="100px" :model="formData" :rules="formRules">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="发票类型" prop="ReceiptType">
                 <el-radio-group v-model="formData.ReceiptType">
                     <el-radio :label="1">个人</el-radio>

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

@@ -0,0 +1,21 @@
+.market-trade-goods-detail-chart {
+    display: flex;
+    height: 100%;
+
+    >.block-left {
+        flex: 1;
+    }
+
+    >.block-right {
+        display: flex;
+        flex-direction: column;
+        width: 240px;
+        background-color: #14181B;
+        border-left: 1px solid #33393D;
+
+        .app-quote-tik {
+            flex: 1;
+            overflow-y: auto;
+        }
+    }
+}

src/packages/pc/views/market/trade/goods/detail/components/chart/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="market-trade-goods-detail__container">
+    <div class="market-trade-goods-detail-chart">
         <div class="block-left">
             <Chart v-bind="{ goodsCode }" @ready="onReady" />
         </div>
@@ -33,4 +33,8 @@ const onReady = (start: string, end: string) => {
     startTime.value = formatDate(start)
     endTime.value = formatDate(end)
 }
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

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

@@ -1,8 +1,7 @@
 <!-- 交易市场-订单交易-买卖大厅-摘牌 -->
 <template>
     <app-drawer title="摘牌" v-model:show="show" :loading="loading" :refresh="refresh">
-        <el-form ref="formRef" class="el-form--vertical" label-width="100px" label-position="left" :model="formData"
-            :rules="formRules">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="挂牌方">
                 <span>{{ selectedRow.username }}</span>
             </el-form-item>

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%;
+    background-color: #181e22;
 
     .app-table {
         flex: 1;

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

@@ -1,41 +0,0 @@
-.g-view-detail {
-    &__header {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-        background-color: #181e22;
-        border-bottom: 1px solid #3a87f7;
-        padding: 4px;
-
-        .breadcrumb {
-            color: #0D96FF;
-        }
-
-        .btnbar {
-            margin-left: auto;
-        }
-    }
-
-    &__container {
-        display: flex;
-        height: 100%;
-
-        >.block-left {
-            flex: 1;
-        }
-
-        >.block-right {
-            display: flex;
-            flex-direction: column;
-            width: 240px;
-            background-color: #14181B;
-            border-left: 1px solid #33393D;
-
-            .app-quote-tik {
-                flex: 1;
-                overflow-y: auto;
-            }
-        }
-    }
-}

src/packages/pc/views/market/trade/goods/detail/index.vue

@@ -1,17 +1,19 @@
 <!-- 交易市场-订单交易-详情 -->
 <template>
     <teleport to="#appPageTeleport">
-        <app-view class="g-view-detail">
+        <app-view class="market-trade-goods-detail g-view-detail">
             <template #header>
                 <div class="g-view-detail__header">
-                    <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
+                    <div class="iconbar">
+                        <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
+                    </div>
                     <ul class="breadcrumb" v-if="quote">
-                        <li class="breadcrumb-item">
+                        <li>
                             <span>{{ quote.goodscode }}</span>
                             <span>{{ quote.goodsname }}</span>
                         </li>
                     </ul>
-                    <div class="btnbar">
+                    <div class="buttonbar">
                         <el-button type="primary" @click="active = false" v-if="active">买卖大厅</el-button>
                         <el-button type="primary" @click="active = true" v-else>图表</el-button>
                     </div>
@@ -43,8 +45,4 @@ const quote = futuresStore.getQuoteInfo(props.goodsId)
 const active = shallowRef(true)
 
 const goodsCode = computed(() => quote.value?.goodscode ?? '')
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/pc/views/market/trade/spot/order/delisting/index.vue

@@ -1,8 +1,7 @@
 <!-- 交易市场-仓单交易-买卖大厅-摘牌 -->
 <template>
     <app-drawer title="摘牌" v-model:show="show" :loading="loading" :refresh="refresh">
-        <el-form ref="formRef" class="el-form--vertical" label-width="100px" label-position="left" :model="formData"
-            :rules="formRules">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="挂牌方">
                 <span>{{ quoteDetail.username }}</span>
             </el-form-item>

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

@@ -1,8 +1,11 @@
-.market-trade-goods-detail-order {
-    display: flex;
-    height: 100%;
+.market-trade-spot-order {
+    .g-view-detail__container {
+        display: flex;
+        height: 100%;
+        background-color: #181e22;
 
-    .app-table {
-        flex: 1;
+        .app-table {
+            flex: 1;
+        }
     }
 }

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

@@ -1,16 +1,44 @@
 <!-- 交易市场-仓单交易-买卖大厅 -->
 <template>
     <teleport to="#appPageTeleport">
-        <app-view class="g-view-detail">
+        <app-view class="market-trade-spot-order g-view-detail">
             <template #header>
                 <div class="g-view-detail__header">
-                    <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
-                    <div class="btnbar">
+                    <div class="iconbar">
+                        <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
+                    </div>
+                    <ul class="breadcrumb" v-if="quoteItem">
+                        <li>
+                            <span>{{ quoteItem.deliverygoodsname }}</span>
+                        </li>
+                        <li>
+                            <span>{{ quoteItem.warehousename }}</span>
+                        </li>
+                    </ul>
+                    <ul class="datainfo" v-if="quoteItem">
+                        <li>
+                            <span>卖价：</span>
+                            <span>{{ quoteItem.sellprice }}</span>
+                        </li>
+                        <li>
+                            <span>买价：</span>
+                            <span>{{ quoteItem.buyprice }}</span>
+                        </li>
+                        <li>
+                            <span>卖量：</span>
+                            <span>{{ quoteItem.sellqty }}</span>
+                        </li>
+                        <li>
+                            <span>买量：</span>
+                            <span>{{ quoteItem.buyqty }}</span>
+                        </li>
+                    </ul>
+                    <div class="buttonbar">
                         <el-button type="primary" @click="openComponent('listing')">挂牌求购</el-button>
                     </div>
                 </div>
             </template>
-            <div class="market-trade-spot-order" style="display: flex;height: 100%;">
+            <div class="g-view-detail__container">
                 <app-table class="sell" :data="sellList" v-model:columns="sellColumns" :row-key="rowKey"
                     :expand-row-keys="expandKeys" @row-click="rowClick" showIndex>
                     <!-- 展开行 -->

src/packages/pc/views/market/trade/spot/order/listing/index.vue

@@ -1,8 +1,7 @@
 <!-- 交易市场-仓单交易-买卖大厅-挂牌 -->
 <template>
     <app-drawer title="挂牌" v-model:show="show" :loading="loading" :refresh="refresh">
-        <el-form ref="formRef" class="el-form--vertical" label-width="100px" label-position="left" :model="formData"
-            :rules="formRules">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item prop="PerformanceTemplateID" label="履约方式">
                 <Performance :market-id="17201" v-model="formData.PerformanceTemplateID" />
             </el-form-item>