EOC-UI/src/components/legendDialog/DetailDiaog/YiLiaoJiGoDetailDialog.vue

<template>
  <div class="case_detail_container">
    <div class="dialog_container_header">
      <div class="dialog_container_header_title">详情</div>
      <div class="img_close" @click="handleClose">
        <img src="@/assets/img/弹窗关闭.png" alt="close" />
      </div>
    </div>

    <el-scrollbar class="scroll-box" :class="{'open_scroll-box':!expendFlag}">
      <div class="case_detail_body">
        <template v-for="(item, index) in displayItems" :key="index">
          <div>
            <div class="title" :class="{ spacing: item.spacing }">
              {{ item.label }}
              <span :class="item.spacing ? 'symbol2' : 'symbol'">:</span>
            </div>
            <span v-if="!item.isButton">{{ item.value }}</span>
            <div v-else class="btn">{{ item.value }}</div>
          </div>
        </template>
      </div>
      <!-- 折叠/展开按钮 -->
      <div class="collapse-box">
        <div class="icon-box" :class="{ 'up-icon': expendFlag }" @click="toggleShow"></div>
        <span class="text-box" @click="toggleShow">{{ !expendFlag ? '展开' : '收起' }}</span>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()

const expendFlag = ref(false)

// 数据源
const items = ref([
  { label: '机构名称', value: '第三社区医院卫生服务中心'},
  { label: '联系人姓名', value: '赵医生' },
  { label: '联系人电话', value: '021-64781051' },
  { label: '医护人员数量', value: '169' },
  { label: '救护车数量', value: '3' },
  { label: '地址', value: '上海市闵行区七宝镇富强街94号' },
  { label: '机构描述', value: '上海市闵行区七宝第三社区医院卫生服务中心始建于1958年，地处闵行区七宝镇富强街94号，2018年成功创建“上海市中医药特色示范社区卫生服务中心”，2019年10月成功挂牌为“上海市中医药大学附属社区卫生服务中心”，是一所全民所有制事业单位、综合性医院、上海市医保定点医院、上海市社区卫生综合改革、上海市示范社区卫生服务中心。中心下设1个航华分中心，国际、华林、万科、农南、静安新城、惠明苑、明心谷、皇都、航华三村、航华四村10个社区卫生服务站和20个家庭医生工作室。年门诊人次约100万，核定住院床位225张，其中舒缓疗护病床10张，康复联合病房床位11张，目前实际开放床位82张，在建家庭病床300余张。在职职工469人，其中专业技术人员411人，具有高级职称20人，中级职称250人，硕士研究生24人，本科学历284人，大专以上学历共438人。现有家庭医生65人，其中高级职称占1.54%，中级职称占93.85%，本科及以上学历占90.77%。' },

])

// 计算属性：根据状态切换显示数据
const displayItems = computed(() => (expendFlag.value ? items.value : items.value.slice(0, 5)))

// 切换折叠/展开
const toggleShow = () => {
  expendFlag.value = !expendFlag.value
}

// 关闭弹窗
const handleClose = () => {
  dialogStore.yiLiaoJiGoDetailDialogOpen=false
}
</script>
<style lang="scss" scoped>
.case_detail_container {
  width: 327px;
  max-height: 510px;
  position: absolute;
  right: -342px;
  top: 0px;
  background: url(@/assets/img/大面板.png) no-repeat;
  overflow: hidden;
}
.dialog_container_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 24px;
  color: rgba(255, 255, 255, 0);
  background: linear-gradient(0deg, #8b9bb5 0%, #d7e4fc 20.01953125%, #ffffff 87.3291015625%, #6b84b0 99.5849609375%);
  -webkit-background-clip: text;
}


.scroll-box {
  height: 410px;
}
.open_scroll-box{
   height: 210px;
}
.case_detail_body {
  width: 100%;
  // height: calc(100% - 55px);
  padding: 10px 0 0px 20px;
  box-sizing: border-box;

  > div {
    display: flex;
    // align-items: center;
    align-items: start;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 28px;

    // 标题部分
    .title {
      width: 80px; // 固定宽度
      display: flex;
      align-items: center;
      position: relative;
      white-space: nowrap;
      justify-content: space-between;

      // 两个字自动填充空格
      &.spacing {
        width: 69px;
        letter-spacing: 14px; // 控制字间距，保持等距
      }

      .symbol {
        position: absolute;
        top: 0px;
        right: -5px;
      }
      .symbol2 {
        position: absolute;
        top: 0px;
        right: -19px;
      }
    }

    // 内容区域
    span,
    .btn {
      // flex: 1;
      // text-align: left;
      margin-left: 11px;
    }

    // 按钮样式
    .btn {
      background: url('@/assets/img/按钮-短.png') no-repeat;
      background-size: 100% 100%;
      width: 84px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.collapse-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  .icon-box {
    width: 20px;
    height: 20px;
    background-image: url('@/assets/img/a-shouqi1 1@2x.png');
    background-size: 100% 100%;
    transform: rotate(-90deg);
    cursor: pointer;
  }
  .up-icon {
    transform: rotate(90deg);
  }
  .text-box {
    margin-left: 5px;
    font-family: Alibaba PuHuiTi;
    font-weight: normal;
    font-size: 18px;
    color: #04fafe;
    letter-spacing: 1px;
    text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>