crs-double-resistance/src/view/antibody/index.vue

<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>