<template> <div class="box"> <banner></banner> <p class="list_title">{{ $t("nav.AntibodyDatabase") }}</p> <div class="article"> <template> <el-table :data="overView" stripe empty-text="Not Date" style="width: 100%" @row-click="gotoArticle"> <el-table-column prop="catalog" :label="$t('AntibodyDatabase.CatNo')" width="100"/> <el-table-column prop="name" :label="$t('AntibodyDatabase.AntibodyName')" width="400"/> <el-table-column prop="target" :label="$t('AntibodyDatabase.Target')" > <template slot-scope="scope"> <!-- <span v-for="(one, i) in scope.row.targetList" :key="i"> {{ one }} </span> --> <span>{{ $util.targetDictionaries(scope.row.target) }}</span> </template> </el-table-column> <el-table-column prop="moa" :label="$t('AntibodyDatabase.MOA')" /> <el-table-column prop="company" :label="$t('AntibodyDatabase.Inventor')" /> </el-table> </template> </div> <div class="articleMove"> <template> <el-table :data="overView" stripe empty-text="Not Date" style="width: 100%" @row-click="gotoArticle"> <el-table-column prop="catalog" :label="$t('AntibodyDatabase.CatNo')" /> <el-table-column prop="name" :label="$t('AntibodyDatabase.AntibodyName')" /> <el-table-column prop="target" :label="$t('AntibodyDatabase.Target')" > <template slot-scope="scope"> <!-- <span v-for="(one, i) in scope.row.targetList" :key="i"> {{ one }} </span> --> <span>{{ $util.targetDictionaries(scope.row.target) }}</span> </template> </el-table-column> <el-table-column prop="moa" :label="$t('AntibodyDatabase.MOA')" /> <el-table-column prop="company" :label="$t('AntibodyDatabase.Inventor')" /> </el-table> </template> </div> </div> </template> <script> import banner from "@/components/banner"; export default { name: "antibody", components: { banner }, data() { return { overView: [] }; }, methods: { changeSearchAll() { this.$api.post("/basb/searchAll", { articleFlag: 0 }).then(res => { console.log(res) this.overView = res.data console.log(this.overView) }) }, gotoArticle(row, column, event) { console.log(row, column, event) this.$router.push({ path: "/antibodyDetail", query: { id: row.id } }); } }, mounted() {}, created() { this.changeSearchAll() } }; </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_title{ width: 1200px; margin: 30px auto 0; font-size: 18px; font-weight: 600; } .article /deep/{ width: 1200px; margin: 30px auto 90px; .cell{ color: #000; } .el-table__row td{ background-color: #fff !important; cursor: pointer; } .el-table__row--striped td{ background-color: #F0FAFE !important; cursor: pointer; } } .articleMove{ display: none; } } } @media screen and (min-width: 0px) and (max-width: 750px) { .box { .list_title{ width: 100%; padding: 0.15rem 0.2rem; box-sizing: border-box; font-size: 16px; font-weight: 600; } .article{ display: none; } .articleMove /deep/{ width: 100%; padding: 0 0.2rem 0.15rem; box-sizing: border-box; .cell{ color: #000; font-size: 0.1rem; } .el-table__row td{ background-color: #fff !important; cursor: pointer; } .el-table__row--striped td{ background-color: #F0FAFE !important; cursor: pointer; } } } } </style>