web/src/components/push-list/PushList.vue

<template>
  <el-card class="info-list-card" :class="{ gray: config.gray }" v-loading="listState.loading">
    <div slot="header" class="clearfix" v-if="!config.gray">
      <span class="card-title">订阅推送</span>
      <el-button v-if="showMButton" @click="goManage" class="sub-manager" type="plain" icon="el-icon-jy-edit">订阅管理
      </el-button>
    </div>
    <div class="collect-list-header" style="" v-else>
      <div class="c-tab-container">
        <div class="left">
          <input @click="changeAllCheck($event)" class="has-top custom-checkbox title-text-checkbox" style="margin: 16px;"
            type="checkbox" />
          <div class="list-title">订阅信息</div>
          <span class="total-count" v-if="checkNum > 0">已选<em class="highlight-text">{{ checkNum }}</em>条信息</span>
          <span class="total-count" v-else>搜索到<em class="highlight-text">{{ listState.total }}</em>条信息</span>
        </div>
        <div class="right">
          <div class="right-line">
            <div class="icon-box" :class="{ active: !isTable && listModel === 'S' }"
              @click="toggleActiveIcon('list', 'S')">
              <span class="j-icon icon-list"></span> <span class="icon-text">精简列表</span>
            </div>
            <div class="icon-box" :class="{ active: !isTable && listModel === 'D', 'icon-have-vip': isFree }"
              @click="toggleActiveIcon('list', 'D')">
              <span class="j-icon icon-list-detail"></span>
              <span class="icon-text">详细列表</span>
            </div>
            <div class="icon-box" :class="{ active: isTable }" @click="toggleActiveIcon('table')"><span
                class="j-icon icon-table"></span> <span class="icon-text">表格</span></div>
          </div>
          <div class="icon-box right-line" :class="{ 'noclick': !listState.total }" @click="onClickDataExport">
            <span class="j-icon icon-data-export"></span> <span class="icon-text">数据导出</span>
          </div>
          <div class="icon-box"  @click="onClickDataCollect($event)">
            <span class="j-icon icon-star"></span>
            <span class="icon-text">标讯收藏</span>
          </div>
          <div v-if="vt === 'q'" class="right-line"></div>
          <div v-if="vt === 'q'" class="icon-box box-distribution" @click="onClickDataDistribute($event)">
            <span class="j-icon icon-distribute-gray"></span>
            <span class="icon-text">分发</span>
          </div>
        </div>
      </div>
    </div>
    <custom-dialog @close="showDataExportDialog = false" customClass="export-class-dialog" width="388px" :show-footer="false" :show-close="true" :visible="showDataExportDialog">
      <export-tip @setExport="setExport" @checkBoxChange="checkBoxChange" ></export-tip>
    </custom-dialog>
    <power-person @filterDiatribution="filterDiatribution" @manualDiatribution="manualDiatribution"
      :userPerson="personList" :vt="vt" :list="listState.list" @addLoadPerson="addLoadPerson"
      ref="powerNode"></power-person>
    <div class="info-list"
         v-show="!isTable"
         element-loading-background="rgba(255,255,255, .4)"
         element-loading-custom-class="self-export-loading"
         v-loading="exportLoading">
      <article-item @setShow="setShow(item._id)" :model="listModel" :grid-data="statusList" class="list-item"
        v-for="(item, index) in listState.list" :class="{ visited: item.visited || item.ca_isvisit }" :key="index"
        :index="(listState.pageSize * (listState.pageNum - 1)) + index + 1" :article="item" :config="config" :vt="vt"
        @onCollect="onCollect" @onClick="toDetail(item)" @changeCheck="changeCheck($event, item)">
        <template #right-handle-container>
          <span class="join-bid" @click.prevent.stop="joinBidHandle(item)" v-if="item.joinBid !== undefined">
            <i class="j-self-icon" :class="item.joinBid ? 'icon-canbiao-img-active' : 'icon-canbiao-img'"></i>
            <span>{{ item.joinBid ? '终止参标' : '参标' }}</span>
          </span>
        </template>
      </article-item>
      <empty v-show="showEmpty">
        <div v-if="showManageButton">
          <div v-if="isAllFirst && showMButton">
            <span>您尚未设置关键词</span>
            <div class="add-key-button" @click="goManage">
              <!-- <span class="icon-chahao"></span> -->
              <span class="button-text">前往订阅设置</span>
            </div>
          </div>
          <div v-else>
            <span>对不起，没有匹配到数据，请修改订阅设置</span>
            <div class="add-key-button" @click="goManage">
              <span class="button-text">前往订阅设置</span>
            </div>
          </div>
        </div>
        <div v-else>
          <span>暂时无历史推送记录</span>
        </div>
      </empty>
    </div>
    <div class="info-list collect-table-list"
         v-show="isTable"
         element-loading-background="rgba(255,255,255, .4)"
         element-loading-custom-class="self-export-loading"
         v-loading="exportLoading">
      <table class="table" v-show="tableList.length">
        <thead class="thead">
          <tr>
            <td width="48">序号</td>
            <td width="315" class="deep-border">项目名称</td>
            <td width="84">公告类型</td>
            <td width="73" class="deep-border">预算<br />（万元）</td>
            <td width="181">招标单位</td>
            <td width="103" class="deep-border">开标日期</td>
            <td width="174">中标单位</td>
            <td width="76" class="deep-border">中标金额<br />（万元）</td>
            <td width="103">发布日期</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableList" :class="{ visited: item.visited }" :key="index + '_' + item._id"
            @click="toDetail(item)">
            <td width="48">{{ index + 1 }}</td>
            <td width="315" class="tt-l" v-html="calcTitle(item, index)"></td>
            <td width="84">{{ item.subtype }}</td>
            <td width="73" class="tt-r">{{ calcMoney(item.budget) }}</td>
            <td width="181" class="tt-l">{{ item.buyer }}</td>
            <td width="103">{{ dateFromNow(item.bidOpenTime ? item.bidOpenTime * 1000 : null, 'yyyy-MM-dd HH:mm') }}</td>
            <td width="174" class="tt-l">{{ item.winner }}</td>
            <td width="76" class="tt-r">{{ calcMoney(item.bidAmount) }}</td>
            <td width="103">{{ dateFromNow(item.publishTime * 1000) }}</td>
          </tr>
        </tbody>
      </table>
      <div class="shade_table" v-show="showTableMore">
        <div class="more" data-need-bind-phone="" @click="onClickDataExport">
          查看更多&gt;
        </div>
      </div>
      <empty v-show="!tableList.length">
        <div v-if="showManageButton">
          <div v-if="isAllFirst && showMButton">
            <span>您尚未设置关键词</span>
            <div class="add-key-button" @click="goManage">
              <!-- <span class="icon-chahao"></span> -->
              <span class="button-text">前往订阅设置</span>
            </div>
          </div>
          <div v-else>
            <span>对不起，没有匹配到数据，请修改订阅设置</span>
            <div class="add-key-button" @click="goManage">
              <span class="button-text">前往订阅设置</span>
            </div>
          </div>
        </div>
        <div v-else>
          <span>暂时无历史推送记录</span>
        </div>
      </empty>
    </div>
    <div class="el-pagination-container" v-if="!isTable && ((listState.total > 0) || showMore)"
      :class="showMore ? 'center' : ''">
      <el-pagination background popper-class="pagination-custom-select" layout="prev, pager, next, sizes, jumper"
        :current-page="listState.pageNum" :page-size="listState.pageSize" :page-sizes="[5, 10, 50, 100]"
        :total="listState.total" :show-confirm-btn="true" @current-change="onPageChange" @size-change="onSizeChange">
      </el-pagination>
      <div class="p-right" v-if="showMore && !showEmpty">
        <el-button size="mini" class="get-more" type="plain" icon="el-icon-arrow-right" @click="getMore">更多</el-button>
      </div>
    </div>
    <div class="sub-collection tags-box" style="display: none">
      <div class="tags-inputs">
        <div class="tag-input">
          <div class="tag-labels"></div>
          <input type="text" class="clear-input" maxlength="10" oninput="this.value=this.value.replace(/\s+/g,'')">
          <div class="tag-placeholder">新增标签回车保存</div>
        </div>
        <div class="add-tag-button">添加并使用</div>
      </div>
      <div class="tags-list clearfix"></div>
      <div class="tags-footer">
        <div class="tags-button button-confirm">确认添加</div>
        <div class="tags-button button-cancel">暂不添加</div>
      </div>
    </div>
    <CustomDialog title="开通超级订阅" customClass="open-vip-dialog" width="380px" top="30vh" center
      :visible.sync="showVipDialog">
      立享列表展示更多公告关键信息，例如：采购单位、中标单位、招标代理机构等，提高公告查看效率
      <template #footer>
        <button class="action-button confirm" @click="toBuySvip">去开通</button>
        <button class="action-button cancel" @click="showVipDialog = false">取消</button>
      </template>
    </CustomDialog>
    <!-- 参标更新状态弹窗 -->
    <BidrenewalDialog ref="BidrenewalDialog"></BidrenewalDialog>
    <!-- 留资弹窗 -->
    <CollectInfo ref="collectRef"></CollectInfo>
  </el-card>
</template>

