<template>
  <div class="seiminDrawer">
    <div class="seiminDrawer_mask" @click="close"></div>
    <div class="sf_layer show" id="filterBlock">
      <div class="sf_layer_con" id="filterInner">
        <ul class="mod_list">
          <li class="arrow_li J_ping noAfter">
            <div class="list_inner li_line">
              <div class="big">协同人员</div>
            </div>
          </li>
        </ul>
        <ul class="mod_list padding_left">
          <li class="check_li" v-for="item in synergeticList" :key="item.id" @click="clickItems(item)" :class="{checked: item.checked}">
            <div class="list_inner li_line">
              <div class="big">{{ item.name }}<span class="small"></span></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="filterlayer_bottom_buttons">
        <span class="filterlayer_bottom_button bg_1 J_ping" @click="close">取消</span>
        <span class="filterlayer_bottom_button bg_2" @click="confirm">确认</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "seiminDrawer",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      selectData: {
        synergeticChecked: [],
      },
      synergeticList: [],
    };
  },
  props:['evt', 'infoData'],
  methods: {
    // 确定
    confirm(){
      console.log(this.selectData);
      this.$emit('confirm', this.selectData);
      this.close();
    },
    // 关闭
    close() {
      this.$emit("close");
    },
    // 获取协同人员
    getSynergeticList() {
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/user/data/fetchDataList/user", {
          idx: 0,
          sum: 9999,
          user: {
            currentDuty: this.infoData.dutyId,
          }
        })
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            let list = res.data.list || [];
            this.synergeticList = list.map(v => ({...v, checked: false}));
            // 回显
            this.synergeticList.forEach(v => {
              this.selectData.synergeticChecked.forEach( vv => {
                if(v.id == vv.id){
                  v.checked = true;
                }
              })
            })
          }
        }, (err) => {
          toast.hide();
        });
    },
    // 点击区域项
    clickItems(item){
      item.checked = !item.checked;
      if(this.selectData.synergeticChecked.length){
        let index = this.selectData.synergeticChecked.findIndex(v => v.id == item.id);
        if(index > -1){
          this.selectData.synergeticChecked.splice(index, 1);
        }else{
          this.selectData.synergeticChecked.push(item);
        }
      }else{
        this.selectData.synergeticChecked.push(item);
      }

    },
  },
  mounted() {
    this.getSynergeticList();
    // 初始化
    if(this.evt){
      this.selectData = this.evt
    }
  }
};
</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%;
    right: 20px;
    -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 {
    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>
