Bit_Wise_World/src/views/bitcoin/components/position.vue

<script setup>
    import {defineAsyncComponent, ref} from 'vue';

    import { Icon as VanIcon, Button as VanButton } from 'vant';
    const ClosePositionSheet   = defineAsyncComponent(() => import("./ClosePositionSheet.vue"));
    //平仓平空
    const showModal = ref(false);





</script>

<template>
   <div>
      <!--    m买入-->
      <div class="transaction-cards">
        <div class="container">

<!--      <div class="top-nav">-->
<!--        <div class="tabs">-->
<!--          <div class="tab-item active">-->
<!--            持有仓位(2)-->
<!--            <div class="active-line"></div>-->
<!--          </div>-->
<!--          <div class="tab-item">当前委托(0)</div>-->
<!--        </div>-->
<!--        <div class="filter-all">-->
<!--          <van-icon name="clock-o" style="margin-right: 4px;" /> 全部-->
<!--        </div>-->
<!--      </div>-->

      <div class="position-card">

        <div class="card-header">
          <div class="coin-info">
            <div class="btc-icon">₿</div>
            <div class="title-group">
              <div class="coin-name">BTC/USDT 永续</div>
              <div class="tags">
                <span class="tag-buy">买入</span>
                <span class="tag-lever">逐仓 20X</span>
              </div>
            </div>
          </div>
          <div class="order-time">
            <div>2025-11-04, 16:30</div>
            <div style="text-align: right; margin-top: 2px;">下单时间</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="pnl-row">
          <span class="label">未实现盈亏(USDT)</span>
          <span class="value green-text">+0.2015 USDT</span>
        </div>

        <div class="data-grid">
          <div class="grid-item align-left">
            <div class="label">持仓数量</div>
            <div class="value">0.215 USDT</div>
          </div>
          <div class="grid-item align-center">
            <div class="label">开仓价格</div>
            <div class="value">0.215 USDT</div>
          </div>
          <div class="grid-item align-right">
            <div class="label">标记价格</div>
            <div class="value">0.215 USDT</div>
          </div>

          <div class="grid-item align-left mt-10">
            <div class="label">保证金</div>
            <div class="value">0.215 USDT</div>
          </div>
          <div class="grid-item align-center mt-10">
            <div class="label">强平价格</div>
            <div class="value">0.215 USDT</div>
          </div>
          <div class="grid-item align-right mt-10">
            <div class="label">收益率</div>
            <div class="value green-text">+0.21%</div>
          </div>
        </div>

        <div class="action-bar">
          <div class="tp-sl-btn">止盈止损</div>
          <div class="expand-btn">
            展开 <van-icon name="arrow-down" />
          </div>
        </div>

        <div class="footer-btn">
          <van-button block round color="#e6424a" class="close-btn">
            平仓
          </van-button>
        </div>

      </div>
    </div>
      </div>
      <!--    卖出-->
      <div class="transaction-cards1">
      <div class="mobile-viewport">

    <div class="position-card">

      <div class="card-header">
        <div class="coin-info">
          <div class="btc-icon">₿</div>
          <div class="title-group">
            <div class="coin-name">BTC/USDT 永续</div>
            <div class="tags">
              <span class="tag-sell">卖出</span>
              <span class="tag-lever">全仓 20X</span>
            </div>
          </div>
        </div>
        <div class="order-time">
          <div class="time-val">2025-11-04, 16:30</div>
          <div class="time-lbl">下单时间</div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="pnl-row">
        <span class="label">未实现盈亏(USDT)</span>
        <span class="value red-text">-0.2015 USDT</span>
      </div>

      <div class="data-grid">
        <div class="grid-item align-left">
          <div class="label">持仓数量</div>
          <div class="value">0.215 USDT</div>
        </div>
        <div class="grid-item align-center">
          <div class="label">开仓价格</div>
          <div class="value">0.215 USDT</div>
        </div>
        <div class="grid-item align-right">
          <div class="label">标记价格</div>
          <div class="value">0.215 USDT</div>
        </div>

        <div class="grid-item align-left mt-12">
          <div class="label">保证金</div>
          <div class="value">0.215 USDT</div>
        </div>
        <div class="grid-item align-center mt-12">
          <div class="label">强平价格</div>
          <div class="value">0.215 USDT</div>
        </div>
        <div class="grid-item align-right mt-12">
          <div class="label">收益率</div>
          <div class="value red-text">+0.21%</div>
        </div>
      </div>

      <div class="action-bar">
        <div class="tp-sl-text">止盈止损</div>
        <div class="expand-btn active">
          收起 <van-icon name="arrow-up" />
        </div>
      </div>

      <div class="detail-panel">
        <div class="detail-row">
          <div class="d-left">
            <span class="d-tag">止盈</span>
            <span class="d-val gray">标记价格≥2080.80</span>
          </div>
          <div class="d-right">
            <span class="d-label">盈亏</span>
            <span class="d-val green-text">+0.2015 USDT</span>
          </div>
        </div>

        <div class="detail-row">
          <div class="d-left">
            <span class="d-tag">止损</span>
            <span class="d-val gray">最新价格≤9878.8</span>
          </div>
          <div class="d-right">
            <span class="d-label">盈亏</span>
            <span class="d-val red-text">-0.2015 USDT</span>
          </div>
        </div>

        <div class="detail-row">
          <div class="d-left">
            <span class="d-tag">数量</span>
            <span class="d-val gray">0.215 USDT</span>
          </div>
          <div class="d-right">
            <span class="d-label">委托价</span>
            <span class="d-val gray">市价</span>
          </div>
        </div>
      </div>

      <div class="footer-btn" @click="showModal = true">
        <van-button block round color="#e6424a" class="close-btn">
          平仓
        </van-button>
      </div>

    </div>
  </div>
    </div>
    </div>
   <div>
      <ClosePositionSheet
          v-model:visible="showModal">
      </ClosePositionSheet>
    </div>
