|
|
@@ -1,1001 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="market">
|
|
|
- <div class="market-nav">
|
|
|
- <div class="nav-left">
|
|
|
- <div class="pf600 fs18 fc121212" @click="messageChange('selfSelected')">合约
|
|
|
- <div class="active-line"></div>
|
|
|
- </div>
|
|
|
- <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('contract')">秒合约</div>
|
|
|
- <div
|
|
|
- class="sys-notifi pf600 fs14 fcA8A8A8"
|
|
|
- @click="messageChange('secondContract')">
|
|
|
- 期权
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sys-notifi pf600 fs14 fcA8A8A8"
|
|
|
- @click="messageChange('secondContract')">
|
|
|
- 杠杆
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu">
|
|
|
- <div class="menu-left">
|
|
|
- <img class="fc333333" src="../../assets/icon/bitcoin/menu.svg" alt="">
|
|
|
- <div class="pf600 fs18 fc121212">BTCUSDT 永续</div>
|
|
|
- </div>
|
|
|
- <div class="menu-right fc333333">
|
|
|
-
|
|
|
- <img src="../../assets/icon/bitcoin/jisuanqi.svg" alt="" @click="$router.push({name: 'calculator'})">
|
|
|
- <img src="../../assets/icon/bitcoin/hangqing.svg" alt="">
|
|
|
- <img src="../../assets/icon/bitcoin/den.svg" alt="" @click="$router.push({ name: 'BitcoinFunctions' })">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-bottom">
|
|
|
- <div class="pf500 fs12 menu-leftb">
|
|
|
- +2.18%
|
|
|
- </div>
|
|
|
- <div class="fc333333 fs12 pf400 menu-rightb">
|
|
|
- <div>资金费率/倒计时</div>
|
|
|
- <div>0.003%/1:57:32</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content">
|
|
|
- <!-- //左边-->
|
|
|
- <div class="menu-content-l">
|
|
|
- <div class="menu-content-lb pf400 fs14 fc666666">
|
|
|
- <span>价格</span><span>数量(USDT)</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1">
|
|
|
- <div class="menu-content-lb1l pf400 fs14 fcFF7171">
|
|
|
- <span class="">40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1r pf400 fs14 fc444444">
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb2">
|
|
|
- <p class="pf600 fs16 fcDF384C">5,678.00</p>
|
|
|
- <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1">
|
|
|
- <div class="menu-content-lb1l pf400 fs14 fcFF7171">
|
|
|
- <span class="">40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
- <span>40,166.82</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1r pf400 fs14 fc444444">
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
- <span>37.80K</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1">
|
|
|
- <div class="menu-content-lb1l pf400 fs12 fc333333" @click="isPickerVisible = true">
|
|
|
- <span class="fs12">{{ displayLabel }}</span>
|
|
|
- <img src="../../assets/icon/bitcoin/shendul.svg" alt="">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-lb1r pf400 fs14 fc444444">
|
|
|
- <img src="../../assets/icon/bitcoin/shendur.svg" alt="">
|
|
|
- <img v-if="isassetlessState" src="../../assets/icon/bitcoin/wuzichan.svg" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <assetlessStateData v-if="isassetlessState"></assetlessStateData>
|
|
|
- <SellTradingStatusData v-if="isassetlessState"></SellTradingStatusData>
|
|
|
- <!-- //右边-->
|
|
|
- <div class="menu-content-r">
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333" @click="showInfo = true">
|
|
|
- <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
|
|
|
- <span>{{ selectedLabel1 }}</span>
|
|
|
- </div>
|
|
|
- <div @click="showModal1 = true" style="font-size: 12px; margin-right: 12px;">
|
|
|
- <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal1 ? 'arrow-up' : 'arrow-down'"/>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333" @click="showModal3 = true">
|
|
|
- <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
|
|
|
- <span>{{ selectedLabel2 }}</span>
|
|
|
- </div>
|
|
|
- <div @click="showModal2 = true" style="font-size: 12px; margin-right: 12px;">
|
|
|
- <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal2 ? 'arrow-up' : 'arrow-down'"/>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span>125000</span>
|
|
|
- </div>
|
|
|
- <span>最优价</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14 fc333333">≈25.2250 USDT</div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc999999">数量</span>
|
|
|
- </div>
|
|
|
- <span>USDT</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">可用</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1">
|
|
|
- <span>0</span>
|
|
|
- <span>USDT</span>
|
|
|
- <img class="fs16" src="../../assets/icon/bitcoin/qianbao1.svg" alt="">
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">倍数</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1" @click="showLeverageModal = true">
|
|
|
- <span></span>
|
|
|
- <span>{{ selectedLeverage }}X</span>
|
|
|
- <span>更多</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <van-checkbox
|
|
|
- v-model="isEnabled"
|
|
|
- shape="square"
|
|
|
- checked-color="#DC4653"
|
|
|
- icon-size="16px"
|
|
|
- >
|
|
|
- </van-checkbox>
|
|
|
- <span class="menu-content-rb1s fc333333">只减仓</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1" @click="showModal = true">
|
|
|
- <span></span>
|
|
|
- <span>{{ currentType }}</span>
|
|
|
- <div style="font-size: 12px;">
|
|
|
- <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal ? 'arrow-up' : 'arrow-down'"/>
|
|
|
- </div>
|
|
|
- <!-- <img class="fs16" src="../../assets/icon/bitcoin/quangcang1.svg" alt="">-->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <TakeProfitsTopLoss v-show="!isEnabled"></TakeProfitsTopLoss>
|
|
|
-
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">可用</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1">
|
|
|
- <span>0</span>
|
|
|
- <span>USDT</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">保证金</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1">
|
|
|
- <span>0</span>
|
|
|
- <span>USDT</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14" @click="showConfirm = true">
|
|
|
- <div class="pf400 fs16 fcFFFFFF">买入(做多)</div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">可用</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1">
|
|
|
- <span>0</span>
|
|
|
- <span>USDT</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="menu-content-rb1 fs14 fc333333">
|
|
|
- <span class="menu-content-rb1s fc333333">保证金</span>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb1">
|
|
|
- <span>0</span>
|
|
|
- <span>USDT</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="menu-content-rb pf400 fs14">
|
|
|
- <div class="pf400 fs16 fcFFFFFF" @click="showConfirm = true">卖出(做空)</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 订单列表组件-->
|
|
|
- <sellOrder></sellOrder>
|
|
|
- <!-- //各种弹窗-->
|
|
|
- <div v-if="isassetlessState">
|
|
|
- <assetlessState></assetlessState>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <ChooseThisDepth
|
|
|
- v-model:show="isPickerVisible"
|
|
|
- v-model="currentDepth"
|
|
|
- ></ChooseThisDepth>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <LeveragePopup
|
|
|
- v-model:visible="showLeverageModal"
|
|
|
- :initial-value="selectedLeverage"
|
|
|
- @confirm="handleConfirm">
|
|
|
- </LeveragePopup>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <OrderConfirmPopup
|
|
|
- v-model:visible="showConfirm"
|
|
|
- @confirm="onOrderConfirmed">
|
|
|
- </OrderConfirmPopup>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <OrderTimeSheet
|
|
|
- v-model:visible="showModal"
|
|
|
- v-model="currentType"
|
|
|
- ></OrderTimeSheet>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <MarginInfoSheet
|
|
|
- v-model:visible="showInfo"
|
|
|
- ></MarginInfoSheet>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <FundingOptions
|
|
|
- v-model:visible="showModal1"
|
|
|
- :selected-id="currentId1"
|
|
|
- @confirm="handleConfirm1">
|
|
|
- </FundingOptions>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <OrderType
|
|
|
- v-model:visible="showModal2"
|
|
|
- :selected-id="currentId2"
|
|
|
- @confirm="handleConfirm2"
|
|
|
- ></OrderType>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <LimitOrderModal
|
|
|
- v-model:visible="showModal3"
|
|
|
- ></LimitOrderModal>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <div>-->
|
|
|
- <!-- <InsufficientBalance-->
|
|
|
- <!-- v-model:visible="showRechargeModal"-->
|
|
|
- <!-- @confirm="handleGoRecharge"-->
|
|
|
- <!-- ></InsufficientBalance>-->
|
|
|
- <!-- </div>-->
|
|
|
- </div>
|
|
|
-<!-- <router-view v-slot="{ Component }">-->
|
|
|
-<!-- <keep-alive :include="['BitcoinFunctions', 'Calculator']">-->
|
|
|
-<!-- <component :is="Component" />-->
|
|
|
-<!-- </keep-alive>-->
|
|
|
-<!-- </router-view>-->
|
|
|
- <router-view></router-view>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
- import {Checkbox as VanCheckbox, Icon as VanIcon} from 'vant';
|
|
|
- import {computed, defineAsyncComponent, ref} from 'vue';
|
|
|
- import { useRouter } from 'vue-router'
|
|
|
-
|
|
|
- const router = useRouter()
|
|
|
-
|
|
|
- // 懒加载多个组件
|
|
|
- const priceLimit = defineAsyncComponent(() => import("./components/priceLimit.vue"));
|
|
|
- const assetlessState = defineAsyncComponent(() => import("./components/assetlessState.vue"));
|
|
|
- const assetlessStateData = defineAsyncComponent(() => import("./components/assetlessStateData.vue"));
|
|
|
- //订单列表组件
|
|
|
- const sellOrder = defineAsyncComponent(() => import('./components/sellOrder.vue'));
|
|
|
- const SellTradingStatusData = defineAsyncComponent(() => import('./components/SellTradingStatusData.vue'));
|
|
|
- const TakeProfitsTopLoss = defineAsyncComponent(() => import('./components/TakeProfitsTopLoss.vue'));
|
|
|
- const ChooseThisDepth = defineAsyncComponent(() => import('./components/ChooseThisDepth.vue'));
|
|
|
- //控制倍数组件
|
|
|
- const LeveragePopup = defineAsyncComponent(() => import('./components/LeveragePopup.vue'));
|
|
|
- const OrderConfirmPopup = defineAsyncComponent(() => import('./components/OrderConfirmPopup.vue'));
|
|
|
- const OrderTimeSheet = defineAsyncComponent(() => import('./components/OrderTimeSheet.vue'));
|
|
|
- //全仓逐仓组件
|
|
|
- const MarginInfoSheet = defineAsyncComponent(() => import('./components/MarginInfoSheet.vue'));
|
|
|
- const FundingOptions = defineAsyncComponent(() => import('./components/FundingOptions.vue'));
|
|
|
- const OrderType = defineAsyncComponent(() => import('./components/OrderType.vue'));
|
|
|
- //余额不足提示
|
|
|
- // const InsufficientBalance = defineAsyncComponent(() => import('./StatusComponent/InsufficientBalance.vue'));
|
|
|
- const LimitOrderModal = defineAsyncComponent(() => import('./components/LimitOrderModal.vue'));
|
|
|
- /*常用功能*/
|
|
|
- // 跳转到子路由
|
|
|
- const openFunctions = () => {
|
|
|
- router.push({ name: 'BitcoinFunctions' })
|
|
|
- }
|
|
|
-
|
|
|
- /*市价说明*/
|
|
|
- const showModal3 = ref(false);
|
|
|
-
|
|
|
- // //余额不足提示
|
|
|
- // // 控制弹窗显示的变量
|
|
|
- // const showRechargeModal = ref(false);
|
|
|
- //
|
|
|
- // // 处理点击“立即充币”后的逻辑
|
|
|
- // const handleGoRecharge = () => {
|
|
|
- // // console.log('用户点击了立即充币，正在跳转充值页面...');
|
|
|
- // // 这里写你的跳转逻辑，例如: router.push('/recharge')
|
|
|
- // };
|
|
|
-
|
|
|
- /*订单类型选项*/
|
|
|
- const showModal2 = ref(false);
|
|
|
-
|
|
|
- // 定义状态用于存储
|
|
|
- const currentId2 = ref(1); // 默认选中第一个
|
|
|
- const selectedLabel2 = ref('市价'); // 默认值
|
|
|
- const selectedUnit2 = ref('%'); // 默认值
|
|
|
-
|
|
|
- /*回调函数：子组件选中后触发*/
|
|
|
- const handleConfirm2 = (item) => {
|
|
|
- // console.log('子组件返回的对象:', item);
|
|
|
-
|
|
|
- // 保存ID用于下次打开时回显高亮
|
|
|
- currentId2.value = item.id;
|
|
|
- // const a = item.label.slice(-2)
|
|
|
-
|
|
|
- // 核心需求：在这里将值“拆开”为两个字符串
|
|
|
- selectedLabel2.value = item.label.slice(0, 2); // 字符串1: "涨跌幅"
|
|
|
- selectedUnit2.value = item.unit; // 字符串2: "%"
|
|
|
- };
|
|
|
-
|
|
|
- /* 全仓逐仓选项*/
|
|
|
- const showModal1 = ref(false);
|
|
|
-
|
|
|
- // 定义状态用于存储
|
|
|
- const currentId1 = ref(1); // 默认选中第一个
|
|
|
- const selectedLabel1 = ref('全仓'); // 默认值
|
|
|
- const selectedUnit1 = ref('%'); // 默认值
|
|
|
-
|
|
|
- // 回调函数：子组件选中后触发
|
|
|
- const handleConfirm1 = (item) => {
|
|
|
- // console.log('子组件返回的对象:', item);
|
|
|
-
|
|
|
- // 保存ID用于下次打开时回显高亮
|
|
|
- currentId1.value = item.id;
|
|
|
- // const a = item.label.slice(-2)
|
|
|
-
|
|
|
- // 核心需求：在这里将值“拆开”为两个字符串
|
|
|
- selectedLabel1.value = item.label.slice(0, 2); // 字符串1: "涨跌幅"
|
|
|
- selectedUnit1.value = item.unit; // 字符串2: "%"
|
|
|
- };
|
|
|
-
|
|
|
- /* // 全仓逐仓说明*/
|
|
|
- const showInfo = ref(false);
|
|
|
-
|
|
|
- /*//GTC弹框*/
|
|
|
- // 控制弹窗显示
|
|
|
- const showModal = ref(false);
|
|
|
-
|
|
|
- // 选中的值，默认为 GTC
|
|
|
- const currentType = ref('GTC');
|
|
|
-
|
|
|
-
|
|
|
- /* // --- 深度弹窗 ---*/
|
|
|
- const isPickerVisible = ref(false); // 控制弹窗开关
|
|
|
- const currentDepth = ref('depth1'); // 当前选中的深度
|
|
|
- const depthMap = {
|
|
|
- 'depth1': '深度1',
|
|
|
- 'depth2': '深度2',
|
|
|
- 'depth3': '深度3',
|
|
|
- };
|
|
|
- const displayLabel = computed(() => depthMap[currentDepth.value] || '请选择');
|
|
|
-
|
|
|
- /*控制止盈止损*/
|
|
|
- const isEnabled = ref(false);
|
|
|
-
|
|
|
- /*控制倍数*/
|
|
|
- // 控制弹窗显示
|
|
|
- const showLeverageModal = ref(false);
|
|
|
- // 存储当前选中的倍数，默认 100
|
|
|
- const selectedLeverage = ref(100);
|
|
|
- // 处理子组件回传的确认事件
|
|
|
- const handleConfirm = (value) => {
|
|
|
- // console.log('用户选择了:', value);
|
|
|
- selectedLeverage.value = value;
|
|
|
- // 这里可以继续添加发送 API 请求的逻辑
|
|
|
- };
|
|
|
-
|
|
|
- /*做多买入*/
|
|
|
- const showConfirm = ref(false);
|
|
|
- const onOrderConfirmed = () => {
|
|
|
- // console.log('订单已提交');
|
|
|
- // 这里可以添加 Toast 提示
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-
|
|
|
-/* 容器基础样式，基于 375px 设计稿 */
|
|
|
-:deep(.van-checkbox__icon--square .van-icon) {
|
|
|
- /* 这里的 4px 是圆角大小，数值越大越圆 */
|
|
|
- border-radius: 2px !important;
|
|
|
-}
|
|
|
-
|
|
|
-.market {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 100px;
|
|
|
- width: 100%;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .market-nav {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 21px;
|
|
|
- width: 345px;
|
|
|
- height: 24px;
|
|
|
-
|
|
|
- .nav-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-end;
|
|
|
- width: 349px;
|
|
|
- height: 24px;
|
|
|
-
|
|
|
- div:nth-child(1) {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .active-line {
|
|
|
- position: absolute;
|
|
|
- bottom: -6px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 20px;
|
|
|
- height: 3px;
|
|
|
- background-color: #323233;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sys-notifi {
|
|
|
- margin-left: 35px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .nav-right {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 21px;
|
|
|
- width: 345px;
|
|
|
- height: 24px;
|
|
|
-
|
|
|
- .menu-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- line-height: 0px;
|
|
|
-
|
|
|
- img {
|
|
|
- margin: 0px 10px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-right {
|
|
|
- img {
|
|
|
- margin-left: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-bottom {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 8px;
|
|
|
- width: 345px;
|
|
|
-
|
|
|
- .menu-leftb {
|
|
|
- width: 61px;
|
|
|
- height: 25px;
|
|
|
- background-color: #45b26b;
|
|
|
- border-radius: 5px;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-rightb {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content {
|
|
|
- width: 100%;
|
|
|
- max-width: 345px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- margin-top: 8px;
|
|
|
-
|
|
|
- .menu-content-l {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .menu-content-lb {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb1 {
|
|
|
- margin-top: 11px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 14px;
|
|
|
-
|
|
|
- .menu-content-lb1l {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb1r {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb1:nth-child(4) {
|
|
|
- .menu-content-lb1l {
|
|
|
- color: #45b26b;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb1:nth-child(5) {
|
|
|
- .menu-content-lb1l {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-radius: 6px;
|
|
|
- height: 24px;
|
|
|
- padding: 0 5px 0 13px;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb1r {
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-lb2 {
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 16px;
|
|
|
- //span:nth-child(2){
|
|
|
- // //border-style: dashed;
|
|
|
- //}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-r {
|
|
|
- flex: 1;
|
|
|
- flex-basis: 63.5px;
|
|
|
- max-width: 204.25px;
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(4) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-radius: 6px;
|
|
|
- margin-bottom: 8px;
|
|
|
- height: 38px;
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 12px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 12px;
|
|
|
- //height: 16px;
|
|
|
- //width: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- text-align: center;
|
|
|
- margin-left: 12px;
|
|
|
- display: flex;
|
|
|
- align-content: center;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 6px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(6) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(1) {
|
|
|
-
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 9px 0 9px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(7) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 9px 0 9px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- span:nth-child(3) {
|
|
|
- color: #df384c;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(8) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 9px 0 9px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1s {
|
|
|
- margin-left: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(9) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 9px 0 9px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(10) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 0px 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(11) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 0px 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(12) {
|
|
|
- background-color: #45b26b;
|
|
|
-
|
|
|
- div {
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(13) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 0px 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(14) {
|
|
|
- background-color: transparent;
|
|
|
- height: 20px;
|
|
|
-
|
|
|
- .menu-content-rb1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 24px;
|
|
|
- margin-left: 0;
|
|
|
- align-content: center;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb1:nth-child(2) {
|
|
|
- span:nth-child(2) {
|
|
|
- margin: 0 0px 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .menu-content-rb:nth-of-type(15) {
|
|
|
- background-color: #df384c;
|
|
|
-
|
|
|
- div {
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- //.van-dropdown-menu__bar{
|
|
|
- // width: 214px;
|
|
|
- //}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
