RZGY/src/renderer/components/HealthDetail.vue

<template>
  <div class="main_right_height">
    <div class="">
      <div class="">
         <TopDes :flag="true" topDesFont="健康常识"></TopDes>
        <!-- <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22" class="navigation_card">
            <div style="display: flex">
              <i
                class="el-icon-arrow-left"
                style="cursor: pointer; line-height: 1.5"
                @click="goBack()"
              ></i>
              <span class="musicTitle">健康常识</span>
            </div>

          </el-col>
          <el-col :span="1"> &nbsp; </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22">
            <el-col>
                  <div
              class="flood-plan-page"
              ref="healthFlow"
              style="display: block; height: 80vh; margin-top: 10px"
            >
                 <iframe :src="url" frameborder="0" width='100%'  height='100%'  scrolling='yes'></iframe>
            </div>
             
              <!-- <div v-html='content'></div> -->
            </el-col>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
        </el-row>
        <el-row> </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { session } from "electron";
const fs = require("fs");
export default {
  data() {
    return {
      url: "",
      content:''
    };
  },
  //页面初始化函数
  created() {},
  mounted() {
    this.$route.query.name;
    this.$route.query.currentUrl;
    this.url = this.$route.query.currentUrl + this.$route.query.name+'\\index.html';
    console.log(this.url);
    this.readFileContent();
  },

  methods: {
    readFileContent(){
      this.content=  fs.readFileSync(this.url)
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.provinceClass >>> .el-input__inner {
  border-radius: 20px;
  border: 0px;
  background-color: #f4f4f4;
}
.wrap {
  width: 1280px;
  margin: 0 auto;
}
.cardList ul {
  display: flex;
  min-height: 562px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.cardList ul li {
  width: 180px;
  height: 221px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgb(87, 172, 187);
  border-radius: 4px;
  margin: 30px 35px;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .cardList ul li {
    margin: 30px 10px;
  }

  .wrap {
    width: 100%;
    margin: 0;
  }
}

.cardList ul li img {
  width: 180px;
  height: 112px;
}

.cardList ul li h2 {
  width: 142px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  color: #333333;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardList ul li p {
  font-size: 16px;
  color: #666666;
}
.cardList ul li .content {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #999999;
  margin-left: 9px;
}

.goDetail {
  margin: 5px 0 10px 9px;
}
.goDetail a {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #57acbb;
}
.pageNationBox {
  padding: 20px 10px;
  text-align: center;
}

.view-text {
  /**
	思路：
	1.设置inline-block属相
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  width: 960px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imgSiz {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}
.main_right_height {
  height: 100vh !important;
  display: block !important;
  overflow-y: auto !important;
  background: #fff;
}
.card {
  background: #fff;
  box-shadow: 0 3px 6px #57acbb;
  border-radius: 4px;
  display: block;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 80px;
}
.img_card {
  width: 100%;
  height: 100%;
}
.h3_card {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 20px;
  color: #333;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time_card {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 15px;
  color: rgb(171, 168, 168);
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xl_input >>> .el-input__inner {
  border: 0;
  border-radius: 20px;
  background-color: #f4f4f4;
}
.search_card {
  margin-left: 20px;
  margin-bottom: 20px;
}
.navigation_card {
  margin-left: 20px;
}
</style>