zuel-itsm-3.0.2/assets/views/partials/off-sidebar2.html

<!-- start: OFF RIGHT SIDEBAR TABSET -->
<tabset class="sidebar-wrapper" justified="true">
  <tab>
    <tab-heading>
      <i class="fa fa-phone"></i>
    </tab-heading>
    <div class="tab-pane" id="getup">
      <div class="users-list fontsizes-14">
        <div style="padding: 0 15px;" class="col-xs-12" ng-if="jry_state!='weiqianru'&&jry_state!='laidian'&&jry_state!='tonghuazhong'">
          <input type="button" ng-if="jry_state=='shixian'" style="margin-left: 8px;" value="示忙" ng-click="jry_shimang()" class="jry_btn">
          <input type="button" ng-if="jry_state=='shimang'" style="margin-left: 8px;" value="示闲" ng-click="jry_shixian()" class="jry_btn">
        </div>
        <div ng-if="jry_state=='weiqianru'" class="row form-group fontcolor-two" style="margin-top:30px" id="updata">
          <div class="col-xs-12 fontsizes-14">
            <div class="col-xs-12">
              <div class="control-label" for="title">
                绑定分机:
              </div>
              <ui-select class="col-xs-12 margin-top-8" ng-model="jry_extnNumberObj.jry_extnNumber" theme="bootstrap" ng-change="changeWorkId()">
                <ui-select-match placeholder="">
                  {{$select.selected.name}}
                </ui-select-match>
                <ui-select-choices repeat="item in jry_extnNumberSelect">
                  <div ng-bind-html="item.name"></div>
                </ui-select-choices>
              </ui-select>
            </div>
            <div class="col-xs-12">
              <input type="button" value="签入" ng-click="jry_qianru()" class="jry_btn">
            </div>
          </div>
        </div>
        <div class="row form-group fontcolor-two" style="margin-top:30px" id="dialout"
          ng-if="jry_state!='tonghuazhong'&&jry_state!='weiqianru'">
          <div class="col-xs-12 fontsizes-14">
            <div class="col-xs-12">
              <div>
                <div class="control-label" for="title">
                  目的号码:
                </div>
                <div class="">
                  <ui-select class="col-xs-12 margin-top-8" ng-model="jry_extnNumberObj.tel1" theme="bootstrap" ng-change="changeWorkId()">
                    <ui-select-match placeholder="">
                      {{$select.selected.name}}
                    </ui-select-match>
                    <ui-select-choices repeat="item in jry_extnNumberSelect">
                      <div ng-bind-html="item.name"></div>
                    </ui-select-choices>
                  </ui-select>
                </div>
              </div>
            </div>
            <div class="col-xs-12">
              <input type="button" style="margin-left:8px;" value="呼叫" ng-click="tlaCallagc()"
                ng-if="jry_state!='laidian'" class="jry_btn">
              <input type="button" style="margin-left:8px;" value="签出" ng-click="jry_qianchu()" class="jry_btn">
            </div>
          </div>
        </div>
        <div class="row form-group fontcolor-two" style="margin-top:30px" ng-if="jry_state=='tonghuazhong'">
          <div class="col-xs-12 fontsizes-14">
            <div class="col-xs-12">
              <div class="control-label" for="title" style="padding-right:0px">
                转接号码:
              </div>
              <div class="">
                <ui-select class="col-xs-12 margin-top-8" ng-model="jry_extnNumberObj.tel2" theme="bootstrap"
                  ng-change="changeWorkId()">
                  <ui-select-match placeholder="">
                    {{$select.selected.name}}
                  </ui-select-match>
                  <ui-select-choices repeat="item in jry_extnNumberSelect">
                    <div ng-bind-html="item.name"></div>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>
            <div class="col-xs-12">
              <input type="button" style="margin-left:8px;" value="转接" ng-click="tlaTransfertoagc()" class="jry_btn">
              <input type="button" style="margin-left:8px;" value="签出" ng-click="jry_qianchu()" class="jry_btn">
            </div>
          </div>
        </div>
      </div>
    </div>
  </tab>
