|
|
@@ -0,0 +1,108 @@
|
|
|
+<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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.kb-empty {
|
|
|
+ text-align: center;
|
|
|
+ color: #ccc;
|
|
|
+ padding: 40rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+</style>
|