<template>
  <div class="page flex-col">
    <SecondHeader :title="'COOPERATION'"
                  :bcUrl="bgHeaderUrl" :desc="'合作优势'"
                  :btn-group="[{
							name:'品牌介绍',
							url:'/brand',
							isSelect:true
						}]"/>
    <div class="group_3 flex-row">
      <div class="text-wrapper_4 flex-col">
        <span class="text_5">品牌故事</span>
        <span class="text_6">故事发生&nbsp;BRAND&nbsp;STORY</span>
        <span
            class="paragraph_1">2020年，阳生万物自愈舱创始研发人即中国科学院高级工程师苏洪泉，在被查出患有肺结节后，亲身感受到疾病带来的痛苦与对健康的渴望，出于对传统治疗方式的慎重思考，凭借自身对生命科学的热爱与钻研，开启自愈舱的研发之路，最终成功研发出阳生万物多模态物理复合能量场健康自愈技术。<br/><br/>自此，一个由苏洪泉领衔，来自清华大学、北京大学及国际顶尖实验室的临床和技术专家共同组成的核心科研团队，秉承“医工结合”的研发路径打破了单一能量模态健康自愈的技术壁垒，直接作用于细胞，让安全、有效的多模态物理能量场自愈技术设备“阳生万物自愈舱”成为细胞级修复激活自愈能力的新范式。<br/><br/>阳生万物核心技术团队在能量源及传感器领域拥有近四十年的创新研发经验，专业涉及生物医学、机械结构、软件、算法等，具有强大的研发和自主创新能力。<br/><br/>作为推进当今能量自愈新兴健康科技发展与中国高端健康设备的自主研发的创新品牌，阳生万物自愈舱实现了高端健康自愈设备的全流程自主研发、设计与制造，从效果和感受上不断升级“科技自愈”体验，用专业精神持久探寻细胞修复和科学力之间的新生密码。</span>
        <span class="text_7">“80岁之前无大病”</span>
        <span class="text_8">——&nbsp;创始研发人-苏洪泉</span>
      </div>
      <div class="image-wrapper_2 flex-col justify-between">
        <img class="image_3" src="@/assets/common/caidai.png"/>
        <img class="image_4" src="@/assets/brand/shq.png"/>
      </div>
      <div class="block_3 flex-col"></div>
    </div>
    <div class="group_4 flex-col">
      <div class="box_2 flex-col">
        <div class="section_1 flex-row justify-between">
          <span class="text_9">品牌介绍</span>
          <img class="image_6" src="@/assets/common/caidai2.png"/>
        </div>
        <div class="text-wrapper_5 flex-row">
          <span class="text_10">关于我们&nbsp;ABOUT&nbsp;US</span>
        </div>
      </div>
      <div class="box_3 flex-row">
        <div class="box_4 justify-center align-center">
          <div class="noHoverContent justify-center align-center flex-col">
            <img class="image_7" src="@/assets/brand/smysy.png"/>
            <span class="text_11">使命与愿景</span>
            <span class="text_12">01</span>
          </div>
          <div class="hoverContent justify-center align-center flex-col">
            <span class="text_13">01</span>
            <img class="image_9" src="@/assets/brand/smysy.png"/>
            <span class="text_14">使命与愿景</span>
            <div class="text-wrapper_6">
              <span class="text_15">核心产品</span>
              <span class="text_16">多模态物理能量自愈舱</span>
              <span
                  class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
              <span class="text_18">“细胞生物微动力修复理论”</span>
              <span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
              <span class="text_19">细胞激活：</span>
              <span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
              <span class="text_20">代谢优化：</span>
              <span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
              <span class="text_21">系统自愈：</span>
              <span class="text_22">多模态协同作用激活人体天然修复机制。</span>
            </div>
          </div>
        </div>
        <div class="box_5 justify-center align-center">
          <div class="noHoverContent justify-center align-center flex-col">
            <img class="image_7" src="@/assets/brand/hxjs.png"/>
            <span class="text_11">核心技术</span>
            <span class="text_12">02</span>
          </div>
          <div class="hoverContent justify-center align-center flex-col">
            <span class="text_13">02</span>
            <img class="image_9" src="@/assets/brand/hxjs.png"/>
            <span class="text_14">核心技术</span>
            <div class="text-wrapper_6">
              <span class="text_15">核心产品</span>
              <span class="text_16">多模态物理能量自愈舱</span>
              <span
                  class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
              <span class="text_18">“细胞生物微动力修复理论”</span>
              <span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
              <span class="text_19">细胞激活：</span>
              <span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
              <span class="text_20">代谢优化：</span>
              <span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
              <span class="text_21">系统自愈：</span>
              <span class="text_22">多模态协同作用激活人体天然修复机制。</span>
            </div>
          </div>
        </div>
        <div class="box_7 justify-center align-center">
          <div class="noHoverContent justify-center align-center flex-col">
            <img class="image_7" src="@/assets/brand/yfsl.png"/>
            <span class="text_11">研发实力</span>
            <span class="text_12">03</span>
          </div>
          <div class="hoverContent justify-center align-center flex-col">
            <span class="text_13">03</span>
            <img class="image_9" src="@/assets/brand/yfsl.png"/>
            <span class="text_14">研发实力</span>
            <div class="text-wrapper_6">
              <span class="text_15">核心产品</span>
              <span class="text_16">多模态物理能量自愈舱</span>
              <span
                  class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
              <span class="text_18">“细胞生物微动力修复理论”</span>
              <span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
              <span class="text_19">细胞激活：</span>
              <span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
              <span class="text_20">代谢优化：</span>
              <span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
              <span class="text_21">系统自愈：</span>
              <span class="text_22">多模态协同作用激活人体天然修复机制。</span>
            </div>
          </div>
        </div>
        <div class="box_8 justify-center align-center">
          <div class="noHoverContent justify-center align-center flex-col">
            <img class="image_7" src="@/assets/brand/cpyy.png"/>
            <span class="text_11">产品应用</span>
            <span class="text_12">04</span>
          </div>
          <div class="hoverContent justify-center align-center flex-col">
            <span class="text_13">04</span>
            <img class="image_9" src="@/assets/brand/cpyy.png"/>
            <span class="text_14">产品应用</span>
            <div class="text-wrapper_6">
              <span class="text_15">核心产品</span>
              <span class="text_16">多模态物理能量自愈舱</span>
              <span
                  class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
              <span class="text_18">“细胞生物微动力修复理论”</span>
              <span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
              <span class="text_19">细胞激活：</span>
              <span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
              <span class="text_20">代谢优化：</span>
              <span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
              <span class="text_21">系统自愈：</span>
              <span class="text_22">多模态协同作用激活人体天然修复机制。</span>
            </div>
          </div>
        </div>
        <div class="box_9 justify-center align-center">
          <div class="noHoverContent justify-center align-center flex-col">
            <img class="image_7" src="@/assets/brand/shzr.png"/>
            <span class="text_11">社会责任</span>
            <span class="text_12">05</span>
          </div>
          <div class="hoverContent justify-center align-center flex-col">
            <span class="text_13">05</span>
            <img class="image_9" src="@/assets/brand/shzr.png"/>
            <span class="text_14">社会责任</span>
            <div class="text-wrapper_6">
              <span class="text_15">核心产品</span>
              <span class="text_16">多模态物理能量自愈舱</span>
              <span
                  class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
              <span class="text_18">“细胞生物微动力修复理论”</span>
              <span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
              <span class="text_19">细胞激活：</span>
              <span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
              <span class="text_20">代谢优化：</span>
              <span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
              <span class="text_21">系统自愈：</span>
              <span class="text_22">多模态协同作用激活人体天然修复机制。</span>
            </div>
          </div>
        </div>
      </div>
      <span class="paragraph_5">阳生万物多模态物理能量自愈舱<br/>历时5年的潜心研究，7224平米的生产基地，20+项发明专利，约3474人次做舱数据积累。</span>
      <div class="box_10 justify-between flex-row">
        <div class=" flex-row justify-center align-center">
          <img class="image_16" src="@/assets/brand/qxyj.png"/>
          <span class="text_29">5</span>
          <div class="flex-col justify-between">
            <span class="text_30">年</span>
            <span class="text_31">潜心研究</span>
          </div>
        </div>

        <div class=" flex-row justify-center align-center">
          <img class="image_16" src="@/assets/brand/scjd.png"/>
          <span class="text_29">7224</span>
          <div class="flex-col justify-between">
            <span class="text_30">平方米+</span>
            <span class="text_31">生产基地</span>
          </div>
        </div>

        <div class=" flex-row  justify-center align-center">
          <img class="image_16" src="@/assets/brand/fmzl.png"/>
          <span class="text_29">20</span>
          <div class="flex-col justify-between">
            <span class="text_30">项+</span>
            <span class="text_31">发明专利</span>
          </div>
        </div>

        <div class=" flex-row justify-center align-center">
          <img class="image_16" src="@/assets/brand/zcsj.png"/>
          <span class="text_29">3474</span>
          <div class="flex-col justify-between">
            <span class="text_30">人+</span>
            <span class="text_31">做舱数据</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import SecondHeader from '../components/second_header.vue';
