|
|
@@ -1,89 +1,63 @@
|
|
|
<template>
|
|
|
<div class="box">
|
|
|
- <banner></banner>
|
|
|
- <div class="list">
|
|
|
- <el-row :gutter="14" class="type_f">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
|
|
|
- <div class="list_title">mRNA</div>
|
|
|
- <div class="slideBox">
|
|
|
- <img
|
|
|
- class="list_img"
|
|
|
- src="@/assets/img/banner/mRNA2.png"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- />
|
|
|
- <div class="slideBoxText">
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">mRNA Preparation</p></div>
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">mRNA-LNP Packaging & Quality control</p></div>
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Kits</p></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
|
|
|
- <div class="list_title">Mrna Mab</div>
|
|
|
- <div class="slideBox">
|
|
|
- <img
|
|
|
- class="list_img"
|
|
|
- src="@/assets/img/banner/mRNA3.png"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- />
|
|
|
- <div class="slideBoxText">
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Immunization</p></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
|
|
|
- <div class="list_title">Mrna Car-T</div>
|
|
|
- <div class="slideBox">
|
|
|
- <img
|
|
|
- class="list_img"
|
|
|
- src="@/assets/img/banner/mRNA4.png"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- />
|
|
|
- <div class="slideBoxText">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
|
|
|
- <div class="list_title">Application Cases</div>
|
|
|
- <div class="slideBox">
|
|
|
- <img
|
|
|
- class="list_img"
|
|
|
- src="@/assets/img/banner/mRNA5.png"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- />
|
|
|
- <div class="slideBoxText">
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Mrna Mab cases</p></div>
|
|
|
- <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Mrna Car-T cases</p></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import banner from "@/components/banner";
|
|
|
export default {
|
|
|
name: "indexIndex",
|
|
|
components: {
|
|
|
- banner
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ activeName: "",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: "overall",
|
|
|
+ icon: require("@/assets/img/home/icon1.png"),
|
|
|
+ title: "整体外包",
|
|
|
+ comment: "overall"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "stage",
|
|
|
+ icon: require("@/assets/img/home/icon2.png"),
|
|
|
+ title: "阶段外包",
|
|
|
+ comment: "stage"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "antibody",
|
|
|
+ icon: require("@/assets/img/home/icon3.png"),
|
|
|
+ title: "抗体产生",
|
|
|
+ comment: "antibody"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "grafting",
|
|
|
+ icon: require("@/assets/img/home/icon4.png"),
|
|
|
+ title: "赋能嫁接",
|
|
|
+ comment: "grafting"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "protein",
|
|
|
+ icon: require("@/assets/img/home/icon5.png"),
|
|
|
+ title: "蛋白业务",
|
|
|
+ comment: "protein"
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -93,88 +67,53 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</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 {
|
|
|
- .list {
|
|
|
+ .box /deep/ {
|
|
|
+ position: relative;
|
|
|
+ .banner{
|
|
|
+ width: 100%;
|
|
|
+ height: 649px;
|
|
|
+ }
|
|
|
+ .muen{
|
|
|
width: 1200px;
|
|
|
- margin: 30px auto 90px;
|
|
|
- .type_t {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 20%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .el-tabs__header{
|
|
|
+ background-color: #0C5ADB;
|
|
|
+ .el-tabs__nav-wrap:after{
|
|
|
display: none;
|
|
|
}
|
|
|
- .list_b {
|
|
|
- height: 260px;
|
|
|
- cursor: pointer;
|
|
|
- padding-top: 25px;
|
|
|
- .slideBox{
|
|
|
- .list_img {
|
|
|
- width: 100%;
|
|
|
- height: 160px;
|
|
|
- }
|
|
|
- .slideBoxText{
|
|
|
- width: 100%;
|
|
|
- height: 160px;
|
|
|
- background: #dff3fe;
|
|
|
- padding: 20px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #0053a8;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- display: none;
|
|
|
- .slideBoxcenter{
|
|
|
- display: flex;
|
|
|
- .slideBoxDrop{
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- .slideBoxTitle{
|
|
|
- padding-left: 10px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-tabs__nav-scroll{
|
|
|
+ .el-tabs__nav{
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- @keyframes move {
|
|
|
- 0% {
|
|
|
- transform: translate(0, 0);
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translate(0, 0);
|
|
|
- opacity: 1;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .slideBox:hover .list_img{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .slideBox:hover .slideBoxText{
|
|
|
- display: block;
|
|
|
- animation: move;
|
|
|
- animation-duration: .5s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- }
|
|
|
- .list_title {
|
|
|
- height: 50px;
|
|
|
- background: #055AA8;
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 5px;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 50px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
+ .is-active{
|
|
|
+ background-color: #1266F0 ;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .footerbox {
|
|
|
- display: none;
|
|
|
- }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</style>
|
