lsappBms/lss_vue_wx/src/views/task/taskDetail.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="任务详情">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click.native='jumpBack()'></mt-button>
            </router-link>
            <mt-button slot="right" icon="more" v-if="detail.state != 5 && detail.state != 7 && detail.publishId == user.id" v-on:click.native="showList()"></mt-button>
        </mt-header>
        <div class="btn_list" v-show="popupVisible">
            <div v-on:click="show(1)">延期</div>
            <div v-on:click="edit()">修改</div>
            <div v-on:click="del()">删除</div>
        </div>
        <div class="detail_body" id="allocation">
            <div class="detailBox taskInfo">
                <div>
                    <span class="type">({{detail.tagName}})</span>
                    <span class="name">{{detail.name}}</span>
                    <span v-if="detail.state==0" class="type state">待派发</span>
                    <span v-if="detail.state==1" class="type state">已派发</span>
                    <span v-if="detail.state==2" class="type state">已接收</span>
                    <span v-if="detail.state==3" class="type state">待审核</span>
                    <span v-if="detail.state==4" class="type state">未通过</span>
                    <span v-if="detail.state==5" class="type state">已完成</span>
                    <span v-if="detail.state==6" class="type state">已延期</span>
                    <span v-if="detail.state==7" class="type state">已失效</span>
                </div>
                <div class="department">
                    <div class="one_dep">任务编码：{{detail.code}}</div>
                    <div class="one_dep">计划时间：{{detail.planTime}}</div>
                    <div class="one_dep">工作量：{{detail.workLoad}}天</div>
                    <div class="one_dep">费用：{{detail.fee==null?0:detail.fee}}元</div>
                    <div class="one_dep">付款方：{{detail.payer}}</div>
                    <div class="one_dep">收款方：{{detail.payee}}</div>
                    <div v-if="detail.delayTime != null" class="one_dep">延期日期：{{detail.delayTime}}</div>
                    <div style="line-height:0.25rem">接收人：{{detail.recipientName}}</div>
                    <div style="line-height:0.25rem">
                        参与人：<span v-for="(item,index) in detail.participantsVOS">{{item.userName}} <span v-if="index != detail.participantsVOS.length-1">、</span></span>
                    </div>
                </div>
                <div class="content">
                    {{detail.content}}
                </div>
                <div style="margin:0">
                    <div class="userInfo">
                        <img src="../../assets/image/userHead.jpg">
                        <span>{{detail.publisherName}}&nbsp;&nbsp;&nbsp; {{detail.planTime}}</span>
                    </div>
                    <div class="allBtn">
                        <mt-button type="primary" size="small" v-if="detail.state==1 && detail.recipientId==user.id" v-on:click.native="receive()">接收</mt-button>
                        <mt-button type="primary" size="small" v-if="detail.state==2 || detail.state==4 && detail.recipientId==user.id" v-on:click.native="show(3)">提交</mt-button>
                    </div>
                </div>
            </div>
            <div class="detailBox" id="fixTop">
                <mt-navbar v-model="selected" class="task_tab_head" v-on:click.native="changeTab">
                    <mt-tab-item id="tab1">任务动态</mt-tab-item>
                    <mt-tab-item id="tab2">审核结果</mt-tab-item>
                    <mt-tab-item id="tab3">任务资料</mt-tab-item>
                </mt-navbar>
                <mt-tab-container v-model="selected">
                    <!-- 任务动态 -->
                    <mt-tab-container-item id="tab1">
                        <div class="noList" v-if="dynaList.length==0">
                            <img src="../../assets/image/noList.png">
                        </div> 
                        <ul v-else class="recordBox" v-infinite-scroll="loadMoreDyna" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="item in dynaList" class="one_recordBox">
                                <div>
                                    <span class="type">{{item.stateContent}}</span>
                                    <span class="time">{{item.indate}}</span>
                                </div>
                                <div class="content">{{item.content}}</div>
                            </li>
                            <div class="order" v-if="haveMoreDyna">
                                <span class="line"></span>
                                <span class="txt">没有更多了</span>
                                <span class="line"></span>
                            </div>
                        </ul>
                    </mt-tab-container-item>
                    <!-- 审核结果 -->
                    <mt-tab-container-item id="tab2">
                        <div class="noList" v-if="examList.length==0">
                            <img src="../../assets/image/noList.png">
                        </div> 
                        <ul v-else class="recordBox" v-infinite-scroll="loadMoreExam" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="item in examList" class="one_recordBox">
                                <div>
                                    <span class="userName">{{item.publisher}}</span>
                                    <span class="time">{{item.publishDate}}</span>
                                    <span v-if="item.isPass == 0 && user.id == detail.publishId" class="isPass" v-on:click="show(2,item.id)">审核</span>
                                    <span v-if="item.isPass == 0 && user.id != detail.publishId" class="isPass isPassN">待审核</span>
                                    <span v-if="item.isPass == 1" class="isPass isPassN">未通过</span>
                                    <span v-if="item.isPass == 2" class="isPass isPassY">已完成</span>
                                </div>
                                <div class="content">{{item.publishContent}}</div>
                                <div v-if="item.responderId != null" class="respond">
                                    <div>
                                        <span class="userName">{{item.responder}}</span>
                                        <span class="time">{{item.respondDate}}</span>
                                    </div>
                                    <div v-if="item.isPass == 2">
                                        <el-rate v-model="item.score" disabled show-score disabled-void-color="#cfcfcf" text-color="#ff9900" score-template="{value}"></el-rate>
                                    </div>
                                    <div class="content">
                                        {{item.respondContent}}
                                    </div>
                                </div>
                            </li>
                            <div class="order" v-if="loadMoreExam">
                                <span class="line"></span>
                                <span class="txt">没有更多了</span>
                                <span class="line"></span>
                            </div>
                        </ul>
                    </mt-tab-container-item>
                    <!-- 任务资料 -->
                    <mt-tab-container-item id="tab3">
                        <div v-if="detail.state == 5" class="upload" v-on:click="choosePic()">上传资料</div>
                        <input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
                        <div class="noList" v-if="fileList.length==0">
                            <img src="../../assets/image/noList.png">
                        </div>
                        <ul v-else class="recordBox" v-infinite-scroll="loadMoreFile" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="item in fileList" class="one_recordBox one_file">
                               <div class="fileName"><a :href="item.url" :download="item.name">{{item.name}}</a></div>
                               <div>
                                   {{item.indate}}
                                   <span v-if="item.uploaderId == user.id" v-on:click="delFile(item.id)"><img src="../../assets/image/del_red.png"></span>
                               </div>
                            </li>
                            <div class="order" v-if="haveMoreFile">
                                <span class="line"></span>
                                <span class="txt">没有更多了</span>
                                <span class="line"></span>
                            </div>
                        </ul>
                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
        </div>

        <mt-popup v-model="delayTimePop" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div">
                <h4>延期任务</h4>
                <mt-field label="" class="input" placeholder="请选择延期时间" type="date" v-model="delayTime"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(1)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(1)">取消</mt-button>
                </div>
            </div>
        </mt-popup>

        <mt-popup v-model="scorePop" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div accep">
                <h4>审核</h4>
                <mt-radio class="scoreIsPass" title="" v-model="scoreIsPass" :options="['通过', '不通过']"></mt-radio>
                <div v-if="scoreIsPass=='通过'" style="height:0.25rem;text-align:left;margin:0.12rem 0 0 0;padding: 0.1rem">
                    <el-rate v-model="score" allow-half show-score disabled-void-color="#cfcfcf" text-color="#ff9900" score-template="{value}"></el-rate>
                </div>
                <mt-field label="" style="margin-top:0;" class="input" placeholder="请输入回复内容" type="textarea" rows="4" v-model="scoreContent"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(2)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(2)">取消</mt-button>
                </div>
            </div>
        </mt-popup>

        <mt-popup v-model="submitPop" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div">
                <h4>提交</h4>
                <mt-field label="" class="input" placeholder="请输入发布内容" type="textarea" rows="4" v-model="submitContent"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(3)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(3)">取消</mt-button>
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                power: sessionStorage.getItem("power"),

                detail: "",
                selected: "tab1",
                popupVisible: false,

                dynaList: [],
                dynaPageNum: 1,
                dynaPages: 1,
                haveMoreDyna: false,

                examList: [],
                examPageNum: 1,
                examPages: 1,
                haveMoreExam: false,

                fileList: [],
                filePageNum: 1,
                filePages: 1,
                haveMoreFile: false,
                
                delayTime: '',
                delayTimePop: false,

                scoreId: 0,
                score: 0,
                scoreIsPass: '通过',
                scoreContent: '',
                scorePop: false,

                submitContent: '',
                submitPop: false,
			}
		},
		methods: {
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.task.detail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 右上角按钮
            showList() {
                this.popupVisible = !this.popupVisible;
            },

            show(type,id) {
                if(type == 1) {
                    this.delayTime = "";
                    this.delayTimePop = true;
                    this.popupVisible = false;
                } else if(type == 2) {
                    this.scoreId = id;
                    this.score = 0;
                    this.scoreIsPass = '通过',
                    this.scoreContent = '';
                    this.scorePop = true;
                } else if(type == 3) {
                    this.submitContent = '';
                    this.submitPop = true;
                }
            },

            closePop(type) {
               if(type == 1) {
                    this.delayTimePop = false;
                } else if(type == 2) {
                    this.scorePop = false;
                } else if(type == 3) {
                    this.submitPop = false;
                } 
            },

            submit(type) {
                if(type == 1) {
                    if(this.delayTime == '') {
                        this.$toast({
                            message: "请选择延期日期",
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        this.http.post(this.port.task.add, {
                            'id': this.id,
                            'delayTime': this.delayTime,
                            'publishId': this.user.id
                        } , 
                        res => {
                            this.delayTimePop = false;
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "延期成功",
                                    duration: 2000
                                });
                                this.getDetail();
                                this.getDynaList();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                } else if(type == 2) {
                    if(this.scoreContent == '') {
                        this.$toast({
                            message: "请输入发布内容",
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        var form = {
                            'id': this.scoreId,
                            'isPass': this.scoreIsPass=='通过'?2:1,
                            'respondContent': this.scoreContent,
                            'responderId': this.user.id
                        };
                        if(this.scoreIsPass == '通过'){
                            form.score = this.score
                        }
                        this.http.post(this.port.task.addExam, form , 
                        res => {
                            this.scorePop = false;
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "审核成功",
                                    duration: 2000
                                });
                                this.getDetail();
                                this.getExamList();
                                this.getDynaList();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                } else if(type == 3) {
                    if(this.submitContent == '') {
                        this.$toast({
                            message: "请输入发布内容",
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        this.http.post(this.port.task.addExam, {
                            'taskId': this.id,
                            'publishContent': this.submitContent,
                            'publisherId': this.user.id
                        } , 
                        res => {
                            this.submitPop = false;
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "提交成功",
                                    duration: 2000
                                });
                                this.getDetail();
                                this.getExamList();
                                this.getDynaList();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }
            },

            // 修改
            edit() {
                this.$router.push("/taskEdit/" + this.id );
            },

            // 删除任务
            del() {
                MessageBox.confirm('', { 
                    message: '是否删除该任务？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.task.del, {
                            'id': this.id
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                this.$router.go(-1);
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 跳转
            jumpBack() {
                this.$router.go(-1);
            },

            // 接收任务
            receive() {
                this.http.post(this.port.task.accept, {
                    'id': this.id,
                    'recipientId': this.user.id
                } , 
                res => {
                    if (res.code == "ok") {
                        this.$toast({
                            message: "接收成功",
                            duration: 2000
                        });
                        this.getDetail();
                        this.getDynaList();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 状态切换
            changeTab() {
                if(this.selected == "tab1") {
                    this.getDynaList();
                } else if(this.selected == "tab2") {
                    this.getExamList();
                } else if(this.selected == "tab3") {
                    this.getFileList();
                }
            },

            // 任务动态
            getDynaList() {
                this.$indicator.open();
                this.http.post(this.port.task.dynaList, {
                    'id': this.id,
                    'pageNum': 1,
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.dynaList = res.data.list;
                        this.dynaPages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMoreDyna() {
                if(this.dynaPageNum == this.dynaPages) {
                    this.haveMoreDyna = true;
                } else if(this.dynaPageNum < this.dynaPages) {
                    this.$indicator.open();
                    this.http.post(this.port.task.dynaList, {
                        'id': this.id,
                        'pageNum': ++this.dynaPageNum,
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.dynaPages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.dynaList.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            // 审核结果
            getExamList() {
                this.$indicator.open();
                this.http.post(this.port.task.examList, {
                    'taskId': this.detail.id,
                    'pageNum': 1,
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.examList = res.data.list;
                        this.examPages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMoreExam() {
               if(this.examPageNum == this.examPages) {
                    this.haveMoreExam = true;
                } else if(this.examPageNum < this.examPages) {
                    this.$indicator.open();
                    this.http.post(this.port.task.examList, {
                        'keyName': this.keyWord,
                        'pageNum': ++this.examPageNum,
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.examPages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.examList.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } 
            },

            // 文件上传
            choosePic() {
                document.getElementById('upload_file').click();
            },

            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileAdd(el.target.files[0]);
                el.target.value = ''
            },

            fileAdd(file) {
                var form = new FormData();
                form.append("file", file);
                form.append("taskId",this.id);
                form.append("uploaderId",this.user.id);
                this.$indicator.open();
                this.http.uploadFile( this.port.task.upload, form,
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.$toast({
                            message: '上传成功',
                            duration: 2000
                        });
                        this.filePageNum = 1;
                        this.getFileList();
                        document.getElementById('upload_file').value = "";
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                },
                error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                });
            },

            // 文件列表
            getFileList() {
                this.$indicator.open();
                this.http.post(this.port.task.fileList, {
                    'taskId': this.detail.id,
                    'pageNum': 1,
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.fileList = res.data.list;
                        this.filePages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMoreFile() {
               if(this.filePageNum == this.filePages) {
                    this.haveMoreFile = true;
                } else if(this.filePageNum < this.filePages) {
                    this.$indicator.open();
                    this.http.post(this.port.task.fileList, {
                        'keyName': this.keyWord,
                        'pageNum': ++this.filePageNum,
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.filePages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.fileList.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } 
            },

            // 文件删除
            delFile(id) {
                MessageBox.confirm('', { 
                    message: '是否删除该文件？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.task.delFile, {
                            'id': id,
                            'uploaderId': this.user.id,
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                this.filePageNum = 1;
                                this.getFileList();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 滚动固定
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#fixTop').offsetTop;
                if (scrollTop > offsetTop) {
                    $("#fixTop .task_tab_head").addClass('fixTop')
                } else {
                    $("#fixTop .task_tab_head").removeClass('fixTop')
                }
            },

            globalClick(callback) {
                var _this = this;
                document.getElementById('allocation').onclick = function () {
                    if( _this.popupVisible == true) {
                        _this.popupVisible = false;
                    }
                }
            }
        },
        created() {
            this.getDetail();
            this.getDynaList();
        },
		mounted() {
            window.addEventListener('scroll', this.handleScroll);
            this.globalClick();
		}
	}

</script>

<style scoped>
    .detail {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    /* 任务详情 START */

    .taskInfo {
        padding: 0.08rem 0.15rem;
    }

    .taskInfo > div {
        margin: 0 0 0.15rem 0;
    }

    span.type {
        color: #2680eb;
        vertical-align: middle;
    }

    span.state {
        float: right;
    }

    span.name {
        font-size: 0.16rem;
        font-weight: 600;
        width: 60%;
        vertical-align: middle;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }
    
    span.num {
        font-size: 0.14rem;
        color: #26a2ff;
    }

    div.department {
        font-size: 0.12rem;
        color: #9E9E9E;
        padding: 0 0 0.15rem 0;
        border-bottom: 1px solid #ddd;
    }

    .department .one_dep {
        display: inline-block;
        height: 0.25rem;
        line-height: 0.25rem;
        width: 49%;
    }

    div.content {
        font-size: 0.14rem;
        color: #333;
    }

    .userInfo {
        width: 70%;
        display: inline-block;
    }

    .userInfo img {
        width: 0.18rem;
        border-radius: 50%;
        vertical-align: middle;
    }

    .userInfo span {
        vertical-align: middle;
        margin-right: 0.12rem;
        color: #999;
        font-size: 0.12rem;
        vertical-align: middle;
        margin-left: 0.05rem;
    }

    span.arrow {
        float: right;
    }

    span.arrow img {
        width: 0.12rem;
        margin-right: 0.05rem;
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg); /* IE 9 */
        -moz-transform: rotate(-90deg); /* Firefox */
        -webkit-transform: rotate(-90deg); /* Safari and Chrome */
        -o-transform: rotate(-90deg); /* Opera */
    }

    .allBtn {
        display: inline-block;
        width: 28%;
        text-align: right;
    }

    .task_tab_head {
        border-bottom: 1px solid #ddd;
        padding-right: 40%;
    }

    /* 任务详情 END */

    /* 底部列表 START */

    .fixTop {
        position: fixed;
        top: 0.4rem;
        width: 60%;
        z-index: 100;
    }

    .recordBox {
        margin-bottom: 0.2rem;
    }

    .one_recordBox {
        padding: 0.12rem;
        background: #fff;
    }

    .one_recordBox > div {
        line-height: 0.25rem;
    }

    .one_recordBox .time {
        color: #999;
        margin-left: 0.08rem;
        font-size: 0.12rem;
    }

    .one_recordBox .content {
        font-size: 0.13rem;
        color: #666;
        word-wrap: break-word;
        margin-top:0.08rem;
        margin-bottom: 0.08rem;
    }

    .userName {
        font-size: 0.15rem;
        color: #333;
    }

    .isPass {
        float: right;
        color: #2680eb;
        width: 0.5rem;
        height: 0.3rem;
        text-align: right;
    }

    .isPassN {
        color: #999;
    }

    .isPassY {
        color: #55d650;
    }

    .respond {
        padding: 0.12rem;
        background: #efefef;
    }

    .btn_list {
        position: absolute;
        right: 0.05rem;
        top: 0.37rem;
        border:#aaa;
        background: #fcfcfc;
        box-shadow: 5px 5px 10px #ccc;
        z-index: 120;
    }

    .btn_list:before {
        display: inline-block;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 10px;
        border-bottom-color: #fcfcfc;
        content: "";
        position: absolute;
        top: -20px;
        right: 0.06rem;
    }

    .btn_list > div {
        width: 0.4rem;
        font-size: 0.13rem;
        padding: 0.1rem 0.15rem;
        border-bottom: 1px solid #efefef;
        text-align: center;
    }

    .btn_list > div img {
        width: 0.14rem;
        height: 0.14rem;
        vertical-align: middle;
        margin-right: 0.05rem;
    }

    .btn_list > div span {
        height: 0.15rem;
        line-height: 0.15rem;
        vertical-align: middle;
    }
    
    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }
    
    .order {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .order .line {
        display: inline-block;
        width: 1.2rem;
        border-top: 1px solid #ccc ;
        vertical-align: middle;
    }

    .order .txt {
        color: #ccc;
        font-size: 0.13rem;
        vertical-align: middle;
    }

    .upload {
        color: #2680eb;
        font-size: 0.14rem;
        padding: 0.12rem;
    }

    .one_file a {
        color: #409eff;
        text-decoration:none;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .one_file > div {
        line-height: 0.2rem;
    }

    .one_file > div:nth-child(2) {
        color: #aaa;
    }

    .one_file > div:nth-child(2) span {
        float: right;
    }

    .one_file > div:nth-child(2) span img {
        width: 0.12rem;
    }

    /* 底部列表 END */

    /* 弹框样式 START */
    .mint-popup {
        width: 70%;
        box-sizing: content-box;
    }

    .mint-popup-div {
        padding: 0.12rem;
        background: #fff;
    }

    .mint-popup-div h4 {
        margin: 0;
        padding: 0;
    }

    .mint-popup-div .mint-cell {
        margin: 0.2rem 0;
    }

    .mint-popup-div > div.btns {
        height: 0.3rem;
    }

    .mint-popup-div .btn {
        float: right;
        margin-right: 0.1rem;
        background: #fff;
        box-shadow: none;
        width: 50%;
        margin: 0;
    }

    .mint-popup-div .btn:nth-child(1) {
        color: #f00;
    }
    /* 弹框样式 END */
</style>
<style>
    .detail_head .mint-header-title {
        font-weight: 600;
        font-size: 0.15rem;
    }

    .detail_head .mint-button-text {
        color: #26a2ff;
    }

    .detailBox .mint-cell {
        padding: 0 0 0 0.02rem;
    }

    .task_tab_head .mint-tab-item {
        padding: 0;
        height: 0.4rem;
    }

    .task_tab_head .mint-tab-item-label {
        font-size: 0.13rem;
        color: #999;
        line-height: 0.4rem;
    }

    .task_tab_head .mint-tab-item.is-selected {
        border-bottom: none;
        font-weight: 600;
    }

    .task_tab_head .mint-tab-item.is-selected .mint-tab-item-label {
        font-size: 0.14rem;
        color: #333;
        font-weight: 700;
    }

    .mint-cell:last-child {
        background-image: none; 
    }

    .scoreIsPass .mint-cell {
        display: inline-block;
        width: 49%;
    }

    .el-rate:focus {
        outline-width: 0;
    }

    .el-rate__icon {
        font-size: 0.25rem;
        border: none!important;
        outline: 0!important;
        box-shadow: none!important;
        -webkit-box-shadow: none!important;
    }

    .el-rate__item {
        border: none!important;
        outline: 0!important;
        box-shadow: none!important;
        -webkit-box-shadow: none!important;
    }
</style>