|
@@ -1,205 +0,0 @@
|
|
|
-<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>
|