From f8e9af35a267b7b9a2bf605187a11536889a6e38 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Mon, 20 May 2024 11:00:10 +0800
Subject: [PATCH] 修改：绑定银行卡 多语言
---
src/page/trading/buy.vue | 1308 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 1,004 insertions(+), 304 deletions(-)
diff --git a/src/page/trading/buy.vue b/src/page/trading/buy.vue
index 5c80beb..c3cb513 100644
--- a/src/page/trading/buy.vue
+++ b/src/page/trading/buy.vue
@@ -7,11 +7,11 @@
<img src="../../assets/img/zuojiantou.png" alt />
</div>
<div class="right_title">
- <div class="t_t">
- <span>{{ '人民币' }}</span>
+ <div class="t_t" style="white-space: nowrap">
+ <span>{{ name }}({{ gid }})</span>
</div>
<div class="b_t">
- <span>{{ 'CNY' }}</span>
+ <span>{{ spell }}</span>
</div>
</div>
</div>
@@ -19,373 +19,1073 @@
<div class="cot">
<div class="lefts">
<div class="top_new">
- <span>{{ '1.34609' }}</span>
+ <span>{{ nowPrice | _toLocaleString }}</span>
</div>
<div class="bottom_es">
- <span>{{ '买入价' }}</span>
+ <span>{{ $t("hj98") }}</span>
</div>
</div>
<div class="rights">
<div class="ese">
- <div class="mr"
- v-for="(item, index) in tradingArr"
- :key="index"
- @click="handleTradingClick(index)"
- :class="tabsCurrentIndex === index ? 'active' : ''"
- >
- <span>{{ item }}</span>
+ <div class="mc" @click="handleTradingClick(0)" :class="tabsCurrentIndex === 0 ? 'actives' : ''">
+ <span>{{ $t("hj84") }}</span>
+ </div>
+
+ <div class="mr" @click="handleTradingClick(1)" :class="tabsCurrentIndex === 1 ? 'active' : ''">
+ <span>{{ $t("hj85") }}</span>
</div>
</div>
</div>
</div>
</div>
- <div class="price_tabs">
- <div class="tabs">
- <div class="tab_item"
- v-for="(item, index) in priceTabs"
- :key="index"
- @click="handleTabsClick(item, index)"
- :class="priceTabsCurrentIndex === index ? 'active' : ''"
- >
- <span>{{ item }}</span>
- </div>
- </div>
- <div class="tabs_content">
- <div class="num">
- <span>{{ '交易数量(手)' }}</span>
- </div>
- <div class="tr_es">
- <div class="top_input">
- <input type="text" v-model="num">
- </div>
- </div>
- <div class="tr_rs gg">
- <div class="top_bzz">
- <span>{{ '杠杆' }}</span>
- <span>{{ '200X' }}</span>
- </div>
- <div class="bottom_bzz">
- <span>{{ }}</span>
- <span>{{ }}</span>
- </div>
- </div>
- <div class="tr_rs">
- <div class="top_bzz">
- <span>{{ '需付保证金(¥)' }}</span>
- <span>{{ '可用余额(¥)' }}</span>
- </div>
- <div class="bottom_bzz">
- <span>{{ '5.00' }}</span>
- <span>{{ '49,698.61' }}</span>
- </div>
- </div>
+ </div>
+
+ <div class="price_tabs">
+ <div class="tabs">
+ <div class="tab_item" v-for="(item, index) in priceTabs" :key="index" @click="handleTabsClick(item, index)"
+ :class="priceTabsCurrentIndex === index ? 'active' : ''">
+ <span>{{ item }}</span>
</div>
</div>
- <div class="switchs">
- <div class="zy"
- v-for="(item, index) in profitArr"
- :key="index"
- >
- <div class="left_zy">
- <span>{{ item.name }}</span>
+ <div class="tabs_content">
+ <div class="num" v-show="priceTabsCurrentIndex == 1">
+ <span>{{ $t("hj99") }}</span>
+ </div>
+ <div class="tr_es flexJy" v-show="priceTabsCurrentIndex == 1">
+ <div class="top_input">
+ <input type="Number" v-model="nums" />
</div>
- <div class="right_sw">
- <van-switch v-model="item.checked" />
+ <div class="right_sw flexJy" style="width: auto">
+ <div class="addorj" @click="gdJian">
+ <img src="@/assets/img/ic_number_jian.png" alt />
+ </div>
+ <div class="addorj"></div>
+ <div class="addorj" @click="
+ typeof nums == 'string'
+ ? (nums = Number(Number(nums) + 1).toFixed(2))
+ : (nums = (Number(nums) + 1).toFixed(2))
+ ">
+ <img src="@/assets/img/ic_number_add.png" />
+ </div>
</div>
</div>
- </div>
- <div class="btn_buy">
- <div>
- <span>{{ '买入' }}</span>
+ <div class="num">
+ <span>{{ $t("hj100") }}</span>
+ </div>
+ <div class="tr_es flexJy">
+ <div class="top_input">
+ <input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="num" @input="numInput" />
+ </div>
+ <div class="right_sw flexJy" style="width: auto">
+ <div class="addorj" @click="jyslJian">
+ <img src="@/assets/img/ic_number_jian.png" />
+ </div>
+ <div class="addorj"></div>
+ <div class="addorj" @click="jjjisua">
+ <img src="@/assets/img/ic_number_add.png" />
+ </div>
+ </div>
+ </div>
+ <!-- <div class="tr_rs gg" @click="showGg = true">
+ <div class="top_bzz">
+ <span>{{ $t("hj101") }}</span>
+ <span>{{ selectCycle }}</span>
+ </div>
+ </div> -->
+ <div class="tr_rs">
+ <div class="top_bzz" style="padding-bottom: 0.2rem">
+ <span style="text-align: left">
+ {{ $t("交易总额") }}({{ moneyData.symbol || "$" }})
+ </span>
+ <span style="text-align: right">
+ {{ $t("hj103") }}({{ moneyData.symbol || "$" }})
+ </span>
+ </div>
+
+ <div class="bottom_bzz">
+ <span>
+ {{
+ ((nowPrice * selectCycle.replace("X", "")) * num)
+ | _toLocaleString
+ }}
+ </span>
+ <span style="white-space: nowarp">
+ {{ moneyData.availableBalance | _toLocaleString }}
+ </span>
+ </div>
</div>
</div>
</div>
+ <!-- <div class="switchs">
+ <div class="zy">
+ <div class="left_zy">
+ <span>{{ $t("hj104") }}</span>
+ </div>
+ <div class="right_sw">
+ <van-switch v-model="checkedZy" />
+ </div>
+ </div>
+ <div class="zy" v-show="checkedZy">
+ <div class="left_zy">
+ <input v-model="profitTarget" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+ @input="zyInt" />
+ </div>
+ <div class="right_sw" style="width: auto">
+ <div class="addorj" @click="zYjian">
+ <img src="@/assets/img/ic_number_jian.png" />
+ </div>
+ <div class="addorj"></div>
+ <div class="addorj"
+ @click="tabsCurrentIndex==0?profitTarget = (Number(profitTarget) + 1).toFixed(2):profitTarget = (Number(profitTarget) + 1).toFixed(2)">
+ <img src="@/assets/img/ic_number_add.png" />
+ </div>
+ </div>
+ </div>
+ <div class="zy">
+ <div class="left_zy">
+ <span>{{ $t("hj105") }}</span>
+ </div>
+ <div class="right_sw">
+ <van-switch v-model="checkedZs" />
+ </div>
+ </div>
+ <div class="zy" v-show="checkedZs">
+ <div class="left_zy">
+ <input v-model="zhisun" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" @input="zsInt" />
+ </div>
+ <div class="right_sw" style="width: auto">
+ <div class="addorj"
+ @click="zSjian">
+ <img src="@/assets/img/ic_number_jian.png" />
+ </div>
+ <div class="addorj"></div>
+ <div class="addorj" @click="zSjia">
+ <img src="@/assets/img/ic_number_add.png" />
+ </div>
+ </div>
+ </div>
+ </div> -->
+ <div class="btn_buy" @click="gdOrSetBuy()">
+ <div :class="tabsCurrentIndex == 0 ? 'maichu' : ''">
+ <span>{{ tabsCurrentIndex == 0 ? $t("hj84") : $t("hj85") }}</span>
+ </div>
+ </div>
</div>
+ <van-action-sheet v-model="showGg" :actions="siteLeverList" :cancel-text="$t('hj106')" :description="$t('hj107')"
+ close-on-click-action @select="onSelect" />
</div>
</template>
<script>
-export default {
- name: 'trBuy',
- data() {
- return {
- tradingArr: ['卖出', '买入'],
- tabsCurrentIndex: 0,
- priceTabs: ['市单价', '挂单'],
- priceTabsCurrentIndex: 0,
- num: 0.01,
- profit: false,
- profitArr: [
- {
- name: '止盈',
- checked: false
- },
- {
- name: '止损',
- checked: false
- },
- {
- name: '追踪止损',
- checked: false
+ import * as api from "@/axios/api";
+ import {
+ mapActions
+ } from "vuex";
+
+ export default {
+ name: "trBuy",
+ created() {
+ if (this.$route.query.t) {
+ this.tabsCurrentIndex = Number(this.$route.query.t);
+ console.log(this.tabsCurrentIndex);
+ }
+ if (this.$route.query.m) {
+ this.nowPrice = Number(this.$route.query.m);
+ this.profitTarget = Number(this.$route.query.m);
+ this.zhisun = Number(this.$route.query.m);
+ this.nums = Number(this.$route.query.m);
+ }
+ if (this.$route.query.id) {
+ this.id = this.$route.query.id;
+ }
+ if (this.$route.query.code) {
+ this.code = this.$route.query.code;
+ }
+ if (this.$route.query.name) {
+ this.name = this.$route.query.name;
+ }
+ if (this.$route.query.spell) {
+ this.spell = this.$route.query.spell;
+ }
+ if (this.$route.query.type) {
+ this.type = this.$route.query.type;
+ }
+ if (this.$route.query.if_us) {
+ this.if_us = this.$route.query.if_us;
+ }
+ },
+ data() {
+ return {
+ tradingArr: [this.$t("hj84"), this.$t("hj85")],
+ tabsCurrentIndex: 0,
+ // priceTabs: [this.$t("hj108"), this.$t("hj109")],
+ priceTabs: [this.$t("hj108")],
+ priceTabsCurrentIndex: 0,
+ num: 1,
+ nums: 1,
+ profit: false,
+ nowPrice: 0,
+ type: 0,
+ code: "",
+ name: "",
+ spell: "",
+ settingInfo: [],
+ selectCycle: "1X",
+ selectLever: 1,
+ siteLeverList: [],
+ checkedZy: false,
+ checkedZs: false,
+ buying: false,
+ zhisun: 0,
+ showGg: false,
+ profitTarget: 0,
+ if_us: 0,
+ bayType: "",
+ id: "",
+ actions: [{
+ name: "100X",
+ subname: this.$t("hj102")
+ },
+ {
+ name: "200X",
+ subname: this.$t("hj102")
+ },
+ {
+ name: "300X",
+ subname: this.$t("hj102")
+ },
+ ],
+ profitArr: [{
+ name: this.$t("hj104"),
+ checked: false,
+ },
+ {
+ name: this.$t("hj105"),
+ checked: false,
+ },
+ {
+ name: this.$t("hj110"),
+ checked: false,
+ },
+ ],
+ moneyData: {},
+ gid: "",
+ };
+ },
+
+ mounted() {
+ this.bayType = this.$route.query.bayType;
+ this.gid = this.$route.query.gid;
+ if (this.bayType == "in") {
+ this.priceTabs = [this.$t("hj108"), this.$t("hj109")];
+ } else if (this.bayType == "qh") {
+ this.priceTabs = [this.$t("hj108")];
+ }
+ this.setUseInfo();
+ this.getMoneyData();
+ this.getSettingInfo();
+ },
+ watch: {
+ checkedZy(val) {
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
}
- ]
- }
- },
- methods: {
- handleBack() {
- this.$router.go(-1);
+ },
+ checkedZs(val) {
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
+ }
+ },
},
- handleTradingClick(index) {
- this.tabsCurrentIndex = index;
+ methods: {
+ zSjian(){
+ var newzishu = (Number(this.zhisun)-1).toFixed(2)
+ if(Number(newzishu)<1){
+
+ }else{
+ this.zhisun = newzishu
+ }
+ },
+ ...mapActions(["setUseInfo"]),
+ numInput(e) {
+ // this.nowPrice / this.selectCycle.replace("X", "")
+ // this.moneyData.availableBalance
+ let numbs = Math.floor(
+ this.moneyData.availableBalance /
+ this.nowPrice /
+ this.selectCycle.replace("X", "")
+ );
+ if (e.target.value >= numbs) {
+ this.num = numbs;
+ }
+ // if()
+ console.log(e.target.value);
+ },
+ handleDoubleClick(event) {
+ console.log(1);
+ // console.log('Input field was double-clicked', event);
+ },
+ async getMoneyData() {
+ let data = await api.getMoney();
+ let type = this.bayType === "SZHB" ? "US" : this.bayType;
+ if (data.status === 0) {
+ const newArr = data.data.filter((item) => item.accectType === type);
+
+ this.moneyData = newArr[0] || {};
+ // console.log(this.bayType, newArr);
+ // 判断是否登录
+ // this.moneyList = data.data;
+ }
+ },
+ handleBack() {
+ this.$router.go(-1);
+ },
+ handleTradingClick(index) {
+ this.tabsCurrentIndex = index;
+ },
+ handleTabsClick(item, index) {
+ this.priceTabsCurrentIndex = index;
+ },
+ jjjisua() {
+ let numbs = Math.floor(
+ this.moneyData.availableBalance /
+ this.nowPrice /
+ this.selectCycle.replace("X", "")
+ );
+ typeof this.num == "string" ?
+ (this.num = Number(Number(this.num) + 1)) :
+ (this.num = Number(Number(this.num) + 1));
+
+ console.log(this.num, numbs);
+ if (this.num >= numbs) {
+ this.num = numbs;
+ }
+ },
+ jyslJian() {
+ if (typeof this.num === "string") {
+ this.num = 1;
+ } else {
+ if (this.num > 1) {
+ if (typeof this.num === "string") {
+ this.num = Number(this.num - 1);
+ } else {
+ this.num = Number(this.num - 1);
+ }
+ } else {
+ this.num = 1;
+ }
+ }
+ },
+ gdJian() {
+ if (this.nums > 1) {
+ if (typeof this.nums === "string") {
+ this.nums = Number(Number(this.nums) - 1).toFixed(2);
+ } else {
+ this.nums = Number(Number(this.nums) - 1).toFixed(2);
+ }
+ } else {
+ this.nums = this.nowPrice;
+ }
+ },
+ zYjian() {
+ var newzishu = (Number(this.profitTarget)-1).toFixed(2)
+ if(Number(newzishu)<1){
+
+ }else{
+ this.profitTarget = newzishu
+ }
+ // this.profitTarget = (Number(this.profitTarget) - 1).toFixed(2);
+ // if(this.tabsCurrentIndex==0){
+ // console.log( this.nowPrice);
+ // if ((Number(this.profitTarget) - 1).toFixed(2) < this.nowPrice) {
+ // this.profitTarget = (Number(this.profitTarget) - 1).toFixed(2);
+ // } else {
+ // this.profitTarget = this.nowPrice;
+ // }
+ // }else{
+ // console.log(123);
+ // if ((Number(this.profitTarget) - 1).toFixed(2) < this.nowPrice) {
+ // this.profitTarget = this.nowPrice;
+ // } else {
+ // this.profitTarget = (Number(this.profitTarget) - 1).toFixed(2);
+ // }
+ // }
+
+
+ },
+ zSjia() {
+ this.zhisun++;
+ // if ((Number(this.zhisun) + 1).toFixed(2) > this.nowPrice) {
+ // this.zhisun = this.nowPrice;
+ // } else {
+ // this.zhisun++;
+ // }
+ },
+ zsInt(e) {
+ if (typeof e.target.value === "string") {
+ this.zhisun = this.nowPrice;
+ } else {
+ if (Number(e.target.value) > this.nowPrice) {
+ this.zhisun = this.nowPrice;
+ }
+ }
+ },
+ zyInt(e) {
+ if (typeof e.target.value === "string") {
+ this.profitTarget = this.nowPrice;
+ } else {
+ if (Number(e.target.value) < Number(this.nowPrice)) {
+ this.profitTarget = Number(this.nowPrice);
+ }
+ }
+ },
+ onSelect(val) {
+ this.selectCycle = val.name;
+ this.selectLever = val.label;
+ },
+ gdOrSetBuy() {
+ if (this.priceTabsCurrentIndex == 0) {
+
+ this.setBuy();
+ } else {
+
+ this.gdBuy();
+ }
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
+ }
+ },
+ // 挂单
+ async gdBuy() {
+ if (this.buying) {
+ return;
+ }
+ this.buying = true;
+ let opts = {
+ stockId: this.code,
+ buyNum: this.num,
+ lever: this.selectLever,
+ targetPrice: this.nums,
+ };
+ console.log(this.selectLever, "this.selectLever ");
+
+ if (this.tabsCurrentIndex == 0) {
+ opts.buyType = 1;
+ } else {
+ opts.buyType = 0;
+ }
+ if (this.checkedZy) {
+ // opts.profitTarget = this.profitTarget.substring(0,this.profitTarget.indexOf(".")+3)
+ opts.profitTarget = this.profitTarget;
+ }
+ if (this.checkedZs) {
+ opts.stopTarget = this.zhisun;
+ }
+ let data = await api.guadan(opts);
+ this.buying = false;
+ if (data.status === 0) {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ elAlertType: "success",
+ });
+ this.getUserInfo();
+ this.$router.push("/warehouse?index=1&buyType=" + this.bayType);
+ } else {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ });
+ }
+ },
+ // 买卖
+ setBuy() {
+ if (this.$store.state.userInfo.isActive !== 2) {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: this.$t("hj111"),
+ });
+ this.$router.push("/authentications");
+ return;
+ }
+
+ if (this.buying) {
+ return;
+ }
+ this.buying = true;
+ let opts = {};
+ opts = {
+ // stockId: this.detail.id,
+ // buyNum: this.selectNumber ? this.selectNumber * 100 : 0, // 单位为手
+ // buyType: this.selectType,
+ // lever: this.selectCycle ? this.selectCycle : 0,
+ // subaccountNumber:this.subaccountNumber
+
+ // 买入是买涨buyType:0, 卖出是买跌buyType:1,卖出的状态是0，买入的状态是1
+ buyNum: this.num, // 单位为手
+ // buyNum: (this.num.match(/\d+/g))[0] * 100, // 单位为手
+ lever: this.selectLever,
+ };
+ console.log(this.selectLever, "this.selectLever ");
+ if (this.tabsCurrentIndex == 0) {
+ opts.buyType = 1;
+ } else {
+ opts.buyType = 0;
+ }
+ if (this.checkedZy) {
+ // opts.profitTarget = this.profitTarget.substring(0,this.profitTarget.indexOf(".")+3)
+ opts.profitTarget = this.profitTarget;
+ }
+ if (this.checkedZs) {
+ opts.stopLoss = this.zhisun;
+ }
+ if (this.type == 0) {
+ // 股票
+ this.gpBuy(opts);
+ // opts.stockId= this.code,
+ // data = await api.buy(opts)
+ } else {
+ // 指数
+ this.zsBuy(opts);
+ // opts.indexId= this.code,
+ // data = await api.indexBuy(opts)
+ }
+ },
+ // 股票买入
+ async gpBuy(opts) {
+ opts.stockId = this.id;
+ let data = await api.buy(opts);
+ this.buying = false;
+ if (data.status === 0) {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ elAlertType: "success",
+ });
+ this.getUserInfo();
+ var buyType = "";
+ if (this.tabsCurrentIndex == 0) {
+ buyType = 1;
+ } else {
+ buyType = 0;
+ }
+ this.$router.push("/warehouse?index=1&buyType=" + this.bayType);
+ } else {
+ if (data.msg.indexOf("不在交易时段内") > -1) {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: this.$t("hj113"),
+ });
+ } else {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ });
+ }
+ }
+ },
+ // 指数买入
+ async zsBuy(opts) {
+ opts.indexId = this.id;
+ let data = await api.indexBuy(opts);
+ this.buying = false;
+ if (data.status === 0) {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ elAlertType: "success",
+ });
+ this.getUserInfo();
+ this.$router.push("/warehouse?index=1&buyType=" + this.bayType);
+ } else {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ });
+ }
+ },
+ async getUserInfo() {
+ // 获取用户信息
+ // let showcookie = this.getCookie('USER_TOKEN');
+ let data = await api.getUserInfo();
+ if (data.status === 0) {
+ // this.getProductSetting()
+ this.$store.state.userInfo = data.data;
+ } else {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ });
+ }
+ this.$store.state.user = this.user;
+ },
+ async getSettingInfo() {
+ // 网站设置信息
+ let data = await api.getSetting();
+ if (data.status === 0) {
+ // 成功
+ this.settingInfo = data.data;
+ // 杠杆倍数
+ // data.data.siteLever根据/分割成数组
+ // this.siteLeverList = data.data.siteLever.split('/')
+
+ if (
+ this.$store.state.userInfo !== undefined &&
+ this.$store.state.userInfo !== null &&
+ this.$store.state.userInfo.siteLever != null
+ ) {
+ this.selectCycle =
+ this.$store.state.userInfo.siteLever.split("/")[0] + "X";
+
+ this.siteLeverList = [];
+ for (
+ let i = 0; i < this.$store.state.userInfo.siteLever.split("/").length; i++
+ ) {
+ let val = this.$store.state.userInfo.siteLever.split("/")[i];
+ let item = {
+ label: val,
+ name: val + "X"
+ };
+ this.siteLeverList.push(item);
+ }
+ console.log(this.siteLeverList, " this.selectCycle");
+ }
+ } else {
+ this.$store.commit("elAlertShow", {
+ elAlertShow: true,
+ elAlertText: data.msg,
+ });
+ }
+ },
},
- handleTabsClick(item, index) {
- this.priceTabsCurrentIndex = index;
- }
- }
-};
+ filters: {
+ getName(name) {
+ if (name.length > 15) {
+ return name;
+ } else {
+ return name;
+ }
+ },
+ },
+ };
</script>
<style scoped lang="less">
-.buy_page {
- width: 100%;
- height: calc(100% - 1.7rem);
- > .content {
+ .buy_page {
width: 100%;
- height: 100%;
- position: relative;
- }
-}
-.top_cny {
- width: 100%;
- height: 3.5385rem;
- .top_back {
- width: 100%;
- height: 1.2rem;
- display: flex;
- align-items: center;
- padding: 0 .1rem;
- .left_back {
- width: 0.8rem;
- height: 80%;
- display: flex;
- align-items: center;
- > img {
- margin-top: 0.2rem;
- width: 0.6rem;
- height: 0.6rem;
- }
- }
- .right_title {
- width: 3rem;
- height: 80%;
- .t_t {
- width: 100%;
- height: 70%;
- display: flex;
- align-items: center;
- font-size: 0.4615rem;
- span {
- font-weight: 600;
- }
- }
- .b_t {
- width: 100%;
- height: 30%;
- font-size: 0.3615rem;
- display: flex;
- align-items: flex-start;
- color: #8c8c8c;
- }
+ min-height: 100vh;
+ background-color: #fff;
+
+ >.content {
+ width: 100%;
+ height: calc(100% - 1.6rem);
+ position: relative;
+ background-color: rgb(241, 242, 246);
}
}
- .bottom_buy_price {
+
+ .top_cny {
width: 100%;
- height: 2rem;
- display: flex;
- align-items: center;
- padding: 0 .8rem;
- margin-top: .3rem;
- .cot {
+ height: 3.5385rem;
+
+ .top_back {
width: 100%;
height: 1.2rem;
display: flex;
- .lefts {
- width: 40%;
- height: 100%;
- .top_new {
+ align-items: center;
+ padding: 0 0.1rem;
+
+ .left_back {
+ width: 0.8rem;
+ height: 80%;
+ display: flex;
+ align-items: center;
+
+ >img {
+ margin-top: 0.2rem;
+ width: 0.6rem;
+ height: 0.6rem;
+ }
+ }
+
+ .right_title {
+ width: 3rem;
+ height: 80%;
+
+ .t_t {
width: 100%;
- height: 60%;
- font-size: .5615rem;
- color: rgb(232,55,70);
+ height: 70%;
+ display: flex;
+ align-items: center;
+ font-size: 0.4615rem;
+
span {
font-weight: 600;
}
}
- .bottom_es {
+
+ .b_t {
width: 100%;
- height: 40%;
- color: rgb(173, 173, 173);
+ height: 30%;
+ font-size: 0.3615rem;
+ display: flex;
+ align-items: flex-start;
+ color: #8c8c8c;
}
}
- .rights {
- width: 60%;
- height: 100%;
+ }
+
+ .bottom_buy_price {
+ width: 100%;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ padding: 0 0.8rem;
+ margin-top: 0.3rem;
+
+ .cot {
+ width: 100%;
+ height: 1.2rem;
display: flex;
- align-items: center;
- justify-content: flex-end;
- >div {
- width: 65%;
- height: 80%;
- display: flex;
- justify-content: space-between;
- > div {
- width: 45%;
- height: 70%;
- background: rgb(236, 236, 236);
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: .1rem;
- color: rgb(173, 173, 173);
- }
- .active {
- background: #fff;
- color: rgb(110,169,118);
+
+ .lefts {
+ width: 40%;
+ height: 100%;
+
+ .top_new {
+ width: 100%;
+ height: 60%;
+ font-size: 0.5615rem;
+ color: rgb(232, 55, 70);
+
span {
font-weight: 600;
+ }
+ }
+
+ .bottom_es {
+ width: 100%;
+ height: 40%;
+ color: rgb(173, 173, 173);
+ }
+ }
+
+ .rights {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ >div {
+ width: 65%;
+ height: 80%;
+ display: flex;
+ justify-content: center;
+
+ >div {
+ width: 45%;
+ height: 70%;
+ background: rgb(236, 236, 236);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.1rem;
+ color: rgb(173, 173, 173);
+ }
+
+ .active {
+ background: #fff;
+ color: rgb(110, 169, 118);
+
+ span {
+ font-weight: 600;
+ }
+ }
+
+ .actives {
+ background: #fff;
+ color: rgb(212, 71, 78);
+
+ span {
+ font-weight: 600;
+ }
}
}
}
}
}
}
-}
-.price_tabs {
- width: 100%;
- height: 7rem;
- padding: .2rem .8rem;
- background: #fff;
- margin-top: .1rem;
- .tabs {
+
+ .price_tabs {
width: 100%;
- height: .8205rem;
- background: rgb(247,247,247);
+ height: auto;
+ padding: 0.2rem 0.8rem;
+ background: #fff;
+ margin-top: 0.1rem;
+ border-radius: 0.3rem;
+
+ .tabs {
+ width: 100%;
+ height: 0.8205rem;
+ background: rgb(247, 247, 247);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.15rem;
+
+ >div {
+ width: 49%;
+ height: 80%;
+ border-radius: 0.15rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .active {
+ background: #fff;
+
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+
+ .tabs_content {
+ width: 100%;
+ margin-top: 0.3rem;
+
+ .num {
+ width: 100%;
+ height: 0.5rem;
+ line-height: 0.5rem;
+ position: relative;
+ top: 0.2rem;
+ }
+
+ .tr_es {
+ width: 100%;
+ height: 1.3rem;
+ margin-top: 0.15rem;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+
+ .top_input {
+ width: 70%;
+ height: 70%;
+ font-size: 0.6615rem;
+
+ input {
+ font-weight: 600;
+ }
+ }
+ }
+
+ .tr_rs {
+ width: 100%;
+ height: 1.3rem;
+ margin-top: 0.4rem;
+
+ >div {
+ width: 100%;
+ height: 50%;
+ color: rgb(160, 160, 160);
+ display: flex;
+ justify-content: space-between;
+
+ span {
+ font-weight: 600;
+ }
+ }
+
+ .bottom_bzz {
+ color: #000;
+ font-size: 0.3846rem;
+
+ span {
+ font-weight: 600;
+ }
+ }
+
+ .top_bzz {
+ align-items: center;
+ }
+ }
+
+ .gg {
+ margin-top: 0 !important;
+ height: 1.8rem;
+ display: flex;
+ align-items: center;
+ font-size: 0.3803rem;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+
+ >div {
+ color: #000;
+ }
+ }
+ }
+ }
+
+ .switchs {
+ width: 100%;
+ height: auto;
+ padding: 0 0.8rem;
+ background: #fff;
+ margin-top: 0.3rem;
+ border-radius: 0.3rem 0.3rem 0 0;
+ transition: all 0.5s;
+
+ .zy {
+ transition: all 0.5s;
+ width: 100%;
+ height: 1.8rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+
+ >div {
+ // width: 20%;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ font-size: 0.3346rem;
+ }
+
+ .right_sw {
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ .btn_buy {
+ width: 100%;
+ height: auto;
+ bottom: 0;
+ background: #fff;
+ padding: 0.8rem 0.8rem;
display: flex;
- align-items: center;
- justify-content: center;
- border-radius: .15rem;
- > div {
- width: 49%;
- height: 80%;
- border-radius: .15rem;
+ align-items: flex-end;
+ // padding-top: 0.8rem;
+
+ >div {
+ width: 100%;
+ height: 1.2821rem;
display: flex;
justify-content: center;
align-items: center;
- }
- .active {
- background: #fff;
- span {
- font-weight: 600;
- }
+ background: rgb(68, 155, 84);
+ color: #fff;
+ font-size: 0.3846rem;
+ border-radius: 0.15rem;
}
}
- .tabs_content {
- width: 100%;
- margin-top: .3rem;
- .num {
- width: 100%;
- height: .5rem;
- }
- .tr_es {
- width: 100%;
- height: 1.3rem;
- margin-top: .3rem;
- border-bottom: 0.05rem solid rgb(236, 236, 236);
- .top_input {
- width: 100%;
- height: 70%;
- font-size: .6615rem;
- input {
- font-weight: 600;
- }
- }
- }
- .tr_rs {
- width: 100%;
- height: 1.3rem;
- margin-top: .4rem;
- > div {
- width: 100%;
- height: 50%;
- color: rgb(160, 160, 160);
- display: flex;
- justify-content: space-between;
- span {
- font-weight: 600;
- }
- }
- .bottom_bzz {
- color: #000;
- font-size: .3846rem;
- span {
- font-weight: 600;
- }
- }
- .top_bzz {
- align-items: center;
- }
- }
- .gg {
- font-size: .3803rem;
- border-bottom: 0.05rem solid rgb(236, 236, 236);
- > div {
- color: #000;
- }
- }
+
+ /deep/.van-action-sheet__name {
+ font-size: 0.3846rem;
+ color: #000;
}
-}
-.switchs{
- width: 100%;
- height: 6rem;
- padding: 0 .8rem;
- background: #fff;
- margin-top: .3rem;
- .zy {
+
+ /deep/.van-action-sheet__gap {
+ height: 0.25rem;
+ }
+
+ /deep/.van-action-sheet__cancel {
+ font-size: 0.4246rem;
+ height: 1.3rem;
+ color: #000;
+ }
+
+ /deep/.van-action-sheet__description {
+ font-size: 0.3846rem;
+ height: 1.45rem;
+ line-height: 0.7rem;
+ }
+
+ .left_zy input {
+ font-size: 0.48rem;
+ font-weight: 500;
+ }
+
+ .addorj {
+ width: 0.7rem;
+ height: 0.7rem;
+ color: #000;
+ font-weight: 500;
+ cursor: pointer;
+ }
+
+ .addorj img {
width: 100%;
- height: 1.8rem;
+ height: 100%;
+ cursor: pointer;
+ }
+
+ .flexJy {
display: flex;
justify-content: space-between;
align-items: center;
- border-bottom: 0.05rem solid rgb(236, 236, 236);
- >div {
- width: 20%;
- height: 50%;
- display: flex;
- align-items: center;
- font-size: .3346rem;
- }
- .right_sw {
- justify-content: flex-end;
- }
}
-}
-.btn_buy{
- width: 100%;
- height: 4.8rem;
- background: #fff;
- padding: .2rem .8rem;
- display: flex;
- align-items: flex-end;
- > div {
+
+ .top_input input {
width: 100%;
- height: 1.2821rem;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgb(68,155,84);
- color: #fff;
- font-size: .3846rem;
- border-radius: .15rem;
}
-}
-</style>
\ No newline at end of file
+
+ .maichu {
+ background-color: rgb(225, 59, 69) !important;
+ }
+
+ .mr {
+ position: relative;
+
+ &::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: -0.1rem;
+ z-index: 10000;
+ background: rgba(255, 255, 255, 0);
+ border-left: 0.12rem solid rgb(241, 242, 246);
+ transform-origin: bottom right;
+ -ms-transform: skew(-10deg, 0deg);
+ -webkit-transform: skew(-10deg, 0deg);
+ transform: skew(-10deg, 0deg);
+ }
+ }
+
+ .mc {
+ position: relative;
+
+ &::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 10000;
+ background: rgba(255, 255, 255, 0);
+ border-right: 0.1rem solid rgb(241, 242, 246);
+ transform-origin: bottom left;
+ -ms-transform: skew(-10deg, 0deg);
+ -webkit-transform: skew(-10deg, 0deg);
+ transform: skew(-10deg, 0deg);
+ }
+ }
+
+ /deep/.van-overlay {
+ z-index: 10000 !important;
+ }
+
+ /deep/.van-popup {
+ z-index: 10001 !important;
+ }
+</style>
--
Gitblit v1.9.3