From 2e9213d7b398e5b2162a049ec7456a1287b476c8 Mon Sep 17 00:00:00 2001
From: "[liang]" <[595996918@qq.com]>
Date: Wed, 24 Aug 2022 12:01:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=A4=E6=98=93=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2,=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/KeyValueRow/KeyValueRow.vue        |  30 +-
 .../entrustOrderList/entrustOrderList.vue     | 475 ++++++++++++++++++
 components/positionList/positionList.vue      | 177 +++++++
 components/transaction/transaction.vue        | 410 +++++++++++++--
 pages/markets/trade.vue                       |  31 +-
 pages/me/donateRecord.vue                     |   4 +-
 pages/me/walletHistory.vue                    |   4 +-
 pages/mine/mineRecord.vue                     |  14 +-
 pages/recharge/rechargeRecord.vue             |  20 +-
 pages/subscription/details.vue                |   4 +-
 pages/subscription/index.vue                  |  30 +-
 pages/withdrawal/withdrawal.vue               |  16 +-
 pages/withdrawal/withdrawalRecord.vue         |  28 +-
 static/maskets/add.png                        | Bin 0 -> 295 bytes
 static/maskets/ic_ma_arrow_down.png           | Bin 0 -> 257 bytes
 static/maskets/sub.png                        | Bin 0 -> 196 bytes
 utils/language/en_US.js                       |  17 +-
 17 files changed, 1132 insertions(+), 128 deletions(-)
 create mode 100644 static/maskets/add.png
 create mode 100644 static/maskets/ic_ma_arrow_down.png
 create mode 100644 static/maskets/sub.png

diff --git a/components/KeyValueRow/KeyValueRow.vue b/components/KeyValueRow/KeyValueRow.vue
index b7d1737..f954e5a 100644
--- a/components/KeyValueRow/KeyValueRow.vue
+++ b/components/KeyValueRow/KeyValueRow.vue
@@ -4,8 +4,14 @@
         </u--text>
         <u--text class="value" :text="value" :mode="mode" :lines="lines" :color='rightColor' :size="size">
         </u--text> -->
-        <view class="keyName" :style="{ color: leftColor, fontSize: size || leftSize, }">{{ keyName }} </view>
-        <view class="value" :style="{ color: rightColor, fontSize: size || rightSize, }">{{ value }}</view>
+        <view class="keyName"
+            :style="{ color: leftColor, fontSize: size || leftSize, lineHeight: lineHeight || lineHeightValue }">{{
+                    keyName
+            }} </view>
+        <view class="value"
+            :style="{ color: rightColor, fontSize: size || rightSize, lineHeight: lineHeight || lineHeightValue }">{{
+                    value
+            }}</view>
     </view>
 </template>
 
@@ -55,11 +61,27 @@ export default {
                 return '28rpx'
             }
         },
+        lineHeight: {
+            type: String | Number,
+            default() {
+                return ''
+            }
+        },
     },
     data() {
         return {
         }
     },
+    computed: {
+        lineHeightValue() {
+            let height = '28rpx'
+            if (this.size) {
+                height = this.size
+            }
+            console.log(height);
+            return height;
+        },
+    },
 }
 </script>
 