<script>
import { Button, Card, Pagination } from 'element-ui'
import Empty from '@/components/common/Empty.vue'
import ArticleItem from '@/components/article-item/ArticleItem.vue'
import powerPerson from '@/components/subscribe-manager/powerPerson.vue'
import CustomDialog from '@/components/dialog/Dialog.vue'
import ExportTip from '@/views/portrayal/components/DataExportTip.vue'
import BidrenewalDialog from '@/views/BidrenewalDialog/index.vue'
import CollectInfo from '@/components/collect-info/CollectInfo.vue'
import { dateFromNow, replaceKeyword, moneyUnit, openLinkInWorkspace } from '@/utils/'
import { getEventTarget } from '@/utils/jq-help'
import { mixinVisited } from '@/utils/mixins/visited'
import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
import { mapGetters, mapMutations, mapState } from 'vuex'
import { uniqBy } from 'lodash'
import {
  getPushListExport,
  getPushList,
  bidCollAction,
  getBidCollTagList,
  saveBidCollAddTag,
  createBidTag,
  checkBidsIsColl,
  setSubscribeInfoRead,
  getViewStatus,
  getMsgDistributor,
  getBidIsJoin,
  joinBidAction,
  ajaxGetDontPromptAgain,
  ajaxSetDontPromptAgain
} from '@/api/modules/'
/* eslint-disable */
var selectedPushList = []
var selectDataIds = []
var getCaIndexIds = []
window.pushIdInfoIdRelationshipMap = {}
export default {
  name: 'push-list',
  mixins: [mixinVisited],
  components: {
    [Pagination.name]: Pagination,
    [Card.name]: Card,
    [Button.name]: Button,
    ArticleItem,
    powerPerson,
    Empty,
    CustomDialog,
    BidrenewalDialog,
    CollectInfo,
    ExportTip
  },
  props: {
    showManageButton: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Boolean,
      default: true
    },
    subManager: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default () {
        return {
          gray: false,
          table: false,
          collect: false
        }
      }
    },
    filters: {
      type: Object,
      default () {
        return {
          area: '',
          selectTime: ''
        }
      }
    },
    vt: {
      type: String,
      default: 'f'
    }
  },
  watch: {
    vt: {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) {
          selectDataIds = []
          selectedPushList = []
        }
      },
      immediate: true
    },
    isAllFirst: {
      handler () {},
      immediate: true
    }
  },
  computed: {
    ...mapState({
      subscribeListModel: state => state.user.subscribeListModel,
      subscribeKeyList: state => state.user.subscribeKeyList,
    }),
    ...mapGetters('user', [
      'free'
    ]),
    isTable () {
      return this.showIcon === 'table'
    },
    showTableMore () {
      return this.tableList.length === 20 && this.listState.total > 20
    },
    showEmpty () {
      return this.listState.list.length === 0 && this.listState.loaded
    },
    getFilters () {
      return this.filters
    },
    showMButton () {
      return this.showManageButton && !this.hasKey
    },
    isFree () {
      return this.free
    },
    listModel () {
      if (this.isFree) {
        this.setSubscribeListMode('S')
        return 'S'
      } else {
        return this.subscribeListModel
      }
    },
    // 是否有订阅关键词
    hasKey () {
      return Array.isArray(this.subscribeKeyList) && this.subscribeKeyList.length > 0
    }
  },
  data () {
    return {
      showIcon: 'list',
      isAllFirst: false,
      tableList: [],
      listState: {
        loaded: true, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 50, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      },
      nowCheckList: [],
      statusList: [],
      personList: [],
      showVipDialog: false,
      checkNum:0,
      showDataExportDialog: false,
      exportLoading: false
    }
  },
  created () {
    if (!this.config.table) {
      this.doQuery(this.filters)
    }
    const _this = this
    // 窗口切换刷新参标数据
    document.addEventListener('visibilitychange', function () {
      if (document.visibilityState === 'visible') {
        _this.getJoinBidInfo()
      }
    })
  },
  mounted () {
    this.initCollectEvent()
    // document.getElementsByClassName(
    //   "el-pagination__jump"
    // )[0].childNodes[0].nodeValue = "跳到";
    // console.log(this.$refs.pagination)
  },
  methods: {
    ...mapMutations('user', ['setSubscribeListMode']),
    dateFromNow,
    // 查看分发状态
    async setShow (id) {
      const query = {
        infoId: id
      }
      const { data, error_code: code } = await getViewStatus(this.vt, query)
      if (code === 0) {
        data.forEach(item => {
          if (item.isvisit === 0 || !item.isvisit) {
            item.isvisit = '未读'
          } else if (item.isvisit === 1) {
            item.isvisit = '已读'
          }
          if (item.visittime) {
            item.visittime = `${item.visittime.split(' ')[0]}\n${item.visittime.split(' ')[1]}`
          } else {
            item.visittime = '-'
          }
          if (item.date) {
            item.date = `${item.date.split(' ')[0]}\n${item.date.split(' ')[1]}`
          } else {
            item.date = '-'
          }
        })
        this.statusList = data
      }
    },
    addLoadPerson () {
      // this.getBuyProductList()
    },
    calcMoney (budget) {
      if (budget && budget !== '0') {
        // return formatMoney(budget, {
        //   type: 'number',
        //   digit: 2,
        //   level: 1
        // })
        return moneyUnit(budget, 'fixUnit')
      } else {
        return ''
      }
    },
    calcTitle (item) {
      if (!item.projectName) {
        item.projectName = item.title
      }
      const {
        projectName,
        matchKeys
      } = item
      const hightLightedTitle = replaceKeyword(projectName, matchKeys, ['<span class="highlight-text">', '</span>'])
      return `${hightLightedTitle}`
    },
    async onClickDataExport () {
      if (!this.listState.total) return
      this.exportLoading = true
      const { error_code: code, isPrompt } = await ajaxGetDontPromptAgain()
      if (code === 0) {
        let countBool = false
        if (this.checkNum > 0) {
          countBool = this.checkNum >= 20000
        } else {
          countBool = this.listState.total >= 20000
        }
        if (isPrompt && countBool) {
          this.exportLoading = false
          this.showDataExportDialog = isPrompt
        } else {
          this.toDataExportEvent()
        }
      } else {
        this.toDataExportEvent()
      }
    },
    async checkBoxChange (data) {
      const params = {
        status: data ? 1 : 0
      }
      const res = await ajaxSetDontPromptAgain(params)
      console.log(res)
    },
    setExport () {
      this.toDataExportEvent()
    },
    async toDataExportEvent () {
      this.getNewData()
      let pushSelectedArr = selectedPushList
      const query = this.getRequestParam()
      if (pushSelectedArr.length > 0) {
        query.selectIds = pushSelectedArr.map(v => v._id).join(',')
        query.selectKeys = pushSelectedArr.map(v => {
          if (Array.isArray(v.matchKeys)) {
            return v.matchKeys.join(' ')
          } else {
            return ''
          }
        }).join(',')
      }
      const res = await getPushListExport(this.vt, query)
      this.exportLoading = false
      if (res.data) {
        const link = `/front/dataExport/toCreateOrderPage/${res.data}`
        tryCallHooks({
          fn: () => {
            this.$BRACE.methods.open({
              route: {
                link
              }
            })
          },
          spareFn: () => {
            location.href = link
            // window.open(link)
          }
        })
      }
    },
    changeCheck (data, article) {
      const $ = this.$querySelector.bind(this)
      if (selectDataIds.length == 0) {
        if (data.check) {
          selectedPushList.push(article)
          selectDataIds.push(data.id)
          getCaIndexIds.push(data.ca_index)
        }
      }
      selectDataIds.forEach((v, i) => {
        if (data.check) {
          if (!this.contains(selectDataIds, data.id)) {
            selectedPushList.push(article)
            selectDataIds.push(data.id)
            getCaIndexIds.push(data.ca_index)
          }
        }
      })
      if (!data.check) {
        const index = selectDataIds.indexOf(data.id)
        selectedPushList.splice(index, 1)
        selectDataIds.splice(index, 1)
        getCaIndexIds.splice(index, 1)
        $('.custom-checkbox.has-top').prop('checked', false)
      }
      this.checkNum = selectDataIds ? selectDataIds.length : 0
    },
    onClickDataCollect (e) {
      let _this = this
      const $ = this.$querySelector.bind(this)
      let nowCheckItems = []
      this.getNewData()
      $('.custom-checkbox:not(.has-top):checked').each(function (index) {
        const tempN = $(this).attr('dataid')
        if (!_this.contains(selectDataIds, tempN)) {
          selectDataIds.push(tempN)
        }
        const haschecked = $(this).siblings('.a-i-right').find('i').hasClass('checked')
        if (haschecked) {
          selectDataIds.splice(index, 1)
        }
      })
      selectDataIds.forEach((item, index) => {
        nowCheckItems.push({
          id: item,
          index: index,
          check: $(this).parent().find('.icon-collect.checked').length > 0
        })
      })
      this.onCollect({
        list: nowCheckItems,
        event: e
      })
    },
    // 手动分发
    async onClickDataDistribute (e) {
      if (selectDataIds.length === 0) {
        this.$toast('尚未选择标讯，请选择', 1000)
        return
      }
      this.$refs.powerNode.titleMsg = '选择接收人员'
      this.$refs.powerNode.searchVal = ''
      // this.$refs.powerNode.currentIndex = this.currentIndex
      this.$refs.powerNode.centerDialogVisible = true
      this.$refs.powerNode.selectDataIds = selectDataIds
      // if(this.productList.length !== 0) {
      //   this.$refs.powerNode.empower_count = this.productList[this.proCurrentIndex].empower_count
      // }
      this.$refs.powerNode.getData('yes')
      // let selectAreas = []
      // this.listState.list.forEach((v, i) => {
      //   selectDataIds.forEach((s, index) => {
      //     if (v._id === s) {
      //       if (v.area) {
      //         selectAreas.push(v.area)
      //       }
      //     }
      //   })
      // })
      // const params = {
      //   region: selectAreas.toString()
      // }
      // const res = await getDistributor(this.vt, params)
      // if (res.error_code === 0) {
      //   this.personList = res.data
      // }
    },
    // 手动分发保存
    manualDiatribution (data) {
      getMsgDistributor({ messageId: getCaIndexIds.toString(), staffs: data }).then(res => {
        if (res.error_code === 0) {
          if (res.data === 1) {
            this.$message({ message: '分发成功', type: 'success' })
          } else {
            this.$message({ message: res.error_msg, type: 'warning' })
          }
        } else {
          this.$message({ message: res.error_msg, type: 'warning' })
        }
      })
    },
    filterDiatribution (data) {
      this.filters.staffs = data
      this.getList(this.filters)
    },
    toggleActiveIcon (type, model) {
      this.showIcon = type
      if (model) { // 表格没有传model 免费用户可切换
        if (this.isFree && model !== 'S') { // S 为精简列表免费用户可切换
          this.showVipDialog = true // 是免费用户并且不是切换的精简或者表格则提醒开通会员

          // this.$confirm('立享列表展示更多公告关键信息，例如：采购单位、中标单位、招标代理机构等，提高公告查看效率', '开通超级订阅', {
          //   confirmButtonText: '去开通',
          //   cancelButtonText: '取消',
          //   center: true,
          //   showClose: false,
          //   customClass: 'open-vip-dialog',
          //   appendToBody: false
          // }).then(() => {
          //   window.open('/swordfish/page_big_pc/free/svip/buy')
          // }).catch(() => {})
          return false
        }
        // this.listModel = model
        this.setSubscribeListMode(model)
      }
    },
    changeAllCheck (e) {
      const $ = this.$querySelector.bind(this)
      const nowStatus = $(e.target).prop('checked')
      $('.custom-checkbox:not(.has-top)').prop('checked', nowStatus)
      if (nowStatus) {
        let pageCheckList = []
        let pageCheckId = []
        let pageCaIndex = []
        this.listState.list.forEach((v) => {
          pageCheckList.push(v)
          pageCheckId.push(v._id)
          pageCaIndex.push(v.ca_index)
        })
        if (selectDataIds.length == 0) {
          selectedPushList = pageCheckList
          selectDataIds = pageCheckId
          getCaIndexIds = pageCaIndex
        } else {
          selectedPushList = selectedPushList.concat(pageCheckList)
          selectDataIds = selectDataIds.concat(pageCheckId)
          getCaIndexIds = getCaIndexIds.concat(pageCaIndex)
        }
        // 去重
        selectedPushList = uniqBy(selectedPushList, '_id')
        selectDataIds = [...new Set(selectDataIds)]
        getCaIndexIds = [...new Set(getCaIndexIds)]
      } else {
        this.listState.list.forEach((v) => {
          selectDataIds.forEach((s, index) => {
            if (v._id == s) {
              selectedPushList.splice(index, 1)
              selectDataIds.splice(index, 1)
              getCaIndexIds.splice(index, 1)
            }
          })
        })
      }
      this.checkNum = selectDataIds ? selectDataIds.length : 0
    },
    getCheckIds (callback) {
      const arr = []
      const $ = this.$querySelector.bind(this)
      $('.custom-checkbox:not(.has-top):checked').each(function () {
        const tempN = callback.bind(this)()
        arr.push(tempN)
      })
      return arr
    },
    goManage () {
      this.$emit('goSet')
    },
    resetAllCheck () {
      $('.custom-checkbox.has-top').prop('checked', false)
      $('.custom-checkbox:not(.has-top)').prop('checked', false)
      selectedPushList = []
      selectDataIds = []
      getCaIndexIds = []
      this.checkNum = 0
    },
    // 恢复数据至第一次请求的状态(页码等)
    resetListState () {
      const state = {
        loaded: false,
        loading: false,
        pageNum: 1,
        total: 0,
        list: []
      }
      Object.assign(this.listState, state)
      this.resetAllCheck()
    },
    doQuery (filters) {
      this.resetListState()
      this.getList(filters)
    },
    getRequestParam (filters) {
      const query = {
        pageNum: this.listState.pageNum,
        pageSize: this.listState.pageSize
      }
      if (query.pageNum === 1) {
        query.format = 'table'
      }
      if (this.getFilters && Object.keys(this.getFilters).length > 0) {
        Object.keys(this.getFilters).forEach(v => {
          if (typeof this.getFilters[v] !== 'undefined') {
            query[v] = this.getFilters[v]
          }
        })
      }
      if (filters && Object.keys(filters).length > 0) {
        Object.keys(filters).forEach(v => {
          if (typeof filters[v] !== 'undefined') {
            query[v] = filters[v]
          }
        })
      }
      // 企业订阅-增加参数isEnt
      if (this.$route.query?.vt === 'q') {
        query.isEnt = true
      }
      // delete query.item  所有订阅列表都增加item参数

      return query
    },
    async getList (filters) {
      let _this = this
      const $ = this.$querySelector.bind(this)
      const query = this.getRequestParam(filters)
      this.listState.loading = true
      this.listState.loaded = false
      // 判断是否无筛选条件
      this.isAllFirst = false
      /**
      * P330开发时发现遗留缺陷-原来代码为query.time === ''，字段key取错，且永远不会等于空(父组件已设置value为'all')，下边判断永远不会生效
      * 现修改为：key取query.selectTime  value判断不等于'all' || ''
      */
      if (query.pageNum === 1 && query.area === '' && (query.selectTime === '' || query.selectTime === 'all')) {
        this.isAllFirst = true
      }
      const res = await getPushList(this.vt, query)
      this.listState.loading = false
      this.listState.loaded = true
      if (filters) {
        this.$emit('personCount', filters)
      }
      if (res.data && Array.isArray(res.data.list)) {
        res.data.list.forEach(item => {
          if (item.buyerClass && item.buyerClass !== '其它') {
            item.buyerclass = item.buyerClass
          }
          if (item.subtype) {
            item.type = item.subtype
          }
          if (item.publishTime) {
            item.publishtime = item.publishTime
          }
          const visited = this.pathVisited(
            this.createPathItem(
              '/article/content/*.html',
              `id=${item._id}`
            )
          )
          this.$set(item, 'visited', visited)
          if (!pushIdInfoIdRelationshipMap[item._id]) {
            pushIdInfoIdRelationshipMap[item._id] = item['ca_index']
          }
        })
      }
      if (query.pageNum === 1 && query.pageSize === 50) {
        if (res.data && res.data.list) {
          this.tableList = res.data.list.slice(0, 20)
        }
      }
      if (res.data?.count) {
        this.listState.total = res.data.count
        this.listState.list = res.data.list || []
        this.$nextTick(() => {
          this.getCollectStatusForList()
          // 等dataid赋值完成后再获取值
          var $dom = $('.info-list-card .title-text-checkbox[name="bid-list"]')
          var selectPageNum = 0
          $dom.each(function () {
            // 回显列表选中状态
            if (!_this.contains(selectDataIds, $(this).attr('dataid'))) {
              $(this).prop('checked', false)
            }
            if (_this.contains(selectDataIds, $(this).attr('dataid'))) {
              selectPageNum++
              $(this).prop('checked', true)
            }
            // 全选复选框选中/不选中
            if (!$(this).attr('checked')) {
              $('.custom-checkbox.has-top').prop('checked', false)
            }
            if (selectPageNum >= 10) {
              $('.custom-checkbox.has-top').prop('checked', true)
            }
          })
        })
      } else {
        this.listState.total = 0
        this.listState.list = []
      }
      this.getJoinBidInfo()
    },
    async toDetail (item) {
      const { _id, matchKeys, ca_index } = item
      item.visited = true
      if (this.vt !== 'q') {
        await setSubscribeInfoRead(this.vt, {
          vsid: ca_index,
          isEnt: this.$route.query?.vt === 'q'
        })
      }
      this.pathVisiting(
        this.createPathItem(
          '/article/content/*.html',
          `id=${_id}`
         )
      )
      let match = ''
      if (Array.isArray(matchKeys) && matchKeys.length) {
        match = matchKeys.join(' ')
        if (match) {
          match = encodeURIComponent(match)
        }
      }
      // 在工作桌面内打开三级页
      openLinkInWorkspace(true, {
        url: `/article/content/${_id}.html?kds=${match}`,
        newTab: true
      })
    },
    getNewData () {
      const $ = this.$querySelector.bind(this)
      const nowCheckItems = this.getCheckIds(function () {
        return $(this).attr('dataid')
      })
      this.nowCheckList = nowCheckItems
      if (selectDataIds.length === 0) {
        selectDataIds = nowCheckItems
      } else {
        nowCheckItems.forEach((sum, index) => {
          if (!this.contains(selectDataIds, sum)) {
            selectDataIds.push(sum)
          }
        })
      }
    },
    onPageChange (p) {
      this.getNewData()
      this.listState.pageNum = p
      this.getList()
    },
    onSizeChange (size) {
      this.listState.pageSize = size
      this.listState.pageNum = 1
      this.getList()
    },
    contains (arr, ele) {
      if (arr.length == 0) {
        return;
      }
      var i = arr.length;
      while (i--) {
        if (arr[i] == ele) {
          return true;
        }
      }
      return false;
    },
    getMore () {
      this.$emit('getMore')
    },
    ajaxForCollectChange (baction, binfo, callback) {
      /*
        收藏或取消收藏ajax
        params: {
          baction: String, //用户行为：R：移除收藏；C：收藏（默认）非必填
          binfo: Array, // 招标信息数组 必填
          bid: String, // 招标信息加密后id 必填
        }
        参数示例 (baction=R binfo数组只需要bid即可)onSizeChange
      */
      const params = {
        baction: baction,
        binfo: binfo
      }
      bidCollAction(params).then(r => {
        callback && callback(r)
      })
    },
    onCollect (data) {
      const $ = this.$querySelector.bind(this)
      let {
        item,
        event,
        list
      } = data
      const { top, left } = this.calcCardTopLeft(event, !!list)
      let binfo = []
      if (list) {
        binfo = list.filter(v => !v.check).map(v => ({ bid: v.id }))
        item = {}
      } else {
        binfo = [{ bid: item._id }]
      }
      var _this = this
      if (binfo.length === 0) {
        return _this.$toast(list.length ? '已收藏' : '尚未选择标讯，请选择', 800)
      }
      if (item.collection) {
        // 单个取消收藏行为
        this.ajaxForCollectChange('R', binfo, function (res) {
          if (res.data) {
            item.collection = 0
            _this.$toast('已取消收藏', 800)
          } else {
            _this.$toast(res.error_msg, 1000)
          }
        })
      } else {
        if (this.isFree) {
          this.$refs.collectRef.isNeedSubmit('article_collection', () => {
            // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
            sessionStorage.setItem('$save-tags-binfo', JSON.stringify(binfo))
            this.ajaxForCollectChange('C', binfo, function (res) {
              if (res.data) {
                _this.$toast('收藏成功', 1500)
                if (list) {
                  list.filter(v => !v.check).forEach(function (v) {
                    _this.nowCheckList.forEach(function (s, i) {
                      if (s === v.id) {
                        _this.listState.list[i].collection = 1
                      }
                    })
                  })
                } else {
                  item.collection = 1
                }
                _this.getList(_this.filters)
                $('.tags-box').show(function () {
                  window.pushListActiveTags = []
                  $('.tag-labels').empty()
                  $('.clear-input').val('')
                  $('.tags-list').find('.tags-item').removeClass('tags-active')
                  $('.tag-placeholder').show()
                }).css({
                  top: top,
                  right: 'unset',
                  left: left
                })
                window.getUserTags()
              } else {
                if (res.error_msg.indexOf('付费') > -1) {
                  _this.$toast('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
                }
              }
            })
          })
        } else {
           // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
          sessionStorage.setItem('$save-tags-binfo', JSON.stringify(binfo))
          this.ajaxForCollectChange('C', binfo, function (res) {
            if (res.data) {
              _this.$toast('收藏成功', 1500)
              if (list) {
                list.filter(v => !v.check).forEach(function (v) {
                  _this.nowCheckList.forEach(function (s, i) {
                    if (s === v.id) {
                      _this.listState.list[i].collection = 1
                    }
                  })
                })
              } else {
                item.collection = 1
              }
              _this.getList(_this.filters)
              $('.tags-box').show(function () {
                window.pushListActiveTags = []
                $('.tag-labels').empty()
                $('.clear-input').val('')
                $('.tags-list').find('.tags-item').removeClass('tags-active')
                $('.tag-placeholder').show()
              }).css({
                top: top,
                right: 'unset',
                left: left
              })
              window.getUserTags()
            } else {
              if (res.error_msg.indexOf('付费') > -1) {
                _this.$toast('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
              }
            }
          })
        }
      }
    },
    calcCardTopLeft (e, batch) {
      const $ = this.$querySelector.bind(this)
      const containerWidth = this.$el.clientWidth
      const containerHeight = this.$el.clientHeight
      const cardWidth = 332
      const cardHeight = 362
      var top = parseInt($(getEventTarget(e)).position().top) + 30 + 50
      if (batch) {
        top -= 30
      }
      var left = parseInt($(getEventTarget(e)).position().left) - 300

      if (top >= containerHeight - cardHeight) {
        top = containerHeight - cardHeight
      }
      if (left >= containerWidth - cardWidth) {
        left = containerWidth - cardWidth
      }

      left += 'px'
      top += 'px'
      return {
        top,
        left
      }
    },
    initCollectEvent () {
      const _this = this
      const $ = this.$querySelector.bind(this)

      function toastFn (text, duration) {
        _this.$toast(text, duration)
      }

      // 自定义标签
      // 标签输入框事件
      $('.tags-box').click(function (e) {
        e.stopPropagation()
      })

      $('.tag-input').click(function (e) {
        e.stopPropagation()
        $(this).children('.tag-placeholder').hide()
        $(this).children('input').focus()
      })
      // 标签输入框回车事件
      $('.tag-input .clear-input').keydown(function (event) {
        event.stopPropagation()
        if (event.keyCode == 13) {
          if (!$('.tags-box').is(':hidden')) {
            $('.tags-inputs .add-tag-button').trigger('click')
          }
        }
      })
      // 标签输入框失去焦点事件
      $('.tag-input .clear-input').blur(function () {
        if ($('.tag-labels').children().length == 0 && $(this).val() == '') {
          $('.tag-placeholder').show()
        }
      })
      // 添加标签按钮事件
      $('.tags-inputs .add-tag-button').on('click', function () {
        var input = $('.tag-input .clear-input')
        if (input.val().length >= 2 && input.val().length < 11) {
          // ajax提交自定义标签
          addTagsAjax(input.val())
        }
      })
      // 点击确定按钮，绑定标签
      $('.tags-footer .button-confirm').on('click', function () {
        if (!$('.tags-box').is(':hidden')) {
          var lids = ''
          var lname = ''
          $('.tags-item.tags-active').each(function () {
            if ($(this).attr('data-id')) {
              if (lids != '') {
                lids += ','
              }
              if (lname != '') {
                lname += ','
              }
              lids += $(this).attr('data-id')
              lname += $(this).text()
            }
          })
          var params = {
            lids: lids,
            laction: 'S',
            binfo: JSON.parse(sessionStorage.getItem('$save-tags-binfo'))
          }

          // 执行保存绑定标签操作
          if (params.lids !== '') {
            saveChooseTags(params, function () {
              $('.tags-footer .button-cancel').trigger('click')
            })
          }
        }
      })

      $('.tags-footer .button-cancel').on('click', function () {
        $('.tags-box').hide(function () {
          // 标签弹框消失时 清除上次选择的标签分类
          pushListActiveTags = []
          $('.tag-labels').empty()
          $('.clear-input').val('')
          $('.tags-list').find('.tags-item').removeClass('tags-active')
          $('.tag-placeholder').show()
        })
      })

      window.pushListActiveTags = [] // 选中的自定义标签 作为全局变量使用
      // 解绑自定义标签
      function deleteInputTag (item) {
        var index = $(item).parent().attr('data-index')
        var id = $(item).parent().attr('data-id')
        pushListActiveTags.splice(index, 1)
        inputTagList()
        $('.tags-item[data-id="' + id + '"]').removeClass('tags-active')
      }

      function inputTagList () {
        var ht = ''
        $('.tag-labels').html(ht)
        pushListActiveTags.forEach(function (v, i) {
          ht += '<span class="tag-label" data-index=' + i + ' data-id="' + v.lid + '">'
          ht += '<em>' + v.lname + '</em>'
          ht += '<i class="tag-close"></i>'
          ht += '</span>'
        })
        $('.tag-labels').html(ht).off('click').on('click', '.tag-close', function (e) {
          const target = getEventTarget(e)
          deleteInputTag(target)
        })
        if ($('.tag-labels').children('.tag-label').length > 0) {
          $('.tag-placeholder').hide()
        }
        checkTagDisabled()
      }

      // 渲染标签列表数据
      function renderTagsList (data) {
        if (data && data.length > 0) {
          var ht = ''
          data.forEach(function (v, i) {
            ht += '<span class="tags-item" data-count=' + v.count + ' data-id=' + v.lid + '>' + v.lanme + '</span>'
          })
          $('.tags-list').html(ht)
          pushListActiveTags.forEach(function (s, j) {
            $('.tags-list .tags-item[data-id="' + s.lid + '"]').addClass('tags-active')
          })
          $('.tags-item').click(function (e) {
            e.stopPropagation()
            if ($(this).hasClass('disabled')) return
            var id = $(this).attr('data-id')
            var name = $(this).text()
            $(this).toggleClass('tags-active')
            if ($(this).hasClass('tags-active')) {
              pushListActiveTags.push({
                lid: id,
                lname: name
              })
              inputTagList()
            } else {
              var newArr = pushListActiveTags.filter(function (item) {
                return item.lid != id
              })
              pushListActiveTags = newArr
              console.log(pushListActiveTags, newArr, 'quxiao')
              inputTagList()
            }
          })
        }
        inputTagList()
      }

      // 获取用户自定义标签
      function getUserTags () {
        getBidCollTagList().then(r => {
          if (r.error_code == 0 && Array.isArray(r.data)) {
            renderTagsList(r.data.reverse())
          }
        })
      }

      window.getUserTags = getUserTags

      /*
        保存或清除标签 ajax
        params: {
          lids: String 标签id（加密后）,  非必传
          lname: String 标签名称,  非必传
          laction: String  用户行为:S添加或绑定标签；D删除标签  非必传
          binfo: Array 招标信息数组（已收藏的招标信息） 非必传
          bid: String 招标信息加密后id  必传
        }
        1：lids为空；lname不为空；laction=”S”;binfo数组不为空->新增标签并且绑定收藏信息
        2：lids不为空；laction=”S”;binfo数组不为空->收藏信息绑定标签
        3：lids不为空；laction=”D”；->删除标签 并解绑收藏的信息
      */
      function saveChooseTags (params, callback) {
        saveBidCollAddTag(params).then(r => {
          if (r.data) {
            toastFn('标签绑定成功', 1000)
            callback && callback()
          }
        })
      }

      // 新增标签
      function addTagsAjax (name) {
        createBidTag({ name }).then(r => {
          if (r.data) {
            $('.tag-input .clear-input').val('')
            // 添加标签成功后 绑定标签
            if (pushListActiveTags.length < 3) {
              pushListActiveTags.push({
                lid: r.data,
                lname: name
              })
            }
            getUserTags()
          } else {
            // toastFn(r.error_msg, 1000)
            toastFn('标签已经存在，无需添加', 1000)
          }
        })
      }

      function checkTagDisabled () {
        if (pushListActiveTags.length >= 3) {
          // 禁用标签
          $('.tags-list').find('.tags-item:not(.tags-active)').addClass('disabled')
        } else {
          // 解除禁用
          $('.tags-list').find('.disabled').removeClass('disabled')
        }
      }

      getUserTags()
    },
    getCollectStatusForList () {
      const $ = this.$querySelector.bind(this)

      // 获取当前页信息流收藏状态
      function getBidIsColl () {
        var bids = ''
        var dataId = ''
        // 区分标题搜索和全文搜索收藏
        var $dom = $('.info-list-card .title-text-checkbox[name="bid-list"]')
        $dom.each(function () {
          if ($(this).attr('dataid')) {
            dataId = $(this).attr('dataid')
            if (bids != '') {
              bids += ','
            }
            bids += dataId
          }
        })
        checkBidsIsColl({ bids: bids }).then(r => {
          if (r.data) {
            var data = r.data
            $('.icon-collect').removeClass('checked')
            data.forEach(function (item, index) {
              $('.icon-collect[dataid="' + item + '"]').addClass('checked')
            })
          }
        })
      }

      getBidIsColl()
    },
    toBuySvip () {
      window.open('/swordfish/page_big_pc/free/svip/buy')
    },
    // 获取参标数据
    async getJoinBidInfo () {
      try {
        const ids = this.listState.list.map(item => item._id).join()
        const { error_code: jCode, data: jData } = await getBidIsJoin({ ids })
        if (jCode === 0 && jData) {
          for (const temp of jData) {
            for (const item of this.listState.list) {
              if (temp.id === item._id) {
                this.$set(item, 'joinBid', Boolean(temp.value))
              }
            }
          }
        } else {
          return []
        }
      } catch (e) {
        return []
      }
    },
    // 参标
    async joinBidHandle (item) {
      if (item.joinBid) {
        this.$toast('如需终止参标，需要在详情页进行操作。')
        return
      }
      const params = {
        bidIds: item._id
      }
      try {
        const { error_code: code, error_msg: msg, data } = await joinBidAction('in', params)
        if (code === 0 && data) {
          // this.$toast('已参标，请前往我的参标项目列表查看。')
          // 拉起参标更新弹窗
          this.$refs.BidrenewalDialog.passVisible = true
          this.$refs.BidrenewalDialog.setid(item._id)
          this.$refs.BidrenewalDialog.refreshData()
          this.listState.list = this.listState.list.map(temp => {
            if (temp._id === item._id) {
              this.$set(temp, 'joinBid', true)
            }
            return temp
          })
        } else if (code === -1) {
          this.$toast(msg || '操作错误，请稍后重试')
        }
      } catch (e) {
        console.warn(e)
        this.$toast('操作错误，请稍后重试')
      }
    },
  }
}
/* eslint-enable */
</script>
<style lang="scss">
.self-export-loading {
  .el-loading-spinner{
    top: 200px;
  }
}
</style>
<style lang="scss">
.info-list-card {
  position: relative;
}
.info-list-card .custom-checkbox {
  float: left;
  width: 14px;
  height: 14px;
  border: 1px solid #E0E0E0;
  border-radius: 3px;
  background-color: #fff;
  margin-right: 16px;
  cursor: pointer;
}

.custom-checkbox:checked {
  width: 14px;
  height: 14px;
  background: url(https://cdn-ali.jianyu360.com/images/biddingSearch/icon-checked.png) no-repeat center;
  background-size: contain;
  border: 0;
}

.tags-box {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  max-height: 360px;
  position: absolute;
  top: 0;
  right: 0;
  width: 332px;
  padding: 20px 16px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
  z-index: 99;
}

.tags-box .tags-inputs {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tags-box .tags-inputs .tag-input {
  width: 100%;
  padding: 0;
  min-height: 34px;
  max-height: 74px;
  overflow-y: scroll;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: text;
  text-align: left;
}

.tags-inputs .tag-input::-webkit-scrollbar {
  width: 8px;
}

.tags-inputs .tag-input::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #ECECEC;
}

.tag-input>.tag-labels {
  display: inline;
  vertical-align: middle;
}

.tag-input>.clear-input {
  display: inline-block;
  padding: 0 10px;
  width: 160px;
  height: 36px;
  line-height: 1;
  background: #fff;
  border-radius: 2px;
  vertical-align: middle;
  border: none;
  background-color: transparent;
  box-shadow: none;
  box-sizing: border-box;
  font-size: 14px;
  color: #1d1d1d;
}

.tag-input>.tag-labels>.tag-label {
  display: inline-block;
  padding: 5px 12px;
  font-size: 14px;
  line-height: 1.2;
  margin: 5px;
  cursor: pointer;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F5F6F7;
  color: #1D1D1D;
}

.tag-close {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEwSURBVHgB7ZWxDYMwEEXPER1NRmEFJggUiJpJQiahRhSECViBUdzQIYgdgYQIPnwXmkT+DcbY/s9n3wHg5PTPKoriejRGYB+rqrpP0xT1fR9mWSaBaO77fiuEeCZJ8gAqwGyez68dBWIxV83gbSJEboK47HXWda1DF626Ar2gTUi35lo6iqbxuwBxHEvP80JF3lEg9sxhjp5pDnoHdCSGYWjVDj4W3B4HZo4dHQpgC8E1twI4gtANrrk1AAYxP1nmJAAEArjmZIADiI5TsC5AlJRS5zWcJVIEDLd9LXIUrCNgSjVqsWIBYHnOqZhrHR6BTZGhVEwSAKXCcSHEGebfQBjvAKe8cv6iRgC1i4ZijkHotUxz0TtQlmWuFrpxKtxyHOM4Nmma5sAVJaednH5SLxmyS6JIrGjkAAAAAElFTkSuQmCC);
  background-position: center 2px;
  background-repeat: no-repeat;
  background-size: contain;
}

.tag-placeholder {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #bbb;
  font-size: 14px;
}

.tags-box .tags-list {
  margin-top: 12px;
  overflow-y: auto;
  flex: 1;
}

.tags-box .tags-list::-webkit-scrollbar {
  width: 8px;
}

.tags-box .tags-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #ECECEC;
}

