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