com.kasite.client.uniapp.patient/pagesPatient/st1/components/doctorInfo/doctorInfo.vue

<template>
  <view :class="['doctorInfo', doctorInfoIsShow ? 'doctorInfo_show' : '']" @click="cancelInfo">
    <view class="doctorInfo_box" @click.stop>
      <view class="pop_box box_radius displayFlexRow">
        <text class="tit">{{doctorInfo.DoctorName}}</text>
        <image class="arrow_icon" :src="iconUrl.icon_commonDel" @click="cancelInfo"></image>
      </view>
      <view class="doctorInfo_box_main">
        <view class="doctor_info_item">
          <text>科室：</text>
          <text>{{doctorInfo.DeptName}}</text>
        </view>
        <view class="doctor_info_item">
          <text>职称：</text>
          <text>{{doctorInfo.Title || doctorInfo.DoctorTitle || doctorInfo.LczcName || '医生'}}</text>
        </view>
        <view class="doctor_info_item">
          <text>擅长：</text>
          <text>{{doctorInfo.Spec || doctorInfo.DoctorSkill || '暂无擅长信息'}}</text>
        </view>
        <view class="doctor_info_item">
          <text>介绍：</text>
          <text>{{doctorInfo.Intro || doctorInfo.DoctorIntro || '暂无介绍信息'}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits,ref } from 'vue';
import icon from '@/utils/icon';

const iconUrl = ref(icon)

const props = defineProps({
  doctorInfo: {
    type: Object,
    default: () => ({})
  },
  doctorInfoIsShow: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:doctorInfoIsShow', 'close']);

const cancelInfo = () => {
  emit('update:doctorInfoIsShow', false);
  emit('close');
};
</script>

<style lang="scss" scoped>
.doctorInfo {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background-color: transparent;
  /* transition: background-color 0s, top 0.5s linear 0s; */
}
.doctorInfo_show {
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  /* transition: top 0.5s, background-color 0.5s linear 0.5s; */
}
/* 医生详情框 */
.doctorInfo_box {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 24upx 24upx 0px 0px;
  padding-top: 48upx;
}

.doctorInfo_box_main {
  max-height: 700upx;
  overflow: auto;
  padding: 30upx;
}

.pop_box {
  width: 100%;
  height: 10%;
  position: relative;
  background: white;
  padding: 0 30upx;
  position: relative;
}

.pop_box .tit {
  font-size: 36upx;
  font-weight: bold;
  text-align: center;
  display: block;
}

.pop_box .arrow_icon {
  width: 30upx;
  height: 30upx;
  position: absolute;
  top: 50%;
  right: 40upx;
  margin-top: -15upx;
}

.box_radius {
  border-radius: 20upx 20upx 0 0;
}

.pop-box,
.doctor_info_item text:nth-child(1) {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333;
}

.pop-box .tit {
  display: inline-block;
  width: 100%;
  line-height: 100upx;
  font-size: 36upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.pop-box image {
  width: 30upx;
  height: 30upx;
  position: absolute;
  top: 50%;
  right: 30upx;
  margin-top: -15upx;
}

.doctor_info_item {
  margin-bottom: 47upx;
  /* align-items: flex-start; */
}

.doctor_info_item text:nth-child(2) {
  font-size: 32upx;
  font-family: PingFang SC;
  color: #666;
  line-height: 48upx;
}


/* 适老版 */
.concise.info_inner {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 24upx 24upx 0px 0px;
  padding-top: 48upx;
}

.concise .infoBox{
  max-height: 600upx;
  overflow: auto;
}

.concise .info_tit {
  text-align: center;
  font-size: 44upx;
  font-family: PingFang SC;
  font-weight: 700;
  color: #222326;
  padding-bottom: 80upx;
}

.concise .tip_cha {
  width: 34upx;
  height: 34upx;
  position: absolute;
  right: 36upx;
  top: 50upx;
}

.concise .info_item {
  width: 100%;
  display: flex;
  padding: 0 32upx 24upx;
}

.concise .info_item_tit {
  min-width: 120upx;
  font-size: 40upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #222326;
}

.concise .info_item_val {
  font-size: 36upx;
  font-family: PingFang SC;
  color: #43434A;
  line-height: 48upx;
  text-align: justify;
  line-height: 65upx;
} 
</style>