<template>
  <div class="trade-futures-container">

    <div class="menu">
      <div class="menu-left">
        <div style="line-height: 0; ">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <rect width="16" height="16" fill="url(#pattern0_15_459)"/>
          <defs>
          <pattern id="pattern0_15_459" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlink:href="#image0_15_459" transform="scale(0.005)"/>
          </pattern>
          <image id="image0_15_459" width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
          </defs>
          </svg>
        </div>

        <div class="pf600 fs18 fc121212">BTCUSDT 永续</div>
      </div>
      <div class="menu-right fc333333">
        <svg @click="router.push({name: 'calculator'})" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="20" height="20" fill="url(#pattern0_70_4059)"/>
        <defs>
        <pattern id="pattern0_70_4059" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_70_4059" transform="scale(0.005)"/>
        </pattern>
        <image id="image0_70_4059" width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
        </defs>
        </svg>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="16" height="16" fill="url(#pattern0_15_462)"/>
        <defs>
        <pattern id="pattern0_15_462" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_15_462" transform="scale(0.005)"/>
        </pattern>
        <image id="image0_15_462" width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64, "/>
        </defs>
        </svg>
        <svg @click="showFunctions = true" width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 2C8 2.55228 8.44772 3 9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M15 2C15 2.55228 15.4477 3 16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </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 fs12 fcFF7171">
            <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>
            <span>40,166.82</span>
          </div>
          <div class="menu-content-lb1r pf400 fs12 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 fs12 fc333333">
            <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>
            <span>40,166.82</span>
          </div>
          <div class="menu-content-lb1r pf400 fs12 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 style="margin-top: 4px;" 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">
            <VanCheckbox
                v-model="isEnabled"
                shape="square"
                checked-color="#DC4653"
                icon-size="16px"
            >
            </VanCheckbox>
            <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>
          </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>

    <ChooseThisDepth
        v-model:show="isPickerVisible"
        v-model="currentDepth"
    ></ChooseThisDepth>

    <LeveragePopup
        v-model:visible="showLeverageModal"
        :initial-value="selectedLeverage"
        @confirm="handleConfirm">
    </LeveragePopup>

    <OrderConfirmPopup
        v-model:visible="showConfirm"
        @confirm="onOrderConfirmed">
    </OrderConfirmPopup>

    <OrderTimeSheet
        v-model:visible="showModal"
        v-model="currentType"
    ></OrderTimeSheet>

    <MarginInfoSheet
        v-model:visible="showInfo"
    ></MarginInfoSheet>

    <FundingOptions
        v-model:visible="showModal1"
        :selected-id="currentId1"
        @confirm="handleConfirm1">
    </FundingOptions>

    <OrderType
        v-model:visible="showModal2"
        :selected-id="currentId2"
        @confirm="handleConfirm2"
    ></OrderType>

    <LimitOrderModal
        v-model:visible="showModal3"
    ></LimitOrderModal>
    <CommonFunctionsPopup
      v-model:visible="showFunctions"
    ></CommonFunctionsPopup>
  </div>
</template>

<script setup>
import {Checkbox as VanCheckbox, Icon as VanIcon} from 'vant';
import {computed, defineAsyncComponent, ref, onMounted} 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 LimitOrderModal = defineAsyncComponent(() => import('./components/LimitOrderModal.vue'));
// 假设您的组件在 @/components/CommonFunctionsPopup.vue (请根据实际路径修改)
const CommonFunctionsPopup = defineAsyncComponent(() => import('./CommonFunctionsPopup/CommonFunctionsPopup.vue'));

// 控制通用功能
const showFunctions = ref(false);

// --- 状态定义 ---
const isassetlessState = ref(false);

const isPickerVisible = ref(false);
const currentDepth = ref('depth1');
const depthMap = {
  'depth1': '深度1',
  'depth2': '深度2',
  'depth3': '深度3',
};
const displayLabel = computed(() => depthMap[currentDepth.value] || '请选择');

/* 市价说明 */
const showModal3 = ref(false);

/* 订单类型选项 */
const showModal2 = ref(false);
const currentId2 = ref(1);
const selectedLabel2 = ref('市价');
const selectedUnit2 = ref('%');
const handleConfirm2 = (item) => {
  currentId2.value = item.id;
  selectedLabel2.value = item.label.slice(0, 2);
  selectedUnit2.value = item.unit;
};

/* 全仓逐仓选项 */
const showModal1 = ref(false);
const currentId1 = ref(1);
const selectedLabel1 = ref('全仓');
const selectedUnit1 = ref('%');
const handleConfirm1 = (item) => {
  currentId1.value = item.id;
  selectedLabel1.value = item.label.slice(0, 2);
  selectedUnit1.value = item.unit;
};

/* 全仓逐仓说明 */
const showInfo = ref(false);

/* GTC 弹框 */
const showModal = ref(false);
const currentType = ref('GTC');

/* 控制止盈止损显隐 */
const isEnabled = ref(false);

/* 控制倍数 */
const showLeverageModal = ref(false);
const selectedLeverage = ref(100);
const handleConfirm = (value) => {
  selectedLeverage.value = value;
};

/* 交易确认 */
const showConfirm = ref(false);
const onOrderConfirmed = () => {
  // console.log('订单已提交');
};
</script>

<style lang="less" scoped>
:deep(.van-checkbox__icon--square .van-icon) {
  border-radius: 2px !important;
}

.trade-futures-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px; /* <-- 改成这行 */
  padding-top: 50px;
  box-sizing: border-box;
  width: 100%;
  /* 1. 设定高度为视口高度，占满屏幕 */
  //height: 100vh;

  /* 2. 开启容器内部纵向滚动 */
  overflow-y: auto;

  /* 3. 开启 iOS 惯性滚动，滑动更丝滑 */
  -webkit-overflow-scrolling: touch;

  /* 4. 取消 box-sizing 的注释，防止 padding 撑破宽度 */

  /* 5. 底部留白（防止内容被底部导航栏遮挡） */
  /* --- 修改结束 --- */


}


/* --- 【新增】 头部行情的样式 --- */
.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* 既然Layout底部给了margin，这里如果不想要间距可以调整，或者保留 */
  /* margin-top: 21px; */
  width: 345px;
  height: 24px;

  .menu-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

    img {
      margin: 0px 10px 0 0;
    }
  }

  .menu-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    .icon1{
      width: 20px;
      height: 20px;
    }
    .icon2{
      width: 16px;
      height: 16px;
    }
    .icon3{
      width: 18px;
      height: 4px;

    }
  }
}

.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: 5px;
        margin-bottom: 2px;
        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: 5px;
        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>