update

src/packages/pc/views/boot/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="boot">
-    <el-button :loading="loading" v-if="loading">正在初始化...</el-button>
-    <el-button @click="initService" v-else>重试</el-button>
+  <div class="boot" v-loading="loading">
+    <el-button @click="initService" v-if="!loading">重试</el-button>
   </div>
 </template>
 

src/packages/pc/views/search/jewelry/components/compare/index.vue

@@ -141,10 +141,6 @@ defineProps({
 })
 
 const show = shallowRef(true)
-
-const onCancel = () => {
-    show.value = false
-}
 </script>
 
 <style lang="less" scoped>

src/packages/pc/views/trade/bargain/components/details/index.less

@@ -0,0 +1,44 @@
+.trade-details {
+    padding: 20px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
+
+    .el-aside {
+        min-width: 400px;
+
+        .el-card {
+            ul {
+                li {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &:not(:first-child) {
+                        margin-top: 20px;
+                    }
+
+                    >span {
+                        &:first-child {
+                            width: 100px;
+                            color: #94A0AF;
+                        }
+
+                        &:last-child {
+                            flex: 1;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/packages/pc/views/trade/bargain/components/details/index.vue

@@ -1,87 +1,93 @@
 <template>
     <teleport to="#appPageTeleport" v-if="details">
-        <app-view class="app-details" v-bind="$attrs">
-            <template #header>
-                <el-button @click="$emit('closed')">返回</el-button>
-            </template>
-            <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
-                <div class="info">
-                    <h1>求购信息</h1>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>委托单号</td>
-                                <td>{{details.buywrtradeorderid}}</td>
-                            </tr>
-                            <tr>
-                                <td>买方</td>
-                                <td>{{details.buyusername}}</td>
-                            </tr>
-                            <tr>
-                                <td>钻石分类</td>
-                                <td>{{details.zscategorydisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>货币类型</td>
-                                <td>{{details.zscurrencytypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>尺寸</td>
-                                <td>{{details.sizedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>形状</td>
-                                <td>{{details.zsshapetypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>切工</td>
-                                <td>{{details.zscuttypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>颜色</td>
-                                <td>{{details.zscolortypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>抛光</td>
-                                <td>{{details.zspolishtypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>净度</td>
-                                <td>{{details.zsclaritytypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>对称</td>
-                                <td>{{details.zssymmetrytypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>荧光</td>
-                                <td>{{details.zsfluorescencetypedisplay}}</td>
-                            </tr>
-                            <tr>
-                                <td>履约规则</td>
-                                <td>
-                                    <app-performance-rule
-                                        :item="getPerformanceTemplateById(details.performancetemplateid)" />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>备注</td>
-                                <td>{{details.applyremark}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </app-view>
+        <el-container class="trade-details">
+            <el-aside>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header" @click="$emit('closed')">
+                            <app-icon icon="ArrowLeftBold" />
+                            <h4>求购信息</h4>
+                        </div>
+                    </template>
+                    <ul>
+                        <li>
+                            <span>委托单号</span>
+                            <span>{{ details.buywrtradeorderid }}</span>
+                        </li>
+                        <li>
+                            <span>买方</span>
+                            <span>{{ details.buyusername }}</span>
+                        </li>
+                        <li>
+                            <span>钻石分类</span>
+                            <span>{{ details.zscategorydisplay }}</span>
+                        </li>
+                        <li>
+                            <span>货币类型</span>
+                            <span>{{ details.zscurrencytypedisplay }}</span>
+                        </li>
+                        <li>
+                            <span>尺寸</span>
+                            <span>{{ handleNoneValue(details.sizedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>形状</span>
+                            <span>{{ handleNoneValue(details.zsshapetypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>切工</span>
+                            <span>{{ handleNoneValue(details.zscuttypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>颜色</span>
+                            <span>{{ handleNoneValue(details.zscolortypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>抛光</span>
+                            <span>{{ handleNoneValue(details.zspolishtypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>净度</span>
+                            <span>{{ handleNoneValue(details.zsclaritytypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>对称</span>
+                            <span>{{ handleNoneValue(details.zssymmetrytypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>荧光</span>
+                            <span>{{ handleNoneValue(details.zsfluorescencetypedisplay) }}</span>
+                        </li>
+                        <li v-if="details.performancetemplateid">
+                            <span>履约规则</span>
+                            <app-performance-rule :item="getPerformanceTemplateById(details.performancetemplateid)" />
+                        </li>
+                        <li>
+                            <span>备注</span>
+                            <span>{{ handleNoneValue(details.applyremark) }}</span>
+                        </li>
+                    </ul>
+                </el-card>
+            </el-aside>
+        </el-container>
     </teleport>
     <app-goods v-bind="{ selectedRow }" v-else />
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+    inheritAttrs: false,
+})
+</script>
+
 <script lang="ts" setup>
 import { PropType, computed } from 'vue'
+import { handleNoneValue } from '@/filters'
 import { usePerformanceStore } from '@/stores'
 import AppGoods from '@pc/views/warehousing/goods/components/details/index.vue'
 import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
+import AppIcon from '@pc/components/base/icon/index.vue'
 
 const props = defineProps({
     selectedRow: {
@@ -98,4 +104,8 @@ const details = computed(() => {
     }
     return undefined
 })
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/trade/buy/components/delisting/index.less

@@ -1,9 +1,4 @@
 .trade-details-delisting {
-    .card-header {
-        font-size: 16px;
-        color: #999;
-    }
-
     .el-form {
         margin-top: 20px;
     }

src/packages/pc/views/trade/buy/components/delisting/index.vue

@@ -17,8 +17,7 @@
                 {{ row.zscurrencytypedisplayunit + formatDecimal(row.priceper) }}
             </template>
         </app-table>
-        <el-form ref="formRef" label-width="80px" :model="formData" :rules="formRules" v-if="dataList.length"
-            style="width:460px">
+        <el-form ref="formRef" label-width="80px" :model="formData" :rules="formRules" v-if="dataList.length">
             <el-form-item label="价格(￥)" prop="ApplyPrice">
                 <div class="el-form-item--col">
                     <el-input type="number" placeholder="请输入" v-model.number="formData.ApplyPrice" />

src/packages/pc/views/trade/buy/components/details/index.less

@@ -1,23 +1,22 @@
 .trade-details {
     padding: 20px;
-    height: 100%;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
 
     .el-aside {
-        width: 400px;
+        min-width: 400px;
 
         .el-card {
-            .card-header {
-                display: flex;
-                align-items: center;
-                font-size: 16px;
-                color: #999;
-                cursor: pointer;
-
-                h4 {
-                    margin-left: 10px;
-                }
-            }
-
             ul {
                 li {
                     display: flex;

src/packages/pc/views/trade/buy/components/details/index.vue

@@ -55,7 +55,7 @@
                             <span>荧光</span>
                             <span>{{ handleNoneValue(selectedRow.zsfluorescencetypedisplay) }}</span>
                         </li>
-                        <li>
+                        <li v-if="selectedRow.performancetemplateid">
                             <span>履约规则</span>
                             <app-performance-rule
                                 :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
@@ -68,11 +68,9 @@
                 </el-card>
             </el-aside>
             <el-main>
-                <el-scrollbar>
-                    <template v-for="(auth, index) in components" :key="index">
-                        <component :is="componentMap.get(auth.code)" v-bind="{ selectedRow }" v-if="showComponent" />
-                    </template>
-                </el-scrollbar>
+                <template v-for="(auth, index) in components" :key="index">
+                    <component :is="componentMap.get(auth.code)" v-bind="{ selectedRow }" v-if="showComponent" />
+                </template>
             </el-main>
         </el-container>
     </teleport>

src/packages/pc/views/trade/delisting/components/details/index.less

@@ -0,0 +1,44 @@
+.trade-details {
+    padding: 20px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
+
+    .el-aside {
+        min-width: 400px;
+
+        .el-card {
+            ul {
+                li {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &:not(:first-child) {
+                        margin-top: 20px;
+                    }
+
+                    >span {
+                        &:first-child {
+                            width: 100px;
+                            color: #94A0AF;
+                        }
+
+                        &:last-child {
+                            flex: 1;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/packages/pc/views/trade/delisting/components/details/index.vue

@@ -1,81 +1,87 @@
 <!-- 挂牌大厅-我的摘牌-详情 -->
 <template>
     <teleport :to="teleportTo">
-        <app-view class="app-details" v-bind="$attrs">
-            <template #header>
-                <el-button @click="$emit('closed')">返回</el-button>
-            </template>
-            <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
-                <div class="info">
-                    <h1>成交信息</h1>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>成交单号</td>
-                                <td>{{ selectedRow.wrtradedetailid }}</td>
-                            </tr>
-                            <tr>
-                                <td>商品编号</td>
-                                <td>{{ selectedRow.goodsno }}</td>
-                            </tr>
-                            <tr>
-                                <td>方向</td>
-                                <td>{{ buyorsell }}</td>
-                            </tr>
-                            <tr>
-                                <td>资金账号</td>
-                                <td>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid :
-                                        selectedRow.sellaccountid
-                                }}</td>
-                            </tr>
-                            <tr>
-                                <td>对手方</td>
-                                <td>{{ selectedRow.matchusername }}</td>
-                            </tr>
-                            <tr>
-                                <td>成交价格</td>
-                                <td>{{ selectedRow.tradeprice }}</td>
-                            </tr>
-                            <tr>
-                                <td>手续费</td>
-                                <td>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue :
-                                        selectedRow.sellchargevalue
-                                }}</td>
-                            </tr>
-                            <tr>
-                                <td>汇率</td>
-                                <td>{{ selectedRow.exchangerate }}</td>
-                            </tr>
-                            <tr>
-                                <td>成交时间</td>
-                                <td>{{ selectedRow.tradetime }}</td>
-                            </tr>
-                            <tr>
-                                <td>履约计划</td>
-                                <td>{{ selectedRow.performanceplanid }}</td>
-                            </tr>
-                            <tr>
-                                <td>履约规则</td>
-                                <td>
-                                    <ul>
-                                        <li v-for="(item, index) in dataList" :key="index">
-                                            {{ item.steptypename }}
-                                        </li>
-                                    </ul>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </app-view>
+        <el-container class="trade-details">
+            <el-aside>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header" @click="$emit('closed')">
+                            <app-icon icon="ArrowLeftBold" />
+                            <h4>成交信息</h4>
+                        </div>
+                    </template>
+                    <ul>
+                        <li>
+                            <span>成交单号</span>
+                            <span>{{ selectedRow.wrtradedetailid }}</span>
+                        </li>
+                        <li>
+                            <span>商品编号</span>
+                            <span>{{ selectedRow.goodsno }}</span>
+                        </li>
+                        <li>
+                            <span>方向</span>
+                            <span>{{ getBuyOrSellName(buyorsell) }}</span>
+                        </li>
+                        <li>
+                            <span>资金账号</span>
+                            <span>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid :
+                                    selectedRow.sellaccountid
+                            }}</span>
+                        </li>
+                        <li>
+                            <span>对手方</span>
+                            <span>{{ selectedRow.matchusername }}</span>
+                        </li>
+                        <li>
+                            <span>成交价格</span>
+                            <span>{{ selectedRow.tradeprice }}</span>
+                        </li>
+                        <li>
+                            <span>手续费</span>
+                            <span>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue :
+                                    selectedRow.sellchargevalue
+                            }}</span>
+                        </li>
+                        <li>
+                            <span>汇率</span>
+                            <span>{{ selectedRow.exchangerate }}</span>
+                        </li>
+                        <li>
+                            <span>成交时间</span>
+                            <span>{{ selectedRow.tradetime }}</span>
+                        </li>
+                        <li>
+                            <span>履约计划</span>
+                            <span>{{ selectedRow.performanceplanid }}</span>
+                        </li>
+                        <li>
+                            <span>履约规则</span>
+                            <span>
+                                <span v-for="(item, index) in dataList" :key="index">
+                                    {{ item.steptypename }}
+                                </span>
+                            </span>
+                        </li>
+                    </ul>
+                </el-card>
+            </el-aside>
+        </el-container>
     </teleport>
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+    inheritAttrs: false,
+})
+</script>
+
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { BuyOrSell } from '@/constants/order'
+import { BuyOrSell, getBuyOrSellName } from '@/constants/order'
 import { usePerformancePlanStep } from '@/business/order'
+import AppIcon from '@pc/components/base/icon/index.vue'
 
 const props = defineProps({
     teleportTo: {
@@ -95,4 +101,8 @@ const props = defineProps({
 const { dataList, getPlanStepList } = usePerformancePlanStep(props.selectedRow.performanceplanid)
 
 getPlanStepList()
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/trade/purchase/components/details/index.less

@@ -0,0 +1,49 @@
+.trade-details {
+    padding: 20px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
+
+    .el-aside {
+        min-width: 400px;
+
+        .el-card {
+            ul {
+                li {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &:not(:first-child) {
+                        margin-top: 20px;
+                    }
+
+                    >span {
+                        &:first-child {
+                            width: 100px;
+                            color: #94A0AF;
+                        }
+
+                        &:last-child {
+                            flex: 1;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .el-main {
+        margin-left: 20px;
+        padding: 0;
+    }
+}

src/packages/pc/views/trade/purchase/components/details/index.vue

@@ -1,103 +1,111 @@
 <!-- 挂牌大厅-我的求购-详情 -->
 <template>
     <teleport :to="teleportTo">
-        <app-view class="app-details" v-bind="$attrs">
-            <template #header>
-                <el-button @click="$emit('closed')">返回</el-button>
-            </template>
-            <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
-                <div class="info">
-                    <h1>求购信息</h1>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>委托单号</td>
-                                <td>{{ selectedRow.wrtradeorderid }}</td>
-                            </tr>
-                            <tr>
-                                <td>买方</td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>钻石分类</td>
-                                <td>{{ selectedRow.zscategorydisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>货币类型</td>
-                                <td>{{ selectedRow.zscurrencytypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>尺寸</td>
-                                <td>{{ selectedRow.zssize }}</td>
-                            </tr>
-                            <tr>
-                                <td>形状</td>
-                                <td>{{ selectedRow.zsshapetypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>切工</td>
-                                <td>{{ selectedRow.zscuttypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>颜色</td>
-                                <td>{{ selectedRow.zscolortypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>抛光</td>
-                                <td>{{ selectedRow.zspolishtypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>净度</td>
-                                <td>{{ selectedRow.zsclaritytypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>对称</td>
-                                <td>{{ selectedRow.zssymmetrytypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>荧光</td>
-                                <td>{{ selectedRow.zsfluorescencetypedisplay }}</td>
-                            </tr>
-                            <tr>
-                                <td>履约规则</td>
-                                <td>
-                                    <app-performance-rule
-                                        :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>备注</td>
-                                <td>{{ selectedRow.remark }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <div class="property">
-                <h1>询价信息</h1>
-                <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
-                    <!-- 申请状态 -->
-                    <template #applystatus="{ value }">
-                        {{ getApplyStatusName(value) }}
+        <el-container class="trade-details">
+            <el-aside>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header" @click="$emit('closed')">
+                            <app-icon icon="ArrowLeftBold" />
+                            <h4>求购信息</h4>
+                        </div>
                     </template>
-                    <!-- 总价 -->
-                    <template #applyprice="{ row }">
-                        {{ row.zscurrencytypedisplayunit + formatDecimal(row.applyprice) }}
+                    <ul>
+                        <li>
+                            <span>委托单号</span>
+                            <span>{{ selectedRow.wrtradeorderid }}</span>
+                        </li>
+                        <li>
+                            <span>钻石分类</span>
+                            <span>{{ selectedRow.zscategorydisplay }}</span>
+                        </li>
+                        <li>
+                            <span>货币类型</span>
+                            <span>{{ selectedRow.zscurrencytypedisplay }}</span>
+                        </li>
+                        <li>
+                            <span>尺寸</span>
+                            <span>{{ handleNoneValue(selectedRow.zssize) }}</span>
+                        </li>
+                        <li>
+                            <span>形状</span>
+                            <span>{{ handleNoneValue(selectedRow.zsshapetypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>切工</span>
+                            <span>{{ handleNoneValue(selectedRow.zscuttypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>颜色</span>
+                            <span>{{ handleNoneValue(selectedRow.zscolortypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>抛光</span>
+                            <span>{{ handleNoneValue(selectedRow.zspolishtypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>净度</span>
+                            <span>{{ handleNoneValue(selectedRow.zsclaritytypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>对称</span>
+                            <span>{{ handleNoneValue(selectedRow.zssymmetrytypedisplay) }}</span>
+                        </li>
+                        <li>
+                            <span>荧光</span>
+                            <span>{{ handleNoneValue(selectedRow.zsfluorescencetypedisplay) }}</span>
+                        </li>
+                        <li v-if="selectedRow.performancetemplateid">
+                            <span>履约规则</span>
+                            <app-performance-rule
+                                :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
+                        </li>
+                        <li>
+                            <span>备注</span>
+                            <span>{{ handleNoneValue(selectedRow.remark) }}</span>
+                        </li>
+                    </ul>
+                </el-card>
+            </el-aside>
+            <el-main>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header">
+                            <span>询价信息</span>
+                        </div>
                     </template>
-                </app-table>
-            </div>
-        </app-view>
+                    <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
+                        <!-- 申请状态 -->
+                        <template #applystatus="{ value }">
+                            {{ getApplyStatusName(value) }}
+                        </template>
+                        <!-- 总价 -->
+                        <template #applyprice="{ row }">
+                            {{ row.zscurrencytypedisplayunit + formatDecimal(row.applyprice) }}
+                        </template>
+                    </app-table>
+                </el-card>
+            </el-main>
+        </el-container>
     </teleport>
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+    inheritAttrs: false,
+})
+</script>
+
 <script lang="ts" setup>
 import { PropType, shallowRef } from 'vue'
-import { formatDecimal } from '@/filters'
+import { formatDecimal, handleNoneValue } from '@/filters'
 import { getApplyStatusName } from '@/constants/order'
 import { useLoginStore, usePerformanceStore } from '@/stores'
 import { queryMyDelistingApply } from '@/services/api/trade'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
+import AppIcon from '@pc/components/base/icon/index.vue'
 
 const props = defineProps({
     teleportTo: {
@@ -115,13 +123,13 @@ const { getPerformanceTemplateById } = usePerformanceStore()
 
 const dataList = shallowRef<Ermcp.MyDelistingApplyRsp[]>([])
 const columns = shallowRef<Ermcp.TableColumn[]>([
-    { prop: 'selldelistingapplyid', label: '询价单号', show: true },
+    { prop: 'selldelistingapplyid', label: '询价单号', width: 200, show: true },
     { prop: 'sellusername', label: '卖方', show: true },
     { prop: 'goodsno', label: '商品编号', show: true },
     { prop: 'applyqty', label: '申请重量', show: true },
     { prop: 'applyprice', label: '总价', show: true },
     { prop: 'applystatus', label: '申请状态', show: true },
-    { prop: 'applytime', label: '申请时间', show: true },
+    { prop: 'applytime', label: '申请时间', width: 200, show: true },
 ])
 
 queryMyDelistingApply({
@@ -134,4 +142,8 @@ queryMyDelistingApply({
         dataList.value = res.data
     },
 })
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/trade/sale/components/details/index.less

@@ -0,0 +1,49 @@
+.trade-details {
+    padding: 20px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
+
+    .el-aside {
+        min-width: 400px;
+
+        .el-card {
+            ul {
+                li {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &:not(:first-child) {
+                        margin-top: 20px;
+                    }
+
+                    >span {
+                        &:first-child {
+                            width: 100px;
+                            color: #94A0AF;
+                        }
+
+                        &:last-child {
+                            flex: 1;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .el-main {
+        margin-left: 20px;
+        padding: 0;
+    }
+}

src/packages/pc/views/trade/sale/components/details/index.vue

@@ -1,83 +1,94 @@
 <!-- 挂牌大厅-我的出售-详情 -->
 <template>
     <teleport :to="teleportTo">
-        <app-view class="app-details" v-bind="$attrs">
-            <template #header>
-                <el-button @click="$emit('closed')">返回</el-button>
-            </template>
-            <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
-                <div class="info">
-                    <h1>挂牌信息</h1>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>委托单号</td>
-                                <td>{{ selectedRow.wrtradeorderid }}</td>
-                            </tr>
-                            <tr>
-                                <td>委托时间</td>
-                                <td>{{ selectedRow.ordertime }}</td>
-                            </tr>
-                            <tr>
-                                <td>冻结保证金</td>
-                                <td>{{ selectedRow.freezemargin }}</td>
-                            </tr>
-                            <tr>
-                                <td>解冻保证金</td>
-                                <td>{{ selectedRow.unfreezemargin }}</td>
-                            </tr>
-                            <tr>
-                                <td>委托状态</td>
-                                <td>{{ selectedRow.wrtradeorderstatus }}</td>
-                            </tr>
-                            <tr>
-                                <td>商品编号</td>
-                                <td>{{ selectedRow.goodsno }}</td>
-                            </tr>
-                            <tr>
-                                <td>资金账号</td>
-                                <td>{{ selectedRow.accountid }}</td>
-                            </tr>
-                            <tr>
-                                <td>冻结手续费</td>
-                                <td>{{ selectedRow.freezecharge }}</td>
-                            </tr>
-                            <tr>
-                                <td>解冻手续费</td>
-                                <td>{{ selectedRow.unfreezecharge }}</td>
-                            </tr>
-                            <tr>
-                                <td>汇率</td>
-                                <td>{{ selectedRow.exchangerate }}</td>
-                            </tr>
-                            <tr>
-                                <td>履约规则</td>
-                                <td>
-                                    <app-performance-rule
-                                        :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <div class="property">
-                <h1>询价信息</h1>
-                <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
-                    <!-- 申请状态 -->
-                    <template #applystatus="{ value }">
-                        {{ getApplyStatusName(value) }}
+        <el-container class="trade-details">
+            <el-aside>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header" @click="$emit('closed')">
+                            <app-icon icon="ArrowLeftBold" />
+                            <h4>挂牌信息</h4>
+                        </div>
                     </template>
-                    <!-- 价格 -->
-                    <template #applyprice="{ row }">
-                        {{ row.zscurrencytypedisplayunit + formatDecimal(row.applyprice) }}
+                    <ul>
+                        <li>
+                            <span>委托单号</span>
+                            <span>{{ selectedRow.wrtradeorderid }}</span>
+                        </li>
+                        <li>
+                            <span>委托时间</span>
+                            <span>{{ selectedRow.ordertime }}</span>
+                        </li>
+                        <li>
+                            <span>冻结保证金</span>
+                            <span>{{ selectedRow.freezemargin }}</span>
+                        </li>
+                        <li>
+                            <span>解冻保证金</span>
+                            <span>{{ selectedRow.unfreezemargin }}</span>
+                        </li>
+                        <li>
+                            <span>委托状态</span>
+                            <span>{{ selectedRow.wrtradeorderstatus }}</span>
+                        </li>
+                        <li>
+                            <span>商品编号</span>
+                            <span>{{ selectedRow.goodsno }}</span>
+                        </li>
+                        <li>
+                            <span>资金账号</span>
+                            <span>{{ selectedRow.accountid }}</span>
+                        </li>
+                        <li>
+                            <span>冻结手续费</span>
+                            <span>{{ selectedRow.freezecharge }}</span>
+                        </li>
+                        <li>
+                            <span>解冻手续费</span>
+                            <span>{{ selectedRow.unfreezecharge }}</span>
+                        </li>
+                        <li>
+                            <span>汇率</span>
+                            <span>{{ selectedRow.exchangerate }}</span>
+                        </li>
+                        <li v-if="selectedRow.performancetemplateid">
+                            <span>履约规则</span>
+                            <app-performance-rule
+                                :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
+                        </li>
+                    </ul>
+                </el-card>
+            </el-aside>
+            <el-main>
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="card-header">
+                            <span>询价信息</span>
+                        </div>
                     </template>
-                </app-table>
-            </div>
-        </app-view>
+                    <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
+                        <!-- 申请状态 -->
+                        <template #applystatus="{ value }">
+                            {{ getApplyStatusName(value) }}
+                        </template>
+                        <!-- 价格 -->
+                        <template #applyprice="{ row }">
+                            {{ row.zscurrencytypedisplayunit + formatDecimal(row.applyprice) }}
+                        </template>
+                    </app-table>
+                </el-card>
+            </el-main>
+        </el-container>
     </teleport>
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+    inheritAttrs: false,
+})
+</script>
+
 <script lang="ts" setup>
 import { PropType, shallowRef } from 'vue'
 import { formatDecimal } from '@/filters'
@@ -86,6 +97,7 @@ import { useLoginStore, usePerformanceStore } from '@/stores'
 import { queryMyBargainApply } from '@/services/api/trade'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
+import AppIcon from '@pc/components/base/icon/index.vue'
 
 const props = defineProps({
     teleportTo: {
@@ -120,4 +132,8 @@ queryMyBargainApply({
         dataList.value = res.data
     },
 })
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>