zuel-itsm-3.0.2/src/custom/seiminDrawer.vue

<template>
  <div class="seiminDrawer">
    <div class="seiminDrawer_mask" @click="close"></div>
    <div class="sf_layer show" id="filterBlock">
      <div class="sf_layer_sub_title hide" id="filterSelBlock">
        <strong>已选分类：</strong
        ><span id="filterSelTips" class="words_10">全部分类</span>
      </div>
      <div class="sf_layer_con" id="filterInner">
        <ul class="mod_list" v-show="!isSelectArea && !isSelectCategory">
          <li class="arrow_li J_ping noAfter">
            <div class="list_inner li_line">
              <div class="big">院区</div>
              <div class="right color_red">
                {{ selectData.hospital && selectData.hospital.hosName }}
              </div>
            </div>
          </li>
        </ul>
        <ul class="tags_selection">
          <li class="J_ping option" @click="selectData.selected = 'all'" :class="{selected: selectData.selected === 'all'}"><a href="javascript:void(0)">全部事件</a></li>
          <li class="J_ping option" @click="selectData.selected = 'todo'" :class="{selected: selectData.selected ==='todo'}"><a href="javascript:void(0)">待我处理</a></li>
          <li class="J_ping option" @click="selectData.selected = 'done'" :class="{selected: selectData.selected ==='done'}"><a href="javascript:void(0)">与我关联</a></li>
        </ul>
        <template v-if="!isSelectArea && !isSelectCategory">
          <ul class="mod_list">
            <li class="arrow_li J_ping" @click="selectArea">
              <div class="list_inner li_line">
                <div class="big">区域</div>
                <div class="right">{{ selectData.area ? selectData.area.area : '请选择' }}</div>
              </div>
            </li>
            <li class="arrow_li J_ping" @click="selectCategory">
              <div class="list_inner li_line">
                <div class="big">故障现象</div>
                <div class="right">{{ selectData.category ? selectData.category.category : '请选择' }}</div>
              </div>
            </li>
          </ul>
          <ul class="tags_selection_custom">
            <li class="J_ping">
              <cube-checkbox v-model="selectData.belongtoMe">
                我处理的
              </cube-checkbox>
            </li>
          </ul>
          <div id="filterClearBtn" class="J_ping s_btn" @click="clear">
            清除选项
          </div>
        </template>
        <template v-else-if="isSelectArea">
          <ul class="mod_list padding_left">
            <li class="check_li" v-for="area in areas" :key="area.id" @click="clickAreaItems(area)" :class="{checked: selectData.area ? selectData.area.id == area.id : false}">
              <div class="list_inner li_line">
                <div class="big">{{ area.area }}<span class="small"></span></div>
              </div>
            </li>
          </ul>
        </template>
        <template v-else-if="isSelectCategory">
          <ul class="mod_list padding_left">
            <li class="check_li" v-for="category in categories" :key="category.id" @click="clickCategoryItems(category)" :class="{checked: selectData.category ? selectData.category.id == category.id : false}">
              <div class="list_inner li_line">
                <div class="big">{{ category.category }}<span class="small"></span></div>
              </div>
            </li>
          </ul>
        </template>
      </div>
      <div class="filterlayer_bottom_buttons">
        <span class="filterlayer_bottom_button bg_1" @click="closeItems('isSelectArea')" v-show="isSelectArea">取消</span>
        <span class="filterlayer_bottom_button bg_1" @click="closeItems('isSelectCategory')" v-show="isSelectCategory">取消</span>
        <span class="filterlayer_bottom_button bg_1 J_ping" @click="close" v-show="!isSelectArea && !isSelectCategory">取消</span>
        <span class="filterlayer_bottom_button bg_2" v-show="!isSelectArea && !isSelectCategory" @click="confirm">确认</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "seiminDrawer",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      selectData: {
        hospital: undefined,
        area: {id: 0, area: '全部'},
        category: {id: 0, category: '全部'},
        selected: 'todo',
        belongtoMe: false,
      },
      flag: false,
      isSelectArea: false,
      isSelectCategory: false,
      areas: [{ id: 0, area: '全部' }],
      categories: [{ id: 0, category: '全部' }],
    };
  },
  props:['evt'],
  methods: {
    // 清除选项
    clear(){
      this.selectData.area = {id: 0, area: '全部'};
      this.selectData.category = {id: 0, category: '全部'};
      this.selectData.selected = 'todo';
      this.selectData.belongtoMe = false;
    },
    // 确定
    confirm(){
      console.log(this.selectData);
      this.$emit('confirm', this.selectData);
      this.close();
    },
    // 关闭
    close() {
      this.$emit("close");
    },
    // 关闭选项
    closeItems(type) {
      this[type] = false;
    },
    // 选择区域
    selectArea() {
      this.areas = [{ id: 0, area: '全部' }];
      this.isSelectArea = true;
      this.getAreas();
    },
    // 获取院区下的区域
    getAreas() {
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/user/data/fetchDataList/area", { idx: 0, sum: 1000, area: { branch: this.selectData.hospital.id } })
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            let list = res.data.list || [];
            this.areas = [...this.areas, ...list];
          }
        }, (err) => {
          toast.hide();
        });
    },
    // 点击区域项
    clickAreaItems(area){
      this.selectData.area = area;
      this.closeItems('isSelectArea');
    },
    // 选择一级故障现象
    selectCategory() {
      this.categories = [{ id: 0, category: '全部' }];
      this.isSelectCategory = true;
      this.getCategories();
    },
    // 获取院区下的一级故障现象|责任科室下的一级故障现象
    getCategories() {
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      // 判断当前是责任科室还是院区
      if (this.loginUser.duty) {
        // 当前的所属责任科室
        this.$http
        .post("service/bpm/data/fetchDataList/incidentcategory", { idx: 0, sum: 9999, incidentcategory: { dutyToCategory: this.loginUser.duty.id } })
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            let list = res.data.list || [];
            this.categories = [...this.categories, ...list];
          }
        }, (err) => {
          toast.hide();
        });
      } else if (this.loginUser.branch) {
        // 当前的所属院区
        this.$http
        .post("service/bpm/data/fetchDataList/incidentcategory", { idx: 0, sum: 9999, incidentcategory: { selectType: 'one' } })
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            let list = res.data.list || [];
            this.categories = [...this.categories, ...list];
          }
        }, (err) => {
          toast.hide();
        });
      }
    },
    // 点击一级故障现象项
    clickCategoryItems(category){
      this.selectData.category = category;
      this.closeItems('isSelectCategory');
    },
  },
  mounted() {
    // 初始化
    if(this.evt){
      this.selectData = this.evt
    }
    if (this.loginUser.duty) {
      // 当前的所属责任科室
      this.selectData.hospital = {
        id: this.loginUser.duty.branch,
        hosName: this.loginUser.duty.branchName
      };
    } else if (this.loginUser.branch) {
      // 当前的所属院区
      this.selectData.hospital = {
        id: this.loginUser.branch.id,
        hosName: this.loginUser.branch.hosName
      };
    }
  }
};
</script>
<style scoped lang="less">
.seiminDrawer {
  .seiminDrawer_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9;
  }

  .hide {
    display: none !important;
  }

  .words_10 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    max-width: 110px;
  }

  .sf_layer {
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    position: fixed;
    width: 85%;
    top: 0;
    bottom: 0;
    left: 100%;
    color: #333;
    background-color: #f7f7f7;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }

  .sf_layer.show {
    z-index: 301;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  .sf_layer .sf_layer_con {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding-bottom: 50px;
  }

  .sf_layer .sf_layer_sub_title {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    height: 46px;
    line-height: 46px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .sf_layer .sf_layer_sub_title > div,
  .sf_layer .sf_layer_sub_title > span,
  .sf_layer .sf_layer_sub_title > strong {
    display: block;
    font-weight: 400;
    white-space: nowrap;
  }

  .sf_layer .sf_layer_sub_title:after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #e5e5e5;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .sf_layer .sf_layer_sub_title:after {
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 100%;
    }
  }

  .s_btn {
    display: block;
    width: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 2px;
    font-size: 16px;
    background: #fff;
    position: relative;
    color: #333;
    margin: 15px 10px;
  }

  .s_btn:active {
    background: #f2f2f2;
  }

  .s_btn:after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #e5e5e5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .s_btn:after {
      right: -100%;
      bottom: -100%;
      -webkit-transform: scale(0.5);
      -webkit-transform-origin: 0 0;
      border-radius: 4px;
    }
  }

  .s_btn.disabled {
    background: #ccc;
    color: #999;
  }

  .s_btn.disabled:active {
    background: #bfbfbf;
  }

  .mod_list {
    margin-bottom: 15px;
    background-color: #fff;
  }

  .mod_list.padding_left {
    padding-left: 10px;
  }

  .mod_list li {
    position: relative;
    line-height: 25px;
    padding: 10px;
  }

  .mod_list li:not(:first-child):before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #e5e5e5;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .mod_list li:not(:first-child):before {
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 0;
    }
  }

  .mod_list .li_line {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .mod_list .li_line .big {
    height: 25px;
    max-width: 250px;
    overflow: hidden;
    font-size: 16px;
    color: #333;
    text-overflow: ellipsis;
  }

  .mod_list .li_line .right {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 5px;
    text-align: right;
    font-size: 12px;
    color: #999;
  }

  .mod_list .li_line .right.color_red {
    color: #e4393c;
  }

  .mod_list li.check_li {
    padding: 10px 10px 10px 30px;
  }

  .mod_list li.check_li:after {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAJFBMVEVHcEybm5uZmZmampqrq6ubm5uampqbm5uampqampqampqZmZlElYtqAAAAC3RSTlMAevCoCSBCV8LWOvq1Cd8AAADnSURBVCjPY2CAgECLSZrNogzIgFVyNxhMDECIsQjtVi4LcU032q3oABcs2m0G5rAk71aHiTHu7oIxV+wWgGq23ogwSXozxADmTQkIQTZtA4ikKrJDgsDa2HcnIAuy7S4Akk4bUZzMIK0CIhpQBTmAili1F6AKcm0KYGDczIAGrAUYOLehC2ZPYIhWQRd02sogbYAuyLyRwboAXZB9M0N3Arog2w6G2QHogqw7GbQd0AVZNmEXxKodq0VYnYTV8Vi9iTVAsAYd1kDGGh3YIw5rFGNNDNiTDdYEhjUpYk+02JM31oyAnmUACxpOGR88rXYAAAAASUVORK5CYII=)
      no-repeat;
    background-size: 20px auto;
  }

  .mod_list li.check_li.checked:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAKlBMVEVHcEzpPD3tO0HrPD7qPD7qOz3tQ0PqOz/wRkbqPD3rPD/qPD3pPD7pOz3zAI6pAAAADXRSTlMA6iuA89YcSAurcr+lXwCaFwAAAPZJREFUKM9jYICArNMhrnuWMSADNtO7YBCcgBDjMLkLBc4NcMHCu3AgDhNjvosEDKCa5yIL3oQYwHkXBUwAC9qiCl4GibHfRQMFQMFGdEEJTN1g/Wy+6IJXElAdCXMqKwpfvBZIBDDkIotdVAAJXmNYiywoxCQLJG8xnEVRqAii7jDsxVB49zZDLIbCu1cZfDEU3r2CJAhTCBQEab9eiKwQqB1k0XUQF64QaNFZmEa4QqCT1kJ1IhQCHZ8LtQOhEOhNVqhrEAqBAcIMdQ5CITDooIEsXogcyFijA3vEYY1irIkBe7LBmsCwJkXsiRZ78saaEdCzDACaJe/8fzNocAAAAABJRU5ErkJggg==);
  }

  .mod_list li.letter_li {
    padding: 0 0 0 10px;
    margin-left: -10px;
    background-color: #f7f7f7;
  }

  .mod_list li.arrow_enter,
  .mod_list li.arrow_li,
  .mod_list li.super_li {
    padding-right: 27px;
  }

  .mod_list li.arrow_enter:after,
  .mod_list li.arrow_li:after,
  .mod_list li.super_li:after {
    margin-top: -2px;
    position: absolute;
    top: 0;
    right: 13px;
    margin-top: 17px !important;
  }

  .mod_list li.arrow_enter.noAfter:after,
  .mod_list li.arrow_li.noAfter:after,
  .mod_list li.super_li.noAfter:after {
    display: none;
  }

  .mod_list li.arrow_enter:after,
  .mod_list li.arrow_li:after,
  .mod_list li.super_li:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='%23CCC' fill-rule='evenodd' d='M2 20c-.8 0-1.5-.5-1.8-1.2-.3-.8-.2-1.6.4-2.2L7.2 10 .6 3.4c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l8 8c.4.4.6 1 .6 1.4 0 .5-.2 1-.6 1.4l-8 8c-.4.4-1 .6-1.4.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .mod_list li.super_li.opened + .outside_list {
    display: none;
  }

  .mod_list li.super_li.opened:after {
    margin-top: -2px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 17px !important;
  }

  .mod_list li.super_li.opened:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='%23CCC' fill-rule='evenodd' d='M2 20c-.8 0-1.5-.5-1.8-1.2-.3-.8-.2-1.6.4-2.2L7.2 10 .6 3.4c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l8 8c.4.4.6 1 .6 1.4 0 .5-.2 1-.6 1.4l-8 8c-.4.4-1 .6-1.4.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .mod_list li.super_li.no_arrow {
    padding-right: 27px;
  }

  .mod_list li.super_li.no_arrow:after {
    display: none !important;
  }

  .mod_list li.super_li .sub_list {
    margin-right: -26px;
  }

  .mod_list .sub_list {
    margin-bottom: -10px;
  }

  .mod_list .sub_list .arrow_enter,
  .mod_list .sub_list .arrow_li {
    padding-left: 0;
  }

  .mod_list .sub_list.left_shorter {
    margin-left: -10px;
  }

  .mod_list .filterlayer_price {
    position: relative;
  }

  .mod_list .filterlayer_price:before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #e5e5e5;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
    left: 10px;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .mod_list .filterlayer_price:before {
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 0;
    }
  }

  .mod_list .filterlayer_price .filterlayer_price_area {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .mod_list .filterlayer_price .filterlayer_price_area_input {
    padding: 10px;
    border: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    background-color: #f7f7f7;
  }

  .mod_list
    .filterlayer_price
    .filterlayer_price_area_input::-webkit-input-placeholder,
  .mod_list
    .filterlayer_price
    .filterlayer_price_area_input:focus::-webkit-input-placeholder {
    color: #ccc;
  }

  .mod_list .filterlayer_price .filterlayer_price_area_hyphen {
    position: relative;
    width: 30px;
    height: 40px;
  }

  .mod_list .filterlayer_price .filterlayer_price_area_hyphen:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 1px;
    background-color: #e5e5e5;
  }

  .mod_list .filterlayer_price .filterlayer_price_choices {
    margin-top: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.5;
    height: 40px;
    border-radius: 4px;
    background-color: #f7f7f7;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice:not(:last-child) {
    margin-right: 10px;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice.active {
    position: relative;
    background-color: #fdf0f0;
  }

  .mod_list
    .filterlayer_price
    .filterlayer_price_choice.active
    .filterlayer_price_choice_text,
  .mod_list
    .filterlayer_price
    .filterlayer_price_choice.active
    .filterlayer_price_choice_tips {
    color: #e4393c;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice.active:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    border-radius: 0 0 2px 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MDJDOUJFQ0ZDMzIxMUU2OURBRkQzQzQ3MjZDMDk3MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MDJDOUJFREZDMzIxMUU2OURBRkQzQzQ3MjZDMDk3MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI3RDk0Q0ZGRkMwNDExRTY5REFGRDNDNDcyNkMwOTcxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI3RDk0RDAwRkMwNDExRTY5REFGRDNDNDcyNkMwOTcxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+lPQpmAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAhUExURUdwTOQ5POQ5PPrV1f///+dGSO17ff3u7/Kio+lcXvW4ufnubEoAAAACdFJOUwB/timhlQAAAH1JREFUGNNdzkEOQDAQheG6Qo/whNjjBBWs9QbiCFzExl4cFG1HzOvuz5fpjDHqZTqNJQYxiEEMYhCDGMQgBjGIQQxiEOPPRf114NxJx+lrkw5cDXvqyEsv/z1cT2U3p365aY9R9r3T3q1n6ri7cXJPPM23qeVyudfq1gxi3DyiIhPh30TpAAAAAElFTkSuQmCC)
      no-repeat;
    background-size: 15px auto;
    overflow: hidden;
    z-index: 1;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice_text {
    font-size: 14px;
    color: #666;
  }

  .mod_list .filterlayer_price .filterlayer_price_choice_tips {
    margin-top: -1px;
    font-size: 12px;
    color: #999;
  }

  .filterlayer_bottom_buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 16px;
    height: 49px;
    line-height: 49px;
    text-align: center;
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button.bg_1 {
    color: #333;
    background-color: #fff;
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button.bg_2 {
    color: #fff;
    background-color: #005395;
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button.btn_close {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    width: 50px;
    background: #fff
      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUdwTM3NzdbW1tHR0c3Nzc3Nzc7Ozs3Nzc3Nzc7Ozs/Pz8/Pz83Nzc3Nzc3Nzc7Ozs3NzczMzJQCJMgAAAARdFJOUwCOCBPu2C/35TsjS8Vss198Q0IebwAAANRJREFUOMvV1MsShSAIAFAyzVcv//9nr2Q1mhB3mysaTinCBPCRtbiBTw5uuWOXEiuHlFz9wMk2pVZOolsViPLpTrk/3d65LOdeopvV8+1e0u6US3W5jAMYG3m4kb6zWr65LE1ObxhtOTAj39dLSq5Iu8nulFZ2AAF3TybIw4n7loreV7QIbZScz87lQbb+DxeCKNHpCWDS79Lr4orUrJxu18ak8/3XKVef6zpv15Gu0nIDsqPl4SLVpVbSjpCG6y5KUxXMTwHKqvTVcNOiolm/8veGH3IZD4fmfbhWAAAAAElFTkSuQmCC)
      50% no-repeat;
    background-size: 20px;
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button.btn_close:after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #e5e5e5;
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0;
    right: -6px;
    top: 8px;
    bottom: 7px;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .filterlayer_bottom_buttons .filterlayer_bottom_button.btn_close:after {
      -webkit-transform: scaleX(0.5);
      -webkit-transform-origin: 100% 50%;
    }
  }

  .filterlayer_bottom_buttons .filterlayer_bottom_button_small_text {
    font-size: 12px;
  }

  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }

  .tags_selection_custom {
    margin: 15px 0;
    font-size: 14px;
    text-align: center;
    background-color: #fff
  }
  .tags_selection_custom .cube-checkbox{
    padding: 0 10px;
  }
  .tags_selection_custom /deep/ .cube-checkbox_checked .cube-checkbox-ui i{
    color: #005395;
  }

  .tags_selection {
    margin: 15px 0;
    padding: 10px 0 0 10px;
    font-size: 14px;
    text-align: center;
    background-color: #fff
  }

  .tags_selection .label_li {
      margin-bottom: 3px;
      padding-right: 27px;
      text-align: left;
      line-height: 33px
  }

  .tags_selection .label_li .li_line {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex
  }

  .tags_selection .label_li .li_line .big {
      height: 25px;
      max-width: 250px;
      overflow: hidden;
      font-size: 16px;
      color: #333;
      text-overflow: ellipsis
  }

  .tags_selection .label_li .li_line .right {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 5px;
      text-align: right;
      font-size: 12px;
      color: #999
  }

  .tags_selection .label_li .li_line .right.color_red {
      color: #e4393c
  }

  .search_jx .tags_selection .label_li .li_line .right.color_red {
      color: #ff4142
  }

  .tags_selection .option {
      box-sizing: border-box;
      float: left;
      width: 33.33%;
      padding-right: 10px;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      overflow: hidden
  }

  .tags_selection .option a {
      position: relative;
      display: block;
      padding: 0 5px;
      color: #666;
      background-color: #f7f7f7;
      border-radius: 4px
  }

  .search_jx .tags_selection .option a {
      border-radius: 20px
  }

  .tags_selection .option.selected a {
      color: #e4393c;
      background-color: #fdf0f0;
      height: 30px;
      line-height: 30px
  }

  .search_jx .tags_selection .option.selected a {
      color: #ff4142;
      height: 28px;
      line-height: 28px;
      background: #fff0f0;
      border: 1px solid #ff4142
  }

  .tags_selection .option.selected a:after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 15px;
      height: 15px;
      border-radius: 0 0 2px 0;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURUdwTOQ4POQ5PPrV1f///+dGSO17ff3u7/Kio+lcXvW4uZrptW4AAAACdFJOUwB/timhlQAAAH1JREFUGNNdzkEOQDAQheG6Qo/whNjjBBWs9QbiCFzExl4cFG1HzOvuz5fpjDHqZTqNJQYxiEEMYhCDGMQgBjGIQQxiEOPPRf114NxJx+lrkw5cDXvqyEsv/z1cT2U3p365aY9R9r3T3q1n6ri7cXJPPM23qeVyudfq1gxi3DyiIhPh30TpAAAAAElFTkSuQmCC) no-repeat;
      background-size: 15px auto;
      overflow: hidden;
      z-index: 1
  }

  .search_jx .tags_selection .option.selected a:after {
      content: none
  }

  .tags_selection .option.arrow a {
      background-color: #fff;
      overflow: visible
  }

  .tags_selection .option.arrow a:before {
      content: "";
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-color: #ccc;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: none;
      border: 1px solid #ccc;
      border-radius: 4px
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .tags_selection .option.arrow a:before {
          right:-100%;
          bottom: -100%;
          -webkit-transform: scale(.5);
          -webkit-transform-origin: 0 0;
          border-radius: 8px
      }
  }

  .search_jx .tags_selection .option.arrow a:before {
      border-radius: 40px
  }

  .tags_selection .option.arrow a:after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      margin-top: -2px;
      width: 6px;
      height: 10px;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='%23CCC' fill-rule='evenodd' d='M2 20c-.8 0-1.5-.5-1.8-1.2-.3-.8-.2-1.6.4-2.2L7.2 10 .6 3.4c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l8 8c.4.4.6 1 .6 1.4 0 .5-.2 1-.6 1.4l-8 8c-.4.4-1 .6-1.4.6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 100%;
      margin-left: 4px
  }

  @media screen and (min-width: 360px) {
      .tags_selection .option.arrow a:after {
          margin-left:6px
      }
  }

  .tags_selection .option.disabled a {
      background-color: #f2f2f2;
      color: #d2d2d2
  }

  .datalist:after,.mod_clist:after,.pro_filter_more>ul:after,.s_page:after,.search_keywordlist ul:after,.search_prolist.cols_2:after,.search_prolist .search_prolist_attr:after,.search_prolist .search_prolist_info:after,.search_recoword_list:after,.selection.line_cols_2:after,.selection:after,.tags_selection:after {
    content: "";
    display: block;
    clear: both
}
}
</style>