<template>
  <div class="AppActivity Feedback RevenueFileMan">
      <ul style="overflow: initial!important">
         <li>
          <span>
            <em>标题</em>
            <el-input class="w200" v-model="msg.Title"></el-input>
          </span>
        </li>
        <li v-if="EmployeeId==1 || EmployeeId==5 || F_GeneralManager">
          <span>
            <em>员工</em>
          </span>
          <el-select filterable v-model="msg.EmployeeId" >
            <el-option label="不限" value=''></el-option>
            <el-option v-for="item in EmployeeList" :label='item.EmName' :value='item.EmployeeId' :key='item.EmployeeId'></el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>状态</em>
          </span>
          <el-select filterable v-model="msg.ConfirmStatus" >
            <el-option label="不限" :value='0'></el-option>
            <el-option label="未确认" :value='1'></el-option>
            <el-option label="已确认" :value='2'></el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>营收月份</em>
          </span>
          <el-date-picker  class="w220"
                v-model="msg.Date"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月">
            </el-date-picker>
        </li>
        
        <li style="float:right;margin-bottom:10px">
          <input
            type="button"
            class="hollowFixedBtn"
            value="查询"
            @click="getList()"
          >
          <!--  -->
          <input  v-if="EmployeeId==1 || EmployeeId==5 || F_GeneralManager || EmployeeId==2524 || EmployeeId==418 || EmployeeId==1903"
            type="button"
            class="hollowFixedBtn"
            value="新增"
            @click="addRule"
          >
          <input  v-if="EmployeeId==1 || EmployeeId==5 || F_GeneralManager"
            type="button"
            class="hollowFixedBtn"
            value="制单"
            @click="goUrl"
          >
        </li>
      </ul>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>标题</th>
        <th>营收月份</th>
        <th>接收人</th>
        <th>描述</th>
        <th>状态</th>
        <th>文件列表</th>
        <th>签名图片</th>
        <th width="100">签名时间</th>
        <th>创建人/时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.Title}}</td>
        <td>{{item.Date}}</td>
        <td>{{item.EmName}}</td>
        <td>{{item.Description}}</td>
        <td>{{item.ConfirmStatusName}}</td>
        
        <td>
            <p v-for="(list,index1) in item.EAddressList" :key="index1">
                <a :download="list.Name" style="text-decoration: underline;cursor: pointer;padding-top:4px" :href="list.Path">{{list.Name}}</a>
            </p>
        </td>
        <td style="padding:6px 0">
            <img v-if="item.SignImage" style="width:45px;height:45px" :src="item.SignImage" alt="">
        </td>
        <td>
            <span v-if="item.ConfirmStatus==1"></span>
            <span v-else>{{item.UpdateDate}}</span>
        </td>
        <td>
            <p>{{item.CreateByName}}</p>
            <p>{{item.CreateDate}}</p>
        </td>
        <td>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                <el-button v-if="item.CreateBy==EmployeeId && item.ConfirmStatus==1" @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>    
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="签名" placement="top-start">
                <el-button v-if="item.ConfirmStatus==1 && item.EmployeeId==EmployeeId" @click="SetPic(item)" style="padding:4px" type="warning" icon="el-icon-star-off" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button v-if="item.CreateBy==EmployeeId && item.ConfirmStatus==1" @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>    
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="利润分配制单" placement="top-start">
                <el-button v-if="item.ConfirmStatus==2 && item.EmployeeId==EmployeeId" @click="goUrl(item)" style="padding:4px" type="success" icon="el-icon-circle-plus" circle></el-button>
            </el-tooltip>
            
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="12" align="center">暂无数据</td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
    </el-pagination> 
    <el-dialog
        title="营收文件"
        :visible.sync="ruleVisible"
        width="690px">
        <el-form ref="addMsg" :model="addMsg" :rules="rules" label-width="80px">
            <el-form-item label="标题" prop="Title">
                <el-input class="w220" v-model="addMsg.Title"></el-input>
            </el-form-item>
            <el-form-item label="接收人" prop="EmployeeId">
                <el-select class="w220" filterable v-model="addMsg.EmployeeId" >
                    <!-- <el-option label="不限" value=''></el-option> -->
                    <el-option v-for="item in EmployeeList" :label='item.EmName' :value='item.EmployeeId' :key='item.EmployeeId'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="营收月份" prop="Date">
                <el-date-picker  class="w220"
                    v-model="addMsg.Date"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="描述" >
                <el-input style="width:525px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="addMsg.Description"></el-input>
            </el-form-item>
            <div style="padding-left:80px" class="_addUpload_box clearfix">
                <template v-for="(file,fIndex) in saveMsg">
                    <div v-if="file.Type==3">
                        <div style="width:100%;height:100%;overflow: hidden;">
                            <img :src="file.Url?file.Url:file.Content">
                        </div>
                        <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
                    </div>
                    <div v-if="file.Type==1">
                        <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"  @click="showUpLoadFile(file)">

                        </div>
                        <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
                    </div>
                    <div v-if="file.Type==2">
                        <div class="iconfont icon-excel">

                        </div>
                        <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
                    </div>
                </template>
                <div class="_pic_upload" >
                    <el-upload
                    drag
                    :http-request="uploadFileBtn"
                    :multiple="true"  :show-file-list="false"  action="">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
                    </el-upload>
                </div>
            </div>
        </el-form> 
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="ruleVisible = false">取 消</el-button>
            <el-button size="small" type="danger" @click="RulesOk('addMsg')">确 定</el-button>
        </span>
    </el-dialog>
        <!-- 签名 -->
    <div class="Sign" :class="signState?'zindex':''">
        <div class="signature">
            <p class="f14" style="padding:10px 10px 10px 0">签名
                <span @click="CloseSign" style="float:right" class="el-icon-close"></span>
            </p>
            <div class="signatureBox">
                <div class="canvasBox" ref="canvasHW">
                    <canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
                    <div class="button" style="text-align:center;margin-top:20px">
                        <el-button size="small"  @click="overwrite">重写</el-button>
                        <el-button size="small" type="danger" @click="commit">提交</el-button>
                        
                    </div>   
                    
                </div>
            </div>
            
        </div>   
    </div>
  </div>
