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

<template>
  <Teleport to="body">
    <div v-if="visible" class="modal-mask" @click="close">
      <div class="modal-content" @click.stop>
        <div class="handle-bar"></div>
        <div class="trigger fs18 fc333333 pf600">选择触发类型</div>
        <div class="options-list">
          <div
            v-for="item in options"
            :key="item.id"
            class="option-card"
            :class="{ 'active': selectedId === item.id }"
            @click="handleSelect(item)"
          >
            <div class="card-header">
              <span class="title">{{ item.label }}</span>
              <div v-if="selectedId === item.id" class="check-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor"
                     stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"
                     class="css-i6dzq1"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </div>
            </div>
            <div class="description">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 接收父组件传来的 modelValue (控制显示) 和 当前选中的ID
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  selectedId: {
    type: [String, Number],
    default: 1
  }
});

const emit = defineEmits(['update:visible', 'confirm']);

// 静态数据源 (保持不变)
const options = [
  {
    id: 1,
    label: '标记价格',
    desc: '标记价格为合约的预计公允价值'
  },

  {
    id: 2,
    label: '最新价格',
    desc: '最新价格为该合约的最新成交价格'
  }
];

const close = () => {
  emit('update:visible', false);
};

const handleSelect = (item) => {
  // 1. 触发 confirm 事件，把整个对象带回去
  emit('confirm', item);
  // 2. 关闭弹窗
  close();
};
</script>

<style lang="less" scoped>
.modal-mask {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end; /* 底部对齐 */
  z-index: 1000; /* 极高的 Z-index */
}

.modal-content {
  width: 100%;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  padding-bottom: 40px;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
  .trigger{margin-bottom: 15px}
}

.handle-bar {
  width: 40px;
  height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
  margin: 0 auto 20px auto;
}

.option-card {
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* 选中状态样式 */
.option-card.active {
  border-color: #F53F3F; /* 红色边框 */
  background-color: #FFF9F9; /* 极淡的红色背景可选 */
}

.option-card.active .title {
  color: #D92828; /* 红色标题 */
}

.option-card.active .description {
  color: #D92828; /* 红色描述 */
}

.check-icon {
  width: 24px;
  height: 24px;
  background: #D92828;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>