1

wwl

5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57

 pagesA/hospIntroduce/hospIntroduce.vue

@@ -1,141 +1,115 @@
<template>
    <view class="container">
        <uni-section title="泾川县人民医院体检中心" type="line">
            <uni-card :cover="cover" @click="onClick">
                <div class="uni-body">
                    <uni-section title="医院简介" type="line" custom-class="section-title">
                        <div style="margin-bottom: 60rpx;">
                            泾川县人民医院体检中心是集健康体检、健康咨询、健康跟踪、健康促进为一体的全方位现代化、规范化体检中心。拥有高质量的专家团队、优良的体检设备和舒适优雅的环境，为百姓提供健康测评和指导。同时，中心提供优质的检后服务，可为需要进步检查的患者免费预约、导诊等，也可为常见病、多发病患者提供专家集中咨询。体检中心位于我院外科楼13楼，体检时间周一至周五，上午8:00-12:00，下午14:30-17:30。体检中心现设有内科、外科、妇科、眼科、耳鼻喉科、口腔科，均具有丰富临床经验骨干医生组成，护理导医人
                        </div>
                        <div style="font-size: 30rpx; color: #F5981F;">温馨提示</div>
                        <div class="tips">
                            <div class="tips-title">一、体检前</div>
                            <div class="tips-list">
                                <text>1. 预约体检时请您认真核对体检人的身份信息</text>
                                <text>2. 体检当天请务必携带体检人身份证件</text>
                                <text>3. 体检前一天晚餐19:30以前结束，22:00至体检当天采血前禁止饮水。</text>
                                <text>4. 体检前三日请您不要吃高脂类食物(如肥肉、蛋类)</text>
                                <text>5. 检前晚8时后避免进食和剧烈运动，保持充足睡眠</text>
                                <text>6. 体检当日空腹。(必服药物除外)</text>
                                <text>7. 未婚、已孕、经期的女性请不要做妇科检查</text>
                                <text>8. 不要佩戴首饰、穿带金属扣内衣及有金属装饰衣服以免影响放射检查。</text>
                                <text>9. 怀孕或准备怀孕的女性请不要做X线检查</text>
                                <text>10. 接受前列腺或妇科B超(未婚)</text>
                            </div>
                        </div>
                    </uni-section>
                    <uni-section title="联系方式" type="line" custom-class="section-title">
                        电 话：0933-6410678转8097
                    </uni-section>
                </div>
                <div class="share" @click="shareToggle">
                    <uni-icons type="heart" size="20" color="#fff"></uni-icons>
                    <div>分享</div>
        <!-- 动态渲染 introduction 参数 -->
        <mp-html :content="introduction" />
                </div>
            </uni-card>
        </uni-section>
        <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
            <uni-popup-share></uni-popup-share>
        </uni-popup>

    </view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'; // 使用正确的路径

   export default {
  components: {
    mpHtml
  },
      data() {
         return {
            cover: 'https://ltpeis.xaltjdkj.cn:5502/static/images/hosp.png',
            //avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
      introduction: '', // 默认值
            extraIcon: {
               color: '#4cd964',
               size: '22',
               type: 'gear-filled'
            }
         }
    };
      },

  onLoad() {
    // 从本地存储获取 introduction''
    const introduction = uni.getStorageSync('introduction');
    this.introduction = introduction || ''
  },
      methods: {
         shareToggle() {
            this.$refs.share.open()
      this.$refs.share.open();
         },
         //跳转页面
         ComparisonReport() {
            uni.navigateTo({
               url: '/pages/ComparisonReport/ComparisonReport'
            })
         },
         ReportDetails() {
            uni.navigateTo({
               url: '/pages/ReportDetails/ReportDetails'
            })
    onClick() {
      console.log('Card clicked');
         }
      },

   }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.uni-body {
  width: 100%;
  min-height: 500rpx;
}

/* 分享按钮样式 */
.share {
    width: 80rpx;
    height: 80rpx;
    background: #373E58;
   padding: 6rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  border-radius: 8rpx;
    opacity: 0.4;
    display: flex; /* 修复：添加 display: flex */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    color: #fff; /* 文字颜色设置为白色，与图标一致 */
    font-size: 24rpx; /* 调整文字大小 */
    position: fixed; /* 固定定位 */
    right: 20rpx; /* 距离屏幕右侧 20rpx */
    top: 50%; /* 垂直居中起点 */
    transform: translateY(-50%); /* 向上偏移自身高度的一半，实现居中 */
    z-index: 999; /* 确保在其他元素之上 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
  position: fixed;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

.share div {

   line-height: 16rpx;
}
.uni-body {
    width: 100%;
    min-height: 1560rpx;
}
.card-actions-item-text {
    font-size: 16px;
    color: #999;
}
.tips {
    margin-top: 20rpx;
}
.tips-title {
    font-weight: bold;
    font-size: 28rpx;
    margin-bottom: 10rpx;
}
.tips-list {
    font-size: 26rpx;
    line-height: 40rpx;
}
.tips-list text {
    display: block;
    margin-bottom: 10rpx;
}
.section-title {
    ::v-deep .uni-section__head {
        display: flex;
        align-items: center;

/* 确保 mp-html 渲染的图片适应容器 */
::v-deep .mp-html img {
  max-width: 100%;
        height: auto;
    }
    ::v-deep .uni-section__head__line {
        margin-right: 10rpx;
        align-self: flex-start;
    }
    ::v-deep .uni-section__content-title {
        font-weight: bold;

/* 优化 mp-html 渲染的文本样式 */
::v-deep .mp-html {
        font-size: 28rpx;
        line-height: 40rpx;
  color: #333;
    }

/* 标题样式 */
::v-deep .mp-html h1,
::v-deep .mp-html h2,
::v-deep .mp-html h3,
::v-deep .mp-html h4,
::v-deep .mp-html h5,
::v-deep .mp-html h6 {
  font-weight: bold;
  margin: 20rpx 0;
}

/* 列表样式 */
::v-deep .mp-html ul,
::v-deep .mp-html ol {
  padding-left: 40rpx;
}

/* 列表项样式 */
::v-deep .mp-html li {
  margin-bottom: 10rpx;
}
</style>