hemall.terabimsoft.com.cn/plugins/shop-esign/views/admin/contract/sign_detail.blade.php

@extends('layouts.base')

@section('content')
@section('title', '合同信息')
<script type="text/javascript" src="{{static_url('js/pdfjs/pdf.js')}}"></script>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc ="{{static_url('js/pdfjs/pdf.worker.min.js')}}";
</script>
<div class="w1200 m0a">
  <div class="right-titpos">
    <ul class="add-snav">
      <li class="active"><a href="#">合同信息</a></li>
    </ul>
  </div>
  <div id="app">
      <template>
          <div id="pageContent" class="pageContent_2lAGg">
              <div class="leftContent_2NoKi">
                  <div class="doc-list-context">
                      <div>
                          <el-tabs v-model="activeNameLeft" @tab-click="handleClick" :stretch="true">
                          <el-tab-pane label="合同" name="1"></el-tab-pane>
                          <el-tab-pane label="附件" name="2"></el-tab-pane>
                          </el-tabs>
                      </div>
                      <template v-if="activeNameLeft == 1">
                          <div class="doc-list-title">合同 <span>(1份)</span></div>
                          <div class="doc-list">
                              <div class="doc-item">
                                  <div class="doc-img">
                                      <img src="../../assets/images/pdfpng.png"
                                           alt="">
                                      <div class="doc-page-num">[[page_count]]</div>
                                  </div>
                                  <div class="doc-name">[[contract_info.contract_doc_name]]</div>
                              </div>
                              <!--<div class="componentsList_1OIrB">-->
                              <!--<div class="componentArea">-->
                              <!--<div class="itemConentStyle"><span class="need">*</span><span>文本名称</span></div>-->
                              <!--<p class="input"></p><div class="errorInfo_3lZie">请填写当前控件</div>-->
                              <!--</div>-->
                              <!--</div>-->
                              <div class="componentSign">
                                  <p class="sealCompInfo_3v9iQ"><span class="need">*</span><span><span>甲方</span><em>(<span>签署区</span>)</em></span></p><div class="itemConentStyle_2MWEL"><div class="infoMsg_3NkPg">签署区</div><i class="iconfont icon-pm_auction_success"></i></div>
                              </div>
                          </div>
                      </template>
                      <template v-if="activeNameLeft == 2">
                          <div  class="doc-list-title" v-if="contract_info.contract_attach.length == 0">暂无附件</div>
                          <div class="doc-list-title" v-if="contract_info.contract_attach.length > 0">附件 <span>([[contract_info.contract_attach.length]]份)</span></div>
                          <div class="doc-list">
                              <div class="doc-item" v-for="(item, index) in contract_info.contract_attach" :key="index">
                                  <div class="doc-img">
                                      <img src="../../assets/images/pdfpng.png"
                                           alt="">
                                      <div class="doc-page-num">[[page_count]]</div>
                                  </div>
                                  <div class="doc-name">[[item.file_name]]</div>
                              </div>
                          </div>
                      </template>

                  </div>
              </div>
              <div class="pdfContent_1PW2f">
                  <div class="pdf-header">
                      <div class="block">
                          <span class="demonstration">[[value1*100]]%</span>
                          <div class="slider">
                              <el-slider v-model="value1" :min="0.5" :max="2" :step="0.25" @change="handleChange"></el-slider>
                          </div>
                      </div>
                      <div class="input">
                          <span>Page: <input type="text" class="input-text" v-model="page_num" placeholder="1"> / [[page_count]]</span>
                          <el-button @click="jump" type="text">跳转</el-button>
                          <!--<span>全屏</span>-->
                      </div>
                  </div>
                  <div class="pdf-container" ref="pdfBox" v-loading="!isShow"
                       element-loading-text="拼命加载中"
                       element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(0, 0, 0, 0.1)">
                      <div id="sun"></div>
                      <div class="pdf-box" id="pdf-box" :style="{width: pdfWidth+'px', left: showEdges? '-60px': ''}">
                          <div class="pdfPage_1yRne" :style="{width: pdfWidth+'px',height: pdfHeight+ 'px'}" v-for="page in page_count" :key="page">
                              <canvas class="pdf-item" :id="'the-canvas'+page" ></canvas>
                              <div class="dragLayer_3ccsq" :id="'can'+ page"></div>
                              <transition name="slide-fade">
                                  <div v-if="showEdges" :id="'edge_'+page" :class="{'es-pdf-page__edges--visible': signEdges}" class="es-pdf-page__edges" style="width: 120px;" :style="{width: slideWidth+'px',height: pdfHeight+ 'px'}"></div>
                              </transition>
                          </div>
                      </div>
                      <!--<div class="bottom-btn" @click="showEdges = !showEdges"><span>[[showEdges? '单页盖章':'骑缝签章']]</span></div>-->
                  </div>
              </div>
              <div class="taskInfoArea_3ThxW">
                  <div class="tab-bar">
                      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
                      {{--<el-tab-pane label="我的印章" name="1"></el-tab-pane>--}}
                      <el-tab-pane label="任务信息" name="2"></el-tab-pane>
                      </el-tabs>
                  </div>
                  <div class="tab-context">
                      {{--<div class="item" v-show="activeName == 1 && can_sign == 1 && is_cc != 1 && auth_status == 1 && contract_info.status < 2 && sign_status != 1">
                          <div v-if="company_seals.length>0">
                              <p class="title">企业印章</p>
                              <div  class="seal-box-wrap">
                                  <div class="seal-box" v-for="seal in company_seals" :key="seal.id">
                                      <div class="seal-wrapper-item">
                                          <div class="sign-img" :style="{backgroundImage: 'url(' + seal.has_one_seal.seal_url + ')'}"
                                               style="height: 100px;width: 100px" v-bind:id="seal.has_one_seal.id"
                                          @mousedown='signPic'>
                                          <!--:style="{backgroundImage: 'url(' + seal.has_one_seal.seal_url + ')'}"-->
                                          <div class="delete" @click.stop="deleteIt">删除</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div v-if="person_seals.length>0">
                          <p class="title">个人印章</p>
                          <div  class="seal-box-wrap">
                              <div class="seal-box" v-for="seal in person_seals" :key="seal.id">
                                  <div class="seal-wrapper-item">
                                      <div class="sign-img" :style="{backgroundImage: 'url(' + seal.seal_url + ')'}"
                                           style="height: 100px;width: 100px" v-bind:id="seal.id"
                                      @mousedown='signPic'>
                                      <!--:style="{backgroundImage: 'url(' + seal.seal_url + ')'}"-->
                                      <div class="delete" @click.stop="deleteIt">删除</div>
                                  </div>
                              </div>
                              <p class="seal-box-title">[[seal.name]]</p>
                          </div>
                          <div class="seal-box">
                              <div class="fileAddItem_1Vqb7" @click="toAddSeal">
                              <i class="iconfont icon-adsystem_icon_add"></i>
                              <p class="defaultInfoStyle_2mgdq">添加印章</p>
                          </div>
                      </div>--}}


                      <div class="sign-flow-info"{{-- v-show="activeName == 2"--}}>
                          <div class="sign-flow-info-detail">
                              <div class="detail-item">
                                  <span class="detail-item-title">合同名称</span>
                                  <span class="detail-item-desc wrap">[[contract_info.name]]</span>
                              </div>
                              <div class="detail-item">
                                  <span class="detail-item-title">发起方</span>
                                  <span class="detail-item-desc wrap">[[contract_info.account_name]]</span>
                              </div>
                              <div class="detail-item">
                                  <span class="detail-item-title">发起时间</span>
                                  <span class="detail-item-desc wrap">[[contract_info.created_at]]</span>
                              </div>
                              {{--<div class="detail-item">
                                  <span class="detail-item-title">截止时间</span>
                                  <span class="detail-item-desc wrap">[[contract_info.sign_end_date]]</span>
                              </div>
                              <div class="detail-item">
                                  <span class="detail-item-title">文件有效截止时间</span>
                                  <span class="detail-item-desc wrap">[[contract_info.contract_end_date]]</span>
                              </div>--}}
                              <p class="detail-item-title">签署方</p>
                          </div>
                          <div class="userItem" v-for="user in roles_list" :key="user.id">
                              <div style="flex: 1;display: flex">
                                  {{--<div class="user">[[user.name[0]]]</div>todo 报错待修改--}}
                                  <div class="user-name"><span style="color: #0099e6">[[user.company_name]]</span><span>[[user.name]]</span></div>
                              </div>
                              <div class="tag"><span v-if="user.sign_status == 1">已签署</span><span v-else>未签署</span>
                                  {{--<i v-clipboard:copy="user.sign_short_url"  v-clipboard:success="onCopy"  v-clipboard:error="onError" class="iconfont icon-all_link"></i>--}}</div>
                          </div>
                          {{--<p class="detail-item-title" style="text-align: left;margin: 15px 0">文件时间流</p>
                          <div class="block">
                              <el-timeline>
                                  <el-timeline-item
                                          v-for="(activity, index) in activities"
                                          :key="index"
                                          :icon="activity.icon"
                                          :type="activity.type"
                                          :color="activity.color"
                                          :size="activity.size"
                                          :timestamp="activity.timestamp">
                                      [[activity.content]]
                                  </el-timeline-item>
                              </el-timeline>
                          </div>--}}

                      </div>
                  </div>
              </div>

              {{--<div style="text-align: center;margin-top: 20px;">
                  <el-button type="primary" @click="showSign">确定签署</el-button>
              </div>--}}
          </div>

          {{--<div v-if="sign_status == 1 && contract_info.status < 2">
              <div style="margin-top: 40px">
                  <img class="finish-img" src="../../assets/images/sign.png" alt="">
              </div>
              <p class="title">已签署</p>
          </div>
          <div v-if="contract_info.status == 2">
              <div style="margin-top: 40px">
                  <img class="finish-img" src="../../assets/images/complete.png" alt="">
              </div>
              <p class="title">已完成</p>
          </div>
          <div v-if="contract_info.status == 3">
              <div style="margin-top: 40px">
                  <img class="finish-img" src="../../assets/images/cancel.png" alt="">
              </div>
              <p class="title">已撤销</p>
          </div>
          <div v-if="contract_info.status == 4">
              <div style="margin-top: 40px">
                  <img class="finish-img" src="../../assets/images/overtime.png" alt="">
              </div>
              <p class="title">已超时</p>
          </div>

          <div class="real" v-show="activeName == 1 && auth_status != 1">
              <div>
                  <span class="gray">请先完成个人实名认证</span>
                  <el-button type="primary" @click="toPerson">去认证</el-button>
              </div>
          </div>--}}





            {{--<el-dialog
                    title="手机短信意愿签署"
                    :visible.sync="signVisible"
                    width="600px"
                    custom-class="tips-dialog"
                    style="margin:0 auto;text-align: center;">
                <div class="dialog-box">
                    <p class="phone">手机号码：  [[mobile]]</p>
                    <div class="send-code">
                        <p class="code-title">输入验证码：</p><el-input v-model.trim="code" style="margin-right: 20px"></el-input><el-button type="primary" @click="sendCode" size="small" v-if="count==0">获取手机验证码</el-button><el-button type="primary" disabled v-if="count!=0" size="small">[[count]] 秒后重新获取</el-button>
                    </div>
                </div>
                <el-button type="primary" @click="companySign">确定签署</el-button>
            </el-dialog>

            <el-dialog
                    title="实名认证"
                    :visible.sync="showPerson" :close-on-click-modal="false" :show-close="false"
                    width="600px"
                    custom-class="tips-dialog"
                    style="margin:0 auto;text-align: center;">
                <div class="dialog-box" style="padding: 30px;font-size: 16px;">
                    如您已完成认证，请点击签署合同继续完成签署！
                </div>
                <el-button type="primary" @click="getData">签署合同</el-button>
            </el-dialog>--}}

      </template>
  </div>