import bgHeaderUrl from '@/assets/brand/topBC.png'
</script>
<style src="./common.css"/>
<style scoped>
.page {
  position: relative;
  width: 100vw;
  height: 200vw;
  overflow: hidden;
}

.group_3 {
  width: 100vw;
  height: 56.36vw;
  background: url(@/assets/brand/contentBC2.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: -0.1vw;
}

.text-wrapper_4 {
  width: 42.45vw;
  height: 42.61vw;
  margin: 7.39vw 0 0 13.43vw;
}

.text_5 {
  background-image: linear-gradient(90deg,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 199, 218, 1) 100%,
  rgba(0, 199, 218, 1) 100%);
  overflow-wrap: break-word;
  color: rgba(0, 82, 217, 1);
  font-size: 2.5vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 2;
}

.paragraph_1 {
  width: 41.67vw;
  height: 26.15vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.67vw;
  margin-top: 2.66vw;
}

.text_7 {
  width: 16.57vw;
  height: 2.04vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 2.08vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.67vw;
  margin: 3.17vw 0 0 25.88vw;
}

.text_8 {
  width: 11.05vw;
  height: 1.05vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.67vw;
  margin: 1.04vw 0 0 30.67vw;
}

.image-wrapper_2 {
  width: 27.14vw;
  height: 42.71vw;
  margin: 7.39vw 0 0 3.43vw;
}

