cfc/cfc-frontend/components/health-knowledge-popup.vue

<template>
  <view class="kb-popup-overlay" v-if="visible" @tap="close">
    <view class="kb-popup-content" @tap.stop>
      <view class="kb-popup-header">
        <text class="kb-popup-title">{{ data.itemName || '' }}</text>
        <text class="kb-popup-close" @tap="close">×</text>
      </view>
      <scroll-view class="kb-popup-body" scroll-y>
        <view class="kb-field" v-if="data.category">
          <text class="kb-field-label">分类</text>
          <text class="kb-field-value">{{ data.category }}</text>
        </view>
        <view class="kb-field" v-if="data.normalRange">
          <text class="kb-field-label">正常范围</text>
          <text class="kb-field-value">{{ data.normalRange }}</text>
        </view>
        <view class="kb-field" v-if="data.description">
          <text class="kb-field-label">说明</text>
          <text class="kb-field-value">{{ data.description }}</text>
        </view>
        <view class="kb-field" v-if="data.suggestion">
          <text class="kb-field-label">相关建议</text>
          <text class="kb-field-value">{{ data.suggestion }}</text>
        </view>
        <view class="kb-empty" v-if="!data.itemName">
          <text>暂无相关说明</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
    data: { type: Object, default: function() { return {} } }
  },
  methods: {
    close: function() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.kb-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-popup-content {
  width: 600rpx;
  max-height: 70vh;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kb-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.kb-popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  word-break: break-all;
}
.kb-popup-close {
  font-size: 40rpx;
  color: #999;
  padding: 0 10rpx;
}
.kb-popup-body {
  padding: 20rpx 30rpx 30rpx;
  max-height: 50vh;
}
.kb-field {
  margin-bottom: 20rpx;
}
.kb-field-label {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 6rpx;
}
.kb-field-value {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
  white-space: normal;
}
.kb-empty {
  text-align: center;
  color: #ccc;
  padding: 40rpx 0;
  font-size: 28rpx;
}
</style>