<template>
  <div class="hospital-page">
    <div class="banner">
      <img class="bg" src="./img/hospitalBanner.png" alt="">
      <div class="textBox">
        <span class="title">灵医<span style="color: rgb(0, 188, 188)">智能体</span></span>
        <span class="description"> 持续丰富能⼒ ｜ 赋能合作伙伴⽣产⼒升级</span>
        <span class="btnBox" @click="openTalk">秒接DeepSeek，立即体验</span>
      </div>
    </div>
    <div class="solve">
      <div class="title">智能体医疗行业综合解决方案</div>
      <ul class="menu">
        <li @click="currentMenuData = menuData['诊前就医助手']">诊前就医助手</li>
        <li @click="currentMenuData = menuData['健康管家']">健康管家</li>
        <li @click="currentMenuData = menuData['报告解读与生成']">报告解读与生成</li>
      </ul>
      <div class="menuContent">
        <div class="leftBox">
          <span class="textTitle">{{ currentMenuData.title }}</span>
          <p class="description">
            {{ currentMenuData.description }}</p>
          <ul class="tag">
            <li v-for="(item, index) in currentMenuData.tags" :key="index">{{ item }}</li>
          </ul>
          <div class="btn" @click="openTalk">立即体验</div>
        </div>
        <div class="rightBox">
          <img :src="currentMenuData.image" alt="">
        </div>
      </div>
    </div>

    <div class="zhinengti">
      <div class="title">智能体</div>
      <ul style="margin-top: 50px" class="exampleUl">
        <!-- <li>
          <div class="topBox">
            <span class="title">医学视觉溯源</span>
            <span class="description">识别各类医学影像图片，自动圈出病灶清晰边际</span>
            <span class="tag">精准识别各类医学影像/可视化边界参考/辅助诊断</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
             <img
              src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-lcfzjc.62ee97da.png&w=3840&q=75"
              alt="">
          </div>
        </li> -->
        <!-- <li>
          <div class="topBox">
            <span class="title">中医舌诊/面诊</span>
            <span class="description">AI中医助手支持舌象面部分析</span>
            <span class="tag">拓展中医新场景 / 提供日常调理建议 / 提供药物调理建议</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img
              src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-zyszmz.47a26b39.png&w=1200&q=75"
              alt="">
          </div>
        </li> -->
        <li>
          <div class="topBox">
            <span class="title">健康科普</span>
            <span class="description">权威医学知识，有问必答</span>
            <span class="tag">深入理解内容 / 检索权威医学知识 / 大模型生成答案 /结果证据溯源</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/jiankangkepu_8232c9b.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">医学报告解读</span>
            <span class="description">多类型多格式，高精准解读</span>
            <span class="tag">解读准确度高 / 解读范围覆盖多类型报告</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/yixuebaogao_6bd884b.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">药品咨询</span>
            <span class="description">海量药品说明书，答疑解难</span>
            <span class="tag">海量药品说明书 / 药品维度覆盖全面 / 大模型一对一问答</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/yaopinziuxn_97c4d07.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">皮肤病咨询</span>
            <span class="description">覆盖百余种皮肤病，大模型生成诊断建议</span>
            <span class="tag">全身皮肤拍照检测 / 皮肤类疾病可涵盖95%以上 / 皮肤图片医学解读</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/pifubingzixun_011a7a2.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">分导诊</span>
            <span class="description">精准推荐就诊科室，科室百分百覆盖</span>
            <span class="tag">多轮对话收集患者主诉 / 科室推荐准确率超95% / 大模型人机对话</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/fendaozhen_b113a82.png" alt="">
          </div>
        </li>

        <li>
          <div class="topBox">
            <span class="title">预问诊</span>
            <span class="description">多轮问诊生成病历，病历生成可用率超95%</span>
            <span class="tag">多轮对话收集患者主诉 / 病历生成可用率超95% / 大模型人机对话</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/yuwenzhen_e09f512.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">医疗知识库问答</span>
            <span class="description">海量数据资源，问答准确率业内领先</span>
            <span class="tag">检索文档数量上限超1万 / 医学问答准确率业内领先 / 兼容不同格式</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/yilaiozhishiwenda_f0d72c1.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">临床辅助决策</span>
            <span class="description">根据病情推荐诊断，诊断准确率超90%</span>
            <span class="tag">推荐内容有据可循 / 诊断覆盖全面 / 对话模式一问一答</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/linchuang_5166494.png" alt="">
          </div>
        </li>
        <li>
          <div class="topBox">
            <span class="title">症状自诊</span>
            <span class="description">病情自查自测，实时就医指导</span>
            <span class="tag">遵循医学诊疗规范 / 病情自查自测 / 实时就医指导 /健康问题覆盖全面</span>
            <span class="btn" @click="openTalk">立即体验</span>
          </div>
          <div class="bottonBox">
            <img src="https://bce.bdstatic.com/p3m/common-service/uploads/zhengzhuangzizhen_a6f413b.png" alt="">
          </div>
        </li>
        <li class="lastImg">
          <!-- <img
            src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-jqqd.a151e54f.png&w=1200&q=75"
            alt=""> -->

        </li>
      </ul>
    </div>
    <Talk></Talk>
  </div>
</template>
<script>
import Vue from 'vue'
import Talk from "@/views/homePage/dialog/talk/index.vue";

