diagnosis.admin/src/views/knowledge/XueweiD.vue

<template>
  <div class="xueweid flex-plane-center-l">
    <div class="left">
      <div class="back flex-center" @click="$router.back()">返回</div>
      <div class="content">
        <div class="name">穴位名称：{{info.acuname}}</div>
        <div class="text-blue">定位：</div>
        <div v-html="info.acuposotion"></div>
        <div class="text-blue">解剖：</div>
        <div v-html="info.acudiscection"></div>
        <div class="text-blue">主治：</div>
        <div v-html="info.acumaintreat"></div>
        <div class="text-blue">操作：</div>
        <div v-html="info.acuoperation"></div>
        <div class="text-blue">针刺：</div>
        <div v-html="info.acuneedling"></div>
      </div>
    </div>

    <div class="right">
      <div class="title flex-vertical-center-l">
        <span></span>
        <div>穴位图</div>
      </div>
      <div class="img">
        <img :src="info.acuimg" alt />
      </div>
      <!-- <div class="img">
                <img src="../../assets/xuewei1.jpg" alt="">
            </div>
            <div class="img">
                <img src="../../assets/xuewei2.jpg" alt="">
      </div>-->
    </div>
  </div>
</template>
<script>
import { getAcupointD } from "@/api/knowledge.js";
export default {
  data() {
    return {
      info: {},
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#C1C1C1", //滚动条颜色
          opacity: 0.5, //滚动条透明度
          "overflow-x": "hidden"
        }
      }
    };
  },
  created() {
    this.getAcupointD();
  },
  methods: {
    // 获取详情
    async getAcupointD() {
      let res = await getAcupointD({
        acuid: this.$route.query.acuid
      });
      if (res.code == 0) {
        res.data.acuimg = process.env.VUE_APP_XUEWEI + res.data.acuimg;
        this.info = res.data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.xueweid {
  // height: 100%;
  height: 82vh;

  .right {
    width: 230px;
    padding: 19px 12px;
    background: #ffffff;
    border-radius: 5px;
    margin-left: 10px;
    box-sizing: border-box;
    height: 100%;

    .title {
      margin-bottom: 26px;

      span {
        width: 3px;
        height: 14px;
        background: #9F643A;
        border-radius: 1px;
        margin-right: 6px;
      }

      div {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9F643A;
      }
    }

    .img {
      width: 194px;
      // height: 265px;

      img {
        width: 100%;
        background: red;
      }
    }
  }

  .left {
    height: 100%;
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 5px;

    .back {
      cursor: pointer;
      width: 74px;
      height: 36px;
      background: #9F643A;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 30px;
    }

    .content {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    .text-blue {
      color: #9F643A;
      margin: 15px 0;
    }
  }
}

// 滚动条位置
.xueweid ::v-deep .__bar-is-vertical {
  right: -1px !important;
}

// 隐藏横向滚动条
.xueweid ::v-deep .__bar-is-horizontal {
  display: none !important;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .xueweid {
    height: 89vh;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .xueweid {
    height: 88vh;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .xueweid {
    height: 83vh;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .xueweid {
    height: 83vh;
  }
}
</style>