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..249ca45 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="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.json b/pages.json
index 8618ea3..440e954 100644
--- a/pages.json
+++ b/pages.json
@@ -44,6 +44,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/markets/kLine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 
 		// charity 
 		{
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 64da822..2a027c6 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,647 +1,721 @@
-<template>
-	<view class="main">
-		<!-- nav -->
-		<view class="nav-head">
-			<u-button class="serviceButton" color="#323045">{{ i18n.customerService }}</u-button>
-			<view class="languageBtn" @click.stop="languageShow = true">
-				{{ langTrue }}
-			</view>
-			<!-- popups弹窗 -->
-			<u-overlay :show="languageShow" @click="languageShow = false" :opacity="0">
-				<language-popups v-model="languageShow" :popData="languageData" @tapPopup="tapPopup">
-				</language-popups>
-			</u-overlay>
-
-		</view>
-
-		<!-- 轮播图 -->
-		<u-swiper class="swiper" :list="swiperList" previousMargin="48rpx" nextMargin="80rpx" circular :autoplay="true"
-			radius="32rpx" bgColor="rgba(0,0,0,0)" height="360rpx"></u-swiper>
-		<!-- 消息 -->
-		<view class="message" @click="popupShow = true">
-			<u-icon class="icon" name="../../static/home/ic_proclamation.png" size="60rpx" width="60rpx"></u-icon>
-			<view class="text">{{ i18n.homeMessage }}</view>
-		</view>
-		<!-- 三个按钮 -->
-		<view class="btnDiv">
-			<view class="item" @click="goto('recharge')">
-				<u--image class="img" :showLoading="true" src="../../static/home/img_recharge.png" width="144rpx"
-					height="144rpx"></u--image>
-				<view class="text">{{ i18n.Recharge }}</view>
-			</view>
-			<view class="item" @click="goto('mine')">
-				<u--image class="img" :showLoading="true" src="../../static/home/img_Mine.png" width="144rpx"
-					height="144rpx"></u--image>
-				<view class="text">{{ i18n.Mine }}</view>
-			</view>
-			<view class="item" @click="goto('subcription')">
-				<u--image class="img" :showLoading="true" src="../../static/home/img_Subcription.png" width="144rpx"
-					height="144rpx"></u--image>
-				<view class="text">{{ i18n.Subcription }}</view>
-			</view>
-		</view>
-		<!-- 步数 -->
-		<view class="steps">
-			<view class="content">
-				<view class="title">{{ i18n.TodaySteps }}</view>
-				<view id="chart" :stepsNum="stepsNum" :stepTarget="stepTarget"
-					:change:stepTarget="echarts.receive" :change:stepsNum="echarts.receive"
-					style="width: 280rpx;height:280rpx; font-size: 40rpx;"></view>
-				<!-- <canvas id="chart" ref="chart" style="width: 280rpx;height:280rpx; font-size: 40rpx;"></canvas> -->
-				<u-button class="button" color="#00E8A2">{{ i18n.ReceiveEarnings }}</u-button>
-			</view>
-		</view>
-		<!-- 播放器 -->
-		<view class="videoList" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)">
-			<view class="videoImage" :style="`background-image: url(${item.poster});background-repeat: no-repeat;
-			background-size: cover;`">
-				<view class="VideoBg">
-					<view class="VideoLogo"></view>
-					<view class="VideoTitle">{{ item.title }}</view>
-				</view>
-			</view>
-		</view>
-		<video class="video" v-show="videoShow" id="video" :enable-progress-gesture="false" autoplay="true"
-			:src="videoUrl" controls x5-video-player-type="h5-page" @fullscreenchange="ifStopVideo"></video>
-		<!-- 通知弹出层 -->
-		<u-popup class="popup" :show="popupShow" round="32rpx" mode="center" @close="popupShow = false"
-			@open="popupShow = true" bgColor="#211F32" :customStyle="{
-				margin: 'auto 102rpx auto 118rpx',
-			}">
-			<view class="content">
-				<scroll-view scroll-y="true" style="height: 288rpx;" scroll-with-animation="true" @touchmove.stop>
-					{{ i18n.homeMessage }}
-				</scroll-view>
-				<u-button class="button" color="#00E8A2" @click="popupShow = false">OK</u-button>
-			</view>
-		</u-popup>
-		<!-- tabBar -->
-		<tab-bar :selectActive="1"></tab-bar>
-	</view>
-</template>
-
-<script>
-	import languagePopups from '@/components/language-popups/language-popups.vue'
-	import languageData from '@/utils/language/config'
-	import api from '@/utils/api'
-	// 引入echarts
-	// import * as echarts from 'echarts';
-
-	// let videoPlayerObj = {};
-	let videoPlayer;
-	let myChart;
-	export default {
-		name: 'home',
-		components: {
-			languagePopups
-		},
-		data() {
-			return {
-				languageShow: false,
-				langTrue: languageData[0].title || 'English',
-				languageData,
-				popupShow: false,
-				swiperList: [
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-				],
-				videoShow: false,
-				videoUrl: '',
-				videoList: [{
-						url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
-						title: 'Video name 1',
-						poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
-					},
-					{
-						url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
-						title: 'Video name 2',
-						poster: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
-					},
-					{
-						url: 'http://vjs.zencdn.net/v/oceans.mp4',
-						title: 'Video name 3',
-						poster: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
-					},
-					{
-						url: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4',
-						title: 'Video name 4',
-						poster: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
-					},
-				],
-				option: null,
-				stepsNum: 5000, // 当前步数
-				stepTarget: 10000, // 目标步数
-				myChart: null,
-			}
-		},
-		onLoad() {
-			this.stepsNum = 2000
-
-		},
-		onShow() {
-			this.getBanner();
-			//const post2 = api.banner();
-			// 生成播放器队列对象
-			// this.videoList.forEach((item, index) => {
-			// 	const VideoPlayer = uni.createVideoContext(`video-${index}`, this)
-			// 	videoPlayerObj[`video-${index}`] = VideoPlayer
-			// });
-			videoPlayer = uni.createVideoContext(`video`, this);
-
-			// this.$nextTick(() => {
-			// 	this.initChart()
-			// })
-
-			if (uni.getStorageSync('langTrue')) {
-				this.langTrue = uni.getStorageSync('langTrue')
-			}
-
-		},
-		onHide() {
-			this.stopAllVideoPlay()
-		},
-		computed: {
-			i18n() {
-				return this.$t('home')
-			}
-		},
+
+原始文件
+永久链接
+Blame
+文件历史
+<template>
+	<view class="main">
+		<!-- nav -->
+		<view class="nav-head">
+			<u-button class="serviceButton" color="#323045">{{ i18n.customerService }}</u-button>
+			<view class="languageBtn" @click.stop="languageShow = true">
+				{{ langTrue }}
+			</view>
+			<!-- popups弹窗 -->
+			<u-overlay :show="languageShow" @click="languageShow = false" :opacity="0">
+				<language-popups v-model="languageShow" :popData="languageData" @tapPopup="tapPopup">
+				</language-popups>
+			</u-overlay>
+		</view>
+		<!-- 轮播图 -->
+		<u-swiper class="swiper" :list="swiperList" previousMargin="48rpx" nextMargin="80rpx" circular :autoplay="true"
+			radius="32rpx" bgColor="rgba(0,0,0,0)" height="360rpx"></u-swiper>
+		<!-- 消息 -->
+		<view class="message" @click="popupShow = true">
+			<u-icon class="icon" name="../../static/home/ic_proclamation.png" size="60rpx" width="60rpx"></u-icon>
+			<!-- <view class="text">{{ i18n.homeMessage }}</view> -->
+			<u-notice-bar class="notice" :text="messageList" icon="" fontSize="24rpx" bgColor="#211F32" color="#fff"
+				direction="column">
+			</u-notice-bar>
+		</view>
+		<!-- 三个按钮 -->
+		<view class="btnDiv">
+			<view class="item" @click="goto('recharge')">
+				<u--image class="img" :showLoading="true" src="../../static/home/img_recharge.png" width="144rpx"
+					height="144rpx"></u--image>
+				<view class="text">{{ i18n.Recharge }}</view>
+			</view>
+			<view class="item" @click="goto('mine')">
+				<u--image class="img" :showLoading="true" src="../../static/home/img_Mine.png" width="144rpx"
+					height="144rpx"></u--image>
+				<view class="text">{{ i18n.Mine }}</view>
+			</view>
+			<view class="item" @click="goto('subcription')">
+				<u--image class="img" :showLoading="true" src="../../static/home/img_Subcription.png" width="144rpx"
+					height="144rpx"></u--image>
+				<view class="text">{{ i18n.Subcription }}</view>
+			</view>
+		</view>
+		<!-- 步数 -->
+		<view class="steps">
+			<view class="content">
+				<view class="title">{{ i18n.TodaySteps }}</view>
+				<view id="chart" style="width: 280rpx;height:280rpx; font-size: 40rpx;"></view>
+				<!-- <canvas id="chart" ref="chart" style="width: 280rpx;height:280rpx; font-size: 40rpx;"></canvas> -->
+				<u-button class="button" color="#00E8A2">{{ i18n.ReceiveEarnings }}</u-button>
+			</view>
+		</view>
+		<!-- 播放器 -->
+		<view class="videoList" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)">
+			<view class="videoImage" :style="`background-image: url(${item.poster});background-repeat: no-repeat;
+			background-size: cover;`">
+				<view class="VideoBg">
+					<view class="VideoLogo"></view>
+					<view class="VideoTitle">{{ item.title }}</view>
+				</view>
+			</view>
+		</view>
+		<video class="video" v-show="videoShow" id="video" :enable-progress-gesture="false" autoplay="true"
+			:src="videoUrl" controls x5-video-player-type="h5-page" @fullscreenchange="ifStopVideo"></video>
+		<!-- 通知弹出层 -->
+		<u-popup class="popup" :show="popupShow" round="32rpx" mode="center" @close="popupShow = false"
+			@open="popupShow = true" bgColor="#211F32" :customStyle="{
+				margin: 'auto 102rpx auto 118rpx',
+			}">
+			<view class="content">
+				<scroll-view scroll-y="true" style="height: 288rpx;" scroll-with-animation="true" @touchmove.stop>
+					{{ i18n.homeMessage }}
+				</scroll-view>
+				<u-button class="button" color="#00E8A2" @click="popupShow = false">OK</u-button>
+			</view>
+		</u-popup>
+		<!-- tabBar -->
+		<tab-bar :selectActive="1"></tab-bar>
+	</view>
+</template>
+
+<script>
+import languagePopups from '@/components/language-popups/language-popups.vue'
+import languageData from '@/utils/language/config'
+// 引入echarts
+// import * as echarts from 'echarts';
+// let videoPlayerObj = {};
+let videoPlayer;
+let myChart;
+export default {
+	name: 'home',
+	components: { languagePopups },
+	data() {
+		return {
+			languageShow: false,
+			langTrue: languageData[0].title || 'English',
+			languageData,
+			popupShow: false,
+			messageList: [
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+			],
+			swiperList: [
+				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+			],
+			videoShow: false,
+			videoUrl: '',
+			videoList: [
+				{
+					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
+					title: 'Video name 1',
+					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
+				},
+				{
+					url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
+					title: 'Video name 2',
+					poster: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
+				},
+				{
+					url: 'http://vjs.zencdn.net/v/oceans.mp4',
+					title: 'Video name 3',
+					poster: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
+				},
+				{
+					url: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4',
+					title: 'Video name 4',
+					poster: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
+				},
+			],
+			option: null,
+			stepsNum: 5000, // 当前步数
+			stepTarget: 10000,// 目标步数
+			myChart: null,
+		}
+	},
+	onLoad() {
+
+
+	},
+	onShow() {
+		// 生成播放器队列对象
+		// this.videoList.forEach((item, index) => {
+		// 	const VideoPlayer = uni.createVideoContext(`video-${index}`, this)
+		// 	videoPlayerObj[`video-${index}`] = VideoPlayer
+		// });
+		videoPlayer = uni.createVideoContext(`video`, this);
+
+		// this.$nextTick(() => {
+		// 	this.initChart()
+		// })
+		if (uni.getStorageSync('langTrue')) {
+			this.langTrue = uni.getStorageSync('langTrue')
+		}
+
+	},
+	onHide() {
+		this.stopAllVideoPlay()
+	},
+	computed: {
+		i18n() {
+			return this.$t('home')
+		}
+	},
+	methods: {
+		// 弹出语言选择框
+		laug() {
+			this.laugValue = true;
+		},
+		// 切换语言
+		tapPopup(e) {
+			this._i18n.locale = e.language
+			this.$store.commit('setLanguage', e.language)
+			this.langTrue = e.title
+			uni.setStorageSync('langTrue', e.title)
+			uni.redirectTo({
+				url: '/pages/home/index'
+			})
+		},
+		/**
+		 *  在跳转其他页面时是暂停全部视频
+		 * @param {*} e 
+		 */
+		stopAllVideoPlay() {
+			videoPlayer.pause()
+		},
+		/**
+		 * 根据全屏状态与暂停视频
+		 * @param {*} e 
+		 */
+		ifStopVideo(e) {
+			if (e.detail.fullScreen) {
+				videoPlayer.play()
+			} else {
+				this.videoShow = false
+				videoPlayer.pause()
+			}
+		},
+		/**
+		 * 播放视频
+		 * @param {*} data 
+		 */
+		playVideo(data) {
+			this.videoUrl = data.url;
+			this.videoShow = true;
+			videoPlayer.requestFullScreen({ direction: 0 })
+		},
+		/**
+		 * 跳转
+		 */
+		goto(page) {
+			// console.log(page);
+			let url = '';
+			switch (page) {
+				case 'recharge':
+					url = '/pages/recharge/recharge'
+					break;
+				case 'mine':
+					url = '/pages/mine/mine'
+					break;
+				case 'subcription':
+					url = '/pages/subscription/index';
+					break;
+				default:
+					break;
+			}
+			if (url) {
+				this.stopAllVideoPlay()
+				// console.log(url);
+				if (page === 'subcription') {
+					uni.reLaunch({
+						url,
+					})
+					return;
+				}
+				uni.navigateTo({
+					url,
+				});
+			}
+
+		},
+
+		initChart() {
+			// let myChart = echarts.init(this.$refs.chart);
+			// console.log(document);
+			// console.log(this.$refs.chart);
+			// this.myChart = echarts.init(document.getElementById('chart'));
+			// this.myChart = echarts.init(this.$refs.chart);
+			// myChart = echarts.init(document.getElementById('chart'))
+			this.option = {
+				title: {
+					text: this.stepsNum,
+					// 副标题
+					subtext: "",
+					// 主副标题间距
+					itemGap: 0,
+					left: 'center',
+					top: 'center',
+					// 主标题样式
+					textStyle: {
+						fontSize: '20',
+						color: '#fff'
+					},
+				},
+				series: [{
+					name: '环形饼图',
+					type: 'pie',
+					radius: ['48%', '70%'],
+					avoidLabelOverlap: false,
+					label: {
+						show: false,
+						position: 'center'
+					},
+					itemStyle: {
+						// 设置扇形的阴影
+						shadowBlur: 30,
+						shadowColor: '#15141F',
+						shadowOffsetX: 'center',
+						shadowOffsetY: 'center'
+
+					},
+					data: [{
+						value: +this.stepsNum / this.stepTarget
+						,
+						name: '步数',
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: .2,
+								color: '#47BDFF'
+							}, {
+								offset: .5,
+								color: '#34AEFF'
+							}, {
+								offset: 1,
+								color: '#0589FF'
+							}
+							]),
+							borderRadius: 800,
+
+
+						}
+					},
+					{
+						value: (this.stepTarget - this.stepsNum) / this.stepTarget,
+						name: '剩余步数',
+						itemStyle: {
+							color: '#15141F',
+
+						}
+					}
+					]
+				}]
+			}
+
+			// myChart.setOption(this.option, true);
+			// window.addEventListener('resize', () => {
+			// 	myChart.resize();
+			// });
+		}
+	}
+}
+
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			console.log(0);
+			console.log(window);
+			console.log(typeof window.echarts);
+			// this.initEcharts();
+			if (typeof window.echarts === 'object') {
+				this.initEcharts()
+			}else if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				console.log(1);
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script');
+				console.log(2);
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.js';
+				console.log(3);
+				script.onload = this.initEcharts.bind(this);
+				console.log(4);
+				document.head.appendChild(script);
+				console.log(5);
+			}
+		},
+		
 		methods: {
-			getBanner(){
-				const returnData=api.noticeList({'mark':'APP_INDEX'});
-			},
-			// 弹出语言选择框
-			laug() {
-				this.laugValue = true;
-			},
-			// 切换语言
-			tapPopup(e) {
-				this._i18n.locale = e.language
-				this.$store.commit('setLanguage', e.language)
-				this.langTrue = e.title
-				uni.setStorageSync('langTrue', e.title)
-				uni.redirectTo({
-					url: '/pages/home/index'
-				})
-			},
-			/**
-			 *  在跳转其他页面时是暂停全部视频
-			 * @param {*} e 
-			 */
-			stopAllVideoPlay() {
-				videoPlayer.pause()
-			},
-			/**
-			 * 根据全屏状态与暂停视频
-			 * @param {*} e 
-			 */
-			ifStopVideo(e) {
-				if (e.detail.fullScreen) {
-					videoPlayer.play()
-				} else {
-					this.videoShow = false
-					videoPlayer.pause()
-				}
-			},
-			/**
-			 * 播放视频
-			 * @param {*} data 
-			 */
-			playVideo(data) {
-				this.videoUrl = data.url;
-				this.videoShow = true;
-				videoPlayer.requestFullScreen({
-					direction: 0
-				})
-			},
-			/**
-			 * 跳转
-			 */
-			goto(id) {
-				// console.log(id);
-				let url = '';
-				switch (id) {
-					case 'recharge':
-						url = '/pages/recharge/recharge'
-						break;
-					case 'mine':
-						url = '/pages/mine/mine'
-						break;
-					case 'subcription':
-						url = '/pages/subscription/index';
-						break;
-					default:
-						break;
-				}
-				if (url) {
-					this.stopAllVideoPlay()
-					// console.log(url);
-					if (id === 'subcription') {
-						uni.reLaunch({
-							url,
-						})
-						return;
-					}
-					uni.navigateTo({
-						url,
-					});
-				}
-
-			}
-		}
-	}
-</script>
-
-<script module="echarts" lang="renderjs">
-	let myChart
-	export default {
-
-		mounted() {
-			console.log(0);
-			console.log(window);
-			console.log(typeof window.echarts);
-			// this.initEcharts();
-			if (typeof window.echarts === 'object') {
-				this.initEcharts()
-			} else if (typeof window.echarts === 'function') {
-				this.initEcharts()
-			} else {
-				console.log(1);
-				// 动态引入较大类库避免影响页面展示
-				const script = document.createElement('script');
-				console.log(2);
-				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
-				script.src = './static/echarts.js';
-				console.log(3);
-				script.onload = this.initEcharts.bind(this);
-				console.log(4);
-				document.head.appendChild(script);
-				console.log(5);
-			}
-		},
-
-		methods: {
-
-			// 接收逻辑层发送的数据
-			receive(newValue, oldValue, ownerVm, vm) {
-				console.log('msg变化了newValue', newValue)
-				console.log('msg变化了oldValue', oldValue)
-				
+			initEcharts() {
+				console.log(31);
+				// let t1=null;
+				this.initChart()
+				console.log(32);
+				myChart = echarts.init(document.getElementById('chart'))
+				console.log(33);
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+				console.log(34);
+				// clearInterval(t1)
+				// t1= setInterval(() => {
+				// 	console.log(1);
+				// 	myChart.setOption(this.option)
+				// }, 1000);
 			},
-			
-			initEcharts() {
-				console.log(31);
-				// let t1=null;
-				this.initChart()
-				console.log(32);
-				myChart = echarts.init(document.getElementById('chart'))
-				console.log(33);
-				// 观测更新的数据在 view 层可以直接访问到
-				myChart.setOption(this.option)
-				console.log(34);
-				// clearInterval(t1)
-				// t1= setInterval(() => {
-				// 	console.log(1);
-				// 	myChart.setOption(this.option)
-				// }, 1000);
-			},
-			updateEcharts(newValue, oldValue, ownerInstance, instance) {
-				// 监听 service 层数据变更
-				myChart.setOption(newValue)
-			},
-			onClick(event, ownerInstance) {
-				// 调用 service 层的方法
-				ownerInstance.callMethod('onViewClick', {
-					test: 'test'
-				})
-			},
-			initChart() {
-				// let myChart = echarts.init(this.$refs.chart);
-				// console.log(document);
-				// console.log(this.$refs.chart);
-				// this.myChart = echarts.init(document.getElementById('chart'));
-				// this.myChart = echarts.init(this.$refs.chart);
-
-				// myChart = echarts.init(document.getElementById('chart'))
-
-				this.option = {
-					title: {
-						text: this.stepsNum,
-						// 副标题
-						subtext: "",
-						// 主副标题间距
-						itemGap: 0,
-						left: 'center',
-						top: 'center',
-						// 主标题样式
-						textStyle: {
-							fontSize: '20',
-							color: '#fff'
-						},
-					},
-					series: [{
-						name: '环形饼图',
-						type: 'pie',
-						radius: ['48%', '70%'],
-						avoidLabelOverlap: false,
-						label: {
-							show: false,
-							position: 'center'
-						},
-						itemStyle: {
-							// 设置扇形的阴影
-							shadowBlur: 30,
-							shadowColor: '#15141F',
-							shadowOffsetX: 'center',
-							shadowOffsetY: 'center'
-
-						},
-						data: [{
-								value: +this.stepsNum / this.stepTarget,
-								name: '步数',
-								itemStyle: {
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-										offset: .2,
-										color: '#47BDFF'
-									}, {
-										offset: .5,
-										color: '#34AEFF'
-									}, {
-										offset: 1,
-										color: '#0589FF'
-									}]),
-									borderRadius: 800,
-
-
-								}
-							},
-							{
-								value: (this.stepTarget - this.stepsNum) / this.stepTarget,
-								name: '剩余步数',
-								itemStyle: {
-									color: '#15141F',
-
-								}
-							}
-						]
-					}]
-				}
-
-				// myChart.setOption(this.option, true);
-
-				// window.addEventListener('resize', () => {
-				// 	myChart.resize();
-				// });
-			}
-		},
-		watch: {
-			// 如果 `question` 发生改变，这个函数就会运行
-			columData: function(newQuestion, oldQuestion) {
-
-				// this.updateEcharts(this.option)
-			}
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	.main {
-		padding-bottom: 198rpx; // 避免底部TabBar盖住内容
-
-		.nav-head {
-			position: fixed;
-			top: 0rpx;
-			height: 112rpx;
-			font-size: 36rpx;
-			color: #fff;
-			padding-top: 88rpx;
-			width: 100%;
-			background-color: #15141F;
-			z-index: 8;
-			border-bottom: 4rpx solid #323045;
-
-
-			.serviceButton {
-				display: inline-block;
-				width: 286rpx;
-				height: 70rpx;
-				line-height: 70rpx;
-				border-radius: 90rpx;
-				font-size: 28rpx;
-				color: #F2FE8D !important;
-				padding: 0;
-				margin: 20rpx 180rpx 0 48rpx;
-				vertical-align: top;
-			}
-
-			.languageBtn {
-				display: inline-block;
-				box-sizing: border-box;
-				width: 180rpx;
-				position: relative;
-				margin: 38rpx 48rpx 0 0;
-				font-size: 24rpx;
-				height: 36rpx;
-				line-height: 36rpx;
-				text-align: center;
-				padding-left: 12rpx;
-
-				&::before {
-					display: block;
-					position: absolute;
-					content: '';
-					background-image: url(../../static/home/map.png);
-					background-repeat: no-repeat;
-					background-size: 36rpx;
-					width: 36rpx;
-					height: 36rpx;
-					top: 0rpx;
-					left: 0rpx;
-				}
-
-				&::after {
-					display: block;
-					position: absolute;
-					content: '';
-					background-image: url(../../static/home/pull-down.png);
-					background-repeat: no-repeat;
-					background-size: 24rpx;
-					width: 24rpx;
-					height: 24rpx;
-					top: 12rpx;
-					right: 0rpx;
-				}
-
-			}
-		}
-
-
-
-		.swiper {
-			margin-top: 236rpx;
-		}
-
-		.message {
-			position: relative;
-			margin: 24rpx 24rpx 32rpx;
-			height: 96rpx;
-			background: #211F32;
-			border-radius: 16rpx;
-
-			.icon {
-				position: absolute;
-				top: 18rpx;
-				left: 20rpx;
-			}
-
-			.text {
-				position: absolute;
-				top: 18rpx;
-				left: 92rpx;
-				height: 68rpx;
-				line-height: 32rpx;
-				width: 574rpx;
-				font-size: 24rpx;
-				// 超出字符省略成...
-				overflow: hidden;
-				text-overflow: ellipsis;
-				word-wrap: break-word;
-				display: -webkit-box; //兼容
-				white-space: normal !important;
-				-webkit-line-clamp: 2; //显示行数
-				-webkit-box-orient: vertical;
-			}
-		}
-
-		.btnDiv {
-			margin: 32rpx 48rpx;
-
-			.item {
-				display: inline-block;
-				width: 218rpx;
-				text-align: center;
-
-				.img {
-					margin: 0 36rpx 16rpx;
-				}
-			}
-		}
-
-		.steps {
-			margin: 0 32rpx;
-			width: 686rpx;
-			height: 472rpx;
-			background-color: #211F32;
-			background-image: url(../../static/home/img_People.png);
-			background-repeat: no-repeat;
-			background-size: contain;
-			border-radius: 16px;
-
-			.content {
-				margin-left: 246rpx;
-				height: 100%;
-				display: flex;
-				justify-content: space-evenly;
-				align-items: center;
-
-				flex-direction: column;
-
-				.title {
-					font-size: 48rpx;
-					height: 64rpx;
-					line-height: 64rpx;
-				}
-
-				.chart {
-					width: 180rpx;
-					height: 180rpx;
-				}
-
-				.button {
-					width: 386rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					border-radius: 40rpx;
-					font-size: 24rpx;
-					color: #15141F !important;
-					padding: 0;
-					margin-right: 24rpx;
-				}
-			}
-		}
-
-		.videoList {
-
-			.videoImage {
-				margin: 32rpx 32rpx 0;
-				width: 686rpx;
-				height: 360rpx;
-				border-radius: 32rpx;
-
-				.VideoBg {
-					box-sizing: border-box;
-					padding-top: 96rpx;
-					width: 100%;
-					height: 100%;
-					background-color: rgba(0, 0, 0, 0.6) !important;
-
-					.VideoLogo {
-						width: 96rpx;
-						height: 96rpx;
-						margin: 0 auto;
-						background-image: url(../../static/home/ic_play.png);
-						background-repeat: no-repeat;
-						background-size: 96rpx;
-					}
-
-					.VideoTitle {
-						font-size: 48rpx;
-						text-align: center;
-					}
-				}
-			}
-		}
-
-		.video {
-			// position: fixed;
-			top: 0;
-			z-index: 9;
-		}
-
-
-		.popup {
-
-			.content {
-				padding: 60rpx 48rpx;
-
-				&::before {
-					display: block;
-					position: absolute;
-					content: '';
-					background-image: url(../../static/home/img_Speaker.png);
-					background-repeat: no-repeat;
-					background-size: contain;
-					width: 112rpx;
-					height: 112rpx;
-					top: -32rpx;
-					left: -16rpx;
-				}
-
-				.button {
-					width: 386rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					border-radius: 40rpx;
-					font-size: 24rpx;
-					color: #15141F !important;
-					padding: 0;
-					margin: 20rpx auto 0;
-				}
-			}
-
-
-
-		}
-
-	}
-</style>
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			},
+			initChart() {
+			// let myChart = echarts.init(this.$refs.chart);
+			// console.log(document);
+			// console.log(this.$refs.chart);
+			// this.myChart = echarts.init(document.getElementById('chart'));
+			// this.myChart = echarts.init(this.$refs.chart);
+			// myChart = echarts.init(document.getElementById('chart'))
+			this.option = {
+				title: {
+					text: this.stepsNum,
+					// 副标题
+					subtext: "",
+					// 主副标题间距
+					itemGap: 0,
+					left: 'center',
+					top: 'center',
+					// 主标题样式
+					textStyle: {
+						fontSize: '20',
+						color: '#fff'
+					},
+				},
+				series: [{
+					name: '环形饼图',
+					type: 'pie',
+					radius: ['48%', '70%'],
+					avoidLabelOverlap: false,
+					label: {
+						show: false,
+						position: 'center'
+					},
+					itemStyle: {
+						// 设置扇形的阴影
+						shadowBlur: 30,
+						shadowColor: '#15141F',
+						shadowOffsetX: 'center',
+						shadowOffsetY: 'center'
+
+					},
+					data: [{
+						value: +this.stepsNum / this.stepTarget
+						,
+						name: '步数',
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: .2,
+								color: '#47BDFF'
+							}, {
+								offset: .5,
+								color: '#34AEFF'
+							}, {
+								offset: 1,
+								color: '#0589FF'
+							}
+							]),
+							borderRadius: 800,
+
+
+						}
+					},
+					{
+						value: (this.stepTarget - this.stepsNum) / this.stepTarget,
+						name: '剩余步数',
+						itemStyle: {
+							color: '#15141F',
+
+						}
+					}
+					]
+				}]
+			}
+
+			// myChart.setOption(this.option, true);
+			// window.addEventListener('resize', () => {
+			// 	myChart.resize();
+			// });
+		}
+		},
+		watch: {
+			// 如果 `question` 发生改变，这个函数就会运行
+			columData: function(newQuestion, oldQuestion) {
+
+				// this.updateEcharts(this.option)
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.main {
+	padding-bottom: 198rpx; // 避免底部TabBar盖住内容
+	.nav-head {
+		position: fixed;
+		top: 0rpx;
+		height: 112rpx;
+		font-size: 36rpx;
+		color: #fff;
+		padding-top: 88rpx;
+		width: 100%;
+		background-color: #15141F;
+		z-index: 8;
+		border-bottom: 4rpx solid #323045;
+
+
+		.serviceButton {
+			display: inline-block;
+			width: 286rpx;
+			height: 70rpx;
+			line-height: 70rpx;
+			border-radius: 90rpx;
+			font-size: 28rpx;
+			color: #F2FE8D !important;
+			padding: 0;
+			margin: 20rpx 180rpx 0 48rpx;
+			vertical-align: top;
+		}
+
+		.languageBtn {
+			display: inline-block;
+			box-sizing: border-box;
+			width: 180rpx;
+			position: relative;
+			margin: 38rpx 48rpx 0 0;
+			font-size: 24rpx;
+			height: 36rpx;
+			line-height: 36rpx;
+			text-align: center;
+			padding-left: 12rpx;
+
+			&::before {
+				display: block;
+				position: absolute;
+				content: '';
+				background-image: url(../../static/home/map.png);
+				background-repeat: no-repeat;
+				background-size: 36rpx;
+				width: 36rpx;
+				height: 36rpx;
+				top: 0rpx;
+				left: 0rpx;
+			}
+
+			&::after {
+				display: block;
+				position: absolute;
+				content: '';
+				background-image: url(../../static/home/pull-down.png);
+				background-repeat: no-repeat;
+				background-size: 24rpx;
+				width: 24rpx;
+				height: 24rpx;
+				top: 12rpx;
+				right: 0rpx;
+			}
+
+		}
+	}
+
+
+
+	.swiper {
+		margin-top: 236rpx;
+	}
+
+	.message {
+		position: relative;
+		margin: 24rpx 24rpx 32rpx;
+		height: 96rpx;
+		background: #211F32;
+		border-radius: 16rpx;
+		overflow: hidden;
+
+		.icon {
+			position: absolute;
+			top: 18rpx;
+			left: 20rpx;
+		}
+
+		.notice{
+			width: 574rpx;
+			margin-left: 80rpx;
+			margin-top: 10rpx;
+		}
+
+		.text {
+			position: absolute;
+			top: 18rpx;
+			left: 92rpx;
+			height: 68rpx;
+			line-height: 32rpx;
+			width: 574rpx;
+			font-size: 24rpx;
+			// 超出字符省略成...
+			overflow: hidden;
+			text-overflow: ellipsis;
+			word-wrap: break-word;
+			display: -webkit-box; //兼容
+			white-space: normal !important;
+			-webkit-line-clamp: 2; //显示行数
+			-webkit-box-orient: vertical;
+		}
+	}
+
+	.btnDiv {
+		margin: 32rpx 48rpx;
+
+		.item {
+			display: inline-block;
+			width: 218rpx;
+			text-align: center;
+
+			.img {
+				margin: 0 36rpx 16rpx;
+			}
+		}
+	}
+
+	.steps {
+		margin: 0 32rpx;
+		width: 686rpx;
+		height: 472rpx;
+		background-color: #211F32;
+		background-image: url(../../static/home/img_People.png);
+		background-repeat: no-repeat;
+		background-size: contain;
+		border-radius: 16px;
+
+		.content {
+			margin-left: 246rpx;
+			height: 100%;
+			display: flex;
+			justify-content: space-evenly;
+			align-items: center;
+
+			flex-direction: column;
+
+			.title {
+				font-size: 48rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+			}
+
+			.chart {
+				width: 180rpx;
+				height: 180rpx;
+			}
+
+			.button {
+				width: 386rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 40rpx;
+				font-size: 24rpx;
+				color: #15141F !important;
+				padding: 0;
+				margin-right: 24rpx;
+			}
+		}
+	}
+
+	.videoList {
+
+		.videoImage {
+			margin: 32rpx 32rpx 0;
+			width: 686rpx;
+			height: 360rpx;
+			border-radius: 32rpx;
+
+			.VideoBg {
+				box-sizing: border-box;
+				padding-top: 96rpx;
+				width: 100%;
+				height: 100%;
+				background-color: rgba(0, 0, 0, 0.6) !important;
+
+				.VideoLogo {
+					width: 96rpx;
+					height: 96rpx;
+					margin: 0 auto;
+					background-image: url(../../static/home/ic_play.png);
+					background-repeat: no-repeat;
+					background-size: 96rpx;
+				}
+
+				.VideoTitle {
+					font-size: 48rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+
+	.video {
+		// position: fixed;
+		top: 0;
+		z-index: 9;
+	}
+
+
+	.popup {
+
+		.content {
+			padding: 60rpx 48rpx;
+
+			&::before {
+				display: block;
+				position: absolute;
+				content: '';
+				background-image: url(../../static/home/img_Speaker.png);
+				background-repeat: no-repeat;
+				background-size: contain;
+				width: 112rpx;
+				height: 112rpx;
+				top: -32rpx;
+				left: -16rpx;
+			}
+
+			.button {
+				width: 386rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 40rpx;
+				font-size: 24rpx;
+				color: #15141F !important;
+				padding: 0;
+				margin: 20rpx auto 0;
+			}
+		}
+
+
+
+	}
+
+}
+</style>
\ No newline at end of file
diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
new file mode 100644
index 0000000..3949589
--- /dev/null
+++ b/pages/markets/kLine.vue
@@ -0,0 +1,300 @@
+<template>
+    <view class="main">
+        <!-- nav -->
+        <navigation>{{ 'BTC/USDT' }}</navigation>
+        <!-- 价格百分比 -->
+        <view class="header">
+            <view class="top">
+                <!-- 实时价格 -->
+                <text class="price">34985.93</text>
+                <!-- 百分比,根据数据正负判断颜色 -->
+                <text class="percent" :class="{ rise: false }">-15.30%</text>
+            </view>
+            <view class="bottom">
+                <view class="left">
+                    <view class="title">{{ i18n.Highest }}</view>
+                    <view class="value">45930.24</view>
+                </view>
+                <view class="center">
+                    <view class="title">{{ i18n.Lowest }}</view>
+                    <view class="value">45930.24</view>
+                </view>
+                <view class="right">
+                    <view class="title">{{ i18n.Amount }}</view>
+                    <view class="value">28394893.30943094</view>
+                </view>
+            </view>
+        </view>
+        <!-- K线图 -->
+        <view class="kline">
+        </view>
+        <!-- 买卖挂牌表 -->
+        <view class="MarketTrades">
+            <view class="headTitle">Market trades</view>
+            <view class="table">
+                <view class="box">
+                    <view class="title">
+                        <view class="quantity">{{ i18n.Quantity }}</view>
+                        <view class="price">{{ i18n.BuyingPrice }}</view>
+                    </view>
+                    <view class="list">
+                        <view class="item" v-for="(item, index) in buyList" :key="index">
+                            <text class="price">0.87897874</text>
+                            <text class="num buy">{{ item }}</text>
+                            <view class="buybg" :style="`width: ${20 * index}%;`"></view>
+                        </view>
+                    </view>
+                </view>
+                <view class="box">
+                    <view class="title">
+                        <view class="quantity">{{ i18n.Quantity }}</view>
+                        <view class="price">{{ i18n.SellPrice20 }}</view>
+                    </view>
+                    <view class="list">
+                        <view class="item" v-for="(item, index) in sellList" :key="index">
+                            <text class="price">0.87897874</text>
+                            <text class="num sell">{{ item }}</text>
+                            <view class="sellbg" :style="`width: ${20 * index}%;`"></view>
+                        </view>
+                    </view>
+
+                </view>
+            </view>
+        </view>
+
+        <view class="btn">
+            <!-- open按钮 -->
+            <u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
+                {{ i18n.open }}
+            </u-button>
+            <!-- close按钮 -->
+            <u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
+                {{ i18n.close }}
+            </u-button>
+        </view>
+
+    </view>
+</template>
+
+<script>
+export default {
+    name: "trade",
+    data() {
+        return {
+            buyList: 7,
+            sellList: 9,
+
+        };
+    },
+    computed: {
+        i18n() {
+            return this.$t("markets");
+        },
+    },
+    onLoad() {
+
+    },
+    onShow() { },
+    methods: {
+        depthChange(e) {
+            console.log(e);
+        },
+        goto(page) {
+            let url = '';
+            switch (page) {
+                case 'kLine':
+                    url = '/pages/markets/kLine'
+                    break;
+                default:
+                    break;
+            }
+            uni.navigateTo({
+                url,
+            });
+        }
+
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+
+    .header {
+        background: #000000;
+        margin-top: 200rpx;
+        padding: 0 32rpx;
+
+
+        .top {
+            height: 80rpx;
+            border-bottom: 2rpx solid #A1A0A8;
+
+            .price {
+                line-height: 80rpx;
+                font-size: 40rpx;
+            }
+
+            .percent {
+                vertical-align: text-top;
+                margin-left: 20rpx;
+                padding: 8rpx 20rpx;
+                border-radius: 8rpx;
+                font-size: 24rpx;
+                background-color: rgba($color: #F26666, $alpha: 0.2);
+                color: #F26666;
+
+                &.rise {
+                    color: #00E8A2;
+                    background-color: rgba($color: #00E8A2, $alpha: 0.2);
+                }
+            }
+        }
+
+        .bottom {
+            display: flex;
+            font-size: 24rpx;
+
+            .title {
+                margin-top: 24rpx;
+                line-height: 32rpx;
+            }
+
+            .value {
+                margin: 24rpx 0;
+                color: #A1A0A8;
+            }
+
+            .left {
+                flex: 1;
+                text-align: left;
+            }
+
+            .center {
+                flex: 1;
+                text-align: center;
+            }
+
+            .right {
+                flex: 1;
+                text-align: right;
+            }
+
+        }
+    }
+
+    .MarketTrades {
+        .headTitle {
+            padding-left: 32rpx;
+            font-size: 34rpx;
+            height: 80rpx;
+            line-height: 80rpx;
+        }
+
+        .table {
+            display: flex;
+            font-size: 24rpx;
+
+            .box {
+                flex: 1;
+                overflow: hidden;
+                height: 450rpx;
+
+                .title {
+                    display: flex;
+                    margin-bottom: 16rpx;
+                    color: #A1A0A8;
+
+                    .quantity {
+                        flex: 1;
+                    }
+
+                    .price {
+                        flex: 1;
+                        text-align: center;
+                    }
+                }
+
+                .list {
+                    overflow: hidden;
+
+                    .item {
+                        position: relative;
+                        width: 100%;
+                        height: 50rpx;
+                        line-height: 50rpx;
+                        display: flex;
+
+                        .price {
+                            display: block;
+                            width: 50%;
+                            text-align: left;
+                            z-index: 1;
+
+                        }
+
+                        .num {
+                            display: block;
+                            width: 50%;
+                            text-align: right;
+                            padding-right: 32rpx;
+                            z-index: 1;
+
+                            &.buy {
+                                color: #00E8A2;
+                            }
+
+                            &.sell {
+                                color: #F4506A;
+                            }
+                        }
+
+                        .buybg {
+                            height: 100%;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            z-index: 0;
+                            background: rgba($color: #00E8A2, $alpha: 0.1)
+                        }
+
+                        .sellbg {
+                            height: 100%;
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            z-index: 0;
+                            background: rgba($color: #F4506A, $alpha: 0.1)
+                        }
+
+                    }
+                }
+            }
+
+
+
+
+        }
+    }
+
+    .btn {
+        display: flex;
+        margin: 96rpx 32rpx;
+
+        .button {
+            flex: 1;
+            box-sizing: border-box;
+            height: 96rpx;
+            border-radius: 16rpx;
+            font-weight: 700;
+            font-size: 28rpx;
+            color: #15141F !important;
+
+            &:nth-child(2) {
+                margin-left: 14rpx;
+            }
+        }
+    }
+
+}
+</style>
diff --git a/pages/markets/trade.vue b/pages/markets/trade.vue
index def51a1..b75d23c 100644
--- a/pages/markets/trade.vue
+++ b/pages/markets/trade.vue
@@ -5,26 +5,20 @@
         </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 +35,22 @@ export default {
     },
     onShow() { },
     methods: {
-        
+        depthChange(e) {
+            console.log(e);
+        },
+        goto(page) {
+            let url = '';
+            switch (page) {
+                case 'kLine':
+                    url = '/pages/markets/kLine'
+                    break;
+                default:
+                    break;
+            }
+            uni.navigateTo({
+                url,
+            });
+        }
 
     },
 }
@@ -65,13 +74,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/mineDetails.vue b/pages/mine/mineDetails.vue
index 81d1875..c51a6e9 100644
--- a/pages/mine/mineDetails.vue
+++ b/pages/mine/mineDetails.vue
@@ -63,10 +63,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
-            // console.log(id);
+        goto(page) {
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'mineRecord':
                     url = '/pages/mine/mineRecord'
                     break;
diff --git a/pages/mine/mineRecord.vue b/pages/mine/mineRecord.vue
index b64e975..3ba63f6 100644
--- a/pages/mine/mineRecord.vue
+++ b/pages/mine/mineRecord.vue
@@ -5,17 +5,18 @@
         <!-- 数据为空格显示 -->
         <u-empty :show="dataList.length === 0" marginTop="350rpx" :text="i18n.NoData" textColor="#818197"
             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/recharge.vue b/pages/recharge/recharge.vue
index 9d68f55..b960639 100644
--- a/pages/recharge/recharge.vue
+++ b/pages/recharge/recharge.vue
@@ -137,10 +137,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
-            // console.log(id);
+        goto(page) {
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'rechargeRecord':
                     url = '/pages/recharge/rechargeRecord'
                     break;
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/addAddress.vue b/pages/withdrawal/addAddress.vue
index 69eecb2..ff2b925 100644
--- a/pages/withdrawal/addAddress.vue
+++ b/pages/withdrawal/addAddress.vue
@@ -104,10 +104,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
-            // console.log(id);
+        goto(page) {
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'withdrawalRecord':
                     url = '/pages/withdrawal/withdrawalRecord'
                     break;
diff --git a/pages/withdrawal/withdrawal.vue b/pages/withdrawal/withdrawal.vue
index 8948a02..16ead8e 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>
@@ -193,10 +193,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
-            // console.log(id);
+        goto(page) {
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'withdrawalRecord':
                     url = '/pages/withdrawal/withdrawalRecord'
                     break;
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 0000000..8a29350
Binary files /dev/null and b/static/maskets/add.png differ
diff --git a/static/maskets/ic_ma_arrow_down.png b/static/maskets/ic_ma_arrow_down.png
new file mode 100644
index 0000000..7722716
Binary files /dev/null and b/static/maskets/ic_ma_arrow_down.png differ
diff --git a/static/maskets/sub.png b/static/maskets/sub.png
new file mode 100644
index 0000000..3724c13
Binary files /dev/null and b/static/maskets/sub.png differ
diff --git a/utils/language/en_US.js b/utils/language/en_US.js
index 0bfff28..d5a5503 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,29 @@ 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 ',
+
+		Highest:'24H Highest',
+		Lowest:'24H Lowest',
+		Amount:'24H Amount',
+
+		MarketTrades:'Market Trades',
+		Quantity:'Quantity',
+		BuyingPrice:'Buying Price',
+		SellPrice20:'Sell Price20',
+		open:'Open',
 	},
 
 	// 捐赠页面相关