python_93040206/ClientPlatform/src 2/pages/home/home.vue

<template>
  <div class="page-box">
    <div class="swiper-box">
      <div class="base">
        <div class="img">
          <img src="../../assets/home_0.png" alt="" />
        </div>
        <div class="text-box">
          <div class="title">What is DeepBIO?</div>
          <div class="content">
            DeepBIO is a user-friendly interpretable deep-learning platform for
            biological sequence functional analysis, such as sequence-level
            functional prediction and base-wise functional annotation. As for
            the sequence-level functional prediction, DeepBIO integrates a total
            of 42 state-of-the-art deep-learning approaches, and enables a
            one-stop-shop web service for researchers to develop a new deep
            learning architecture to answer any biological question. To be
            specific, given any biological sequence data, DeepBIO allows to
            train and evaluate deep-learning models, conduct model comparison
            and optimization, and provide a series of visualization analyses. As
            for the base-wise functional site annotation, DeepBIO offers
            well-pretrained deep-learning architectures for over 20 functional
            site annotation tasks, supports comprehensive interpretations and
            graphical visualizations of identified sites, and validates the
            reliability of the identified sites by conservation motif analysis.
          </div>
        </div>
      </div>
      <div class="base">
        <div class="text-box">
          <div class="title">What is DeepBIO?</div>
          <div class="content">
            DeepBIO is a user-friendly interpretable deep-learning platform for
            biological sequence functional analysis, such as sequence-level
            functional prediction and base-wise functional annotation. As for
            the sequence-level functional prediction, DeepBIO integrates a total
            of 42 state-of-the-art deep-learning approaches, and enables a
            one-stop-shop web service for researchers to develop a new deep
            learning architecture to answer any biological question. To be
            specific, given any biological sequence data, DeepBIO allows to
            train and evaluate deep-learning models, conduct model comparison
            and optimization, and provide a series of visualization analyses. As
            for the base-wise functional site annotation, DeepBIO offers
            well-pretrained deep-learning architectures for over 20 functional
            site annotation tasks, supports comprehensive interpretations and
            graphical visualizations of identified sites, and validates the
            reliability of the identified sites by conservation motif analysis.
          </div>
        </div>
        <div class="img">
          <img src="../../assets/home_1.png" alt="" />
        </div>
      </div>
      <div class="base">
        <div class="img">
          <img src="../../assets/home_2.png" alt="" />
        </div>
        <div class="text-box">
          <div class="title">What is DeepBIO?</div>
          <div class="content">
            DeepBIO is a user-friendly interpretable deep-learning platform for
            biological sequence functional analysis, such as sequence-level
            functional prediction and base-wise functional annotation. As for
            the sequence-level functional prediction, DeepBIO integrates a total
            of 42 state-of-the-art deep-learning approaches, and enables a
            one-stop-shop web service for researchers to develop a new deep
            learning architecture to answer any biological question. To be
            specific, given any biological sequence data, DeepBIO allows to
            train and evaluate deep-learning models, conduct model comparison
            and optimization, and provide a series of visualization analyses. As
            for the base-wise functional site annotation, DeepBIO offers
            well-pretrained deep-learning architectures for over 20 functional
            site annotation tasks, supports comprehensive interpretations and
            graphical visualizations of identified sites, and validates the
            reliability of the identified sites by conservation motif analysis.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      // modules: [Pagination],
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  watch: {
    tags() {
      console.log(119);
    },
  },

  mounted() {
    console.log(this.$route.query);
    if (this.$route.query.type === "reload") {
      this.$router.replace({
        name: "home",
      });
      window.location.reload();
    }
  },
  methods: {
    onSlideChange() {
      console.log("111");
    },
    scroll() {
      // 获取当前 swiper-wrapper 元素的 left 值，即偏移量
      const wrapperLeft = this.$refs.mySwiper.wrapperEl.style.left;
      // 将 left 值转换为数值
      const left = parseInt(wrapperLeft);
      // 计算当前滚动位置对应的 slide 的索引值
      const currentIndex = -left / this.$refs.mySwiper.slidesGrid[0];
      // 切换到下一个或上一个 slide
      if (this.$refs.mySwiper.progress > 0.5) {
        this.$refs.mySwiper.slideNext();
      } else {
        this.$refs.mySwiper.slidePrev();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-box {
  .swiper-box {
    height: calc(100vh - 67px);
    //overflow: hidden;
    //position: relative;

    .base {
      width: 100%;
      //height: 100%;
      height: calc(80vh - 67px);
      padding: 20px 50px;
      box-sizing: border-box;
      display: flex;
      //flex-direction: row;
      //align-items: center;

      .img {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35%;

        img {
          width: 100%;
          display: block;
        }
      }

      .text-box {
        box-sizing: border-box;
        flex: 1;
        padding: 40px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
          box-sizing: border-box;
          margin: 20px 0;
          //margin: 0px;
          font-family: Roboto, Helvetica, Arial, sans-serif;
          font-size: 2.125rem;
          line-height: 1.235;
          letter-spacing: 0.00735em;
          font-weight: 700;
        }

        .content {
          box-sizing: border-box;
          width: 100%;
        }
      }

      .text {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }

    .other-box {
      margin-top: 1px;
    }
  }
}
</style>