From 8f9e4fbc244af9e91f69f8b2851f4068abe7e600 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Thu, 05 Jun 2025 15:17:24 +0800
Subject: [PATCH] style
---
src/components/constract/PerpetualContract/orderCom/amountSlider.vue | 22 ++++++++++-
src/components/commonTrade/kline.vue | 8 ++--
src/components/constract/PerpetualContract/createOrder.vue | 34 ++++++++++++++++-
3 files changed, 56 insertions(+), 8 deletions(-)
diff --git a/src/components/commonTrade/kline.vue b/src/components/commonTrade/kline.vue
index 21f6ef7..2c6464c 100644
--- a/src/components/commonTrade/kline.vue
+++ b/src/components/commonTrade/kline.vue
@@ -126,10 +126,10 @@
locale: langStore.language, //https://klinecharts.com/guide/i18n.html
styles: {
grid: {
- show: false,
+ show: true,
// 网格水平线
horizontal: {
- show: false,
+ show: true,
size: 1,
color: "#393939",
style: "solid",
@@ -137,9 +137,9 @@
},
// 网格垂直线
vertical: {
- show: false,
+ show: true,
size: 1,
- color: "#000",
+ color: "#393939",
style: "solid",
dashValue: [2, 2],
},
diff --git a/src/components/constract/PerpetualContract/createOrder.vue b/src/components/constract/PerpetualContract/createOrder.vue
index 093a8a8..a70dba0 100644
--- a/src/components/constract/PerpetualContract/createOrder.vue
+++ b/src/components/constract/PerpetualContract/createOrder.vue
@@ -25,10 +25,23 @@
: 'not-allowed',
}"
>
- <div @click="openLeverDialog">
+ <!-- <div @click="openLeverDialog">
<span> {{ current_lever_rate }}</span
><i class="icon iconfont icon-Mul_triangle lever-icon"></i>
- </div>
+ </div> -->
+ <!-- 替换弹窗为下拉选择 -->
+ <el-select
+ v-model="current_lever_rate_num"
+ @change="changeLeverSelect"
+ >
+ <el-option
+ v-for="item in [25, 50, 100, 200]"
+ :key="item"
+ :value="item"
+ >
+ {{ item }}X
+ </el-option>
+ </el-select>
</div>
</div>
<!-- 限价+市价 -->
@@ -377,6 +390,11 @@
},
},
methods: {
+ changeLeverSelect(e) {
+ const newLever = Number(this.current_lever_rate_num);
+ this.current_lever_rate = `${newLever}.00X`;
+ this.current_lever_rate_num = newLever;
+ },
//获取张数
getAmount(val) {
this.inputAmount = val;
@@ -638,4 +656,16 @@
background: #484d56;
margin-top: 20px;
}
+
+::v-deep .el-select__wrapper {
+ background: #303133;
+ box-shadow: 0 0 0 1px #303133 inset;
+}
+::v-deep .el-select__placeholder {
+ color: #fff !important;
+}
+
+::v-deep .el-select-dropdown__item.is-selected {
+ color: #f7b328 !important;
+}
</style>
diff --git a/src/components/constract/PerpetualContract/orderCom/amountSlider.vue b/src/components/constract/PerpetualContract/orderCom/amountSlider.vue
index 29b0ca4..fdd211e 100644
--- a/src/components/constract/PerpetualContract/orderCom/amountSlider.vue
+++ b/src/components/constract/PerpetualContract/orderCom/amountSlider.vue
@@ -23,6 +23,7 @@
v-model="sliderAmount"
:format-tooltip="(v) => `${v}%`"
:marks="marks"
+ :step="25"
>
</el-slider>
</div>
@@ -90,15 +91,32 @@
0: "0",
25: "25%",
50: "50%",
- 75: "70%",
+ 75: "75%",
100: "100%",
},
+ allowedSteps: [0, 25, 50, 75, 100],
};
},
computed: {
...mapState(useUserStore, ["existToken"]),
},
methods: {
+ onSliderInput(val) {
+ // 只允许滑到指定点
+ const allowed = this.allowedSteps;
+ let closest = allowed[0];
+ let minDiff = Math.abs(val - allowed[0]);
+ for (let i = 1; i < allowed.length; i++) {
+ const diff = Math.abs(val - allowed[i]);
+ if (diff < minDiff) {
+ minDiff = diff;
+ closest = allowed[i];
+ }
+ }
+ if (this.sliderAmount !== closest) {
+ this.sliderAmount = closest;
+ }
+ },
//输入框事件
inputChange(val) {
this.$emit("getAmount", val);
@@ -127,7 +145,7 @@
}
},
emptyValue() {
- this.sliderAmount = undefined;
+ this.sliderAmount = 0;
},
},
};
--
Gitblit v1.9.3