crs-double-resistance/src/components/tableList.vue

<template>
  <div class="table_box">
    <!-- PC端 -->
    <div class="tableList">
      <div class="tableList_th th_head" style="user-select: none;">
        <div style="width: 6%" class="th_tr_b">{{ $t("table.catalog") }}</div>
        <div style="width: 13%;" v-if="type != 2" class="th_tr_b">
          {{ $t("table.productName") }}
        </div>
        <div style="width: 13%;" v-if="type == 2" class="th_tr_b">
          {{ $t("table.productName") }}
        </div>
        <div style="width: 10%;" class="th_tr_b" v-if="type == 4">
          {{ $t("table.Specification") }}
        </div>
        <div
          style="width: 8%; text-align: center;"
          class="th_tr_b"
          v-if="type == 2"
        >
          {{ $t("table.Species") }}
          <SortFieldHeader
            :sort-field="sortField"
            field="species"
            @sort-change="onSortFieldChange"
          />
        </div>
        <div class="th_tr" v-if="type == 1 || type == 3">
          {{ $t("table.Target") }}
        </div>
        <div
          style="width: 9%; text-align: center;"
          class="th_tr_b"
          v-if="type == 2"
        >
          {{ $t("table.Target") }}
        </div>
        <!-- <div class="th_tr_b" style="width: 9%;" v-if="type == 1">{{$t('table.AAsequene')}}</div> -->
        <div class="th_tr" v-if="type == 1">
          {{ $t("table.Tag") }}
          <SortFieldHeader
            :sort-field="sortField"
            field="tag"
            @sort-change="onSortFieldChange"
          />
        </div>
        <div style="width: 10%;" class="th_tr_b" v-if="type == 3 || type == 1">
          {{ $t("table.Species") }}
          <SortFieldHeader
            :sort-field="sortField"
            field="species"
            @sort-change="onSortFieldChange"
          />
        </div>
        <div style="width: 5%;" class="th_tr_b" v-if="type == 3">
          {{ $t("table.CellType") }}
        </div>
        <div
          style="width: 8%; text-align: center;"
          class="th_tr_b"
          v-if="type == 3"
        >
          {{ $t("table.FluorescentLabel") }}
        </div>
        <div class="th_tr" v-if="type == 4">{{ $t("table.Source") }}</div>
        <div class="th_tr" v-if="type == 4">{{ $t("table.Clonality") }}</div>
        <div
          style="width: 12%; text-align: center;"
          class="th_tr_b"
          v-if="type == 4"
        >
          {{ $t("table.Couplingagent") }}
        </div>
        <div
          style="width: 14%; text-align: center;"
          class="th_tr_b"
          v-if="type == 4"
        >
          {{ $t("table.ApplicationPmd") }}
        </div>
        <div
          class="th_tr_b"
          style="width: 9%; text-align: center;"
          v-if="type == 2"
        >
          {{ $t("table.Format") }}
        </div>
        <!-- <div class="th_tr_b" style="width: 10%;text-align: center;" v-if="type == 1 || type == 2">
        {{$t('table.host')}}
        <SortFieldHeader :sort-field="sortField" field="host" @sort-change="onSortFieldChange" />
      </div> -->
        <div class="th_tr_b" style="width: 5%;text-align: center;">COA</div>
        <!-- <div class="th_tr" style="width: 80px;text-align: center;">{{ $t('table.Purity') }}</div> -->
        <!-- <div class="th_tr_b" style="width: 15%;text-align: center;">{{ $t('table.Bioactivity') }}</div> -->
        <div class="th_tr_b" style="width: 15%;text-align: center;">
          {{ $t("table.PurityAndBioactivity") }}
        </div>
        <div class="th_tr_b" style="width: 14%;text-align: center;">
          {{ $t("table.Price") }}
        </div>
      </div>
      <div class="tableList_th tableList_td" v-for="one in list" :key="one.id">
        <div
          style="width: 6%"
          class="th_tr_b th_header"
          @click="gotoproduct(one)"
        >
          {{ one.catalog }}
        </div>
        <div style="width: 13%;" v-if="type != 2" class="th_tr_b">
          {{ one.productName }}
        </div>
        <div style="width: 13%;" v-if="type == 2" class="th_tr_b">
          {{ one.productName }}
        </div>
        <div style="width: 10%;" class="th_tr_b" v-if="type == 4">
          {{
            $util.findAllCategory("Diagnostic_specification", one.specification)
          }}
        </div>
        <div
          style="width: 8%; text-align: center;"
          class="th_tr_b"
          v-if="type == 2"
        >
          {{ $util.findAllCategory("Antibody_agSpecies", one.species) }}
        </div>
        <div class="th_tr" v-if="type == 1 || type == 3">
          {{ $util.targetDictionaries(one.target) }}
        </div>
        <div
          style="width: 9%; text-align: center;"
          class="th_tr_b"
          v-if="type == 2"
        >
          {{ $util.targetDictionaries(one.target) }}
        </div>
        <!-- <div class="th_tr_b" style="width: 9%;" v-if="type == 1">{{one.aaSeqBrief}}</div> -->
        <div class="th_tr" v-if="type == 1">
          {{ $util.findAllCategory("Protein_tag", one.tag) }}
        </div>
        <div style="width: 10%;" class="th_tr_b" v-if="type == 1 || type == 3">
          {{
            $util.findAllCategory(
              type == 1 ? "Protein_species" : "CellLine_species",
              one.species
            )
          }}
        </div>
        <div style="width: 5%;" class="th_tr_b" v-if="type == 3">
          {{ $util.findAllCategory("CellLine_subType", one.subType) }}
        </div>
        <div
          style="width: 8%; text-align: center;"
          class="th_tr_b"
          v-if="type == 3"
        >
          {{
            $util.findAllCategory("CellLine_labeling", one.fluorescenceLabeling)
          }}
        </div>
        <div class="th_tr" v-if="type == 4">
          {{ $util.findAllCategory("Diagnostic_source", one.source) }}
        </div>
        <div class="th_tr" v-if="type == 4">
          {{ $util.findAllCategory("Diagnostic_clonality", one.clonality) }}
        </div>
        <div
          style="width: 12%; text-align: center;"
          class="th_tr_b"
          v-if="type == 4"
        >
          {{ $util.findAllCategory("Diagnostic_coupling", one.couplingAgent) }}
        </div>
        <div
          style="width: 14%; text-align: center;"
          class="th_tr_b"
          v-if="type == 4"
        >
          {{
            $util.findAllCategory(
              "Diagnostic_ApplicationValidated",
              one.applicationValidated
            )
          }}
        </div>
        <div
          class="th_tr_b"
          style="width: 9%; text-align: center;"
          v-if="type == 2"
        >
          {{ $util.findAllCategory("Antibody_format", one.format) }}
        </div>
        <!-- <div class="th_tr_b" style="width: 7%; text-align: center;" v-if="type == 1 || type == 2">{{$util.findAllCategory(type == 1?'Protein_host' : 'Antibody_host',one.host)}}</div> -->
        <div
          class="th_tr_b"
          style="width: 5%;text-align: center;"
          @click="clickCoa(one)"
        >
          <img
            v-if="one.coaUrl"
            src="@/assets/img/download1.png"
            alt=""
            class="butt_image"
          />
          <div v-else>N/A</div>
        </div>
        <!-- <div class="th_tr" style="width: 80px;text-align: center;">
        <el-tooltip class="item-tooltip" v-if="one.purityFeature && one.purityFeature.length > 0" effect="light" placement="top">
          <template slot="content">
            <div class="description_pmd">
              <el-carousel trigger="click" v-if="one.purityFeature.length > 1" indicator-position="none">
                  <el-carousel-item v-for="(one, i) in one.purityFeature" :key="i">
                    <div class="content-pc-box">
                      <img :src="one" alt="" class="content-image">
                    </div>
                  </el-carousel-item>
              </el-carousel>
              <div class="content-pc-box" v-else>
                <img :src="one.purityFeature[0]" alt="" class="content-image">
              </div>
          </div>
          </template>
          <div class="bioactivity">
            <img src="@/assets/icon/Purity.png" alt="" class="images">
            <div>Purity</div>
          </div>
        </el-tooltip>
      </div> -->
        <div class="th_tr_b" style="width: 15%;text-align: center;">
          <el-tooltip
            class="item-tooltip"
            v-if="one.purityFeature && one.purityFeature.length > 0"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="description_pmd">
                <el-carousel
                  trigger="click"
                  v-if="one.purityFeature.length > 1"
                  indicator-position="none"
                >
                  <el-carousel-item
                    v-for="(one, i) in one.purityFeature"
                    :key="i"
                  >
                    <div class="content-pc-box">
                      <img :src="one" alt="" class="content-image" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <div class="content-pc-box" v-else>
                  <img
                    :src="one.purityFeature[0]"
                    alt=""
                    class="content-image"
                  />
                </div>
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/Purity.png" alt="" class="images" />
              <div>Purity</div>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="showIcon(one.validatedFeature, 'ELISA')"
            class="item-tooltip"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="content-pc-box">
                <img
                  :src="showimages(one.validatedFeature, 'ELISA')"
                  alt=""
                  class="content-image"
                />
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/S-02.png" alt="" class="images" />
              <div>ELISA</div>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="showIcon(one.validatedFeature, 'FACS')"
            class="item-tooltip"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="content-pc-box">
                <img
                  :src="showimages(one.validatedFeature, 'FACS')"
                  alt=""
                  class="content-image"
                />
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/S-01.png" alt="" class="images" />
              <div>FACS</div>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="showIcon(one.validatedFeature, 'Function')"
            class="item-tooltip"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="description_pmd">
                <el-carousel
                  trigger="click"
                  v-if="showimages(one.validatedFeature, 'Function').length > 1"
                  indicator-position="none"
                >
                  <el-carousel-item
                    v-for="(one, i) in showimages(
                      one.validatedFeature,
                      'Function'
                    )"
                    :key="i"
                  >
                    <div class="content-pc-box">
                      <img :src="one" alt="" class="content-image" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <div class="content-pc-box" v-else>
                  <img
                    :src="showimages(one.validatedFeature, 'Function')[0]"
                    alt=""
                    class="content-image"
                  />
                </div>
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/S-04.png" alt="" class="images" />
              <div>Function</div>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="showIcon(one.validatedFeature, 'Animal')"
            class="item-tooltip"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="content-pc-box">
                <img
                  :src="showimages(one.validatedFeature, 'Animal')"
                  alt=""
                  class="content-image"
                />
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/S-03.png" alt="" class="images" />
              <div>Animal</div>
            </div>
          </el-tooltip>
          <el-tooltip
            v-if="showIcon(one.validatedFeature, 'IHC')"
            class="item-tooltip"
            effect="light"
            placement="top"
          >
            <template slot="content">
              <div class="description_pmd">
                <el-carousel
                  trigger="click"
                  v-if="showimages(one.validatedFeature, 'IHC').length > 1"
                  indicator-position="none"
                >
                  <el-carousel-item
                    v-for="(one, i) in showimages(one.validatedFeature, 'IHC')"
                    :key="i"
                  >
                    <div class="content-pc-box">
                      <img :src="one" alt="" class="content-image" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <div class="content-pc-box" v-else>
                  <img
                    :src="showimages(one.validatedFeature, 'IHC')[0]"
                    alt=""
                    class="content-image"
                  />
                </div>
              </div>
            </template>
            <div class="bioactivity">
              <img src="@/assets/icon/S-05.png" alt="" class="images" />
              <div>IHC</div>
            </div>
          </el-tooltip>
        </div>
        <div class="th_tr_b" style="width: 14%; text-align: center;">
          <el-select
            v-model="one.skuDefault"
            v-if="one.skuList && one.skuList.length > 0"
          >
            <el-option
              v-for="(item, idx) in one.skuList"
              :key="idx"
              :value="idx"
              :label="
                `${item.specifications} ( ${
                  $util.localeStorage() ? '$' : '￥'
                }${$util.localeStorage() ? item.price : item.cnPrice})`
              "
            />
          </el-select>
          <el-link
            type="primary"
            @click="
              $util.goRoute({
                name: 'inquiry',
                query: { catalog: one.catalog }
              })
            "
            v-else
            >{{ $t("table.Inquiry") }}</el-link
          >
        </div>
      </div>
      <div class="tableList_not" v-if="list.length == 0">
        {{ $t("table.notable") }}
      </div>
    </div>
    <!-- 移动端 -->
    <div class="move_tableList" style="display: none;">
      <div class="move_header">
        <div class="th">{{ $t("table.productName") }}</div>
        <div class="th" v-if="type == 1">{{ $t("table.Tag") }}</div>
        <div class="th" v-if="type == 2">{{ $t("table.Format") }}</div>
        <div class="th" v-if="type == 3">
          {{ $t("table.FluorescentLabel") }}
        </div>
        <div class="th" v-if="type == 4">{{ $t("table.ApplicationPmd") }}</div>
        <div class="hr_t">More</div>
      </div>
      <div class="move_td" v-for="(one, i) in list" :key="one.id">
        <div class="td_t">
          <div class="td can_catalog" @click="gotoproduct(one)">
            {{ one.productName }}
          </div>
          <div class="td" v-if="type == 1">
            {{ $util.findAllCategory("Protein_tag", one.tag) }}
          </div>
          <div class="td" v-if="type == 2">
            {{ $util.findAllCategory("Antibody_format", one.format) }}
          </div>
          <div class="td" v-if="type == 3">
            {{
              $util.findAllCategory(
                "CellLine_labeling",
                one.fluorescenceLabeling
              )
            }}
          </div>
          <div class="td" v-if="type == 4">
            {{
              $util.findAllCategory(
                "Diagnostic_ApplicationValidated",
                one.applicationValidated
              )
            }}
          </div>
          <div class="hr_t">
            <img
              v-if="listId !== i"
              @click="listShow(i, 1)"
              class="more_img"
              src="@/assets/img/table-top.png"
              alt=""
              srcset=""
            />
            <img
              v-else
              class="more_img"
              @click="listShow(i, 2)"
              src="@/assets/img/table_bott.png"
              alt=""
              srcset=""
            />
          </div>
        </div>
        <div class="td_show" v-if="listId == i">
          <div class="show_t">
            <div class="can">{{ $t("table.catalog") }}</div>
          </div>
          <div class="td tb_catalog can_catalog" @click="gotoproduct(one)">
            {{ one.catalog }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 4">
          <div class="show_t">
            <div class="can" v-if="type == 4">
              {{ $t("table.Specification") }}
            </div>
          </div>
          <div class="td tb_catalog" v-if="type == 4">
            {{
              $util.findAllCategory(
                "Diagnostic_specification",
                one.specification
              )
            }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 2">
          <div class="show_t">
            <div class="can" v-if="type == 2">{{ $t("table.Species") }}</div>
          </div>
          <div class="td tb_catalog" v-if="type == 2">
            {{ $util.findAllCategory("Antibody_agSpecies", one.species) }}
          </div>
        </div>

        <div
          class="td_show"
          v-if="listId == i && (type == 1 || type == 2 || type == 3)"
        >
          <div class="show_t">
            <div class="can" v-if="type == 1 || type == 2 || type == 3">
              {{ $t("table.Target") }}
            </div>
          </div>
          <div class="td tb_catalog" v-if="type == 1 || type == 2 || type == 3">
            {{ $util.targetDictionaries(one.target) }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 1">
          <div class="show_t">
            <div class="can" v-if="type == 1">{{ $t("table.AAsequene") }}</div>
          </div>
          <div class="td tb_catalog" v-if="type == 1">{{ one.aaSeqBrief }}</div>
        </div>

        <div class="td_show" v-if="listId == i && (type == 3 || type == 1)">
          <div class="show_t">
            <div class="can" v-if="type == 3 || type == 1">
              {{ $t("table.Species") }}
            </div>
          </div>
          <div class="td tb_catalog" v-if="type == 1 || type == 3">
            {{
              $util.findAllCategory(
                type == 1 ? "Protein_species" : "CellLine_species",
                one.species
              )
            }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 3">
          <div class="show_t">
            <div class="can" v-if="type == 3">{{ $t("table.CellType") }}</div>
          </div>
          <div class="td tb_catalog" v-if="type == 3">
            {{ $util.findAllCategory("CellLine_subType", one.subType) }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 4">
          <div class="show_t">
            <div class="can" v-if="type == 4">{{ $t("table.Source") }}</div>
          </div>
          <div class="td tb_catalog" v-if="type == 4">
            {{ $util.findAllCategory("Diagnostic_source", one.source) }}
          </div>
          <!-- <div class="td tb_catalog" v-if="type == 2 || type == 4">{{$util.findAllCategory(type == 2?'Antibody_source' : 'Diagnostic_source',one.source) }}</div> -->
        </div>

        <div class="td_show" v-if="listId == i && type == 4">
          <div class="show_t">
            <div class="can" v-if="type == 4">{{ $t("table.Clonality") }}</div>
          </div>
          <div class="td tb_catalog" v-if="type == 4">
            {{ $util.findAllCategory("Diagnostic_clonality", one.clonality) }}
          </div>
        </div>

        <div class="td_show" v-if="listId == i && type == 4">
          <div class="show_t">
            <div class="can" v-if="type == 4">
              {{ $t("table.Couplingagent") }}
            </div>
          </div>
          <div class="td tb_catalog" v-if="type == 4">
            {{
              $util.findAllCategory("Diagnostic_coupling", one.couplingAgent)
            }}
          </div>
        </div>
        <div class="td_show" v-if="listId == i && (type == 1 || type == 2)">
          <div class="show_t">
            <div class="can" v-if="type == 1 || type == 2">
              {{ $t("table.host") }}
            </div>
          </div>
          <div class="td tb_catalog" v-if="type == 1 || type == 2">
            {{
              $util.findAllCategory(
                type == 1 ? "Protein_host" : "Antibody_host",
                one.host
              )
            }}
          </div>
        </div>
        <div class="td_show" v-if="listId == i">
          <div class="show_t">
            <div class="can">COA</div>
          </div>
          <div class="td tb_catalog" @click="clickCoa(one)">
            <img
              v-if="one.coaUrl"
              src="@/assets/img/download1.png"
              alt=""
              class="butt_image"
            />
            <div v-else>N/A</div>
          </div>
        </div>
        <div class="td_show" v-if="listId == i">
          <div class="show_t">
            <div class="can">{{ $t("table.Purity") }}</div>
          </div>
          <div class="td tb_catalog">
            <div class="td tb_catalog">
              <div
                class="bioactivity"
                v-if="one.purityFeature && one.purityFeature.length > 0"
              >
                <img src="@/assets/icon/Purity.png" alt="" class="images" />
                <div>Purity</div>
              </div>
            </div>
          </div>
        </div>
        <div class="td_show" v-if="listId == i">
          <div class="show_t">
            <div class="can">{{ $t("table.Bioactivity") }}</div>
          </div>
          <div class="td tb_catalog">
            <div
              class="bioactivity"
              v-if="showIcon(one.validatedFeature, 'ELISA')"
            >
              <img src="@/assets/icon/S-02.png" alt="" class="images" />
              <div>ELISA</div>
            </div>
            <div
              class="bioactivity"
              v-if="showIcon(one.validatedFeature, 'FACS')"
            >
              <img src="@/assets/icon/S-01.png" alt="" class="images" />
              <div>FACS</div>
            </div>
            <div
              class="bioactivity"
              v-if="showIcon(one.validatedFeature, 'Function')"
            >
              <img src="@/assets/icon/S-04.png" alt="" class="images" />
              <div>Function</div>
            </div>
            <div
              class="bioactivity"
              v-if="showIcon(one.validatedFeature, 'Animal')"
            >
              <img src="@/assets/icon/S-03.png" alt="" class="images" />
              <div>Animal</div>
            </div>
            <div
              class="bioactivity"
              v-if="showIcon(one.validatedFeature, 'IHC')"
            >
              <img src="@/assets/icon/S-05.png" alt="" class="images" />
              <div>IHC</div>
            </div>
          </div>
        </div>

        <!-- <div class="td_show" v-if="listId == i">
        <div class="show_t">
          <div class="can">{{$t('table.size')}}</div>
        </div>
        <div class="td">{{one.size}}</div>
        <div class="hr_t">
          <img class="more_img" @click="tapInquiry(one)" src="@/assets/img/Inquiry.png" alt="" srcset="">
        </div>
      </div> -->
      </div>
      <div class="tableList_not" v-if="list.length == 0">
        {{ $t("table.notable") }}
      </div>
    </div>
  </div>
</template>

<script>
import SortFieldHeader from "@/components/SortFieldHeader";

// 表格排序默认根据产品名
export default {
  name: "tableList",
  components: {
    SortFieldHeader
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    type: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      listId: null,
      show: true,
      sortField: "",
      sortValue: ""
    };
  },
  methods: {
    onSortFieldChange(params) {
      this.sortField = params.field;
      this.sortValue = params.value;
      this.$emit("my-sort-change", params);
    },
    // 特性图标图片显示
    showimages(one, name) {
      if (one) {
        let data = one.find(item => {
          if (item.name === name) {
            return item;
          }
        });
        if (data) {
          return data.picUrl;
        }
      }
    },
    //  特性图标显示
    showIcon(one, name) {
      if (one) {
        let data = one.find(item => {
          if (item.name === name) {
            return item;
          }
        });
        if (data) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 下来COA
    clickCoa(item) {
      if (item.coaUrl) {
        window.location.href = item.coaUrl;
      }
      // else {
      //   this.$message.error(this.$t('taps.service'))
      // }
    },
    listShow(one, num) {
      if (num === 1) {
        this.listId = one;
      } else {
        this.listId = null;
      }
    },
    tapInquiry(e) {
      this.$util.goRoute({
        name: "inquiry",
        query: {
          catalog: e.catalog
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    gotoproduct(e) {
      let name = this.$util.english(e.productName);
      let title = null;
      const _type = Number(this.type);
      if (_type === 1) {
        title = "protein";
        // return this.$router.push({
        //   path: '/protein/detail/'  + e.catalog,
        // })
      } else if (_type === 2) {
        title = "antibody";
      } else if (_type === 3) {
        title = "cell-line";
      } else if (_type === 4) {
        title = "diagnostic-reagent";
      }
      if (this.$route.query.keywords) {
        let datt = { keywords: this.$route.query.keywords };
        sessionStorage.setItem("keywords", JSON.stringify(datt));
        // this.$router.push({
        //   path: "/products/" + title + "/" + name + "/" + e.catalog
        //   // query: {
        //   //   catalog: e.catalog
        //   // }
        // });
      } else {
        // this.$router.push({
        //   path: "/products/" + title + "/" + name + "/" + e.catalog
        //   // query: {
        //   //   catalog: e.catalog
        //   // }
        // });
      }
      this.$router.push({
        path: "/products/" + title + "/" + name + "/" + e.catalog
        // query: {
        //   catalog: e.catalog
        // }
      });
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.table_box {
  min-height: 530px;
}
.tableList /deep/ {
  width: 100%;
  margin-top: 1rem;
  border: 1px solid #ebeef5;
  .tableList_th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #cfe0ef;
    min-height: 48px;
    padding: 6px 0;
    .th_tr {
      flex: 1;
      line-height: 18px;
      margin: 0 10px;
      font-size: 16px;
      font-family: Arial;
      font-weight: 600;
      color: #005bab;
      overflow: hidden;
    }
    .th_tr_b {
      line-height: 18px;
      margin: 0 10px;
      font-size: 16px;
      font-family: Arial;
      font-weight: 600;
      color: #005bab;
      word-wrap: break-word;
      word-break: normal;
    }
    .butt_image {
      cursor: pointer;
    }
    .bioactivity {
      display: inline-block;
      font-size: 12px;
    }
    .images {
      // margin: 10px;
      max-width: 30px;
      cursor: pointer;
    }
  }
  .th_head{
    position: sticky;
    top: 198px;
    z-index: 9999;
  }
  .tableList_td {
    background-color: #f0f5fa;
    &:nth-child(odd) {
      background-color: #f9fbfd;
    }
    .th_tr {
      font-size: 14px !important;
      font-family: Arial;
      font-weight: 400;
      color: #313131;
      &:nth-of-type(1) {
        font-size: 14px;
        font-family: Arial;
        color: #005bab;
      }
    }
    .th_header {
      color: #005bab !important;
      cursor: pointer;
    }
    .th_tr_b {
      font-size: 14px !important;
      font-weight: 400;
      color: #313131;
      position: relative;
      .inquiry_img {
        position: absolute;
        width: 24px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }
  }
  .tableList_not {
    width: 100%;
    line-height: 60px;
    padding: 6px 0;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    color: #909399;
    font-family: Arial;
  }
}
.description_pmd /deep/ {
  width: 400px;
  height: 200px;
  .el-carousel__container {
    height: 200px !important;
  }
}
.content-pc-box {
  width: 400px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  .content-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
/deep/ .is-light {
  border: none !important;
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  .tableList {
    display: none;
  }
  .move_tableList /deep/ {
    display: block !important;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    .move_header {
      display: flex;
      align-items: center;
      min-height: 48px;
      background-color: #cfe0ef;
      font-size: 14px;
      font-family: Arial;
      font-weight: bold;
      color: #005bab;
      .th {
        flex: 1;
        padding: 0 6px;
        word-wrap: break-word;
        word-break: normal;
      }
      .td {
        flex: 1;
        padding: 0 6px;
      }
      .hr_t {
        width: 60px;
        padding: 0 6px;
      }
    }
    .move_td {
      &:nth-child(odd) {
        .td_t {
          background-color: #f9fbfd;
        }
      }
      .td_t {
        display: flex;
        align-items: center;
        min-height: 48px;
        background-color: #f0f5fa;
        font-size: 14px;
        font-family: Arial;
        color: #313131;
        line-height: 16px;
        .td {
          flex: 1;
          padding: 6px;
          word-wrap: break-word;
          word-break: normal;
        }
        .hr_t {
          width: 60px;
          padding: 4px 6px;
          .more_img {
            width: 32px;
          }
        }
      }
      .td_show {
        // 隐藏数据
        display: flex;
        align-items: center;
        min-height: 48px;
        background-color: #f0f5fa;
        margin: 1px 0;
        font-size: 14px;
        font-family: Arial;
        color: #313131;
        line-height: 16px;
        .td {
          flex: 1;
          padding: 2px 6px;
        }
        .tb_catalog {
          color: #313131;
          .bioactivity {
            display: inline-block;
            font-size: 12px;
            text-align: center;
            margin: 10px;
          }
          .images {
            width: 30px;
          }
        }
        .show_t {
          width: 30%;
          padding: 2px 6px;
          background-color: #ffffff;
          .can {
            // min-height: 48px;
            width: 100%;
            // line-height: 48px;
            padding: 0.24rem 0;
            word-wrap: break-word;
            word-break: normal;
            color: #313131;
          }
        }
        .hr_t {
          width: 60px;
          padding: 2px 6px;
          .more_img {
            width: 24px;
          }
        }
      }
    }
  }
  .tableList_not {
    width: 100%;
    line-height: 0.6rem;
    height: 0.6rem;
    // padding: 6px 0;
    background-color: #fff;
    text-align: center;
    font-size: 0.16rem;
    color: #909399;
    font-family: Arial;
  }
  .can_catalog {
    color: #005bab !important;
  }
}
</style>