</template>

<style scoped lang="less">

/* 模拟手机视口 375px */
.mobile-viewport {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  background-color: #ffffff; /* 外部背景色 */
  padding: 0 15px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

/* 卡片主体 */
.position-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #ebedf0;
  position: relative;
}

/* --- Header --- */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.coin-info { display: flex; align-items: center; }
.btc-icon {
  width: 32px;
  height: 32px;
  background: #f7931a;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 8px;
}
.title-group { display: flex; flex-direction: column; justify-content: center; }
.coin-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tags { display: flex; align-items: center; }

/* 标签样式 */
.tag-sell {
  background-color: #e6424a; /* 卖出红 */
  color: white;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  line-height: 1.4;
}
.tag-lever {
  background-color: #9aa0a5; /* 灰色背景 */
  color: #fff;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
}

/* 时间 */
.order-time { text-align: right; }
.time-val { font-size: 12px; color: #666; }
.time-lbl { font-size: 11px; color: #999; margin-top: 2px; }

/* 分割线 */
.divider { height: 1px; background-color: #f0f0f0; margin: 10px 0; }

/* 盈亏行 */
.pnl-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  align-items: center;
}
.pnl-row .label { color: #999; }
.pnl-row .value { font-size: 15px; font-weight: 500; }

/* 通用颜色 */
.green-text { color: #00b45a; }
.red-text { color: #e6424a; }
.gray { color: #888; }

/* 数据网格 */
.data-grid { display: flex; flex-wrap: wrap; }
.grid-item { width: 33.33%; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.mt-12 { margin-top: 12px; }

.grid-item .label { font-size: 11px; color: #999; margin-bottom: 4px; }
.grid-item .value { font-size: 13px; color: #333; font-weight: 500; }

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 12px;
  color: #999;
  align-items: center;
}
.tp-sl-text {
  //text-decoration: underline;
  text-decoration-color: #ccc;
}
.expand-btn { display: flex; align-items: center; cursor: pointer; }

/* --- 详情面板 (关键还原部分) --- */
.detail-panel {
  margin-top: 8px;
  padding-top: 4px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.d-left { display: flex; align-items: center; }
.d-right { display: flex; align-items: center; }

/* 详情里的文字对齐 */
.d-tag {
  color: #999;
  margin-right: 12px; /* 标签(止盈)和数值之间的间距 */
  min-width: 24px; /* 保证标签对齐 */
}
.d-label {
  color: #999;
  margin-right: 8px;
}
.d-val {
  font-family: Arial, sans-serif;
}

/* 底部按钮 */
.footer-btn { margin-top: 15px; }
.close-btn { font-size: 15px; letter-spacing: 1px; border: none; }

.container {
  background-color: #fff;
  //min-height: 100vh;
  padding: 15px 15px;
  font-family: sans-serif;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tabs { display: flex; align-items: center; gap: 20px; }
.tab-item {
  font-size: 16px;
  color: #969799;
  position: relative;
  padding-bottom: 6px;
  font-weight: 600;
}
.tab-item.active {
  color: #323233;
  font-weight: 600;
  font-size: 17px;
}
.active-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: #323233;
  border-radius: 2px;
}
.filter-all {
  font-size: 16px;
  color: #969799;
  display: flex;
  font-weight: 600;
  align-items: center;
}

.position-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  /* 去掉投影，增加描边 */
  box-shadow: none;
  border: 1px solid #ebedf0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.coin-info { display: flex; align-items: center; }
.btc-icon {
  width: 36px;
  height: 36px;
  background: #f7931a;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px;
}
.coin-name {
  font-size: 16px;
  font-weight: bold;
  color: #323233;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tags { display: flex; align-items: center; }
.tag-buy {
  background-color: #00b45a;
  color: white;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
}
.tag-lever {
  background-color: #f0f0f0;
  color: #969799;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
}
.order-time {
  text-align: right;
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}
.divider {
  height: 1px;
  background-color: #f5f6f7;
  margin: 12px 0;
}
.pnl-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}
.pnl-row .label { color: #969799; }
.green-text { color: #00b45a; font-weight: 500; }

.data-grid { display: flex; flex-wrap: wrap; }
.grid-item { width: 33.33%; margin-bottom: 4px; }
.mt-10 { margin-top: 12px; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.grid-item .label {
  font-size: 12px;
  color: #969799;
  margin-bottom: 4px;
}
.grid-item .value {
  font-size: 14px;
  color: #323233;
  font-weight: 500;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 13px;
  color: #969799;
}
.footer-btn { margin-top: 16px; }
.close-btn { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
</style>