|
|
@@ -1,20 +1,45 @@
|
|
|
<template>
|
|
|
<div class="box">
|
|
|
- <div class="banner">
|
|
|
- <img class="banner_img" src="@/assets/img/home/banner.png" alt="" srcset="">
|
|
|
- </div>
|
|
|
- <div class="muen">
|
|
|
- <el-tabs v-model="activeName" tab-position="left" style="height:400px;">
|
|
|
- <el-tab-pane v-for="(one, i) in list" :key="i" :name="one.name">
|
|
|
- <div class="tab-title" slot="label">
|
|
|
- <img class="icon" :src="one.icon" alt="" srcset="">
|
|
|
- {{one.title}}
|
|
|
- </div>
|
|
|
- <div class="contetn_box">
|
|
|
- {{one.title}}
|
|
|
+ <div class="banner_box">
|
|
|
+ <div class="hoem_box">
|
|
|
+ <img class="backout_img" src="@/assets/img/bannerLogo.jpg" alt="" srcset="" />
|
|
|
+ <img class="backout_img_move" src="@/assets/img/bannerMove.jpg" alt="" srcset="" />
|
|
|
+ <div class="banner_content">
|
|
|
+ <p class="banner_t">SY-CRS-BsAb</p>
|
|
|
+ <p class="banner_c">Sanyou Bispecific Reference Antibody Catalog is generated through our proprietary high-quality bispecific antibody preparation platform, which include majority bispecific antibody drugs that have been approved for market release, and representative drugs in different clinical stages.</p>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 数据 -->
|
|
|
+ <div class="list">
|
|
|
+ <el-row :gutter="60" class="type_f">
|
|
|
+ <el-col :span="8" v-for="(item, index) in tabList" :key="index">
|
|
|
+ <div class="list_b" @click="$util.goRoute({ name: item.url })">
|
|
|
+ <img
|
|
|
+ class="list_img"
|
|
|
+ :src="item.img"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ />
|
|
|
+ <div class="list_title">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="type_t">
|
|
|
+ <el-col :span="8" v-for="(item, index) in tabList" :key="index">
|
|
|
+ <div class="list_b" @click="$util.goRoute({ name: item.url })">
|
|
|
+ <img
|
|
|
+ class="list_img"
|
|
|
+ :src="item.img"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ />
|
|
|
+ <div class="list_title">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -25,37 +50,24 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- activeName: "",
|
|
|
- list: [
|
|
|
- {
|
|
|
- name: "overall",
|
|
|
- icon: require("@/assets/img/home/icon1.png"),
|
|
|
- title: "整体外包",
|
|
|
- comment: "overall"
|
|
|
- },
|
|
|
+ tabList: [
|
|
|
{
|
|
|
- name: "stage",
|
|
|
- icon: require("@/assets/img/home/icon2.png"),
|
|
|
- title: "阶段外包",
|
|
|
- comment: "stage"
|
|
|
+ id: 1,
|
|
|
+ url: "overView",
|
|
|
+ img: require("@/assets/img/home/1.png"),
|
|
|
+ name: "Overview"
|
|
|
},
|
|
|
{
|
|
|
- name: "antibody",
|
|
|
- icon: require("@/assets/img/home/icon3.png"),
|
|
|
- title: "抗体产生",
|
|
|
- comment: "antibody"
|
|
|
+ id: 2,
|
|
|
+ url: "product",
|
|
|
+ img: require("@/assets/img/home/2.png"),
|
|
|
+ name: "Product"
|
|
|
},
|
|
|
{
|
|
|
- name: "grafting",
|
|
|
- icon: require("@/assets/img/home/icon4.png"),
|
|
|
- title: "赋能嫁接",
|
|
|
- comment: "grafting"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "protein",
|
|
|
- icon: require("@/assets/img/home/icon5.png"),
|
|
|
- title: "蛋白业务",
|
|
|
- comment: "protein"
|
|
|
+ id: 3,
|
|
|
+ url: "",
|
|
|
+ img: require("@/assets/img/home/3.png"),
|
|
|
+ name: "BsAb Reference Catalog "
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -64,56 +76,380 @@ export default {
|
|
|
},
|
|
|
mounted() {},
|
|
|
created() {
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+.site-header-suggestion-select {
|
|
|
+ .el-autocomplete-suggestion__wrap {
|
|
|
+ max-height: 380px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
@media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
- .box /deep/ {
|
|
|
- position: relative;
|
|
|
- .banner{
|
|
|
- width: 100%;
|
|
|
- height: 649px;
|
|
|
+ .box {
|
|
|
+ .banner_box {
|
|
|
+ .hoem_box {
|
|
|
+ position: relative;
|
|
|
+ .backout_img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .banner_content{
|
|
|
+ width: 1200px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: #fff;
|
|
|
+ .banner_t{
|
|
|
+ width: 600px;
|
|
|
+ font-size: 48px;
|
|
|
+ }
|
|
|
+ .banner_c{
|
|
|
+ width: 600px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ margin-top: 20px;
|
|
|
+ word-wrap:break-word;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .backout_img_move{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hoem_box {
|
|
|
+ position: relative;
|
|
|
+ .backout_img {
|
|
|
+ width: 100%;
|
|
|
+ // height: 32.5rem;
|
|
|
+ // height: 698px;
|
|
|
+ height: 30rem;
|
|
|
+ }
|
|
|
+ .backout_img_move{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .clout {
|
|
|
+ position: absolute;
|
|
|
+ // max-width: 60.875rem;
|
|
|
+ // min-width: 50%;
|
|
|
+ width: 1200px;
|
|
|
+ // width: auto;
|
|
|
+ // top: 60%;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -35%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ font-size: 3.75rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .title_img{
|
|
|
+ margin-bottom: 1.8rem;
|
|
|
+ width: 14.5rem;
|
|
|
+ }
|
|
|
+ .title_d {
|
|
|
+ font-size: 2rem;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0D2031;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .clout_box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 2rem;
|
|
|
+ .clout_box_content{
|
|
|
+ width: 24%;
|
|
|
+ // height: 9rem;
|
|
|
+ padding: 1rem 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 1px;
|
|
|
+ opacity: 0.8;
|
|
|
+ .clout_box_img{
|
|
|
+ margin: 0.2rem 0rem 0.5rem;
|
|
|
+ }
|
|
|
+ .clout_box_num{
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #0D2031;
|
|
|
+ line-height: 1.3rem;
|
|
|
+ }
|
|
|
+ .clout_box_text{
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ // color: #0D2031;
|
|
|
+ color: #000;
|
|
|
+ line-height: 1.3rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input /deep/ {
|
|
|
+ width: 60%;
|
|
|
+ margin: 3.2rem auto 0;
|
|
|
+ .input-with-select {
|
|
|
+ height: 3.375rem;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 3.375rem;
|
|
|
+ &:focus {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ width: 3.375rem;
|
|
|
+ background-color: #0053a8;
|
|
|
+ border: none;
|
|
|
+ .el-icon-search {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .muen{
|
|
|
+ .list {
|
|
|
width: 1200px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 20%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ // width: 62.5%;
|
|
|
+ margin: 30px auto 90px;
|
|
|
+ .type_t {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list_b {
|
|
|
+ height: 261px;
|
|
|
+ cursor: pointer;
|
|
|
+ // background: #F6FAFF;
|
|
|
+ padding-top: 25px;
|
|
|
+ .list_img {
|
|
|
+ display: block;
|
|
|
+ width: 154px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .list_title {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ // background: linear-gradient(0deg, rgba(250,242,255,0.76), rgba(226,248,255,0.76));
|
|
|
+ .list_title{
|
|
|
+ color: #055AA8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footerbox {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 751px) and (max-width: 1200px) {
|
|
|
+ .title {
|
|
|
+ font-size: 40px !important;
|
|
|
+ }
|
|
|
+ .title_d {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ .clout{
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 0 20px !important;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 0 20px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 0px) and (max-width: 750px) {
|
|
|
+ .box {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .banner_box {
|
|
|
+ .hoem_box {
|
|
|
+ position: relative;
|
|
|
+ .backout_img_move {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .banner_content{
|
|
|
+ position: absolute;
|
|
|
+ left: 0.2rem;
|
|
|
+ right: 0.2rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0%,-50%);
|
|
|
+ color: #fff;
|
|
|
+ .banner_t{
|
|
|
+ font-size: 0.28rem;
|
|
|
+ }
|
|
|
+ .banner_c{
|
|
|
+ font-size: 0.1rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ word-wrap:break-word;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .backout_img{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentbox {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
- .el-tabs__header{
|
|
|
- background-color: #0C5ADB;
|
|
|
- .el-tabs__nav-wrap:after{
|
|
|
+ .hoem_box {
|
|
|
+ position: relative;
|
|
|
+ .backout_img {
|
|
|
display: none;
|
|
|
}
|
|
|
- .el-tabs__nav-scroll{
|
|
|
- .el-tabs__nav{
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .el-tabs__item{
|
|
|
- color: #fff;
|
|
|
- width: 200px;
|
|
|
- line-height: 80px;
|
|
|
- height: 80px;
|
|
|
- .tab-title{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- line-height: 80px;
|
|
|
- height: 80px;
|
|
|
- .icon{
|
|
|
- display: inline-block;
|
|
|
- width: 16px;
|
|
|
- margin-right: 10px;
|
|
|
+ .backout_img_move{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .clout {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0.12rem;
|
|
|
+ position: absolute;
|
|
|
+ // width: auto;
|
|
|
+ top: 55%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ font-size: 0.2rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .title_img{
|
|
|
+ width: 35%;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+ }
|
|
|
+ .title_d {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #0D2031;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 0.6rem;
|
|
|
+ }
|
|
|
+ .clout_box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ .clout_box_content{
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ width: 48%;
|
|
|
+ padding: 0.05rem 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 1px;
|
|
|
+ opacity: 0.9;
|
|
|
+ .clout_box_img{
|
|
|
+ width: .3rem;
|
|
|
+ }
|
|
|
+ .clout_box_num{
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: .1rem;
|
|
|
+ color: #0D2031;
|
|
|
+ line-height: .13rem;
|
|
|
+ }
|
|
|
+ .clout_box_text{
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: .1rem;
|
|
|
+ // color: #0D2031;
|
|
|
+ color: #000;
|
|
|
+ line-height: .13rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input /deep/ {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0.3rem auto 0;
|
|
|
+ .input-with-select {
|
|
|
+ height: 0.375rem;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 0.375rem;
|
|
|
+ &:focus {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ width: 0.375rem;
|
|
|
+ background-color: #0053a8;
|
|
|
+ border: none;
|
|
|
+ .el-icon-search {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .is-active{
|
|
|
- background-color: #1266F0 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0.2rem auto;
|
|
|
+ padding: 0 0.12rem;
|
|
|
+ .type_f {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .type_t {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .list_b {
|
|
|
+ // height: 200px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #F6FAFF;
|
|
|
+ // background-color: #0053a8;
|
|
|
+ padding-top: 25px;
|
|
|
+ .list_img {
|
|
|
+ display: block;
|
|
|
+ width: 90px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .list_title {
|
|
|
+ padding: 0 0.02rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ margin-top: 0.08rem;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ // color: #005bab;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background: linear-gradient(0deg, rgba(250,242,255,0.76), rgba(226,248,255,0.76));
|
|
|
+ .list_title{
|
|
|
+ color: #055AA8;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
</style>
|
