FE_IASF_client/src/pages/deviceIntroLinear/index.vue

<template>
  <div class="wrap">
    <div class="banner">装置介绍</div>

    <div class="block history gray">
      <div class="inner">
        <h2 class="wow fadeInLeft">超导直线加速器-1</h2>
        <p class="en">Superconducting linac -1</p>
        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
          <div class="left">
            <h6>{{ modules[0].form.title }}</h6>
            <div class="line"></div>
            <div class="text">{{ modules[0].form.des }}</div>
          </div>
          <img class="bg" src="@/assets/images/device/10.png" alt="" />
          <div class="imgText"><div class="readio"></div>S³FEL电子枪光电效应示意图</div>
        </div>
      </div>
    </div>

    <div class="block intro">
      <div class="inner">
        <div class="left">
          <h5>S³FEL超导直线加速器示意图</h5>
          <img src="@/assets/images/device/11.png" alt="" />
        </div>
        <div class="right">
          <h6>S³FEL超导直线加速器性能指标</h6>
          <img src="@/assets/images/device/12.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page';
import WOW from 'wow.js';
export default {
  mixins: [mixins],
  data() {
    return {};
  },
  mounted() {
    new WOW().init();
  },
  methods: {
    // 获取文章详情
    getInfo() {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
        .then(({ data }) => {
          if (data.length) {
            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
            const json = JSON.parse(
              this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
            );
            this.modules = json;
            console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
          }
        })
        .catch((err) => { });
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';

.banner {
  background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
  font-weight: bold;
  height: 17.5rem;
  padding: 10.68rem 0 0 16.15rem;
  font-size: 2.16rem;
}
.block  {
  padding: 3.85rem 0;
  .inner {
    h2 {
      font-size: 1.76rem;
    }
    .en {
      font-size: 1.76rem;
      margin: 0px 0 2rem;
    }
  }
}
.history {
  .inner {
    width: 1200px;
    max-width: 1504px;
  }

  h2 {
    position: relative;
    font-size: 1.76rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1c1c1c;
  }

  .en {
    margin: -25px 0 40px;
    font-size: 2.2rem;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #e3e3e3;
  }

  .texts {
    display: flex;
    justify-content: space-between;
    padding: 5.125rem 0 1.875rem 2.375rem;
    margin-top: 20px;
    background: #1583ff;
    border-radius: 65px 100px 0px 0px;
    transition: 0.3s;
    position: relative;
    .imgText {
    position: absolute;  
    right: 3rem;
    bottom: 5.25rem;
    display: flex;
    font-size: 1.125rem;
    color: #FFFFFF;
    font-weight: 400;
    .readio {
      width: 7px;
      height: 7px;
      background-color: #FFFFFF;
      border-radius: 50%;
      margin-right: 10px;
      margin-top: 8px;
    }
  }

    &:hover {
      transform: scale(1.05);
    }
  }

  .left {
    width: 50%;
  }

  h6 {
    font-size: 1.4rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .line {
    width: 214px;
    height: 5px;
    margin: 54px 0 44px;
    background: #ffffff;
    opacity: 0.52;
  }

  .text {
    font-size: 1.1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 44px;
  }

  .bg {
    width: 50%;
    margin: -8.875rem -3.125rem 0 0;
    border-top-left-radius: 30px;
  }
}

.intro {
  .inner {
    display: flex;
  }

  .left {
    width: 30%;
  }

  .right {
    width: 68%;
    margin-left: 2%;
  }

  h5 {
    margin-bottom: .93rem;
    font-size: .88rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2a2a2a;
  }

  h6 {
    padding-left: .93rem;
    margin-bottom: .93rem;
    font-size: .88rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2a2a2a;
    border-left: 4px solid #1583ff;
  }

  img {
    width: 100%;
    height: 85%;
  }
}

/* 小于400 */
@media (min-width: 280px) and (max-width: 620px) {
  .inner {
    flex-direction: column;

    .left,
    .right {
      width: 50%;
      margin: 20px auto;
    }

 
  }

  .history {
    .left {
      .line {
        width: 100%;
      }
    }
  }
  .block {
    padding: 50px 0;
    .inner{
      .texts {
        .bg {
          width: 100%;height: 200px;
          margin: -50px 0px 0 0;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  body {
    width: 100% !important;
  }

  .history {
    .bg {
      margin: -142px -0px 0 0;
    }
  }

  .inner {
    flex-direction: column;

    .left,
    .right {
      width: 95%;
      margin: 20px auto;
    }
  }
}
@media (max-width: 320px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
@media (min-width: 320px) and (max-width: 375px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
 @media (min-width: 375px) and (max-width: 480px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
@media (min-width: 480px) and (max-width: 640px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
@media (min-width: 640px) and (max-width: 768px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
@media (min-width: 768px) and (max-width: 980px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
@media (min-width: 980px) and (max-width: 1200px) {
  .banner{
    height: 12rem;
    padding: 6rem 0 0 2rem;
  }
  .block  {
    .inner {
      width: 100%;
    }
  }
}
</style>