301hospital/web/src/views/digital/tips.vue

<template>
  <div class="aside">
    <div class="asidecon brightness">
      <div class="img">
        <img :src="require(`@/assets/images/digital/tips.jpg`)" alt="" />
      </div>

      <div class="atitle">
        <p class="qtitle">数字沙盘用户说明</p>
        <div class="qline">
          <img :src="require(`@/assets/images/icon/star.png`)" alt="" />
        </div>
      </div>


      <div class="intro">
        <span>点击可以查看对应医学中心或医疗区详情</span>
        <img :src="require(`@/assets/images/project/enter.png`)" alt="" />
      </div>
    </div>

    <img @click="$emit('close'), (active = 'star1_1')" class="close" :src="require('@/assets/images/project/cancel.png')" alt="" />

  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },

};
</script>

<style lang="less" scoped>
@w: 895px;
.aside {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease all;
  z-index: 999;
  color: #fff;
  .tabul {
    position: absolute;
    bottom: 74px;
    right: 50px;
    font-size: 0;
    z-index: 99999;
    
    > li {
      display: inline-block;
      min-width: 150px;
      height: 55px;
      line-height: 55px;
      margin: 0 auto;
      position: relative;
      padding: 0 20px;
      cursor: pointer;
      font-size: 18px;
      margin: 0 10px;
      background: rgba(255, 255, 255, 0.3);
      color: #fff;
      &.active {
        background: rgba(78, 86, 144, 1);
      }
    }
  }
  .asidecon {
    // background: linear-gradient(180deg, rgba(165, 177, 236, 0.7) 0%, rgba(134, 145, 199, 0.7) 100%);
    width: 100%;
    // clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    height: 100%;
    padding: 62px 78px;
    .atitle {
      margin: 45px auto 0;
      width: @w;

      .qtitle {
        width: 100%;
        height: 24px;
        font-size: 24px;
        display: inline-block;
        font-weight: bold;
        line-height: 38px;
        text-align: center;
        color: #fff;
      }
      .qline {
        width: 100%;
        height: 1px;
        margin: 26px 0;
        position: relative;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 48%, rgba(255, 255, 255, 0) 100%);
        > img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 32px;
          top: -12px;
        }
      }
    }
    .img {
      width: 880px;
      margin: 20px auto;
      position: relative;
      min-height: 460px;
      max-height: 500px;
      overflow: hidden;
      > img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .desc {
      text-align: justify;
      width: @w;
      margin: 0 auto;
      > p {
        line-height: 1.8;
        font-size: 20px;
        max-height: 10vh;
        overflow-y: auto;
        padding-right: 10px;
      }
    }

    .intro {
      margin: 30px auto 0;
      background: rgba(65, 74, 199, 0.4);
      height: 66px;
      line-height: 66px;
      position: relative;
      display: inline-block;
      padding: 0 90px;
      cursor: pointer;
      > span {
        font-size: 24px;
        width: 100%;
        display: inline-block;
      }
      > img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
      }
    }
  }

  .close {
    position: absolute;
    top: 45px;
    right: 50px;
    width: 54px;
    height: 54px;
    cursor: pointer;
    z-index: 9999999;
  }
}
</style>