.tags-box .tags-list .tags-item {
  float: left;
  min-width: 44px;
  padding: 0 8px;
  margin: 10px 8px 0 0;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  color: #1D1D1D;
  text-align: center;
  font-size: 14px;
  background: #F5F6F7;
  cursor: pointer;
}

.tags-item.tags-active {
  padding: 0 8px 0 24px !important;
  background: #2CB7CA url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADPSURBVHgB7ZNREcIwDIYjYRImYRLmZHPAHAwHlUAdIAEJSKiESgjpEY7Qg7uFdXnKd5eXdMmfpX8BHMdxDEDEgSJQ9GANiU4UGZ9cwBISXPFNGWIAKyrxZLr+suq/xdkwV4oFlFBNR3ET4veS0zaJosGoqOtZ8EVUi4tGWbM+rklC/Ax7KH++dY18ZbmZuGi8iKbhxzdTJT5DSyo/LNXZSZxljV80A3T4aayR86vIJTzyjX8xZTATF0NIU24y5xFDSFNGU3ExxNzsmTmO4zAPYEiZdz83IV0AAAAASUVORK5CYII=) no-repeat 6px center !important;
  color: #fff !important;
  background-size: 16px !important;
  border: 0 !important;
}

.tags-item.disabled {
  color: #8E8E8E !important;
}