</template>

<script>
import moment from "moment"
export default {
    
    name: 'Feedback',
    data (){
        return{
            F_GeneralManager:false,
            total:0,
            msg:{
                EmployeeId:'',
                Title:'',
                ConfirmStatus:0,
                pageIndex:1,
                pageSize:10,
                Date:'',
            },
            dataList:[],
            loading:false,
            companyList:[],
            ruleVisible:false,
            EmployeeList:[],
            addMsg:{
                Id:0,
                EmployeeId:'',
                Title:'',
                EAddressList:[],
                Description:'',
            },
            rules:{ 
                Title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                EmployeeId: [{ required: true, message: '请选择接收人', trigger: 'change' }],
                Date: [
                    { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
                ],
            },
            EmployeeId:'',
            saveMsg:[],
            addMsgNew:{
                Id:0,
                SignImage:'',
            },
            signState:false,

             imgSrc:'',
            stageInfo:'',
            imgUrl:'',
            client: {},
            points: [],
            canvasTxt: null,
            startX: 0,
            startY: 0,
            moveY: 0,
            moveX: 0,
            endY: 0,
            endX: 0,
            w: null,
            h: null,
            isDown: false,
            isViewAutograph: this.$route.query.isViews > 0,
            contractSuccess: this.$route.query.contractSuccess,
        }
    },
    created(){
        // this.getCompany();
        let userInfo = this.getLocalStorage();
        this.EmployeeId=userInfo.EmployeeId;
    },
    mounted(){
        this.getList();
        this.getEmployeeList();
        let canvas = this.$refs.canvasF
        canvas.height = this.$refs.canvasHW.offsetHeight - 100
        canvas.width = this.$refs.canvasHW.offsetWidth - 10
        this.canvasTxt = canvas.getContext('2d')
        this.stageInfo = canvas.getBoundingClientRect()
       
    },
    filters:{
        YMD(date){
        return moment(date).format("YYYY-MM-DD");
        }
    },
    
    methods:{
        GetSupperOrderEditAuth() {
            // F_GeneralManager_Special 财务总经理副总经理权限
            var actionCode = this.$AuthCode.F_GeneralManager_Special;
            this.CheckUserAuth(actionCode, res => {
            if (res.data.resultCode == 1 && res.data.data == 1) {
                this.F_GeneralManager = true;
            }
            });
        },
        goUrl(){
            this.$router.push({
                name: 'addFinancialDocuments',
                query: {
                    id: 116,
                    Name: '利润分配单',
                    Type: 2,
                    IsUploadPic:1,
                    blank: "y",
                    tab: name
                }
            });
        },
        Delete(item){
            this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.apipost('financestatistics_post_DelRevenueExcelInfo',{ Id:item.Id},res=>{
                        if(res.data.resultCode==1){
                            this.Success(res.data.message)
                            this.getList();
                        }else{
                            this.Error(res.data.message)
                        }
                    },err=>{})
                }).catch(() => {
                    
                });
        },
        SetPic(item){
            this.addMsgNew={
                Id:item.Id,
                SignImage:'',
            }
            this.overwrite();
            this.signState=true
        },
        CloseSign(){
            this.signState=false;
        },
        // 签名
        //重写
        overwrite() {
            this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
            this.points = []
        },
        uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
            i;
            radix = radix || chars.length;
            if (len) {
            // Compact form
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
            var r;
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
            uuid[14] = '4';
            for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
            }
            return uuid.join('');
        },
        dataURLtoFile(dataurl, filename) {//将base64转换为文件
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },
        //提交签名
        commit() {
            let that=this;
            let imgUrl =this.$refs.canvasF.toDataURL();
            let newArr = [];
            var fileName = `${that.uuid(10,10)}.png`;
            var path = `/RevenueFile/`;
            newArr.push(this.dataURLtoFile(imgUrl,fileName))
            this.UploadSelfFileT(path, newArr, x => {
                this.addMsgNew.SignImage=that.domainManager().ViittoFileUrl+x.data.FilePath;
            }, 1);
            setTimeout(() => {
                this.apipost(
                "financestatistics_post_SetRevenueExcelSign",
                    this.addMsgNew,
                    res => {
                    if (res.data.resultCode == 1) {
                        this.getList();
                    } else {
                        this.Error(res.data.message)
                    }
                    },
                    err => {}
                );
            }, 500);
            this.signState=false;
            
            
        },
        mouseDown(ev) {
            ev = ev || event
            ev.preventDefault()
            if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.isDown = true
            }
        },
        mouseMove(ev) {
            ev = ev || event
            ev.preventDefault()
            if (this.isDown) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
            }
        },
        mouseUp(ev) {
            ev = ev || event
            ev.preventDefault()
            if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.points.push({x: -1, y: -1})
            this.isDown = false
            }
        },
        //mobile
        touchStart(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clienX,
                y: ev.targetTouches[0].clientY,
            }
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            }
        },
        touchMove(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clientX - this.stageInfo.left,
                y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
            }
        },
        touchEnd(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clientX - this.stageInfo.left,
                y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            }
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getCompany() {
            this.apipost(
                "admin_get_BranchGetList",
                this.getCompanyMsg,
                res => {
                if (res.data.resultCode == 1) {
                    this.companyList = res.data.data;
                    this.companyList.map(item=>{
                        this.companyListObj[item.Id]=item.BName;
                    })
                } else {
                }
                },
                err => {}
            );
        },
        
        addRule(){
            this.ruleVisible=true;
            this.InitaddMsg();
            this.saveMsg=[];
            
        },
        SetRules(item){
            this.ruleVisible=true;  
            this.addMsg=Object.assign({},item);
            
            this.saveMsg=[];
            //  1 文档  2 数据 3 图片
            let typeArr=[
                {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
                {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
            ]
            
            this.addMsg.EAddressList.forEach(item=>{
                let ft=item.Name.substring(item.Name.lastIndexOf('.')+1,item.Name.length).toUpperCase();
                let fileTypeNumber = 2;
                let typeOk  = false;
                typeArr.forEach(x=>{
                    if(x.stringArr.indexOf(ft)!='-1')
                    {
                    fileTypeNumber=x.type;
                    typeOk = true;
                    }
                })
                let obj={
                    Content: item.Path,
                    Path: item.Path,
                    Url:item.Path,
                    Name: item.Name,
                    Type:fileTypeNumber,
                };
                this.saveMsg.push(obj)
            })
            
        },
        RulesOk(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.saveMsg.length==0){
                        this.Error("请上传文件！")
                        return;
                    }
                    this.addMsg.EAddressList=[];
                    this.saveMsg.forEach(item=>{
                        let obj={
                           Path: item.Url,
                           Name: item.Name,
                        };
                        this.addMsg.EAddressList.push(obj)
                    })
                    this.apipost(
                        "financestatistics_post_SetRevenueExcelInfo",
                        this.addMsg,
                        res => {
                        this.loading=false;
                        if (res.data.resultCode == 1) {
                            this.getList();
                            this.ruleVisible=false;
                        } else {
                            this.Error(res.data.message)
                        }
                        },
                        err => {}
                    );
                    
                } else {
                    
                    
                }
                });
            
        },
        InitaddMsg(){
            this.addMsg={
                Id:0,
                EmployeeId:'',
                Title:'',
                EAddressList:[],
                Description:'',
                Date:'',
            }
        },
        deleteUploadFile(i){  // 删除上传文件
            this.saveMsg.splice(i,1);
        },
        uploadFileBtn(file) { //上传
            if(file.file.size > 1024 * 1024 * 10) {
                this.$message.warning(this.$t('tips.wjdxbncgsz'))
                return
            }
            //  1 文档  2 数据 3 图片
            let typeArr=[
                {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
                {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
            ]
            let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
            let fileTypeNumber = 2;
            let typeOk  = false;
            typeArr.forEach(x=>{
                if(x.stringArr.indexOf(ft)!='-1')
                {
                  fileTypeNumber=x.type;
                  typeOk = true;
                }
            })
            if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
            let newArr = [];
            newArr.push(file.file)
            let path = "/RevenueFile/"
            this.$message.info(this.$t('tips.shangchuanzhong'))
            this.UploadSelfFileT(path, newArr, x => {
                let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
                this.saveMsg.push({
                    Content: x.data.FilePath,
                    ID:0,
                    Type:fileTypeNumber,
                    Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
                    Name:x.data.SourceFileName
                })
                this.$message.success(this.$t('tips.scchenggong'))
            }, 1);
        },
        getEmployeeList () {
            let userInfo = this.getLocalStorage()
            // let msg = {
            //     GroupId: userInfo.RB_Group_id,
            //     BranchId: '-1',
            //     DepartmentId: '-1',
            //     PostId: '28',
            //     IsLeave: '0'
            // }
            this.apipost(
            'admin_get_GetBranchManagerList', {},
            res => {
                if (res.data.resultCode == 1) {
                this.EmployeeList = res.data.data
                }
            },
            err => {
            }
            )
        },
       getDepart(id){
           this.form.DepartmentId= id;
           this.$forceUpdate();
       },
    
      getList(){
        this.loading=true;
        this.apipost(
            "financestatistics_get_GetRevenueExcelPageList",
            this.msg,
            res => {
            this.loading=false;
            if (res.data.resultCode == 1) {
                this.dataList = res.data.data.pageData;
                this.total=res.data.data.count;
            } else {
            }
            },
            err => {}
        );
      },
    }	
}
		