export default Vue.extend({
  name: "hospital",
  components: { Talk },
  data() {
    return {
      currentMenuData: {
        title: "诊前就医助手",
        description: "患者就诊前，可随时发起咨询。既能描述症状，获取专业回答，又能了解挂号、候诊等就医流程。系统通过多轮深入问诊，掌握病情信息、过往病史、生活习惯等细节，进而精准推荐适配的医院科室，可支持推荐对应医生。问诊结束后，可自动生成门诊病历，助力患者高效就医。",
        tags: ["提升医患双边体验", "助力医院智慧服务建设"],
        image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiuyi_8c82c42.png"
      },
      menuData: {
        "诊前就医助手": {
          title: "诊前就医助手",
          description: "患者就诊前，可随时发起咨询。既能描述症状，获取专业回答，又能了解挂号、候诊等就医流程。系统通过多轮深入问诊，掌握病情信息、过往病史、生活习惯等细节，进而精准推荐适配的医院科室，可支持推荐对应医生。问诊结束后，可自动生成门诊病历，助力患者高效就医。",
          tags: ["提升医患双边体验", "助力医院智慧服务建设"],
          image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiuyi_8c82c42.png"
        },
        "健康管家": {
          title: "健康管家",
          description: "在互联网医院、健康管理、患者管理等场景下，为患者提供一站式健康管家服务。通过 APP、小程序或 H5 页面，患者只需在一个对话框，就能发起健康咨询、药品咨询、检查检验报告解读、皮肤病图片咨询、症状咨询等各类健康问题。大模型结合专业知识库，迅速给出专业解答，让健康关怀触手可及。",
          tags: ["一站式健康咨询服务", "快速专业解答"],
          image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiankang_cb6b412.png"
        },
        "报告解读与生成": {
          title: "报告解读与生成",
          description: "面向基层医院或体检机构，能够为医生提供检查检验、体检报告的专业解读服务，助力基层医生迅速、精准地向患者阐释异常指标，科学评估疾病风险，高效开展健康管理工作。面向医院体检科与体检机构，辅助医生快速生成体检报告，优化工作流程，极大提升体检报告输出效率",
          tags: ["增强医患沟通效果", "优化报告生成流程", "提高工作效率"],
          image: "https://bce.bdstatic.com/p3m/common-service/uploads/baogaojiedu_51ec1c7.png"
        }
      }
    }
  },
  methods: {
    openTalk() {
      this.$store.commit('setShowTalk', true)
    },
  }
})
</script>


<style scoped lang="scss">
.banner {
  width: 100%;
  height: 480px;
  display: flex;
  background-color: #eaf5f8;
  position: relative;
  background-size: cover;

  .bg {

    position: absolute;
    width: 50%;
    height: 480px;
    right: 0px;


  }

  .title {
    font-size: 56px;
  }

  .textBox {
    margin: 120px 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;


    .description {
      color: #525252;
      font-size: 16px;
      margin-top: 25px;
      margin-bottom: 35px;
    }

    .btnBox {
      background-color: #1f1f1f;
      border-radius: 36px;
      color: #fff;
      padding: 14px 28px;
      cursor: pointer;
    }
  }
}

.solve {
  display: flex;
  ;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .title {
    text-align: center;
    color: #1f1f1f;
    font-weight: 500;
    font-size: 42px;
    margin: 30px 0;
    margin-top: 80px;
  }

  .menu {
    width: 1000px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 80px;

    li {
      margin: 10px;
      overflow: hidden;

      &:hover {
        cursor: pointer;
        background: #f5f5f5;
      }

      transition: all .3s ease-in-out;
      border-radius: 35px;
      height: 50px;
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }

  }
}

.menuContent {
  width: 1200px;
  height: 500px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 24px 0 hsla(0, 0%, 80%, .2);
  border-radius: 12px;

  .leftBox {
    padding: 72px 48px 60px;
    width: 50%;

    .textTitle {
      font-size: 36px;
      color: #1f1f1f;
    }

    .description {
      font-size: 16px;
      color: #1f1f1f;
      line-height: 1.6;
    }

    .tag {
      display: flex;

      li {
        background-color: #f5f5f5;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 14px;
        color: #525252;
        margin-right: 8px;
      }


    }

    .btn {
      margin-top: 50px;
      border-radius: 75px;
      border: 2px solid #000;
      font-size: 16px;
      color: #1f1f1f;
      padding: 10px 26px;
      cursor: pointer;
      width: fit-content;
    }

  }

  .rightBox {
    width: 50%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.zhinengti {
  margin: 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .title {
    font-size: 56px;
  }

  .exampleUl {
    width: 1250px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    li {
      margin-bottom: 15px;
      width: 49%;
      height: 560px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      border: 1px solid #e9e9e9;
      border-radius: 16px;
      overflow: hidden;

      .topBox {
        padding: 28px 32px 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;

        .title {
          font-weight: 500;
          font-size: 24px;
          color: #00bcbc;
        }

        .description {
          font-weight: 600;
          font-size: 16px;
          color: #1f1f1f;
          margin-top: 10px;
        }

        .tag {

          margin: 20px 0;
          margin-bottom: 0;
          font-size: 12px;
          color: #1f1f1f;
        }

        .btn {
          margin-top: 10px;
          border-radius: 8px;
          background-color: #1f1f1f;
          font-size: 14px;
          color: #fff;
          padding: 8px 12px;
          line-height: 1;
          cursor: pointer;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.lastImg {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