@@ -71,7 +93,7 @@ export default {
 
     .keyName {
         vertical-align: top;
-        height: 100%;
+        // height: 100%;
         width: auto;
         display: inline-block;
     }
@@ -79,7 +101,7 @@ export default {
     .value {
         position: absolute;
         right: 0;
-        height: 100%;
+        // height: 100%;
         width: auto;
         display: inline-block;
         text-align: right;
diff --git a/components/entrustOrderList/entrustOrderList.vue b/components/entrustOrderList/entrustOrderList.vue
index e69de29..3580c19 100644
--- a/components/entrustOrderList/entrustOrderList.vue
+++ b/components/entrustOrderList/entrustOrderList.vue
@@ -0,0 +1,475 @@
+<template>
+    <view class="entrustOrderList">
+        <!-- 四个tab -->
+        <view class="tab">
+            <view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">{{ i18n.CurrentEntrust }}
+            </view>
+            <view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">{{ i18n.Position }}
+            </view>
+            <view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">{{ i18n.Closed }}
+            </view>
+            <view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">{{ i18n.Revoked }}
+            </view>
+        </view>
+        <!-- 卡片列表 -->
+        <view class="content">
+            <view class="card" v-for="(item, index) in dealList" :key="index">
+                <view class="header">
+                    <text class="dealType" :class="{ long: item.dealType === 'long' }">long</text>
+                    <text class="time">02-17 09:18:20</text>
+                    <text class="closeTimeTitle" v-show="type === 2 || type === 3">{{ i18n.CloseTime }}</text>
+                    <text class="closeTime" v-show="type === 2 || type === 3">02-17 16:11:35</text>
+                    <view class="closeBtn" v-show="type === 0 || type === 1" @click="closeModalShow = true">{{
+                            i18n.close
+                    }}</view>
+                </view>
+
+                <view class="infoBody">
+                    <view class="item">
+                        <!-- 公共的 -->
+                        <view class="left">
+                            <view class="title">{{ coin }}/{{ currency }}</view>
+                            <view class="value">1 * 10</view>
+                            <view class="title">{{ i18n.Bond }}</view>
+                            <view class="value">4070.00</view>
+                            <view class="title" v-show="type !== 3">{{ i18n.StyPrice }}</view>
+                            <view class="value" v-show="type !== 3">0.00</view>
+                        </view>
+                        <!-- 公共的 -->
+                        <view class="center">
+                            <view class="title">{{ i18n.AmountLeverage }}</view>
+                            <view class="value">40700</view>
+                            <view class="title">{{ i18n.Fee }}</view>
+                            <view class="value">40.70</view>
+                            <view class="title" v-show="type !== 3">{{ i18n.StsPrice }}</view>
+                            <view class="value" v-show="type !== 3">0.00</view>
+                        </view>
+                        <!-- Current Entrust 和  Position-->
+                        <view class="right" v-show="type === 0 || type === 1">
+                            <view class="title">{{ i18n.CurrentPrice }}</view>
+                            <view class="value" style="color:#F4506A;">39952.64</view>
+                            <view class="title" v-show="type === 0">{{ i18n.status }}</view>
+                            <view class="value" v-show="type === 0">Closed</view>
+                            <view class="title" v-show="type === 1">{{ i18n.do }}</view>
+                            <view class="value" style="color:#00E8A2;" v-show="type === 1"
+                                @click="stopModalShow = true">
+                                Stop/Limit</view>
+                            <view class="title">{{ i18n.ExpectProfit }}</view>
+                            <view class="value" style="color:#F4506A;">-730.45</view>
+                        </view>
+                        <!-- Closed -->
+                        <view class="right" v-show="type === 2">
+                            <view class="title">{{ i18n.ClosePrice }}</view>
+                            <view class="value" style="color:#00E8A2;">39952.64</view>
+                            <view class="title">{{ i18n.status }}</view>
+                            <view class="value">Closed</view>
+                            <view class="title">{{ i18n.PL }}</view>
+                            <view class="value" style="color:#00E8A2;">112.02</view>
+                        </view>
+                        <!-- Revoked -->
+                        <view class="right" v-show="type === 3">
+                            <view class="title">{{ i18n.status }}</view>
+                            <view class="value" style="color:#F4506A;">Closed</view>
+                        </view>
+                    </view>
+                </view>
+
+
+            </view>
+        </view>
+
+        <!-- close确认框 -->
+        <u-modal :show="closeModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
+            :title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="closeConfirm" @cancel="closeModalShow = false"
+            confirmColor="#00E8A2">
+        </u-modal>
+
+        <!-- stop确认框 -->
+        <u-modal :show="stopModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
+            :title="i18n.StopLimit" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShow = false"
+            confirmColor="#00E8A2">
+            <view class="stopModel">
+                <view class="title">
+                    <text class="left">{{ i18n.StyPrice }}</text>
+                    <text class="right">{{ i18n.ExpectProfit }} {{ 0.01 }}</text>
+                </view>
+                <view class="numberInput">
+                    <button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }"
+                        :disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button>
+                    <input class="number" type="number" v-model="styValue" />
+                    <button class="btn add" @click="styValueChange('add')"></button>
+                </view>
+                <view class="title">
+                    <text class="left">{{ i18n.StsPrice }}</text>
+                    <text class="right">{{ i18n.ExpectLoss }} {{ 0.01 }}</text>
+                </view>
+                <view class="numberInput">
+                    <button class="btn sub" :class="{ disabled: stsSubBtnDisabled || stsValue <= 0 }"
+                        :disabled="stsSubBtnDisabled" @click="stsValueChange('sub')"></button>
+                    <input class="number" type="number" v-model="stsValue" />
+                    <button class="btn add" @click="stsValueChange('add')"></button>
+                </view>
+            </view>
+
+
+        </u-modal>
+
+
+    </view>
+</template>
+
+<script>
+import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
+const COMPONENT_NAME = 'transaction'
+let timer1 = null;
+let timer2 = null;
+export default {
+    components: { KeyValueRow },
+    name: COMPONENT_NAME,
+    props: {
+        coin: { // 数字货币名称
+            type: String,
+            default() {
+                return 'BTC'
+            }
+        },
+        currency: { // 货币名称
+            type: String,
+            default() {
+                return 'USDT'
+            }
+        },
+        coinAmount: { // 货币数量
+            type: Number,
+            default() {
+                return 1
+            }
+        },
+        bgTransparent: { // 背景是否透明
+            type: Boolean,
+            default() {
+                return false
+            }
+        },
+    },
+    data() {
+        return {
+            closeModalShow: false,
+            stopModalShow: false,
+            type: 0,
+            test: 0,
+            dealList: [
+                {
+                    dealType: 'long'
+                },
+                {
+                    dealType: 'long'
+                },
+            ],
+            styValue: 2.55,
+            stsValue: 0.3284974928739487,
+            stySubBtnDisabled: false,
+            stsSubBtnDisabled: false,
+
+        }
+    },
+    computed: {
+        i18n() {
+            return this.$t("markets");
+        },
+    },
+    mounted() {
+
+    },
+    onHide() {
+        clearTimeout(timer2);
+        clearInterval(timer2);
+        timer1 = null;
+        timer2 = null;
+    },
+    methods: {
+        /**
+         * 类型改变
+         * @param {*} type 
+         */
+        onChangeType(type = 0) {
+            this.type = type
+        },
+        /**
+         * close确认弹窗
+         */
+        closeConfirm() {
+            this.closeModalShow = false
+        },
+        /**
+         * stop确认弹窗
+         */
+        stopConfirm() {
+            if (this.styValue < 0 || this.stsValue < 0) {
+                uni.showToast({
+                    title: this.i18n.lessThan,
+                    icon: 'none',
+                    duration: 2000    //持续时间为
+                })
+                return;
+            }
+            this.stopModalShow = false
+        },
+        /**
+         * styValue值变化
+         */
+        styValueChange(type = 'sub') {
+            if (type === 'sub') {// 减操作
+                this.styValue = parseInt(this.styValue) // 取整
+                this.styValue -= 1;
+                if (this.styValue <= 0) {
+                    this.stySubBtnDisabled = true;
+                    this.styValue = 0
+                } else {
+                    this.stySubBtnDisabled = false;
+                }
+            } else { // 加操作
+                this.styValue = parseInt(this.styValue) // 取整
+                this.styValue += 1;
+                if (this.styValue <= 0) {
+                    this.stySubBtnDisabled = true;
+                    this.styValue = 0
+                } else {
+                    this.stySubBtnDisabled = false;
+                }
+            }
+        },
+        /**
+         * stsValue值变化
+         */
+        stsValueChange(type = 'sub') {
+            if (type === 'sub') {// 减操作
+                this.stsValue = parseInt(this.stsValue) // 取整
+                this.stsValue -= 1;
+                if (this.stsValue <= 0) {
+                    this.stsSubBtnDisabled = true;
+                    this.stsValue = 0
+                } else {
+                    this.stsSubBtnDisabled = false;
+                }
+            } else { // 加操作
+                this.stsValue = parseInt(this.stsValue) // 取整
+                this.stsValue += 1;
+                if (this.stsValue <= 0) {
+                    this.stsSubBtnDisabled = true;
+                    this.stsValue = 0
+                } else {
+                    this.stsSubBtnDisabled = false;
+                }
+            }
+        },
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.entrustOrderList {
+    .tab {
+        display: flex;
+        background: #211F32;
+
+        .item {
+            height: 64rpx;
+            line-height: 64rpx;
+            flex: 1;
+            font-size: 24rpx;
+            text-align: center;
+
+            &.select {
+                background: #323045;
+                color: #00E8A2;
+            }
+        }
+
+
+    }
+
+    .content {
+        padding: 32rpx;
+
+        .card {
+            position: relative;
+            font-size: 24rpx;
+            color: #A1A0A8;
+            background: #211F32;
+            border-radius: 20rpx;
+            padding: 24rpx 32rpx;
+            margin-bottom: 30rpx;
+
+            .header {
+                .dealType {
+                    color: #00E8A2;
+                    margin-right: 28rpx;
+                }
+
+                .time {
+                    margin-right: 16rpx;
+                }
+
+                .closeTimeTitle {
+                    margin-right: 16rpx;
+                }
+
+                .closeBtn {
+                    position: absolute;
+                    right: 32rpx;
+                    top: 20rpx;
+                    display: inline-block;
+                    width: 98rpx;
+                    height: 48rpx;
+                    border-radius: 8rpx;
+                    line-height: 48rpx;
+                    background-color: rgba($color: #F4506A, $alpha: 0.1);
+                    font-size: 24rpx;
+                    text-align: center;
+                    color: #F4506A;
+                }
+            }
+
+            .infoBody {
+                .item {
+                    display: flex;
+
+                    .title {
+                        margin-top: 30rpx;
+                        line-height: 32rpx;
+                    }
+
+                    .value {
+                        color: #FFFFFF;
+                    }
+
+                    .left {
+                        flex: 1;
+                        text-align: left;
+                    }
+
+                    .center {
+                        flex: 1;
+                        text-align: center;
+                    }
+
+                    .right {
+                        flex: 1;
+                        text-align: right;
+                    }
+                }
+            }
+
+
+        }
+    }
+
+    /deep/.u-popup__content {
+        background: #323045;
+
+        .u-modal__title {
+            color: #fff;
+        }
+
+        .u-modal__content__text {
+            text-align: center;
+        }
+    }
+
+    .stopModel {
+        width: 560rpx;
+        font-size: 24rpx;
+
+        .title {
+            display: flex;
+            justify-content: space-between;
+            width: 560rpx;
+            margin: 24rpx 0;
+
+            .left {}
+
+            .right {
+                color: #A1A0A8;
+            }
+        }
+
+        .numberInput {
+            display: flex;
+            height: 88rpx;
+            background: #211F32;
+            border-radius: 32rpx;
+            overflow: hidden;
+
+            .btn {
+                width: 80rpx;
+
+                background: #16141f;
+                padding: 0;
+                border-radius: 0;
+
+                &.sub {
+                    background-image: url(../../static/maskets/sub.png);
+                    background-repeat: no-repeat;
+                    background-size: 32rpx;
+                    background-position: 24rpx 28rpx;
+                }
+
+                &.add {
+                    background-image: url(../../static/maskets/add.png);
+                    background-repeat: no-repeat;
+                    background-size: 32rpx;
+                    background-position: 24rpx 28rpx;
+                }
+
+                &.button-hover {
+                    background: #211F32;
+
+                    &.sub::after {
+                        background-image: url(../../static/maskets/sub.png);
+                        background-repeat: no-repeat;
+                        background-size: 64rpx;
+                        background-position: 46rpx 56rpx;
+
+                    }
+
+                    &.add::after {
+                        background-image: url(../../static/maskets/add.png);
+                        background-repeat: no-repeat;
+                        background-size: 64rpx;
+                        background-position: 46rpx 56rpx;
+
+                    }
+                }
+
+                &.disabled {
+                    background: #211F32;
+
+                    &.sub::after {
+                        background-image: url(../../static/maskets/sub.png);
+                        background-repeat: no-repeat;
+                        background-size: 64rpx;
+                        background-position: 46rpx 56rpx;
+
+                    }
+                }
+            }
+
+            .number {
+                flex: 1;
+                border-left: 2rpx solid #323045;
+                border-right: 2rpx solid #323045;
+                text-align: center;
+                height: 88rpx;
+                ;
+                line-height: 88rpx;
+                font-size: 24rpx;
+            }
+        }
+    }
+
+
+
+}
+</style>
diff --git a/components/positionList/positionList.vue b/components/positionList/positionList.vue
index e69de29..a44a98b 100644
--- a/components/positionList/positionList.vue
+++ b/components/positionList/positionList.vue
@@ -0,0 +1,177 @@
+<template>
+	<view class="pmain">
+		<view class="title">
+			<view class="left">{{ i18n.UnitPrice }}</view>
+			<view class="num">{{ i18n.Number }}</view>
+		</view>
+		<view class="sell">
+			<view class="item" v-for="(item, index) in sellList" :key="index" @click="depthClick(item)">
+				<text class="price">47823.00</text>
+				<text class="num">{{ item }}</text>
+				<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
+			</view>
+		</view>
+		<view class="currentPriceBody" @click="depthClick(item)">
+			<view class="currentPrice">34985.93</view>
+			<view class="transition">≈$28767.23</view>
+		</view>
+
+		<view class="buy">
+			<view class="item" v-for="(item, index) in buyList" :key="index" @click="depthClick(item)">
+				<text class="price">47823.00</text>
+				<text class="num">{{ item }}</text>
+				<view class="bg buybg" :style="`width: ${20 * index}%;`"></view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		item: Object
+	},
+	data() {
+		return {
+			popoverVisible: false,
+			depthValue: 1,
+			sellList: 9,
+			buyList: 6,
+		}
+	},
+	computed: {
+		i18n() {
+			return this.$t("markets");
+		},
+	},
+	methods: {
+		depthClick(e) {
+			this.popoverVisible = !this.popoverVisible;
+		},
+		depthChange(e) {
+			this.depthValue = e;
+			this.$emit('depthChange', e);
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.pmain {
+	width: 100%;
+	position: relative;
+	justify-content: space-between;
+	text-align: left;
+	color: #A1A0A8;
+
+	.title {
+		display: flex;
+		margin-bottom: 16rpx;
+		font-size: 24rpx;
+
+		.left {
+			flex: 1;
+		}
+
+		.num {
+			flex: 1;
+			text-align: center;
+		}
+	}
+
+	.sell {
+		overflow: hidden;
+		height: 180rpx;
+
+		.item {
+			position: relative;
+			width: 100%;
+			height: 30rpx;
+			display: flex;
+			font-size: 24rpx;
+
+			.price {
+				display: block;
+				width: 50%;
+				text-align: left;
+				z-index: 1;
+				color: #F4506A;
+			}
+
+			.num {
+				display: block;
+				width: 50%;
+				text-align: center;
+				padding-right: 10rpx;
+				z-index: 1;
+			}
+
+			.sellbg {
+				height: 100%;
+				position: absolute;
+				top: 0;
+				right: 0;
+				z-index: 0;
+				background: rgba($color: #F4506A, $alpha: 0.1)
+			}
+
+		}
+
+	}
+
+	.buy {
+		overflow: hidden;
+		height: 180rpx;
+
+		.item {
+			position: relative;
+			width: 100%;
+			height: 30rpx;
+			display: flex;
+			font-size: 24rpx;
+
+			.price {
+				display: block;
+				width: 50%;
+				text-align: left;
+				z-index: 1;
+				color: #00E8A2;
+			}
+
+			.num {
+				display: block;
+				width: 50%;
+				text-align: center;
+				padding-right: 10rpx;
+				z-index: 1;
+			}
+
+			.buybg {
+				height: 100%;
+				position: absolute;
+				top: 0;
+				right: 0;
+				z-index: 0;
+				background: rgba($color: #00E8A2, $alpha: 0.1)
+			}
+
+		}
+
+	}
+
+
+	.currentPriceBody {
+		margin: 32rpx 0;
+
+		.currentPrice {
+			font-size: 35rpx;
+			color: #00E8A2;
+		}
+
+		.transition {
+			font-size: 24rpx;
+		}
+	}
+}
+</style>
diff --git a/components/transaction/transaction.vue b/components/transaction/transaction.vue
index 3c4fc70..ae680da 100644
--- a/components/transaction/transaction.vue
+++ b/components/transaction/transaction.vue
@@ -1,30 +1,104 @@
 <template>
     <view class="transaction">
-        <view class="tab">
-			<view class="buy uni-bg-up" :class="type == 2 ? 'normal' : ''" @click="onChangeType(1)">买入</view>
-			<view class="sell uni-bg-down " :class="type == 1 ? 'normal' : ''" @click="onChangeType(2)">卖出</view>
-		</view>
+        <view class="tab" :class="type == 'buy' ? 'buy' : ''">
+            <view class="buy" :class="type == 'buy' ? 'select' : ''" @click="onChangeType('buy')">{{ i18n.LONG }}</view>
+            <view class="sell" :class="type == 'sell' ? 'select' : ''" @click="onChangeType('sell')">{{ i18n.SHORT }}
+            </view>
+        </view>
+        <view class="priceSelectBody">
+            <view class="priceTypeInput" @click="priceSelectListShow = true">{{ priceTypeList[priceTypeValue].text }}
+            </view>
+            <view class="shade" v-show="priceSelectListShow" @click="priceSelectListShow = false"></view>
+            <view class="priceTypeList" v-show="priceSelectListShow">
+                <view class="selectItem" :class="{ select: priceTypeValue === index }"
+                    v-for="(item, index) in priceTypeList" :key="index" @click="selectChange(index)">
+                    {{ item.text }}
+                </view>
+            </view>
+        </view>
+
+        <view class="coinPrice">
+            <view class="noInput" v-show="priceTypeValue === 0">{{ i18n.MarketOptimalPrice }}</view>
+            <u-input class="input" v-show="priceTypeValue !== 0" v-model="coinPrice" color="#A1A0A8" fontSize="20rpx"
+                border="none" :placeholder="i18n.enterAddressTips">
+            </u-input>
+            <view class="currencyName">{{ currency }}</view>
+        </view>
+
+        <view class="twoInput">
+            <view class="leverageSelectBody">
+                <view class="leverageInput" @click="leverageListShow = true">{{ leverageValue }}</view>
+                <view class="shade" v-show="leverageListShow" @click="leverageListShow = false"></view>
+                <view class="leverageList" v-show="leverageListShow">
+                    <view class="selectItem" :class="{ select: leverageValue === item }"
+                        v-for="(item, index) in leverageList" :key="index" @click="leverageSelectChange(item)">
+                        {{ item }}
+                    </view>
+                </view>
+            </view>
+
+            <view class="coinAmount">
+                <u-input class="input" v-model="coinAmount" color="#A1A0A8" fontSize="20rpx" border="none"
+                    :placeholder="i18n.enterAddressTips">
+                </u-input>
+                <view class="currencyName">{{ coin }}</view>
+            </view>
+        </view>
+        <!-- 可用 Usable-->
+        <key-value-row class="text" :keyName="i18n.Usable" :value="`${coinPrice * coinAmount}${currency}`"
+            lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
+        </key-value-row>
+        <!-- 总计 Total-->
+        <key-value-row class="text" :keyName="i18n.Total" :value="`${coinPrice * coinAmount}${currency}`"
+            lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
+        </key-value-row>
+        <!-- 债券 Bond-->
+        <key-value-row class="text" :keyName="i18n.Bond" :value="`${coinPrice * coinAmount}${currency}`"
+            lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
+        </key-value-row>
+        <!-- 手续费 -->
+        <key-value-row class="text" :keyName="i18n.Fee" :value="`${coinPrice * coinAmount}${currency}`"
+            lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
+        </key-value-row>
+
+        <u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="btnClick">
+            {{ type === 'buy' ? `${i18n.buyLong}${coin}` : `${i18n.sellSHORT}${coin}` }}
+        </u-button>
     </view>
 </template>
 
 <script>
+import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
 const COMPONENT_NAME = 'transaction'
 export default {
+    components: { KeyValueRow },
     name: COMPONENT_NAME,
     props: {
-        showBack: { // 是否显示返回按钮
-            type: Boolean,
+        coin: { // 数字货币名称
+            type: String,
             default() {
-                return true
+                return 'BTC'
             }
         },
-        bgTransparent: { // 背景是否透明
-            type: Boolean,
+        currency: { // 货币名称
+            type: String,
             default() {
-                return false
+                return 'USDT'
             }
         },
-        bgnum: {
+        coinPrice: { // 数字货币价格
+            type: Number,
+            default() {
+                return 0
+            }
+        },
+        coinAmount: { // 货币数量
+            type: Number,
+            default() {
+                return 1
+            }
+        },
+        bgTransparent: { // 背景是否透明
             type: Boolean,
             default() {
                 return false
@@ -33,8 +107,22 @@ export default {
     },
     data() {
         return {
-            title: 'Show more',
-            collapseFlag: false, // 折叠状态
+            type: 'buy',
+            priceSelectListShow: false,
+            priceTypeValue: 0,
+            priceTypeList: [
+                { value: 0, text: this.$t("markets").MarketPrice },
+                { value: 1, text: this.$t("markets").LimitPrice },
+            ],
+            leverageListShow: false,
+            leverageValue: 10,
+            leverageList: [
+                10,
+                20,
+                30,
+                50,
+                100,
+            ],
         }
     },
     computed: {
@@ -46,56 +134,278 @@ export default {
 
     },
     methods: {
-        collapse() {
-            this.collapseFlag = !this.collapseFlag;
-            this.title = this.collapseFlag ? 'Pick up' : 'Show more'
-        }
+        onChangeType(type = 'buy') {
+            this.type = type
+        },
+        selectChange(index) {
+            this.priceTypeValue = index;
+            this.priceSelectListShow = false;
+            console.log(e);
+        },
+        leverageSelectChange(item) {
+            this.leverageValue = item;
+            this.leverageListShow = false;
+            console.log(e);
+        },
     }
 }
 </script>
 
 <style scoped lang="scss">
-.showMoreContent {
-    padding-top: 16rpx;
-    margin-bottom: 16rpx;
-    // border-top: 2rpx solid #323045;
-    overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-
-    &.up {
-        max-height: 500rpx;
+.transaction {
+    width: 444rpx;
+
+    .tab {
+        display: flex;
+        border-radius: 16rpx;
+        background-color: rgba($color: #F4506A, $alpha: 0.1);
+
+        &.buy {
+            background-color: rgba($color: #00E8A2, $alpha: 0.1);
+        }
+
+        .buy {
+            flex: 1;
+            text-align: center;
+            height: 64rpx;
+            line-height: 64rpx;
+            font-size: 24rpx;
+            color: #F4506A;
+            border-radius: 16rpx;
+
+            &.select {
+                color: #15141F;
+                background-color: #00E8A2;
+            }
+        }
+
+        .sell {
+            flex: 1;
+            text-align: center;
+            height: 64rpx;
+            line-height: 64rpx;
+            font-size: 24rpx;
+            color: #00E8A2;
+            border-radius: 16rpx;
+
+            &.select {
+                color: #15141F;
+                background: #F4506A;
+            }
+        }
     }
 
-    &.down {
-        max-height: 0;
+
+    .priceSelectBody {
+        position: relative;
+        height: 64rpx;
+        margin-top: 24rpx;
+        background: #323045;
+        border-radius: 16rpx;
+        padding: 0 20rpx;
+
+        .priceTypeInput {
+            position: relative;
+            height: 64rpx;
+            line-height: 64rpx;
+            font-size: 20rpx;
+            color: #A1A0A8;
+
+
+            &::after {
+                display: block;
+                position: absolute;
+                content: '';
+                background-image: url(../../static/maskets/ic_ma_arrow_down.png);
+                background-repeat: no-repeat;
+                background-size: 32rpx;
+                width: 32rpx;
+                height: 32rpx;
+                top: 16rpx;
+                right: 0rpx;
+            }
+        }
+
+        .shade {
+            position: fixed;
+            top: 220rpx;
+            left: 0;
+            width: 750rpx;
+            height: 70vh;
+            background: transparent;
+            // background: #fff;
+            z-index: 0;
+        }
+
+        .priceTypeList {
+            overflow: hidden;
+            position: absolute;
+            top: 60rpx;
+            left: 0rpx;
+            z-index: 2;
+            background: #15141F;
+            border-radius: 10rpx;
+            width: 100%;
+
+            .selectItem {
+                height: 64rpx;
+                line-height: 64rpx;
+                font-size: 28rpx;
+                padding-left: 20rpx;
+
+                &.select {
+                    background: #3f3e48;
+                }
+            }
+        }
 
     }
-}
 
-.showMoreTool {
-    position: relative;
-    color: #00E8A2;
-    font-size: 28rpx;
-
-    .showMoreIcon {
-        width: 32rpx;
-        height: 32rpx;
-        
-        position: absolute;
-        top: 4rpx;
-        right: 8rpx;
-        background-image: url(../../static/me/ic_input_arrow_down.png);
-        background-repeat: no-repeat;
-        background-size: 32rpx;
-        transition: transform 0.3s;
-
-        &.up {
-            transform: rotate(-180deg);
+    .coinPrice {
+        position: relative;
+        margin-top: 20rpx;
+        height: 64rpx;
+
+        .noInput {
+            height: 64rpx;
+            background: #323045;
+            border-radius: 16rpx;
+            color: #A1A0A8;
+            line-height: 64rpx;
+            font-size: 24rpx;
+            padding-left: 20rpx;
+        }
+
+        .input {
+            height: 64rpx;
+            background: #323045;
+            border-radius: 16rpx;
+            color: #A1A0A8;
+            line-height: 64rpx;
+            font-size: 24rpx;
+            padding-left: 20rpx !important;
+        }
+
+        .currencyName {
+            position: absolute;
+            height: 32rpx;
+            top: 0rpx;
+            right: 20rpx;
+            color: #A1A0A8;
+            line-height: 64rpx;
+            font-size: 24rpx;
+        }
+    }
+
+    .twoInput {
+        margin-top: 20rpx;
+        margin-bottom: 10rpx;
+        display: flex;
+
+        .leverageSelectBody {
+            position: relative;
+            width: 212rpx;
+            height: 64rpx;
+            background: #323045;
+            border-radius: 16rpx;
+            padding: 0 20rpx;
+
+            .leverageInput {
+                position: relative;
+                height: 64rpx;
+                line-height: 64rpx;
+                font-size: 20rpx;
+                color: #A1A0A8;
+
+
+                &::after {
+                    display: block;
+                    position: absolute;
+                    content: '';
+                    background-image: url(../../static/maskets/ic_ma_arrow_down.png);
+                    background-repeat: no-repeat;
+                    background-size: 32rpx;
+                    width: 32rpx;
+                    height: 32rpx;
+                    top: 16rpx;
+                    right: 0rpx;
+                }
+            }
+
+            .shade {
+                position: fixed;
+                top: 220rpx;
+                left: 0;
+                width: 750rpx;
+                height: 70vh;
+                background: transparent;
+                // background: #fff;
+                z-index: 0;
+            }
+
+            .leverageList {
+                overflow: hidden;
+                position: absolute;
+                top: 60rpx;
+                left: 0rpx;
+                z-index: 2;
+                background: #15141F;
+                border-radius: 10rpx;
+                width: 100%;
+
+                .selectItem {
+                    height: 64rpx;
+                    line-height: 64rpx;
+                    font-size: 28rpx;
+                    padding-left: 20rpx;
+
+                    &.select {
+                        background: #3f3e48;
+                    }
+                }
+            }
+
         }
 
-        &.down {
-            transform: rotate(0deg);
+        .coinAmount {
+            position: relative;
+            height: 64rpx;
+            margin-left: 20rpx;
+
+            .input {
+                height: 64rpx;
+                background: #323045;
+                border-radius: 16rpx;
+                color: #A1A0A8;
+                line-height: 64rpx;
+                font-size: 24rpx;
+                padding-left: 20rpx !important;
+            }
+
+            .currencyName {
+                position: absolute;
+                height: 32rpx;
+                top: 0rpx;
+                right: 20rpx;
+                color: #A1A0A8;
+                line-height: 64rpx;
+                font-size: 24rpx;
+            }
         }
     }
+
+    .text {
+        margin: 0;
+    }
+
+    .button {
+        box-sizing: border-box;
+        height: 64rpx;
+        border-radius: 16rpx;
+        font-weight: 700;
+        font-size: 24rpx;
+        color: #15141F !important;
+
+    }
 }
 </style>
diff --git a/pages/markets/trade.vue b/pages/markets/trade.vue
index def51a1..37087d7 100644
--- a/pages/markets/trade.vue
+++ b/pages/markets/trade.vue
@@ -5,26 +5,22 @@
         </navigation>
         <view class="content">
             <view class="transactionSide">
-                <!-- <tradePanel ref="trade" :type="type"></tradePanel> -->
                 <transaction></transaction>
             </view>
             <view class="positionSide">
-                <!-- <positionList v-on:depthChange="depthChange"></positionList> -->
+                <positionList v-on:depthChange="depthChange"></positionList>
             </view>
         </view>
-        <view class="uni-gap"></view>
-        <!-- <entrustOrderList></entrustOrderList> -->
-        <!-- <uni-drawer :visible="drawerVisible" mask="false" mode="left" @close="closeDrawer">
-            <marketDrawer :areaList="areaList" :marketList="marketList"></marketDrawer>
-        </uni-drawer> -->
+        <view class="gap">
+            <entrustOrderList></entrustOrderList>
+        </view>
+
 
     </view>
 </template>
 
 <script>
-import transaction from '../../components/transaction/transaction.vue';
 export default {
-  components: { transaction },
     name: "trade",
     data() {
         return {
@@ -41,7 +37,9 @@ export default {
     },
     onShow() { },
     methods: {
-        
+        depthChange(e) {
+            console.log(e);
+        }
 
     },
 }
@@ -65,13 +63,22 @@ export default {
 
     .content {
         margin-top: 200rpx;
-        padding: 40rpx;
+        padding-top: 20rpx;
+        padding-bottom: 40rpx;
+        margin-bottom: 32rpx;
+        background: #211F32;
+        display: flex;
 
-        .transactionSide{
+        .transactionSide {
             width: 444rpx;
             margin-left: 28rpx;
         }
 
+        .positionSide {
+            width: 242rpx;
+            margin-left: 36rpx;
+        }
+
 
     }
 
diff --git a/pages/me/donateRecord.vue b/pages/me/donateRecord.vue
index 7de9ece..764d90d 100644
--- a/pages/me/donateRecord.vue
+++ b/pages/me/donateRecord.vue
@@ -6,9 +6,9 @@
             <view class="card" v-for="(item, index) in 4" :key="index">
                 <u-icon class="icon" :name="'../../static/me/img_donate.png'" size="64rpx" width="64rpx"></u-icon>
                 <view class="content">
-                    <Key-value-row class="title" :keyName="'Donate Title'" :value="'200.00'" :leftColor="'#fff'"
+                    <key-value-row class="title" :keyName="'Donate Title'" :value="'200.00'" :leftColor="'#fff'"
                         :rightColor="'#F2FE8D'">
-                    </Key-value-row>
+                    </key-value-row>
                     <view class="date">2022/08/06 14:50:34</view>
                 </view>
             </view>
diff --git a/pages/me/walletHistory.vue b/pages/me/walletHistory.vue
index bb2a610..9637df5 100644
--- a/pages/me/walletHistory.vue
+++ b/pages/me/walletHistory.vue
@@ -22,7 +22,7 @@
                     :fontColor="`${(0 + +balanceTestValue) > 0 ? '#00E8A2' : '#F4506A'}`">
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'balance'">
-                    <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row>
+                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
                     <view class="text">Postscript : ontact customer service on the top-left corner for identity verific
                     </view>
                 </view>
@@ -35,7 +35,7 @@
                     :fontColor="`${(0 + +contarctTestValue) > 0 ? '#00E8A2' : '#F4506A'}`">
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'contarct'">
-                    <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row>
+                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
                     <view class="text">Postscript : ontact customer service on the top-left corner for identity verific
                     </view>
                 </view>
diff --git a/pages/mine/mineRecord.vue b/pages/mine/mineRecord.vue
index b64e975..92856ba 100644
--- a/pages/mine/mineRecord.vue
+++ b/pages/mine/mineRecord.vue
@@ -7,15 +7,15 @@
             textSize="36rpx" icon="../../static/mine/img_data.png"></u-empty>
         <view class="content" v-if="dataList.length > 0">
             <view class="dataBody" v-for="(item, index) in 4" :key="index">
-                <Key-value-row :keyName="i18n.BaseCoin" :value="'100BTC'" ></Key-value-row>
-                <Key-value-row :keyName="i18n.ProfitCoin" :value="'CEH'"></Key-value-row>
-                <Key-value-row :keyName="i18n.DayRebate" :value="'75000'"></Key-value-row>
+                <key-value-row :keyName="i18n.BaseCoin" :value="'100BTC'" ></key-value-row>
+                <key-value-row :keyName="i18n.ProfitCoin" :value="'CEH'"></key-value-row>
+                <key-value-row :keyName="i18n.DayRebate" :value="'75000'"></key-value-row>
                 <u-divider text="" lineColor="#B9C1D9"></u-divider>
-                <Key-value-row :keyName="i18n.RebateDay" :value="'0/120'"></Key-value-row>
-                <Key-value-row :keyName="i18n.RebateAmount" :value="'150000/9000000'"></Key-value-row>
+                <key-value-row :keyName="i18n.RebateDay" :value="'0/120'"></key-value-row>
+                <key-value-row :keyName="i18n.RebateAmount" :value="'150000/9000000'"></key-value-row>
                 <u-divider text="" lineColor="#B9C1D9"></u-divider>
-                <Key-value-row :keyName="i18n.AddTime" :value="'2022/08/06 14:50:34'"></Key-value-row>
-                <Key-value-row :keyName="i18n.ReleaseTime" :value="'2022/08/06 14:50:34'"></Key-value-row>
+                <key-value-row :keyName="i18n.AddTime" :value="'2022/08/06 14:50:34'"></key-value-row>
+                <key-value-row :keyName="i18n.ReleaseTime" :value="'2022/08/06 14:50:34'"></key-value-row>
             </view>
 
         </view>
diff --git a/pages/recharge/rechargeRecord.vue b/pages/recharge/rechargeRecord.vue
index 88bdc44..f507ccd 100644
--- a/pages/recharge/rechargeRecord.vue
+++ b/pages/recharge/rechargeRecord.vue
@@ -23,14 +23,14 @@
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'coinRecharge'">
                     <view style="padding:20rpx 32rpx;">
-                        <Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row>
+                        <key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></key-value-row>
+                        <key-value-row :keyName="i18n.Fees" :value="'10.0922'"></key-value-row>
+                        <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></key-value-row>
                     </view>
                     <view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
                         <show-more>
-                            <Key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></Key-value-row>
-                            <Key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></Key-value-row>
+                            <key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></key-value-row>
+                            <key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></key-value-row>
                             <view class="text">Postscript : ontact customer service on the top-left corner for identity
                                 verific
                             </view>
@@ -45,14 +45,14 @@
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'cashRecharge'">
                     <view style="padding:20rpx 32rpx;">
-                        <Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row>
+                        <key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></key-value-row>
+                        <key-value-row :keyName="i18n.Fees" :value="'10.0922'"></key-value-row>
+                        <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></key-value-row>
                     </view>
                     <view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
                         <show-more>
-                            <Key-value-row :keyName="i18n.USDTRate" :value="'19298'"></Key-value-row>
-                            <Key-value-row :keyName="i18n.USDT" :value="'298237'"></Key-value-row>
+                            <key-value-row :keyName="i18n.USDTRate" :value="'19298'"></key-value-row>
+                            <key-value-row :keyName="i18n.USDT" :value="'298237'"></key-value-row>
                             <view class="text">Postscript : ontact customer service on the top-left corner for identity
                                 verific
                             </view>
diff --git a/pages/subscription/details.vue b/pages/subscription/details.vue
index 508503a..5772400 100644
--- a/pages/subscription/details.vue
+++ b/pages/subscription/details.vue
@@ -32,8 +32,8 @@
                 </view>
             </view>
             <!-- total -->
-            <Key-value-row :keyName="i18n.Total" :value="'≈ 993.64069952 ACTA'" :size="'24rpx'" :leftColor="'#A1A0A8'"
-                :rightColor="'#A1A0A8'"></Key-value-row>
+            <key-value-row :keyName="i18n.Total" :value="'≈ 993.64069952 ACTA'" :size="'24rpx'" :leftColor="'#A1A0A8'"
+                :rightColor="'#A1A0A8'"></key-value-row>
 
             <!-- 按钮 -->
             <u-button class="button" color="#00E8A2" throttleTime="500">{{
diff --git a/pages/subscription/index.vue b/pages/subscription/index.vue
index 0bc8f2c..9bc575d 100644
--- a/pages/subscription/index.vue
+++ b/pages/subscription/index.vue
@@ -21,9 +21,9 @@
                     :title="'BTC(Bitcoin)'" :rightName="i18n.Subscribe" :hasBtn="true" :btnColor="'#00E8A2'">
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'product'">
-                    <Key-value-row :keyName="i18n.STLTotalCirculation" :value="'23989'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.PrivateSalePrice" :value="'284145.61'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.ICOTime" :value="'2022/08/06-2022/08/31'"></Key-value-row>
+                    <key-value-row :keyName="i18n.STLTotalCirculation" :value="'23989'"></key-value-row>
+                    <key-value-row :keyName="i18n.PrivateSalePrice" :value="'284145.61'"></key-value-row>
+                    <key-value-row :keyName="i18n.ICOTime" :value="'2022/08/06-2022/08/31'"></key-value-row>
                 </view>
 
 
@@ -32,10 +32,10 @@
                     :title="'973430980989323445'" :rightName="'Pending'" fontColor="#00E8A2">
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'pending'">
-                    <Key-value-row :keyName="i18n.Price" :value="'284145.61'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.Quantity" :value="'1000'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.USDT" :value="'3166.61'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row>
+                    <key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
+                    <key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
+                    <key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
+                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
                 </view>
 
 
@@ -44,15 +44,15 @@
                     :title="'973430980989323445'" :rightName="'complete'" fontColor="#00E8A2">
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'complete'">
-                    <Key-value-row :keyName="i18n.Price" :value="'284145.61'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.Quantity" :value="'1000'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.ConfirmAmount" :value="'999'" :leftColor="'#F2FE8D'"
-                        :rightColor="'#F2FE8D'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.USDT" :value="'3166.61'"></Key-value-row>
-                    <Key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="'2000'" :leftColor="'#F2FE8D'"
+                    <key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
+                    <key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
+                    <key-value-row :keyName="i18n.ConfirmAmount" :value="'999'" :leftColor="'#F2FE8D'"
+                        :rightColor="'#F2FE8D'"></key-value-row>
+                    <key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
+                    <key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="'2000'" :leftColor="'#F2FE8D'"
                         :rightColor="'#F2FE8D'">
-                    </Key-value-row>
-                    <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row>
+                    </key-value-row>
+                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
 
                 </view>
 
diff --git a/pages/withdrawal/withdrawal.vue b/pages/withdrawal/withdrawal.vue
index 8948a02..aa95125 100644
--- a/pages/withdrawal/withdrawal.vue
+++ b/pages/withdrawal/withdrawal.vue
@@ -37,8 +37,8 @@
                 <!-- 分割线 -->
                 <u-divider text="" lineColor="#B9C1D9"></u-divider>
                 <!-- 可用数量 -->
-                <Key-value-row :keyName="i18n.Quantity" :value="`${i18n.Available} ${AvailableValue} ${currentCoin}`"
-                    rightColor="#A1A0A8"></Key-value-row>
+                <key-value-row :keyName="i18n.Quantity" :value="`${i18n.Available} ${AvailableValue} ${currentCoin}`"
+                    rightColor="#A1A0A8"></key-value-row>
                 <!-- 数量输入框 -->
                 <view class="input-item">
                     <u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
@@ -47,11 +47,11 @@
                     <view class="all">{{ i18n.ALL }}</view>
                 </view>
                 <!-- 最低体现金额 -->
-                <Key-value-row :keyName="i18n.MinimumWithdrawAmount" size="24rpx"
-                    :value="`${AvailableValue} ${currentCoin}`" rightColor="#A1A0A8"></Key-value-row>
+                <key-value-row :keyName="i18n.MinimumWithdrawAmount" size="24rpx"
+                    :value="`${AvailableValue} ${currentCoin}`" rightColor="#A1A0A8"></key-value-row>
                 <!-- 手续费 -->
-                <Key-value-row :keyName="i18n.HandlingFee" size="24rpx" :value="`${AvailableValue} ${currentCoin}`"
-                    rightColor="#A1A0A8"></Key-value-row>
+                <key-value-row :keyName="i18n.HandlingFee" size="24rpx" :value="`${AvailableValue} ${currentCoin}`"
+                    rightColor="#A1A0A8"></key-value-row>
             </view>
             <view class="message-item first">
                 {{ i18n.message1 }}
@@ -106,9 +106,9 @@
                 <view class="bankCardInfo" v-if="hasBankCard">
                     <view class="username">ZHOU JIELUN</view>
                     <view class="BankCardCode">4349 9545 9893 9854 027</view>
-                    <Key-value-row :keyName="'Bank of Melbourne'" size="24rpx" :value="'CODE98Y'" rightColor="#F2FE8D"
+                    <key-value-row :keyName="'Bank of Melbourne'" size="24rpx" :value="'CODE98Y'" rightColor="#F2FE8D"
                         leftColor="#fff">
-                    </Key-value-row>
+                    </key-value-row>
 
                 </view>
             </view>
diff --git a/pages/withdrawal/withdrawalRecord.vue b/pages/withdrawal/withdrawalRecord.vue
index 572e6e9..79b7a07 100644
--- a/pages/withdrawal/withdrawalRecord.vue
+++ b/pages/withdrawal/withdrawalRecord.vue
@@ -22,14 +22,14 @@
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'digitalCurrency'">
                     <view style="padding:20rpx 32rpx;">
-                        <Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row>
+                        <key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></key-value-row>
+                        <key-value-row :keyName="i18n.Fees" :value="'10.0922'"></key-value-row>
+                        <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></key-value-row>
                     </view>
                     <view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
                         <show-more class="digitalShowMore">
-                            <Key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></Key-value-row>
-                            <Key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></Key-value-row>
+                            <key-value-row :keyName="i18n.Address" :value="'dhiukyfdhi8797979870800'"></key-value-row>
+                            <key-value-row :keyName="i18n.Hash" :value="'dhiukyfdhi8797979870800'"></key-value-row>
                             <view class="text">Postscript : ontact customer service on the top-left corner for identity
                                 verific
                             </view>
@@ -45,20 +45,20 @@
                 </card-header>
                 <view class="dataBody" v-if="pageState === 'onLine'">
                     <view style="padding:20rpx 32rpx;">
-                        <Key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Fees" :value="'10.0922'"></Key-value-row>
-                        <Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></Key-value-row>
+                        <key-value-row :keyName="i18n.OrderID" :value="'293829773920223873676'"></key-value-row>
+                        <key-value-row :keyName="i18n.Fees" :value="'10.0922'"></key-value-row>
+                        <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:50:34'"></key-value-row>
                     </view>
                     <show-more class="onLineShowMore" style="border-top: 2rpx solid #323045;margin-bottom: 20rpx;">
                         <view style="padding:20rpx 32rpx;">
-                            <Key-value-row :keyName="i18n.USDTRate" :value="'19298'"></Key-value-row>
-                            <Key-value-row :keyName="i18n.USDT" :value="'298237'"></Key-value-row>
+                            <key-value-row :keyName="i18n.USDTRate" :value="'19298'"></key-value-row>
+                            <key-value-row :keyName="i18n.USDT" :value="'298237'"></key-value-row>
                         </view>
                         <view style="border-top: 2rpx solid #323045;padding:20rpx 32rpx;">
-                            <Key-value-row :keyName="i18n.CardNo" :value="'4349 9545 9893 9854 027'">
-                            </Key-value-row>
-                            <Key-value-row :keyName="i18n.Bank" :value="'Bank of Melbourne'"></Key-value-row>
-                            <Key-value-row :keyName="i18n.Payee" :value="'Zhou jielun'"></Key-value-row>
+                            <key-value-row :keyName="i18n.CardNo" :value="'4349 9545 9893 9854 027'">
+                            </key-value-row>
+                            <key-value-row :keyName="i18n.Bank" :value="'Bank of Melbourne'"></key-value-row>
+                            <key-value-row :keyName="i18n.Payee" :value="'Zhou jielun'"></key-value-row>
                             <view class="text">Postscript ：ontact customer service on the top-left corner for identity
                                 verific
                             </view>
diff --git a/static/maskets/add.png b/static/maskets/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a29350712a0498972f7ffceb95b0e5bc6668147
GIT binary patch
literal 295
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1K-6l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjzsJ+XF{Fa=?Tv%HO$H(j53lPjTD+mv{f5h&
zmM<xHngR<ZCW-PFD1=PDzWm{TJ{8-o^_M2FD={!=yxf&7d}ythtKSqG{`YfVFN=){
zzP?<6Ymdgqd-7?g7i$D^YqT<CvqUH#kYc>Xv0<9&nZ0bApXO}Nm0A5|&Arujyd`^U
z(oRS+m@|t7r)Ek9>x5@qT_3YBf2sb);;xM4u`#pxiUnEsxUCgT=!Kb+oz(OFX3>QD
gkVoIG7!vNwWkwr@34Jl%5A+9vr>mdKI;Vst03*j~T>t<8

literal 0
HcmV?d00001

diff --git a/static/maskets/ic_ma_arrow_down.png b/static/maskets/ic_ma_arrow_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..77227165b9856e050a962ae88a69b29a85651fa5
GIT binary patch
literal 257
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1K-6l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjKh4v{F{Fa=?WNnC4F&?N7j=&cy}2Nyb1+Ef
zsE|%#=!r!hJ^d0l4#=FyHxd_R1ZrRiaS5IM)#stfq?aY}+Dq5=m+U$%RoG#^cZyi$
zm&+X|Y&ZY=;JV-LU)B-VnxFTdt3A5NA^x#*#uJY4kDV)Ca7_RBEU)EtMX~9kt_tB!
u+t1SZLdt)R&o)TnxOiJ~btgN>2Ad5GEbZqQ)RZQ<g1DZpelF{r5}E*eCR>~U

literal 0
HcmV?d00001

diff --git a/static/maskets/sub.png b/static/maskets/sub.png
new file mode 100644
index 0000000000000000000000000000000000000000..3724c13ff7068c1aa341fc851008d83e04fcae95
GIT binary patch
literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1K-6l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjAL;4h7*fIb_L3oQgM)zU!PpfW8~IW$EbQfz
zd~txy)RK!uMpS&#%wM9rPxb?qGh`^<cX_?5cWI1sjmBpC>8W<BVs$I}^n*<%%&dOf
isaN;zyD$?-*<&_`Y6-R*ftHUzx;$O|T-G@yGywp|I62+`

literal 0
HcmV?d00001

diff --git a/utils/language/en_US.js b/utils/language/en_US.js
index 0bfff28..e5d573d 100644
--- a/utils/language/en_US.js
+++ b/utils/language/en_US.js
@@ -72,9 +72,10 @@ export default {
 		LatestPrice: 'Latest Price',
 		RiseAndfall: '24H Rise and fall',
 
-		lONG: 'lONG',
+		LONG: 'LONG',
 		SHORT: 'SHORT',
 		MarketPrice: 'Market price',
+		LimitPrice: 'Limit price',
 		MarketOptimalPrice: 'Market optimal price',
 		leverage: 'leverage',
 		Usable: 'Usable',
@@ -98,8 +99,20 @@ export default {
 		StsPrice: 'Sts price',
 		ExpectProfit: 'Expect profit',
 		do: 'do',
-		StopLimit: 'Stop/Limit',
+		ClosePrice: 'Close Price',
+		PL: 'P/L',
 		CloseTime: 'Close Time',
+
+		WarmTips: 'Warm Tips',
+		WarmTipsText: 'Are you sure you want to close？',
+		Cancel: 'Cancel',
+		Confirm: 'Confirm',
+
+		StopLimit: 'Stop/Limit',
+		lessThan:'The number cannot be less than 0',
+		ExpectProfit: 'Expect profit ',
+		ExpectLoss: 'Expect loss ',
+
 	},
 
 	// 捐赠页面相关