</script>
<style>

.RevenueFileMan{
    position: relative;
}
.RevenueFileMan .zindex{
    z-index: 9999!important;
    opacity: 1!important;
}
.RevenueFileMan .signature{
    width:600px;
    background: #fff;
    padding:15px;
    border-radius: 20px;
    cursor: pointer;
}
.RevenueFileMan .Sign{
    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(0,0,0,.4);
    z-index: -500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.RevenueFileMan .Sign .signatureBox {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    margin-top:20px;
    padding:0 20px;
    box-sizing: border-box;
  }
.RevenueFileMan .Sign .canvasBox {
    box-sizing: border-box;
    flex: 1;
  }
.RevenueFileMan .Sign canvas {
    border: 1px solid #7d7d7d;
  }
.RevenueFileMan .Sign .btnBox {
    padding: 10px;
    text-align: center;
  }
.RevenueFileMan .Sign .btnBox button:first-of-type {
    background: transparent;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
}
.RevenueFileMan .Sign .btnBox button:last-of-type {
    background: #71b900;
    color: #fff;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
  }
.RevenueFileMan .el-upload-dragger, .page_fdd .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
}
.AppActivity .el-form-item{
    display: inline-block;
}
.Feedback ul>li{
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
}
.Feedback .singeRowTable{
    margin-top: 20px;
}
._addUpload_box{
    display: block;
    margin-top: 15px
}
._addUpload_box img{
    width: 100%;
    height: 100%;
}
._addUpload_box>div{
    float: left;
    width:138px;
    height:92px;
    border:1px dashed rgba(210,210,210,1);
    border-radius:2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
}
._addUpload_box>div:hover{
    background-color: #f5f5f5;
}
._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
}
._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
}
._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
}
</style>