.image_3 {
  width: 2.09vw;
  height: 0.63vw;
  margin-left: 25.06vw;
}

.image_4 {
  width: 27.14vw;
  height: 36.46vw;
  margin-top: 5.63vw;
}

.block_3 {
  width: 11.46vw;
  height: 19.12vw;
  background: url(@/assets/common/erweima.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 7.39vw 1.04vw 0 1.04vw;
}

.group_4 {
  width: 100vw;
  height: 100vw;
  margin-bottom: 18.18vw;
}

.box_2 {
  height: 12.5vw;
  background: url(@/assets/brand/contentTiao.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 0.21vw;
  width: 100vw;
}

.section_1 {
  width: 72.87vw;
  margin: 3.95vw 0 0 13.59vw;
}

.text_9 {
  background-image: linear-gradient(90deg,
  rgba(255, 255, 255, 1) 0,
  rgba(255, 255, 255, 1) 0,
  rgba(0, 199, 218, 1) 100%,
  rgba(0, 199, 218, 1) 100%);
  overflow-wrap: break-word;
  color: rgba(0, 82, 217, 1);
  font-size: 2.5vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.image_6 {
  width: 2.09vw;
  height: 0.63vw;
}

.text-wrapper_5 {
  width: 17.82vw;
  height: 1.83vw;
  margin: 0.5vw 0 0 13.54vw;
}

.text_10 {
  width: 17.82vw;
  height: 1.83vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.box_3 {
  width: 100vw;
  height: 44vw;
  background: url(@/assets/brand/contentBC3.png) 100% no-repeat;
  background-size: 100% 100%;
}

.image_7 {
  width: 5vw;
  height: 3.96vw;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  margin: 6vw 0 2vw 0;
}

.text_12 {
  overflow-wrap: break-word;
  color: #6D7B99;
  font-size: 6.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: center;
}

.box_5 {
  width: 20vw;
  height: 43.75vw;
  border-left: 1px #fff solid;
  position: relative;
}

.hoverContent {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.noHoverContent {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box_5:hover .hoverContent {
  opacity: 1;
  visibility: visible;
  background: url(@/assets/brand/contentBC.png) 100% no-repeat;
  background-size: 100% 100%;
}

.box_5:hover .noHoverContent {
  opacity: 0;
  visibility: hidden;
}

.box_4 {
  width: 20vw;
  height: 43.75vw;
  position: relative;
}

.box_4:hover .hoverContent {
  opacity: 1;
  visibility: visible;
  background: url(@/assets/brand/contentBC.png) 100% no-repeat;
  background-size: 100% 100%;
}

.box_4:hover .noHoverContent {
  opacity: 0;
  visibility: hidden;
}

.box_7 {
  width: 20vw;
  height: 43.75vw;
  border-left: 1px #fff solid;
  position: relative;
}

.box_7:hover .hoverContent {
  opacity: 1;
  visibility: visible;
  background: url(@/assets/brand/contentBC.png) 100% no-repeat;
  background-size: 100% 100%;
}

.box_7:hover .noHoverContent {
  opacity: 0;
  visibility: hidden;
}


.box_8 {
  width: 20vw;
  height: 43.75vw;
  border-left: 1px #fff solid;
  position: relative;
}

.box_8:hover .hoverContent {
  opacity: 1;
  visibility: visible;
  background: url(@/assets/brand/contentBC.png) 100% no-repeat;
  background-size: 100% 100%;
}

.box_8:hover .noHoverContent {
  opacity: 0;
  visibility: hidden;
}


.box_9 {
  width: 20vw;
  height: 43.75vw;
  border-left: 1px #fff solid;
  position: relative;
}

.box_9:hover .hoverContent {
  opacity: 1;
  visibility: visible;
  background: url(@/assets/brand/contentBC.png) 100% no-repeat;
  background-size: 100% 100%;
}

.box_9:hover .noHoverContent {
  opacity: 0;
  visibility: hidden;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 8.33vw;
  margin-top: -6vw;
  line-height: 8vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: center;
}

.image_9 {
  width: 4.07vw;
  height: 4.07vw;
  margin-bottom: 1vw;
}

.text_14 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.text-wrapper_6 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
  margin-top: 2vw
}

.text_15 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.text_16 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  line-height: 1.36vw;
}

.text_17 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.text_18 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  line-height: 1.36vw;
}

.paragraph_2 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.text_19 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  line-height: 1.36vw;
}

.paragraph_3 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.text_20 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  line-height: 1.36vw;
}

.paragraph_4 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.text_21 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  line-height: 1.36vw;
}

.text_22 {
  width: 15.94vw;
  height: 18.55vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.36vw;
}

.box_7 {
  width: 20vw;
  height: 43.75vw;
}


.box_8 {
  width: 20vw;
  height: 43.75vw;
}


.box_9 {
  width: 20vw;
  height: 43.75vw;
}

.paragraph_5 {
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  line-height: 2.4vw;
  margin: 10.93vw 0 0 0;
}

.box_10 {
  width: 72.56vw;
  height: 3.81vw;
  margin: 5.72vw 0 13.8vw 13.69vw;
}

.image_16 {
  width: 3.18vw;
  height: 3.7vw;
}

.text_29 {
  overflow-wrap: break-word;
  color: rgba(0, 84, 217, 1);
  font-size: 4.16vw;
  font-family: DINEngsbek-Alternate;
  margin: 0 0.5vw;
}

.text_30 {
  overflow-wrap: break-word;
  color: rgba(0, 84, 217, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  position: relative;
  top: -0.5vw;
}

.text_31 {
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-M;
  font-weight: 500;
}
</style>