</tabset>
<!-- <div class="jry_flex">
    <div class="phone_call">
        <div class="tit">请选择坐席号:</div>
        <ui-select class="col-xs-12 margin-top-8" ng-model="jry_extnNumberObj.jry_extnNumber"
            theme="bootstrap" ng-change="changeWorkId()">
            <ui-select-match placeholder="">
                {{$select.selected.name}}
            </ui-select-match>
            <ui-select-choices repeat="item in jry_extnNumberSelect">
                <div ng-bind-html="item.name"></div>
            </ui-select-choices>
        </ui-select>
        <div>
            <input type="button" value="签入" ng-click="jry_qianru()" ng-if="jry_state=='weiqianru'" class="jry_btn">
            <input type="button" value="签出" ng-click="jry_qianchu()" ng-if="jry_state!='weiqianru'" class="jry_btn">
        </div>
    </div>
</div> -->
<style>
  .jry_btn {
    width: 60px;
    height: 28px;
    background-color: #00437A;
    color: white;
    font-size: 14px;
    border: 0;
    border-radius: 4px;
    margin-top: 8px;
    float: right;
    font-weight: bold
  }

  .jry_btn:focus {
    background-color: #00437A !important;
  }

  .jry_flex {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .jry_phoneIpt {
    width: 100%;
    margin-top: 5px;
  }

  .jry_phoneBtn {
    margin-left: 3px
  }

  .phone_call {
    padding: 16px;
    /* background-color: white */
  }

  .phone_call .tit {
    height: 26px;
    line-height: 26px;
    font-size: 14px
  }

  .phone_call .phone_ipt {
    height: 30px;
    border: 1px rgb(209, 209, 203) solid;
    margin-top: 5px
  }

  .phone_call .phone_ipt .ipt {
    width: 190px;
    float: left;
    padding-left: 5px;
    height: 27px;
    border: 0;
    font-size: 13px
  }

  .phone_call .phone_ipt .phone_ico {
    float: left;
    width: 35px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    border-left: 1px rgb(209, 209, 203) solid;
    cursor: pointer;
  }

  .phone_call .phone_ipt .phone_ico i {
    color: blue;
    font-size: 18px;
  }

  .phone_call .phone_ipt .ipt:focus {
    outline: none
  }

  .unanswered_tit {
    height: 34px;
    background-color: rgb(243, 243, 243);
    line-height: 34px;
    font-size: 14px;
    padding-left: 16px
  }

  .unanswered_list {
    height: 100%;
    background-color: white;
    overflow-y: scroll
  }

  .unanswered_list .unanswered_phone {}

  .unanswered_list .unanswered_phone .unanswered_phone_msg {
    display: flex;
    padding: 16px;
    align-items: center
  }

  .unanswered_list .unanswered_phone .unanswered_phone_msg div:nth-child(1) {
    width: 60%
  }

  .unanswered_list .unanswered_phone .unanswered_phone_msg div:nth-child(1) span {
    color: red
  }

  .unanswered_list .unanswered_phone .unanswered_phone_msg div:nth-child(2) {
    font-size: 12px;
    color: rgb(164, 164, 164)
  }

  .unanswered_list .unanswered_phone .unanswered_fot_ipt {
    height: 34px;
    border-top: 1px rgb(243, 243, 243) solid;
    border-bottom: 1px rgb(243, 243, 243) solid;
  }

  .unanswered_list .unanswered_phone .unanswered_fot_ipt div:nth-child(1) {
    height: 34px;
    line-height: 34px;
    background-color: #f9f9f9;
    color: #005395;
    font-size: 14px;
    width: 49%;
    float: left;
    text-align: center;
    cursor: pointer;
  }

  .unanswered_list .unanswered_phone .unanswered_fot_ipt div:nth-child(2) {
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    width: 49%;
    border-left: 1px rgb(243, 243, 243) solid;
    float: left;
    text-align: center;
    cursor: pointer;
  }

  .unanswered_list::-webkit-scrollbar {
    display: none
  }
</style>