.tag-label em {
  font-style: normal;
}

.add-tag-button {
  margin-left: 16px;
  color: #2cb7ca;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
}

.tags-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tags-button {
  padding: 3px 17px;
  color: #1d1d1d;
  font-size: 14px;
  line-height: 22px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  text-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.button-confirm {
  margin-right: 16px;
  color: #fff;
  background: #2cb7ca;
  border-color: #2cb7ca;
}

.j-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon-list {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAApElEQVRIie2UwQkDIRBFn7JNbEkWYAWmrTSg96Si3aQLc3AFI0H3EE0O82AufuEPKE957w1wJeGAu7UWgBACQM5XxvIAnC7K1mKxkhnLkPt1dagmFLdQGrgAT2AjPVlNzkezAW4BbrSfpJd/FRVjnNV1ivoP/RxZqMdyyO+NSoxT0SQT78eYD3dyHgfPDhgxdQcxdRcxdQ9ZqIeYujFi6jP8n6lfC3duA8uNLvEAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-list-detail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgB7dbNCYQwEIbhyVSwJWxXOW4LW0JK2Bb2mK4swQoSI6ioYECJUeF9Lvmbw8dAYEQAADlm68F7/zHG/NL2JRXFGJu0OGvtf7zTTL2TygF7qTHvoTkTzRXLdRbNUXkAQpZCyFJyv7uV6zTzw2bIEMJ3XVxD3xxVdQLcGFPQEUxBZyJkKYQshSnoCKYgANivA7MjJEXo5QuyAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-box.active .icon-list-detail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACeSURBVHgB7da9DcIwEIbh724CRqCkYwYmYQVG8AiswB4sQUeZETIBxooEAiRbInKcRHqfyj8n+dM1PgkAUGK5i931dnTXOS03aigqdtEs3A/7y+vMc8XmMahxwOFd2dbj0Jw3LxVrPl/Nca0AIWshZC2lkL3m031usiEfptNvcQvpd+nT20HAgjEFjcEUNCVC1kLIWpiCxmAKAoD/PQHE9yYzkOMULAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-box.active .icon-list {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAAmklEQVRIie3UsQ2DMBCF4d+IJcIMULJDModZizmcGaBkBscZgwIswBE4KQwp7qtsn6U76aSnStM9gJaJBgxbvn4jLQdoVZrutWrmgCL4uK6n5rLgQZ3UeI/KgAZ4A5ZpZSFfT80yr+yEXvuGe725hyu7nAwUIwPF5CxJDBckdfXs/VGS+huS1B8kqX8lA8X83UCS1BGS1EcsoEd3djhI1jC4DwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-table {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAA3ElEQVRIie3XQUrDQBiG4SdDeghdeABX9QZScCH0EuqhulPX/wVcCD2DXqELewcttAsbO2jNys4UzAuBBD743vlDhkwTEad4xCVGyrDCM+5a3OOqUHFHi2s8JEwKl+dMkt3YVxijOfB1se2CUcps3vD694v8wQuW3UPqCR6SdW2BLwaBNrs/k72bUlSfwFEJLPy+eUyz3KwnN8ty057cYp9AFQaB6gJNRBT/9nOqT+CoBIZ94F8JNPsETnBeoHy87fo0iYh35Q4k3/lImFcqh3nCDZ7s/tVL0B3NbjcYbCQMu974QgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-box.active .icon-table {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAA30lEQVRIie3XQUrDQBiG4SdDeghdeICSRb2BFFwUegnbQ3VXvUUWQg+QlV6hC71DLejCph1qzcrOFMwLgQQ++N75Q4ZMUdXNNZ5wh4E0bPGMeYkl7hMVt5SY4DFgnLg8Zhwcxr7FCMWZr9tdFwxCZPOG179f5A9e8N4+hI7gOfnMLbCnFyij+xvRu0lF9glclMDa75vHNMotOnKLKDftyK1PCWShF8guUFR1k/zbj8k+gYsS6PeBfyVQnBK4wjBB+WjX9W1S1c1GugPJMR8Bq0zlsAp4QO3wr56C9mg2+wJlxSMZcnbbKAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}
.icon-box.noclick {
  opacity: 0.5;
  cursor: not-allowed!important;
}

.icon-data-export {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFfElEQVRoQ+2ZbYhUVRjHn/+dXWfKD72gvdArW2CW6QdLRIpAKiTb3kwNsbSMKHqVtb3nzJpeiOacGVeG3N7YMisR1jYsCjVoIwtLSKUQoQwphYw+1H6IXXfG3blPnOHOcr3tzN5178w60Pl4z3Oe5/87zznnPudeUJ031Ll++h8gqgwKIVYCWMTMr2qte8L6PSsykEwmL3Vd9wQAMDMT0cNa621hIP4D4DiONTAwsNyyrGZmvgXAJWEclbNh5gEAbyqlWsrZ2LZ9nmVZx4jofGNjIAAsUUp9NFrs0wCklNcx8w4A00cbONb+U6dOTd24ceNfFSDMZPUAiHsQBQAPjQYxDOA4TiKfzx8kouvHKi6E/QGl1M2j2Qkh5gPYTUSTwkIMAySTyaeZ+bVSEGbusSxrs+u6f44WuFK/67onM5nM92F9CCEWAPiMiBrCQAwDCCE2A3jMG7Rfaz0nbNCo7aSU93hLOeaDeEAp9Wkwlh9gH4C53oB1WuuXoxY2Fn9SygeZuQtAEYKIhohoURDCD3AIwI2e8YtKqfaxBKyGrQfxoTley0GcdQCLFy+ONTU1zQBwgRENYCURrfBN0BAzN2utPy/2lzqEEBOSASHEbMuy5jLzbGaeSUQzATRWyigzDwKYoZT6ZUIAbNu+EsBzRLQUwOVnsvxc1707nU7vrCmAEOJaAOuYeZlvc45ZPzPv6e3tvbOzs3OwJgBeqZBm5sdHEs7MeSIyL9FviegYM59oaGg4MTQ0lAfQDWCa7/20p7+/f0FHR4cZU/090NraOicWi5ma5orgVDPzN0S0JZ/Pb89mswP+/paWlimNjY17ANzge/5FX19fc0l81QFs257n1Tfn+MUx83uu6+pMJnNkpPXjid8bmPmdvb2995tl4x9TtSXkzfxXRHSuL/2/MvOKdDq9t9zCLyc+kUjc5ziOeZmd1qoCsHbt2msKhcKBUnnsRdwaj8efdBznZDnxyWTyYtd1vw7M/MeJRGLJSOKrtYQghPgBwCzfzL+jtX7ClPqjiP8OQJPPpuvo0aPLu7u7C+XGRZ4BIcQzADp84ru11ksriXccZ1Iul/sxcA/pUkotqzQu8gx4QszVcIoHcDyXy00PnjDB2Wxra7vKdV1zIys2Zv5Aa21KiLIZK9lGmgEhhDnn3/YJXKiU2lUu/f7nUsp3iciU0W9prV8KIz7yDEgp9xPRTZ6ww0qpUnUbhuGMbCLLQGtr67RYLPazbxms0lqbWR13W7169YWJRAJKqb+DziIDsG37WcuyNnkBcoODg1Pa29v7x6vetu17LcvqMh8qmHmRKeD8PiMDkFJuJ6IlnvNdSqmF4xVvxgsh3gfwiOdri1KqeO2NfBMLIX4DcLV3irRqrTdEBLAVwHLP11alVAmm+CiSDKxZs2ZyY2Nj3/CsALenUqkv6wbA3KoAmNKh2AqFwmWZTOaPugHwNton3vLJa60TUYj39kD1l5CU8ikiesMTfVwpVdwLUTQhRE0AkkT0ipeBg1rr0sts3Aw1ARBCOADWewB7tda3jlu556AmAFJKZY5sD6BHa31HXQEEirhNSqnn6wrA/BTJ5XKvmzI6Ho+vchznn7oCiErsSH5C74FAKdymlEpVU1hY3/4ay3zN0Fo/6h/rLyWGiyZm3q21vitskGrZeTe8I6Uai4i0UkqOCCClfIGIsr7OTYVCYUMmk/m9WgIr+U0mkzNc100BaC7ZAZifSqXMp5rhNpwBc2mIx+M/AbhoIgSHiLlPKTUvaHfaX0rbtpsty9pR+j8VwmmtTA7ncrnbstlsb0UA02nb9iwA2wLfJGslNBjHfATrjMfj68sdzWX/1EsppzKzKcomT5T6fD5/aKRZH3EPTJTI8cb9FyJEG14SVWmfAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

/* /images/collected.png */
.icon-star {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANtSURBVHgB7VhbTuMwFL0tBfHUdAeEFdAldHZQPniJD9oVwKygdAewgqQfCPGQyqyAzgomrICwg/wgIfE8J9hgoqR1cPrXI1ncXMf26bm27w0iU0xhj4uLiwM2KREVKQlnZ2fezMzMHe2Xl5ffu7u7QykBVSkJs7OzXW3XarWulIRSFDTV04CKa1AxEkeUoqChXoQWp3xOcCZI9V5fX9vqcfj29nZCA76W7/t1cYQzQVMphLU3Nzd3LB8q1hcXFw/FEU4ElXot9Rhwz21sbJBcn45KpXLgqqITQZzWffxJCFA97Yd9rExnFZ0IYr+1lRmYJ1bZ17RdVaxJQXCx+fn5OtQ7AEGPPlM9DfhOcPUw/PXl5eXu6elpf29vL5SCyL0Hub+q1WqDJLDQqiLTQPPM97AH/+7s7LSy5ri8vLzBuGbKHUJV7tMQP+Ie/eHj42PY6XTirDm+KXh+ft7C4K4ikYQFzwyl5AF9x3l9z8/PPfy4ZsrdUPM1IUDiWFpaYh6PsVbIMWaaTIeYSjQy1uLgSE1wSxvKheMyhVqogsUbOgIYu45WxzPXMfcmfU303cIeaue3EKuUdSNfYbx+eHjo5MnvCu7nlZUV37iqIlVoRPqdb6eYHXxBPlIW0VpYWGjLhIDQ7o8iR2QekrSSvE62t7f7UiKurq5ILhhFLpfgpEnakhtJcFIki5AbS7BskkXJWREsi6S6YwdFyBFWudg43RprUhA6LQKxLTnCulhA/v28C7FA8ZyKy12ZdaQ263vVmiAm/cwwUCOSgmDm0TaKWs92nDVBKPBJ8CdViQqp/l5p2I6zJojE7ikzlxxTFw+U5CMhCDXLJ8gkrya/lwxiKK26SF13PO20s+bA1vinTE/KJqhPISsa049KpQ1i/9F/JB/ViUcb/jv2paaJkkWr1XWxhBXBwWCQLExbn2CEssmCFKav+0B+yKaG0eeTKN9V/ZHus/0MsCJonmCE8BeJMZRGtZzck5ubm0mD3ZGviii55JFFfPi1z/okW2WSVBYwEWNP9lDyZ1bVUK4NcrpCT6OztbUVyBhYKQhyzZQrhno9FLNreeQIXC0BleW76T7bk2z1VYdNvYoJ9WMAYn9sq2x1/x1BzQDzHOHH7qsuz2a8FUGGEZPHT09P/Z/+308RbYMoSR5ivkCmmELkHXyZDJTCB+QVAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-distribute-gray {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA1FJREFUaEPtWb1rFEEUf2/3CNoKR/zGwoAoooVg65V2htzMcVfFP8D4gVYWJrXiR4S0pspxbxO0s7zYCBaCKIqgYPATObDVYndGJtzIZNmdndvd4Abuytv33vx+7735zdtZhB3+wx2OH8YE/ncFxxVIqwAR7Q7DcAoR9+Stku/7Hzjn32z+21KBIAjOSykXAeBoXvDaT0r5sNVqzaXFKZ1AEARMSklFgZv+iLjOGGskxSydABHdB4DLw8U2EHEjLxkp5Tnt6/v+/pmZmR/xWKUTCIKgrxfmnBeKb8aKoqjRbrfXxwSy2sFWASI6jYj3LDFuMsae6+eVqwARfQKAI7YkhGF4qtPpvFY2VSTwGAAuWHXdUJzKEVDAu93uP2Wp1Wr1uOSakllJAkZ/J54XO4JA/LCTUi4g4i1FrgoEbksprwPAE875dLzfk8ALIdZ93+9XgoDu86RDJwl8q9WaV/uiUgSSVCYNvCa8LQS63e5Zz/NmPc87ZpM+IcQb28RoA6/jEtEjAFAKNc05f1X4HFhdXb0qhLibdfLq52mzigv4tDVyy2i/3981GAw+A0DdkcAy5/yiy4ZVPe8YM/9JTETHAeDtcKGvnPNDroum6bySylHAF2qhNFVwJVGkbcw1iOgLABwc/neCc/7OaZwuQsAV/HDTzjomZVCv1w83Go0/hQmsrKxMTkxMTDabzc2J0fzFwSPiPGNsIW5nJsiFgOd515rNZuIYnvjGZKsAEUm1aLynXcFrwL1eb9HzvJMZ8vxeCLHcbrdfpNmNRMByYm4ZzNIy75LtUW0KE3DNvCKfNF6MCrjQHohXAACWzHk+LfNEtPkig4h3GGM3ioI2/QtVwLz2sLWN3je2+528pHIT2JKFFLXRNpUmoLJqkhFCPIufuJUhoIBqMBklP8M5f1m5CihAvV5vXr/+pZEIw3Bvp9P5WUkCGpR5u2ASSZLKSrVQHrUYE7BkLVFG19bW9kVR9F37xZVmlCpIKdVVor5OfMA5vzKKf5Zt6vW3+TqXFcT1OSJyxljgau9iZ72/VxMjIl5yCZRh8xER5xhjT0uItSVE5gcIIjoQRdFU3oWllL9qtZr6WPc7bwybXyaB7Vi0zJhjAmVmM0+scQXyZK1Mn79v+vlPDqqgOQAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-box.box-distribution:hover {
  .icon-distribute-gray {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA35JREFUaEPtmc9PE0EUx9/b4g808WBC8AcaTMTAVloaTUw4ELbFgzc56Bn/APFH5ORBOGv8gYlXPetBbx60u8iBxIOhLXRBMYEoaoyJBxNFYzvPbGHLdtnZne62siTlyM68+X7m/Zg3U4Qt/odbXD80ADbbgw0P8DzQNjXVvPvXjg4kaa9fLzEJF96lej65za+LB+R07gwgGwfAo37Fr8+j+3qyZ5hnp+YAcjp3DpAeBxduQQCcmEvGFCebNQeIatm7RHBpbbElAlzyC4NA/eZcatp2YK5P/mK3VXOALjWnmQvryXgg+1ZbrMiU+dOJiQaAVzi4eSCqTfcwitzh2YhQ8fpsKjFlfg+dB2Q1uwgA7W6bUGSF+NuBEzljTPgAtNxTIDrrBkCWihM6AEN454vpcmWRpEiLveSGHsDcfd55sSUANognNgYo3TDgNh1A1rI3geAaID7TldigPd6dxDMGE1JE0kIBYMa506HjJF5PJUaNvAgVgFOV4Yk3gesCIKvZU0A0RCh1ure0bMatY3QTX05qLfcQiPoR2WBeSWQCnwNRNXeFgG57nbzmd16vIiKet4bvc6BdW9zZTD8+IECLEADiI12JXRBJWCPmhWwGOYmjk3mZCoX82kLLejJ+SHRRbp0nNlaN+EAhxKsKohBBwsa6hqxmPwJAm/E/bGqK5vuiulA7HQRAVLy8mrRDIptCAN9WcM/hJeXI78AAx1/OtMJ2aJ3t6y51jBU7Zr9OIozqSnzMPs66QSIACHg1n4w5tuGONyY3D8hqlkqL2mJ6w85zxJdzRM2ME0jdruWZ2DwYBSIZf80bVxUAD6xa8SK7LjomMICoeAPeqb0QFVoXDyDBg4p+nhM2snmRQbilK/GRoKKt8wN5wPrsAS4xb+aNtVWuFYRvgAoBngm7mvihBDBEVbiUiq/sJ25oPGAILZdRlxhggCfnk7E36yUzJB4oAaSnR83rH49BYtK+2YHur6EEMEVZXxesII43sbXDb9NzwG/lCFUO+IH47wBdk/p+LPz9bIq1V5pqIBDIeEosPSciwr28Er9czXyvsdznb+t1zsuI8HfC83oq9kR4vMBA1/d7Wc0YPxNdFLDjMYTeA0nDeir2PLitSgueP0AcS2cOSow6/C5MyL7/3PVnYbm3d8WvDbd5ngD1WLSWNhsAtdxNP7YaHvCza7Wc8w+pR8VPw6pLEAAAAABJRU5ErkJggg==);
  }

  .icon-text {
    color: #2ABED1;
  }
}

.icon-distribute-active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA35JREFUaEPtmc9PE0EUx9/b4g808WBC8AcaTMTAVloaTUw4ELbFgzc56Bn/APFH5ORBOGv8gYlXPetBbx60u8iBxIOhLXRBMYEoaoyJBxNFYzvPbGHLdtnZne62siTlyM68+X7m/Zg3U4Qt/odbXD80ADbbgw0P8DzQNjXVvPvXjg4kaa9fLzEJF96lej65za+LB+R07gwgGwfAo37Fr8+j+3qyZ5hnp+YAcjp3DpAeBxduQQCcmEvGFCebNQeIatm7RHBpbbElAlzyC4NA/eZcatp2YK5P/mK3VXOALjWnmQvryXgg+1ZbrMiU+dOJiQaAVzi4eSCqTfcwitzh2YhQ8fpsKjFlfg+dB2Q1uwgA7W6bUGSF+NuBEzljTPgAtNxTIDrrBkCWihM6AEN454vpcmWRpEiLveSGHsDcfd55sSUANognNgYo3TDgNh1A1rI3geAaID7TldigPd6dxDMGE1JE0kIBYMa506HjJF5PJUaNvAgVgFOV4Yk3gesCIKvZU0A0RCh1ure0bMatY3QTX05qLfcQiPoR2WBeSWQCnwNRNXeFgG57nbzmd16vIiKet4bvc6BdW9zZTD8+IECLEADiI12JXRBJWCPmhWwGOYmjk3mZCoX82kLLejJ+SHRRbp0nNlaN+EAhxKsKohBBwsa6hqxmPwJAm/E/bGqK5vuiulA7HQRAVLy8mrRDIptCAN9WcM/hJeXI78AAx1/OtMJ2aJ3t6y51jBU7Zr9OIozqSnzMPs66QSIACHg1n4w5tuGONyY3D8hqlkqL2mJ6w85zxJdzRM2ME0jdruWZ2DwYBSIZf80bVxUAD6xa8SK7LjomMICoeAPeqb0QFVoXDyDBg4p+nhM2snmRQbilK/GRoKKt8wN5wPrsAS4xb+aNtVWuFYRvgAoBngm7mvihBDBEVbiUiq/sJ25oPGAILZdRlxhggCfnk7E36yUzJB4oAaSnR83rH49BYtK+2YHur6EEMEVZXxesII43sbXDb9NzwG/lCFUO+IH47wBdk/p+LPz9bIq1V5pqIBDIeEosPSciwr28Er9czXyvsdznb+t1zsuI8HfC83oq9kR4vMBA1/d7Wc0YPxNdFLDjMYTeA0nDeir2PLitSgueP0AcS2cOSow6/C5MyL7/3PVnYbm3d8WvDbd5ngD1WLSWNhsAtdxNP7YaHvCza7Wc8w+pR8VPw6pLEAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-star-active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALRSURBVHgB7ZdPbtNAFMa/GTcuf6QmIFZs6myQumojsUEIqblBb4B6gnKDhBPQGxBOQjcFNojskLppOEGjFqo2KfN4MyTBST32i8dsqnxSEscev/n5mxm/N8BKK8lFn3BAX3CACqVQkegjEsQ4dX8M2uoVjlCBNKpSjM7sOEodB6oSB+fcm2qEpmpjgEBV42Cc4VhcjYvBDma691fDiYtDBCjcQb9TDb72BoEKcnDi3jcHk61gF8McjPEafjigAhfDHDx2cy8paBbk4tIO8rA26DMS+op3AjirBtbR4YfZQQl5HbQQGHNQzb8amw6GXCcJany9rm3GgLrgrzGWUZ97Hbpfgx8cs48b9H0OzwFyLt3jGzr8SfiKd25RnW+rpW69IqhLcsClRQyoGfY33qbT5PwQGwYEu5QD5x6ptmD8PQVq6LAlZ/sk7HKMvfTp+ZARuvw9yItDNc+s4Ej0WIMeBK27Acc5XAj7T+qFa9BGHuQ68sWAtKHKuOn6dgw+QBFkJHAoXnrIM+EyAXMhLdsaZJoO+f3CB/LCTcJkKxNSCpfWQ5U3L3PhcgGRAeldIEWy87J+a14WwhUC3oIs4+BUtbl5KYJz/UMol9429GkQpJXNPkPTlMBZydfZFb/pQ+FYirOOiyWUGPDmSblkPxNxOjxn+2xKjEVFhpMYUBtdHnDMcGdkN1JTiWPJBy2SP3Vabkh/0uLp6gF1RNu0TH1ruPUF+UqxBEItMe1VIm5pXftFtoTyaRvSWJJGrop+qs+Ko9GROmeqay6bijTCI8k2QLRIilcwDYwx+/oZtdVz91LfR0HZJl3JIkAVR54CloZkuAK+pNbaFnqz9i/R40+zAFS0UGSAY9pFNlgz2jJd1fLsJxjUpUlui/8JqNdoc9Yp0Ls21MoDm4PklMZ7jC731ORF8yF1KUFVGp1gh070+/F3weQvkMvpxzgsuw1d6c7pD2qO79xI3BNVAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-hot-vip {
  display: inline-block;
  width: 42px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAkCAYAAAAjMNwcAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAyMSURBVHgBpVrdj1VXFV/rMuX7417AGWihDEIoJYEZIonyUaDxQZuY0uijD6XGF6MW+hdAffERbfTRgG8+mFAT44sxnUpJhWoL1FgSpR2odqApzIydKczXWe6918de+54zFOkOzD33nH32x2//1m+tvfZFeIhy98NzhwlpsEXVISAaDLfaABT/A/8Pf4jiH8T4hSoIn1RRJd8pfA/1MNXDWBPT7QpTB6E+NxSeEbfpnhM3T5jv8zWkTvk69YH5WbgcDZfXAavhcPcSVLOvr9j5gyH4Pws+aEX64LX27MKFxyqojoX+2zyoYoIFWICUhhv7EMAScLkigU4c0wsg7RE4kECAT58MQIWp+QhlFfpAAa0K7+pqSFsGmGuPFMz0l663gIYWtHpOLtnx/evwAOVzAYtAzSxadCK0f1wH7lZQQSDUVSdmTpq84AfFhImrG4ACTHokTCEDFN3kuL34jvabgGNQ0mfFgAtzIbFNgM1gZ+bxYIXFCGfmZu693Nn90vBDAzZ148Jz0DN7mhnFg40gVZWuGAkmBIU5ArOLJ1IwJsxJWAmRdWk26E1HzZU/GTv0rIvUCm3ofVCErV0GwSwXZOFQzRXygsuiOSYOhzsvr9z1wzPzYdKa78HMyIUT2FOdDX23Ddkw2IQVaLe82Ap7mgwJE1BXP923d+I1pscofwCyBqV3pKKAxWJnvaa64VmL+0rf+Z71Ea/5HZSGUHD3TQvYNmZuvT/8Of3pu788AfOURoZNj/zldGjkaJaEOnuY7mJioj0yITMxp1GuHRmsiH1mpz7K3805iOCrSfO1sBOcs3Cib9on3UlFSmMVk3XvSb98LWZ7ZuWuH73QjU2NYTMfvXUqvHNUFj91lFiB3gpMdVD1CKw+qrtiIhlzjCXROJCgoTAzuzis/VhBsXPEjLQQkjyV8xOvnQwcMvERyvrKuvTx/KdXfnEK7gfYzMhbJwir4zxUEiKBfkUzMwEJ8wxseUSAy6mUtE8Wo5O1d8WJgIGZrRAUem7DQhGyJ+kmmvmBstOaSiCzZqoSOHBkiXM7zMkQBh0ff+eV4x4jg/juyJv9C2DBB6jsYMoqlfMEnJfUuVi44MILcgItDsIJu8qKAkeYQw4TZxVvnllVmadTEfchgzPlNH7U7yYb0paOIcsYeA+r950UjAfgdqv3NIYFsE6rAGoUiBYhJWwpf0FybM6U4vVW5ihrVLgwM7E0SCLHpoQhClhMFH3OAg9ZxF0z2EKmrhoja4m+aISGLifC601ZL9QTZVlpL0A8bf2kJyNvH5qB2dcSQJWJInqXnsWV4J9vD8Hk+McupAFcuHgp7Nj7TV5p7H4H4NqlczAx9okKaip9j2+Ddf3b0r2rF/8E0/c+0xnYbLbs+iosW7U6Pbt6cQi8g6As5nVLyHBY/fhv+1f20iOLFoOwt3RqdYdj8V9g2dOBZUM98eEszJ0EJnmq3pLXEjuquiddtGQpnD/7W/SgJ8C+9g3QPQ/ygKK7oJvD7+H53/2quxn49os/tflMBUCu/Pn3tTobt+1MgC1ctAQmxu/A++9egC9Sdu5/uthuARQOxRYhX2KK5QLLToR7Q62oXQGmw+Bm7wzEVI6yN6TV6/trA4kMmBi/Xfg5CSzwX5feqNXfMrAvALEWfL9NpdO30a4nx2/DFymd3vWg5sj27rolJQkbnboPdVbh8vDoO6fagWELDhetmjdioWTdIY0Zkh0sb/cmRqkJabk1/B4sHzgAsulO/YdJ0rXLb9TwiIABiO+lCPjd+gTXbXAzAQp1au1s33Mw/H9KhDs6Qt4yXTn/R3j/738r6mZTVMgq4DgXVLsZu+Sv1MhUQgmD5R1t9SAecWGBuGL2cCLm6Dwkguy91vXvqE3w9siwhhvGzUtDZ2uT7Nv0BKzbtN0FAQB3bn1Ya2/5ytU5BKAI/p16nVWdwNQOLF3ZDp/hf3gnfp/472hjXfFNIj5Z3tNIJIaUHYrGuhZrBjwGQoYmbQcUW4nMORKQrQe4+JOhDjWWd3prA7pz8zpfiKOZHP8kiH3dHAcOPSsOPHvRbrbGsqy9xq6npz4L/+ssjPomQ1drSF/Hbn1Uq7t0xSoOM3LUwHMWuBw44uO7Jg4w2AoK3692akxDWVLkvZZVVzgiwzbXGTYaANM4JtYO7IImECLDLAYRHRm99e9a3dW9GyyeG20AIJZHgjPQ8fE8kKaCeU9P3avVFYYlM8Nu3qPpmk5VwuiiYn9IB8Eq/cZbFsbKkFPbLrYRUV/6awOKLJkcu520bnJsHnYdPCJNSZgeupiZukvQUCJ71Cwiw5pKAkENDVh/xz5uBjearJAB1Tv7XYpNM28AfSAaSxT90kGVu/d0xyJ//R7/rmivxSbhvzn8D9jafgouz8OurYP7VVV18xxM+Uajk1ydRJ8XenLsTlMVePMPv5FBZZc3fe9eY91lKztgO29UQZfEgfOY5LIn4hR0M4o94ASaPQ1g9jiq4ZCtWp1AmHAQfrxx9a/FoKKOTYxtD6HEudqABw4+5+NOG1yTh1y4eEk0N9u3Tow3A3brxjV4kBLZFdmYs8QacKHMv3K3NZHic3UJh9GCYWSxHFh+KYOnwObtRpPwx2i+WbvWwpbBfUZUlKA2AtLkITt9G6T79Ddo2H8aWfggpXfjZtj7zHd42BZpmtyIx9RCOT5jtHy/13vKprOz7bJTyPELWZp39fpNtUnEWKzJ4w0eOiKoU06riGlOjN2utbNcvJ84aWxqc8/Xj8ATew7GjYvb/pHtPTVDzPGzy325T9Fq0oArJ0HdlsngiWcA4L8XQIk4Uqaw6yne7+t/ErpLc3iwNmjXAQCgDJVtqFNwW3snMkydQ6zUFIN1eh+DvJBAHgNEcfNpzk7kJeaxHB9YJK8D04hBov6MSDDaV3Xb6GA0fLALI42ZTBBXtL+UIv7PK1sH9vugBMDSUDy4JpBXtNeQ5LdT/NUUg3X6HgXRe9mViLrahQY4mmsjAMvaCjiW+pHhoYg8dGeJUxlqgbNAD2gZg6n31HotTVgFT9YP9yvLk3Yd8IPKMxD4m2KwZavWgMbkQb9qz8UpQI4o0nmDkDJNV6yjmJQkOFEXX7OZVManfkduKaOhmBMrTBKLnJe/71ytBmhiXEHH4H6lr3970KO8yeZV5SbjwCd5w14r7d7HLPKbaWJX76Oc8sr7G93/dQmwL3q854Nw+a/xPrgUOmKOIFqtk/GzR1nEee7MAkk1Cx8xmyIC+PTIk3ufwc66x/UtWUQJTcLnuhjVCx1RB0CyGwifjyxcgvuefd6JAqVUDl9xQ1Gr9n7ru1lkw+eixYvJ4NIQqDQtm0POSmj+EEFjQDMVHj/6dyFnZ4dW7Hrx9fRseuSibX0w0VqP8yu/i88BHvtddOlluaX59lwvn+poIEg2aUkbQ74PoIlHoPKw1QeS5eGvjkvTs3PmIc051k6GVJNI1Qwgt29z8+MKmGyupahjF5UEahwkZVlLzDO65VXUkyGfDoJM0cJgpA+joDROrnsZo6UJZHWLFkgZAE4fFBgWGyOTjpuKfmwBja8oJ2McFRRhRAKrOA1XwEjSOZKVthd5gKJtLW4ZbIUpvwv+sFWQFiKhmxhydZuEmYAZP2IZ3hSuWn/cYgsjLl3aAcwU0gNlPegl442dLSCCIQeGoLNRpJ8FsE6CKwoYCnUdDmDiJZ5FE2kAOjBRNTFbOYbLx1kqo9GrAubJAImw+nW3Qeq+n9txKRsLErLQ6it6RkQ6lqzquT33XrYM3QppAoyNIkgT0K9XDRx/CbpK90GuMkpwzjMyjeIjeLeiouPq+sR55JMkgiygPE5+19mT3NAwQudahgbcgYLTXWy1TdZN6ArPmBch2aue/+WBhXpzAD/pDBw72tAN9BRdUna7PpujqNvvs6RvKoaOuicrPJVIrxdex3nSdihrro1BDo8ZRNLAND/PjsBF67pOJKNmJ+GHbXqrX9DiM8DRuYq+19n941dhntLqGnw2CXCJQwIXuxCacnSRBLKmyJQpL7w+12PvBECL/Msgq6/7fnACY/FBVzANReMyTnVaecxWVwek6XcSJxCq/nxubvrL9wMrFpetyAvPtNcffJjlycoCmOV6gSTLaAC6zbpzHqIXXhMr7JptYT7gDnSl3WTa7ld0boGUYfJOyX7A8iBHJzZawdwr1dzSIO4vjMEDlB7rTicsR+r22y0onZb+EEQnSZ6fdvLiNwzxTqUxij3I2lRYJ+ghriUYXYoFpQf7+YFLdlIeGzdfMju2Oh6mNIYVXQotDM0CXe48xE82/wdmDZ+o06UeQQAAAABJRU5ErkJggg==) no-repeat center center;
  background-size: contain;

  ::before {
    content: '' !important;
  }
}

.icon-box {
  display: flex;
  align-items: center;
  color: #252627;
  font-size: 14px;

  ::before {
    content: '' !important;
  }
}

.icon-box .icon-text {
  margin-left: 6px;

  ::before {
    content: '' !important;
  }
}

.icon-box.active {
  color: #2abed1;
}

.icon-have-vip {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    width: 32px;
    height: 14px;
    top: 0;
    right: -6px;
    background: url('~@/assets/images/icon/vip.png') no-repeat right center;
    background-size: contain;
  }
}

.tab-title {
  margin: 40px 0 44px;
  font-size: 24px;
  line-height: 36px;
}

[class*=el-icon-] {
  transition: transform .2s ease;
}

[class*=no-select] {
  user-select: none;
}

.rotate180 {
  transform: rotate(180deg);
}

/* selector样式定制 */
.tag-list-container .j-button-item:not(.all) {
  border: 1px solid #ECECEC;
  background-color: #F5F6F7;
}

.selector-card:not(:last-of-type) {
  border-bottom: 1px dashed #ECECEC;
}

.other-filter .el-select {
  margin: 0 12px;
}

.other-filter .el-select input::placeholder {
  color: inherit;
}

.manage-tags {
  display: inline-block;
  position: relative;
  right: 0;
  top: 3px;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  color: #2CB7CA;
  cursor: pointer;
}

.collect-list-container {
  margin-top: 28px;
}

.collect-list-container .el-checkbox {
  margin: 16px;
}

.collect-list-header {
  position: sticky;
  top: -1px;
  background: #fff;
  border-bottom: 1px solid #ECECEC;
  z-index: 9;
}

.collect-list-content,
.collect-list-content .list {
  min-height: 400px;
}

.c-tab-container .left,
.c-tab-container .right,
.c-tab-container .right-line {
  display: flex;
  flex-direction: row;
}

.c-tab-container .left {
  align-items: center;

  .total-count {
    display: inline-block;
    margin: 4px 0 0 12px;
    font-size: 14px;
    color: #686868;
    line-height: 22px;
  }
}

.c-tab-container .left .custom-checkbox {
  float: unset;
}

.c-tab-container {
  display: flex;
  flex-direction: row;
  height: 49px;
  width: 100%;
  justify-content: space-between;
}

.c-tab-container .list-title {
  position: relative;
  height: 100%;
  line-height: 49px;
  text-align: center;
  color: #2abed1;
}

.c-tab-container .list-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: #2abed1;
}

.c-tab-container .icon-box {
  cursor: pointer;

  &::before {
    content: '' !important;
  }
}

.c-tab-container .j-icon {
  width: 16px;
  height: 16px;
  background-position: center;
}

.c-tab-container .icon-box {
  padding: 0 10px;

  &::before {
    content: '' !important;
  }
}

.c-tab-container .right-line {
  position: relative;
}

.c-tab-container .right-line::after {
  content: '';
  position: absolute;
  margin-top: -8px;
  width: 1px;
  height: 16px;
  right: 0;
  top: 50%;
  background-color: #ECECEC;
}

.list-item {
  border-bottom: 1px solid #ECECEC;
}

.list-item:hover {
  background: #F7F9FC;
  // box-shadow: inset 0px -1px 0px rgb(0, 0, 0, .05);
  // .a-i-left{
  //   color: #2CB7CA;
  // }
}

.list-index {
  margin-right: 2px;
}

.append-container .j-icon {
  margin: 0 16px 0 8px;
  cursor: pointer;
}

/* table */
.collect-table-list table {
  width: 100%;
  border-collapse: collapse;
}

.collect-table-list .thead tr {
  font-size: 14px;
  color: #888;
  background-color: #f3fbff;
}

.collect-table-list tbody tr:hover {
  background-color: #F5F6F7;
  box-shadow: inset 0px -1px 0px rgb(0, 0, 0, .05);
  cursor: pointer;
}

.collect-table-list table tr td {
  vertical-align: middle;
  text-align: center;
  line-height: 26px;
  border: 1px solid #e0e0e0;
}

.collect-table-list table tr td.tt-l {
  text-align: left;
}

.collect-table-list table tr td.tt-c {
  text-align: center;
}

.collect-table-list table tr td.tt-r {
  text-align: right;
}

.collect-table-list .thead td {
  padding: 6px 0;
  border-top: 3px solid #2cb7ca;
}

.collect-table-list .tbody tr {
  cursor: pointer;
}

.collect-table-list .thead .deep {
  border-top: 3px solid #2C90CB;
}

.tag-drawer .el-drawer__header {
  margin-bottom: 0;
  padding-bottom: 22px;
  font-size: 20px;
  line-height: 32px;
  border-bottom: 1px solid #ebebeb;
  /* box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;  */
}

.tag-drawer .tag-title {
  flex: unset;
  color: #1D1D1D;
}

.tag-drawer .tag-count {
  margin-left: 8px;
  color: #2CB7CA;
}

.add-tag-confirm-button {
  height: 100%;
  color: #2CB7CA;
  white-space: nowrap;
  cursor: pointer;
}

.tag-drawer .add-tag-confirm-button {
  margin-left: 16px;
}

.tag-drawer .el-drawer__body {
  overflow-y: scroll;
}

.tag-drawer .tag-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tag-drawer .tag-header {
  padding: 28px 28px 20px;
  justify-content: space-between;
}

.tag-drawer .tag-main {
  padding: 0 20px;
  flex: 1;
  overflow-y: scroll;
}

.tag-drawer .tag-footer {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.05);
}

.tag-drawer .el-tag {
  margin: 6px;
  padding: 1px 8px;
  height: auto;
  color: #1d1d1d;
  background-color: #f5f6f7;
  border: 1px solid #ececec;
  border-radius: 5px;
  line-height: 22px;
  cursor: pointer;
}

.tag-drawer .el-tag:hover {
  color: #2CB7CA;
  border-color: #2CB7CA;
}

.tag-drawer .el-tag:hover .el-icon-close {
  color: #2CB7CA;
  background-color: transparent;

}

.tag-drawer .el-tag .el-icon-close {
  font-weight: 700;
}

.select-title {
  color: #686868;
  font-size: 14px;
  line-height: 22px;
}

.el-select+.select-title {
  margin-left: 14px;
}

.vip .selector-card-header {
  padding-right: 50px;
}

.selector-card-header .icon-hot-vip {
  position: absolute;
  right: 0;
  top: 6px;
}

.selector-card-header .s-h-title {
  font-weight: 700;
  color: #996118;
}

.shade_table {
  width: 100%;
  position: absolute;
  margin-top: -150px;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}

.shade_table .more {
  position: absolute;
  height: 35px;
  width: 120px;
  left: 50%;
  margin-left: -60px;
  bottom: 20px;
  color: #2cb7ca;
  border-radius: 5px;
  border: 1px solid #2cb7ca;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}

.el-card {
  overflow: unset;
}

.open-vip-dialog {
  width: 380px;

  .el-dialog__header {
    padding: 32px 32px 20px;
  }

  .el-dialog__body {
    padding: 0 32px 0;
    text-align: center;
  }

  .el-dialog__footer {
    padding: 32px;
  }

  .el-button {
    width: 132px;
    font-size: 16px;
  }
}
</style>

<style lang="scss" scoped>
@include diy-icon('edit', 20, 20);

// card样式重置
::v-deep {
  .el-card__header {
    margin: 0 40px;
    padding-left: 0;
    padding-right: 0;
  }

  .el-card__body {
    padding: 20px 40px;
  }

  .get-more {
    display: flex;

    .el-icon-arrow-right {
      margin-left: 4px;
      order: 2;
    }
  }
}

.collect-table-list .thead td {
  border-top: none;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
  padding: 8px;
}

.sub-manager {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 24px;
  color: #1d1d1d;
  border-color: #E0E0E0;

  &.el-button:focus,
  &.el-button:hover {
    color: inherit;
    background-color: inherit;
  }
}

.info-list-card {
  position: relative;

  &.gray {
    padding: 0;
    box-shadow: unset;
    border: none;

    ::v-deep {
      .el-card__body {
        padding: 0;
      }
    }
  }

  .card-title {
    font-size: 24px;
    color: #1d1d1d;
    line-height: 36px;
  }

  .sub-manager {
    float: right;
  }

  .info-list {
    min-height: 300px;
    border-top: 1px solid transparent;
    position: relative;
  }

  .add-key-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 80px;
    width: 108px;
    height: 30px;
    // padding: 8px 16px;
    color: #F7F9FA;
    border-radius: 4px;
    background-color: #2ABED1;
    cursor: pointer;

    .icon-chahao {
      margin-right: 4px;
      transform: rotate(-45deg);

      &::before {
        content: '' !important;
      }
    }

    .button-text {
      // margin-left: 4px;
      white-space: nowrap;
    }
  }

  .icon-chahao {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;

    &:before,
    &:after {
      position: absolute;
      content: '' !important;
      background-color: #fff;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 2px;
      border-radius: 2px;
    }

    &:before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &:after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }

  .el-pagination-container.center {
    .el-pagination {
      left: 50%;
      right: unset;
      transform: translateX(-50%);
    }
  }

  .j-self-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: center;
    vertical-align: text-bottom;
    margin-right: 10px;
  }

  .join-bid {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    color: #1D1D1D;
    margin-right: 10px;

    .icon-canbiao-img {
      background: url(~@/assets/images/icon/canbiao.png) no-repeat center;
      background-size: contain;
    }

    .icon-canbiao-img-active {
      background: url(~@/assets/images/icon/canbiao-active.png) no-repeat center;
      background-size: contain;
    }
  }
}</style>