RZGY/src/renderer/components/intervene.vue

<template>
  <div class="main_right_height">
    <TopDes :flag="false" topDesFont="认知行为干预"></TopDes>
    <div class="intervene_content">
      <div
        class="intervene_item"
        v-for="item in interveneList"
        :key="item.id"
        @click="goDetail(item)"
      >
        <img :src="item.imgUrl" alt="" />
        <h2>{{ item.name }}</h2>
        <p style="font-size: 1vw">{{ item.title }}</p>
        <p>{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      interveneList: [
        {
          id: 1,
          imgUrl: require("../assets/newImage/rzgy1.png"),
          name: "战胜焦虑",
          title: "每天放松好心情",
          desc: "焦虑是个人对可能会出现的危险或威胁所产生的紧张、不安、忧虑、烦恼等不愉快的复杂情绪状态，CBT通过认知重构，暴露疗法，行为改变，放松训练等方法可以有效治疗焦虑。",
        },
        {
          id: 2,
          imgUrl: require("../assets/newImage/rzgy2.png"),
          name: "走出抑郁",
          title: "重新点燃生活的希望",
          desc: "抑郁症是一种以连续且长期的心情低落为主要特征的心理疾病，通过CBT的阶段治疗，配合认知重建，行为改变等治疗手段可有效缓解抑郁情绪。",
          url: "/treatDepression",
        },
        {
          id: 3,
          imgUrl: require("../assets/newImage/rzgy3.png"),
          name: "远离失眠",
          title: "甜蜜梦乡不是奢望",
          desc: "失眠和睡眠节律紊乱等睡眠障碍会对您的生活质量和身体健康产生严重影响，CBT治疗通过放松训练，睡眠限制治疗，刺激控制技术，睡眠健康教育等方法来改善睡眠障碍。",
        },
        {
          id: 4,
          imgUrl: require("../assets/newImage/rzgy4.png"),
          name: "克服应激",
          title: "与自己的身心和解",
          desc: "过度的应激或无法有效应对应激源可能会对个体的心理健康和生活产生负面影响，CBT可以通过放松训练，认知重建以及各种应对策略来处理应激源，有效缓解应激。",
        },
      ],
    };
  },
  activated() {},
  deactivated() {},
  mounted() {
   
  },
  methods: {
    goDetail(item) {
      // this.$router.push("/menu/treatDepression");
      this.$router.push({path:'/menu/treatDepression',query:{id:item.id}});
    },
  },
};
</script>
  <style scoped>
.main_right_height {
  display: block !important;
  height: 100vh;
  background: #ffffff;
  overflow-y: auto !important;
}
.mainTable-top {
  margin-top: 5%;
}
.mainTable-top-two {
  margin-top: 10%;
}
.mainTable-tab {
  cursor: pointer;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  border: 1px solid #000000;
  text-align: center;
  height: 150px;
  margin-bottom: 100px;
}
.mainTable-tab-p {
  padding-top: 40px;
}
.musicTitle {
  display: block;
  font-size: 18px;
  color: #57acbb;
  margin-bottom: 5px;
}
.pluse_tiao {
  background: rgb(52, 122, 255);
  border-radius: 100px;
}
.pluse_tiao_pl {
  font-weight: 600;
}
.pluse {
  width: 100%;
  height: 70vh;
  width: 100%;
}
.xl_d_button {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.xl_d_button:hover {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.xl_d_button:focus {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.statusNaoDuan {
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  width: 10px;
  height: 10px;
}
.statusNaoLink {
  border-radius: 50%;
  background-color: #42b983;
  display: inline-block;
  width: 10px;
  height: 10px;
}
.xl_d_button.is-disabled,
.xl_d_button.is-disabled:focus,
.xl_d_button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: rgb(87, 172, 187);
  border-color: #ebeef5;
}
.miaoz {
  position: absolute;

  right: 80px;

  bottom: 60px;
}

.intervene_content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;
}

.intervene_item {
  width: 17.6vw;
  height: 57.87vh;
  background: #f5f5f5;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  margin: 0 1.275vw;
  cursor: pointer;
}

.intervene_item h2 {
  padding-left: 10px;
  font-size: 1.25vw;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #0f0f0f;
}

.intervene_item p {
  padding-left: 10px;
  font-size: 0.83vw;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #4b4a4a;
}

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