</div>

<script>
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
        return {
            isShow: false,
            setFlag: false,
            user_role_id: '',
            showPerson: false,
            sign_status: 0,
            auth_status: 1,
            is_cc: 0,
            can_sign: 0,
            signEdges: false,
            showEdges: false,
            signVisible: false,
            count: 0,
            timer: null,
            dom: null,
            scrollTop: 0,
            activeNameLeft: '1',
            activeName: "1",
            pdfUrl: "",// 这里是pdf文件地址，后台给的流文件请求地址也是可以的
            pdfDoc: null,// pdfjs 生成的对象
            pageNum: 1,//
            value1: 1,
            scale: 1.0,// 放大倍数
            page_num: 0,// 当前页数
            page_count: 0,// 总页数
            maxscale: 2,// 最大放大倍数
            minscale: 0.5,// 最小放大倍数
            pdfWidth: 0,
            pdfHeight: 0,
            slideWidth: 120,
            right: true,
            left: true,
            code: "",
            mobile: '',
            pos_x: '',
            pos_y: '',
            posPage: '',
            seal_id: '',
            // href: '',

            activities: [],

            commonStructsList: [],
            company_seals: [],
            contract_info: {},
            contract_logs: [],
            person_seals: [],
            roles_list: []
        }
    },
    created(){
        this.contract_id = parseInt("{{$id}}");
        this.mobile = localStorage.getItem("siteMobile");
    },
    mounted(){
        this.$nextTick(function() {
            this.$refs.pdfBox.addEventListener("scroll", this.handleScroll, false);
            this.getData();
        });
    },
    watch:{
        scale(new1, old1) {
            document.querySelectorAll(".mark").forEach((item) => {
                item.style.left = (parseInt(item.style.left) / (old1 / new1)) + "px";
                item.style.top = (parseInt(item.style.top) / (old1 / new1)) + "px";
                item.style.height = 100 * new1 + "px";
                item.style.width = 100 * new1 + "px";
            });
            document.querySelectorAll(".text_mark").forEach((item) => {
                item.style.left = (parseInt(item.style.left) / (old1 / new1)) + "px";
                item.style.top = (parseInt(item.style.top) / (old1 / new1)) + "px";
                item.style.height = 28 * new1 + "px";
                item.style.width = 190 * new1 + "px";
            });
            document.querySelectorAll(".text_mark2").forEach((item) => {
                item.style.left = (parseInt(item.style.left) / (old1 / new1)) + "px";
                item.style.top = (parseInt(item.style.top) / (old1 / new1)) + "px";
                item.style.height = 100 * new1 + "px";
                item.style.width = 100 * new1 + "px";
            });
            this.slideWidth = 120 *new1;
        }
    },
    methods: {
        toPerson() {
            this.showPerson = true;
            window.open(this.fun.getSiteRoot() + "/#/real_people");
        },
        onCopy: function(e) {
            this.$message.success("复制成功")
        },
        onError: function(e) {
            this.$message.error("复制失败")
        },
        showSign() {
            if (document.querySelectorAll('.mark').length <= 0) {
                this.$message.error("请先拖拽盖章")
                return;
            }
            this.signVisible = true;
        },
        // 获取手机验证码
        sendCode() {
            this.$http.post("{!!yzWebUrl('plugin.yun-sign.frontend.contract.send-code')!!}", {contract_id: this.contract_id}, "loading").then(response => {
                if (response.result === 1) {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                } else {
                    this.$message.error(response.msg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        companySign() {
            if (!this.code){
                this.$message.error("请输入验证码");
                return
            }
            let sign_type = 1;
            if(this.showEdges) {
                sign_type = 2;
            }else {
                sign_type = 1;
            }
            let json = {
                sign_type: sign_type,
                total_page: this.page_count,
                posPage: this.posPage,
                seal_id: this.seal_id,
                width: 100,
                pos_x: this.pos_x/this.scale,
                pos_y: (this.pdfHeight/this.scale) - (this.pos_y/this.scale)-100,  //转成bottom
                updated_at: this.contract_info.updated_at,
                id: this.contract_id,
                code: this.code,
            };
            this.$http.post("{!!yzWebUrl('plugin.yun-sign.frontend.contract.sign-contract')!!}", json, "loading").then(response => {
                this.code = "";
                if (response.result === 1) {
                    this.signVisible = false;
                    this.$router.push(this.fun.getUrl("Manage"));
                } else {
                    this.$message.error(response.msg);
                }
            }).catch(err => {
                this.code = "";
                console.log(err);
            });
        },
        // 获取模版
        getData() {
            this.showPerson = false;
            this.$http.post("{!!yzWebUrl('plugin.shop-esign.admin.contract.getSignDetail')!!}", {id: this.contract_id}).then(response => {
                if (response.data.result === 1) {
                    this.user_role_id = response.data.data.user_role_id;
                    this.sign_status = response.data.data.sign_status;
                    this.auth_status = response.data.data.auth_status;
                    //this.is_cc = response.data.is_cc;
                    this.can_sign = response.data.data.can_sign;
                    this.company_seals = response.data.data.company_seals;
                    this.contract_info = response.data.data.contract_info;
                    //this.contract_logs = response.data.contract_logs;
                    this.person_seals = response.data.data.person_seals;
                    this.roles_list = response.data.data.roles_list;
                    this.pdfUrl = this.contract_info.contract_doc_url;
                    // this.pdfUrl = "/static/test.pdf";
                    this._loadFile(this.pdfUrl);
                    //this.commonStructsList = response.data.form_list;
                    /*for(let i=0;i<this.contract_logs.length;i++){
                        if(i === this.contract_logs.length-1){
                            this.activities.push({
                            content: this.contract_logs[i].status_desc,
                            timestamp: this.contract_logs[i].created_at,
                            color: "#0099e6"
                            })
                        }else {
                            this.activities.push({
                            content: this.contract_logs[i].status_desc,
                            timestamp: this.contract_logs[i].created_at,
                            })
                        }
                    }*/
                } else {
                    this.$message.error(response.msg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        setTemplate() {
            const that = this;
            /*for (let i = 0; i < this.commonStructsList.length; i++) {
                if(that.commonStructsList[i].form_type == 2) {
                    let Element = document.querySelector(".componentSign").cloneNode(true);
                    document.querySelector('#can'+ that.commonStructsList[i].doc_page).appendChild(Element);
                    Element.style.left = that.commonStructsList[i].pos_x + "px";
                    Element.style.top = that.commonStructsList[i].pos_y + "px";
                    Element.style.display = "flex";
                    Element.classList.add("text_mark2");
                    Element.setAttribute("page", that.commonStructsList[i].doc_page);
                    Element.setAttribute('textId', that.commonStructsList[i].id);
                    Element.setAttribute('role_id',that.commonStructsList[i].role_id);
                    Element.childNodes[0].style.display = "flex";
                    Element.childNodes[0].childNodes[1].childNodes[1].childNodes[1].innerText = that.commonStructsList[i].form_name;
                    if(that.commonStructsList[i].role_id == '1'){
                        Element.childNodes[0].childNodes[1].childNodes[0].innerText = '甲方';
                    }else if(that.commonStructsList[i].role_id == '2'){
                        Element.childNodes[0].childNodes[1].childNodes[0].innerText = '乙方';
                    }else if(that.commonStructsList[i].role_id == '3'){
                        Element.childNodes[0].childNodes[1].childNodes[0].innerText = '丙方';
                    }
                }
            }*/
        },
        TextBlur(e) {
            // console.log(e.currentTarget.parentNode.childNodes);
            e.currentTarget.value=e.currentTarget.value.replace(/\s+/g,'');
            if(e.currentTarget.parentNode.childNodes[0].childNodes[0].style.display == "inline-block" && e.currentTarget.value == '') {
                e.currentTarget.parentNode.classList.add("needFill");
                e.currentTarget.parentNode.childNodes[3].style.display = "flex";
            }else {
                e.currentTarget.parentNode.classList.remove("needFill");
                e.currentTarget.parentNode.childNodes[3].style.display = "none";
            }
        },
        TextMouseenter(e) {
            e.currentTarget.childNodes[0].style.display = "flex";
            // e.currentTarget.childNodes[3].style.display = "block";
        },
        TextMouseleave(e) {
            e.currentTarget.childNodes[0].style.display = "none";
            // e.currentTarget.childNodes[3].style.display = "none";
        },
        TextDeleteIt(e) {
            document.querySelector(".dragLayer_3ccsq").removeChild(e.currentTarget.parentNode);
        },
        mouseenter(e) {
            e.currentTarget.childNodes[0].style.display = "block";
        },
        mouseleave(e) {
            e.currentTarget.childNodes[0].style.display = "none";
        },
        deleteIt(e) {
            e.currentTarget.parentNode.parentNode.removeChild(e.currentTarget.parentNode);
        },
        deleteIt2(){
            document.querySelectorAll(".slide-sign").forEach((item) => {
              item.parentNode.removeChild(item);
            });
        },
        deleteIt3(e) {
            e.currentTarget.parentNode.parentNode.childNodes[0].style.display = 'block';
            e.currentTarget.parentNode.parentNode.removeChild(e.currentTarget.parentNode);
        },
        signPic(e) {
            if (document.querySelectorAll('.mark').length >= 1) {
                this.$message.error("已经盖了印章")
                return;
            }
            let dom = e.currentTarget.cloneNode(true);
            let sidebarWidth = 0;
            if (document.querySelector("#app").clientWidth > 1026) {
                sidebarWidth = document.querySelector(".el-scrollbar__view").clientWidth;
            }
            dom.style.left = (this.getPos(e).x - 50 - sidebarWidth) + "px";
            dom.style.top = (this.getPos(e).y - 100) + "px";
            dom.className = "sign-img mark";
            document.querySelector("#pageContent").appendChild(dom);
            this.signEdges = true;

            document.onmousemove = e => {
                dom.style.left = (this.getPos(e).x - parseInt(dom.clientWidth / 2) - sidebarWidth) + "px";
                dom.style.top = (this.getPos(e).y - parseInt(dom.clientHeight)) + "px";
                dom.className = "sign-img mark";
            };
            // 鼠标抬开
            document.onmouseup = e => {
                let left = (this.getPos(e).x + this.$refs.pdfBox.scrollLeft - parseInt(dom.clientWidth / 2) - document.querySelector(".pdf-box").offsetLeft - sidebarWidth);
                let top = (this.getPos(e).y + this.scrollTop - parseInt(dom.clientHeight / 2) - 100);

                if(this.showEdges) {
                    //限制区域
                    if (left < document.querySelector(".pdf-box").clientWidth) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("请将印章拖拽到合同区域");
                        return;
                    } else if (left > (document.querySelector(".pdf-box").clientWidth + 120*this.scale) - (100 * this.scale)) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("印章位置超出了合同区域");
                        return;
                    }

                    if (top < 0) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("请将印章拖拽到合同区域");
                        return;
                    } else if (top > document.querySelector(".pdf-box").clientHeight - (100 * this.scale)) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("印章位置超出了合同区域");
                        return;
                    }
                }else {
                    //限制区域
                    if (left < 0) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("请将印章拖拽到合同区域");
                        return;
                    } else if (left > document.querySelector(".pdf-box").clientWidth - (100 * this.scale)) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("印章位置超出了合同区域");
                        return;
                    }

                    if (top < 0) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("请将印章拖拽到合同区域");
                        return;
                    } else if (top > document.querySelector(".pdf-box").clientHeight - (100 * this.scale)) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.querySelector("#pageContent").removeChild(dom);
                        this.$message.error("印章位置超出了合同区域");
                        return;
                    }
                }

                let index = 0;

                if(top > this.pdfHeight*this.page_num){
                    top = top - this.pdfHeight*this.page_num;
                    index = this.page_num+1;
                }else {
                    top = top - this.pdfHeight*(this.page_num-1);
                    index = this.page_num;
                }

                // margin
                top = top - (index-1)*10;

                this.posPage = index;
                this.seal_id = dom.getAttribute("id");

                document.querySelector("#pageContent").removeChild(dom);

                if(this.showEdges) {
                    this.pos_x = left-this.pdfWidth;
                    this.pos_y = top;
                    dom.style.left = left-this.pdfWidth + "px";
                    dom.style.top = top + "px";
                    dom.style.height = 100 * this.scale + "px";
                    dom.style.width = 100 * this.scale + "px";
                    document.onmousemove = null;
                    document.onmouseup = null;
                    for(let i=1;i<=this.page_count;i++){
                        let domNum = dom.cloneNode(true);
                        document.querySelector('#edge_'+ i).appendChild(domNum);
                        domNum.className = "sign-img mark slide-sign";
                        domNum.onmousedown = this.moveTo2;
                        domNum.onmouseenter = this.mouseenter;
                        domNum.onmouseleave = this.mouseleave;
                        domNum.childNodes[0].onclick = this.deleteIt2;
                    }
                    this.signEdges = false;
                }else {
                    for (let i = 0; i < document.querySelectorAll('.text_mark2').length; i++) {
                        if(document.querySelectorAll('.text_mark2')[i].getAttribute('role_id') == this.user_role_id){
                            this.pos_x = parseInt(document.querySelectorAll('.text_mark2')[i].style.left);
                            this.pos_y = parseInt(document.querySelectorAll('.text_mark2')[i].style.top);
                            this.posPage = document.querySelectorAll('.text_mark2')[i].getAttribute('page');
                            dom.style.left = 0 + "px";
                            dom.style.top = 0 + "px";
                            dom.style.height = 100 * this.scale + "px";
                            dom.style.width = 100 * this.scale + "px";
                            document.querySelectorAll('.text_mark2')[i].childNodes[1].childNodes[0].style.display = 'none';
                            document.querySelectorAll('.text_mark2')[i].childNodes[1].appendChild(dom);
                            document.onmousemove = null;
                            document.onmouseup = null;
                            dom.onmouseenter = this.mouseenter;
                            dom.onmouseleave = this.mouseleave;
                            dom.childNodes[0].onclick = this.deleteIt3;
                            this.setFlag = true;
                        }
                    }

                    if(!this.setFlag){
                        this.pos_x = left;
                        this.pos_y = top;
                        dom.style.left = left + "px";
                        dom.style.top = top + "px";
                        dom.style.height = 100 * this.scale + "px";
                        dom.style.width = 100 * this.scale + "px";
                        document.querySelector('#can'+ index).appendChild(dom);
                        document.onmousemove = null;
                        document.onmouseup = null;
                        dom.onmouseenter = this.mouseenter;
                        dom.onmouseleave = this.mouseleave;
                        dom.onmousedown = this.moveTo;
                        dom.childNodes[0].onclick = this.deleteIt;
                    }
                }
            };
        },
        moveTo(e) {
            let odiv = e.currentTarget; //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = e => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                //限制区域
                if (left <= 0) {
                    left = 0;
                } else if (left >= document.querySelector(".pdf-box").clientWidth - odiv.clientWidth) {
                    left = document.querySelector(".pdf-box").clientWidth - odiv.clientWidth;
                }

                if (top <= 0) {
                    top = 0;
                } else if (top >= this.pdfHeight - odiv.clientHeight) {
                    top = this.pdfHeight - odiv.clientHeight;
                }

                //移动当前元素
                this.pos_x = left;
                this.pos_y = top;
                // console.log(this.pos_x,this.pos_y)
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = e => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        moveTo2(e) {
            let odiv = e.currentTarget; //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = e => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                //限制区域
                if (left <= 0) {
                    left = 0;
                } else if (left >=  120*this.scale - odiv.clientWidth) {
                    left = 120*this.scale - odiv.clientWidth;
                }

                if (top <= 0) {
                    top = 0;
                } else if (top >= this.pdfHeight - odiv.clientHeight) {
                    top = this.pdfHeight - odiv.clientHeight;
                }

                //移动当前元素
                this.pos_x = left;
                this.pos_y = top;
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = e => {
                document.querySelectorAll(".slide-sign").forEach((item) => {
                    item.style.left = odiv.style.left;
                    item.style.top = odiv.style.top;
                });
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        getPos(ev) {
            return { x: ev.clientX, y: ev.clientY };
        },
        toAddSeal() {
            window.open(this.fun.getSiteRoot() + "/#/seal/index");
            // this.$router.push(this.fun.getUrl("sealIndex"));
        },
        // tab点击事件
        handleClick(tab, event) {
            //console.log(this.activeName,"activeName")
        },
        handleChange(val) {
            this.scale = val;
            this.queueRenderPage(this.pageNum);
        },
        handleScroll(el) {
            this.scrollTop = this.$refs.pdfBox.scrollTop;
            let _pdfs = document.querySelectorAll(".pdfPage_1yRne");
            let arr = [];
            _pdfs.forEach((item, index) => {
                if (this.scrollTop >= item.offsetTop) {
                    arr.push(index);
                }
            });
            this.page_num = Math.max.apply(null, arr) + 1;
        },
        jump() {
            let that = this;
            let index = this.page_num - 1;
            if (index > this.page_count) {
                this.$message.error("请输入有效范围内的数字");
                return;
            }
            // 用 class="pdfPage_1yRne" 添加锚点
            let jump = document.querySelectorAll(".pdfPage_1yRne");
            let total = jump[index].offsetTop;
            // console.log('纵坐标', total)
            let distance = this.scrollTop;
            //平滑滚动，时长500ms，每10ms一跳，共50跳
            let step = total / 30 >> 0;
            if (total > distance) {
                smoothDown();
            } else {
                let newTotal = distance - total;
                step = newTotal / 30 >> 0;
                smoothUp();
            }

            function smoothDown() {
                if (distance < total) {
                    distance += step;
                    that.$refs.pdfBox.scrollTop = distance;
                    setTimeout(smoothDown, 10);
                } else {
                    that.$refs.pdfBox.scrollTop = total;
                }
            }

            function smoothUp() {
                if (distance > total) {
                    distance -= step;
                    that.$refs.pdfBox.scrollTop = distance;
                    setTimeout(smoothUp, 10);
                } else {
                    that.$refs.pdfBox.scrollTop = total;
                }
            }
        },
        _renderPage(num) {
            this.pdfDoc.getPage(num).then((page) => {
                let canvas = document.getElementById("the-canvas" + num);
                let ctx = canvas.getContext("2d");

                let viewport = page.getViewport(this.scale);
                // alert(vm.canvas.height)
                this.pdfHeight = canvas.height = viewport.height;
                this.pdfWidth = canvas.width = viewport.width;
                // Render PDF page into canvas context
                let renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                page.render(renderContext).then(()=>{
                    let c = document.getElementById("the-canvas"+ num);
                    let base64img = c.toDataURL("image/png");
                    const img = document.createElement('img');
                    img.src = base64img;
                    img.style.width = viewport.width;
                    document.getElementById("sun").appendChild(img)
                    document.getElementById("the-canvas"+ num).remove();
                }).then(()=>{
                    if (this.page_count > num) {
                        this._renderPage(num + 1);
                    }
                });
            })
            this.page_num = this.pageNum;
        },
        _loadFile(url) {
            const CMAP_URL = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/';
            pdfjsLib.getDocument({url:url,cMapUrl: CMAP_URL,cMapPacked: true,disableWorker: true}).then((pdf) => {
                this.pdfDoc = pdf;
                this.page_count = this.pdfDoc.numPages;
                this.$nextTick(() => {
                    this.setTemplate();
                    this.isShow = true;
                    this._renderPage(1);
                });

                this.pageNum = 1;
            });
        },
        queueRenderPage(num) {
            this._renderPage(num);
        }
    }
  })
</script>
<style>
    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(-10px);
        opacity: 0;
    }

    .dialog-box .phone {
        width: 430px;
        margin: 0 auto;
        text-align: left;
        font-size: 16px;
    }
    .dialog-box .send-code {
        display: flex;
        width: 450px;
        margin: 30px auto;
    }
    .dialog-box .code-title {
        flex: 0 0 100px;
        align-self: center;
    }

    .pageContent_2lAGg {
        display: flex;
        /*max-width: 1200px;*/
        height: 93vh;
        /*margin: 10px auto 0 auto;*/
        overflow: auto;
        user-select: none;
        /*firefox浏览器*/
        -moz-user-select: none;
        /*safari、chrome浏览器*/
        -webkit-user-select: none;
        /*Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用*/
    }
    .pageContent_2lAGg .input {
        border: none;
        outline: none;
        width: 170px;
    }
    .pageContent_2lAGg .sign-img {
        position: absolute;
        cursor: move;
        z-index: 7;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584116150977&di=8c196ff505f980e30039a8794ead2dad&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F20%2F16%2F01%2F3156adf74e970a9.jpg");
    }
    .pageContent_2lAGg .componentSign {
        display: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        height: 100px;
        padding: 0 10px;
        border: 1px dashed rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.85);
        font-size: 12px;
        position: absolute;
        top: 95px;
        left: 56px;
    }
    .pageContent_2lAGg .sealCompInfo_3v9iQ {
        min-width: 100%;
        position: absolute;
        height: 20px;
        top: -21px;
        left: -1px;
        padding: 4px 8px;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(92, 162, 232, 0.6);
        z-index: 6;
        display: none;
    }
    .pageContent_2lAGg .sealCompInfo_3v9iQ .need {
        font-size: 16px;
        margin-top: 2px;
        margin-right: 4px;
        display: inline-block;
    }
    .pageContent_2lAGg .itemConentStyle_2MWEL {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .pageContent_2lAGg .infoMsg_3NkPg {
        position: absolute;
        top: 41px;
        width: 100%;
        text-align: center;
    }
    .pageContent_2lAGg .componentSign-show {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 190px;
        height: 28px;
        padding: 0 10px;
        border: 1px dashed rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.85);
        font-size: 12px;
        cursor: grab;
        position: absolute;
        top: 95px;
        left: 12px;
    }
    .pageContent_2lAGg .componentSign-img {
        display: none;
        width: 100px;
        height: 100px;
    }
    .pageContent_2lAGg .delete {
        width: 100%;
        position: absolute;
        bottom: -15px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        background-color: rgba(10, 10, 10, 0.6);
        cursor: pointer;
        display: none;
    }
    .pageContent_2lAGg .componentArea {
        display: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 190px;
        height: 28px;
        margin: 8px auto;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid #409EFF;
        font-size: 12px;
        /*cursor: grab;*/
        position: absolute;
        top: 90px;
        left: 12px;
    }
    .pageContent_2lAGg .itemConentStyle {
        position: absolute;
        height: 20px;
        top: -21px;
        left: -1px;
        padding: 4px 8px;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(92, 162, 232, 0.8);
        z-index: 10;
        display: none;
    }
    .pageContent_2lAGg .itemConentStyle .need {
        font-size: 16px;
        margin-top: 2px;
        margin-right: 4px;
        display: inline-block;
    }
    .pageContent_2lAGg .text_delete {
        width: 40%;
        position: absolute;
        bottom: -19px;
        left: 30%;
        text-align: center;
        color: #fff;
        padding: 3px 0;
        font-size: 12px;
        background-color: rgba(10, 10, 10, 0.6);
        cursor: pointer;
        display: none;
    }
    .pageContent_2lAGg .icon-pm_auction_success {
        color: #409EFF;
        display: none;
    }
    .pageContent_2lAGg .choose {
        border: 1px solid #409EFF;
    }
    .pageContent_2lAGg .choose .icon-pm_auction_success {
        display: inline-block;
    }
    .pageContent_2lAGg .needFill {
        border: 1px solid #e61717;
        -webkit-appearance: none;
    }
    .pageContent_2lAGg .errorInfo_3lZie {
        display: none;
        position: absolute;
        left: 0;
        bottom: -16px;
        z-index: 10;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 14px;
        color: #e61717;
        font-size: 12px;
        line-height: 18px;
        white-space: nowrap;
    }

    .leftContent_2NoKi {
        display: flex;
        flex-direction: column;
        flex: 0 0 240px;
        width: 240px;
        height: 100%;
    }
    .leftContent_2NoKi .doc-list-title {
        font-size: 14px;
        font-weight: 800;
        color: #333;
        line-height: 40px;
        height: 40px;
        width: 100%;
        /*border-bottom: 1px solid #eaeaea;*/
    }
    .leftContent_2NoKi .doc-list-title span {
        color: #777;
        font-size: 12px;
        line-height: 40px;
        font-weight: normal;
    }
    .leftContent_2NoKi .doc-list-context {
        height: 100%;
        width: 240px;
        display: inline-block;
        padding: 0 15px;
    }
    .leftContent_2NoKi .doc-list {
        overflow-y: auto;
        width: 100%;
        height: calc(100% - 100px);
    }
    .leftContent_2NoKi .doc-list::-webkit-scrollbar {
        display: none;
    }
    .leftContent_2NoKi .doc-item {
        margin: 0;
        padding: 20px 45px 0 45px;
        cursor: pointer;
    }
    .leftContent_2NoKi .doc-img {
        border: 1px solid #333;
        position: relative;
        width: 121px;
        height: 161px;
        margin-bottom: 5px;
    }
    .leftContent_2NoKi .doc-img img {
        width: 100%;
        height: 100%;
    }
    .leftContent_2NoKi .doc-page-num {
        z-index: 100;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        background-color: #333333;
        color: #fff;
    }
    .leftContent_2NoKi .doc-name {
        color: #333;
        font-size: 12px;
        line-height: 20px;
        word-break: break-all;
    }
    .leftContent_2NoKi .componentsList_1OIrB {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 50px;
        position: relative;
    }
    .leftContent_2NoKi .title_3vpva {
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        padding-left: 16px;
        margin-bottom: 4px;
    }
    .leftContent_2NoKi .tips_2oKGU {
        margin: 0 14px;
        font-size: 12px;
        line-height: 20px;
        color: #999;
        vertical-align: baseline;
    }

    .pdfContent_1PW2f {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        background: #f5f5f5;
    }
    .pdfContent_1PW2f .pdf-header {
        /*position: fixed;*/
        top: 55px;
        left: 240px;
        right: 240px;
        height: 40px;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        z-index: 100;
        text-align: center;
        display: flex;
    }
    .pdfContent_1PW2f .pdf-header .block {
        flex: 1;
        display: flex;
    }
    .pdfContent_1PW2f .pdf-header .block .demonstration, .pdfContent_1PW2f .pdf-header .block .slider {
        flex: 0 0 150px;
        line-height: 40px;
        width: 150px;
        text-align: right;
    }
    .pdfContent_1PW2f .pdf-header .block .demonstration {
        flex: 1;
        margin-right: 20px;
    }
    .pdfContent_1PW2f .pdf-header .input {
        flex: 1;
        text-align: left;
        line-height: 40px;
        margin-left: 20px;
    }
    .pdfContent_1PW2f .pdf-header .input .input-text {
        border: none;
        outline: none;
        border-bottom: 1px solid #e4e7ed;
        margin-left: 10px;
        width: 25px;
        text-align: center;
    }
    .pdfContent_1PW2f .pdf-container {
        display: inline-block;
        overflow: auto;
        height: 100%;
        width: 100%;
    }
    .pdfContent_1PW2f .pdf-container .pdf-box {
        position: relative;
        margin: 0 auto;
    }
    .pdfContent_1PW2f .pdf-container .pdf-box .sign-img {
        z-index: 4;
    }
    .pdfContent_1PW2f .pdf-container .bottom-btn {
        line-height: 0;
        width: 36px;
        border-radius: 26px;
        position: fixed;
        bottom: 50px;
        right: 290px;
        height: 100px;
        letter-spacing: 3px;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 14px;
        z-index: 100;
        border: none;
        cursor: pointer;
        text-align: center;
        padding-top: 17px;
    }
    .pdfContent_1PW2f .pdf-container .bottom-btn span {
        writing-mode: vertical-rl;
    }
    .pdfContent_1PW2f .pdfPage_1yRne {
        /*transition: left .3s;*/
        position: relative;
        margin: 10px 0;
    }
    .pdfContent_1PW2f .es-pdf-page__edges {
        /*transition: width .3s;*/
        position: absolute;
        top: 0;
        left: 99.5%;
        user-select: none;
        z-index: 0;
        background: url("../../assets/images/page.png");
        background-size: cover;
    }
    .pdfContent_1PW2f .es-pdf-page__edges--visible {
        border: 2px dashed #2981d9;
    }
    .pdfContent_1PW2f .dragLayer_3ccsq {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .taskInfoArea_3ThxW {
        display: flex;
        flex-direction: column;
        flex: 0 0 270px;
        width: 270px;
        height: 100%;
    }
    .taskInfoArea_3ThxW .tab-bar {
        width: 100%;
        padding: 0 15px;
        height: 40px;
        font-size: 14px;
        line-height: 38px;
        display: flex;
        border-bottom: 1px solid #eaeaea;
        color: #999;
        overflow: hidden;
        justify-content: space-around;
    }
    .taskInfoArea_3ThxW .tab-context {
        /*padding: 0 15px;*/
        height: calc(100% - 51px);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        font-weight: bold;
    }
    .taskInfoArea_3ThxW .real .gray {
        color: #999999;
        font-weight: normal;
        margin: 10px 0;
        display: block;
    }
    .taskInfoArea_3ThxW .item {
        margin-top: 25px;
    }
    .taskInfoArea_3ThxW .title {
        margin: 10px 0;
    }
    .taskInfoArea_3ThxW .seal-box-wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0 5px;
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7 {
        flex-direction: column;
        justify-content: center;
        height: 120px;
        width: 110px;
        margin: 0 5px 10px 5px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        vertical-align: bottom;
        display: flex;
        align-items: center;
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7 .defaultInfoStyle_2mgdq {
        font-size: 14px;
        color: #777;
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7 i {
        font-weight: normal;
        font-size: 30px;
        color: #777;
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7:hover {
        border: 1px solid #409EFF;
        background-color: rgba(64, 158, 255, 0.07);
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7:hover .defaultInfoStyle_2mgdq {
        color: #409EFF;
    }
    .taskInfoArea_3ThxW .fileAddItem_1Vqb7:hover i {
        color: #409EFF;
    }
    .taskInfoArea_3ThxW .seal-box {
        margin: 5px 0;
    }
    .taskInfoArea_3ThxW .seal-wrapper-item {
        position: relative;
        padding: 10px 5px;
        margin: 0 5px;
        height: 120px;
        width: 110px;
        cursor: move;
        border: 1px dotted #e1e1e1;
    }
    .taskInfoArea_3ThxW .seal-box-title {
        width: 110px;
        margin: 10px 0;
        font-size: 13px;
        font-weight: normal;
        color: #999999;
    }
    .taskInfoArea_3ThxW .finish-img {
        width: 100px;
        height: 100px;
    }
    .taskInfoArea_3ThxW .item-box {
        width: 100%;
        margin-bottom: 20px;
    }
    .taskInfoArea_3ThxW .testSetting_8FNRp {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }
    .taskInfoArea_3ThxW .titleh2_3zdht {
        margin-bottom: 5px;
        font-size: 12px;
        font-weight: 500;
        line-height: 22px;
        color: #333;
    }
    .taskInfoArea_3ThxW .emptyStyle_wctx0 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin-top: 200px;
    }
    .taskInfoArea_3ThxW .emptyP_2N3sX {
        width: 196px;
        font-size: 13px;
        color: #333;
        line-height: 22px;
        font-weight: 500;
        text-align: center;
    }
    .taskInfoArea_3ThxW .sign-flow-info {
        padding: 25px 10px 0 15px;
    }
    .taskInfoArea_3ThxW .sign-flow-info-detail {
        margin-bottom: 3px;
        text-align: left;
    }
    .taskInfoArea_3ThxW .detail-item {
        margin-bottom: 15px;
    }
    .taskInfoArea_3ThxW .detail-item-title {
        color: #777;
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        font-weight: 400;
    }
    .taskInfoArea_3ThxW .detail-item-desc {
        color: #333;
        line-height: 20px;
        width: 100%;
        font-size: 13px;
        display: inline-block;
    }
    .taskInfoArea_3ThxW .wrap {
        word-wrap: break-word;
        word-break: break-all;
    }
    .taskInfoArea_3ThxW .userItem {
        padding: 12px 0 0 0;
        display: flex;
        font-weight: normal;
        color: #333333;
    }
    .taskInfoArea_3ThxW .user {
        background-color: #0099e6;
        flex: 0 0 40px;
        height: 40px;
        color: #fff;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        line-height: 30px;
    }
    .taskInfoArea_3ThxW .user-name {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 10px;
        font-size: 12px;
        align-self: center;
    }
    .taskInfoArea_3ThxW .tag {
        flex: 0 0 72px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .taskInfoArea_3ThxW .tag span {
        background-color: #0099e6;
        color: #fff;
        padding: 3px 6px;
        border-radius: 10px;
    }
    .taskInfoArea_3ThxW .tag .icon-all_link {
        cursor: pointer;
        margin-left: 3px;
        color: #0099e6;
        font-size: 16px;
    }
    .taskInfoArea_3ThxW .block {
        margin-top: 20px;
    }
</style>
@endsection