xuye
2021-06-09 612813eb9fea89592bcc733303d53c81155ac7fc
车辆调度,任务池
5 files added
4 files modified
1121 ■■■■■ changed files
src/components/common-vue/sf-or-port.vue 62 ●●●●● patch | view | raw | blame | history
src/components/daytask/CarTask.vue 88 ●●●●● patch | view | raw | blame | history
src/components/daytask/DispatchCar.vue 448 ●●●●● patch | view | raw | blame | history
src/components/finance/FinanceCenter.vue 6 ●●●● patch | view | raw | blame | history
src/components/finance/Income.vue 121 ●●●● patch | view | raw | blame | history
src/components/mainpage/DayTask.vue 4 ●●● patch | view | raw | blame | history
src/components/mainpage/TaskPool.vue 20 ●●●●● patch | view | raw | blame | history
src/components/taskpool/PoolTop.vue 261 ●●●●● patch | view | raw | blame | history
src/router/index.js 111 ●●●●● patch | view | raw | blame | history
src/components/common-vue/sf-or-port.vue
New file
@@ -0,0 +1,62 @@
<template>
    <div id="type" :class="bgClass">
        {{this.formmatterStatus()}}
    </div>
</template>
<script>
    export default {
        data(){
            return{
                bgClass:''
            }
        },
        props: ['status'],
        methods: {
            formmatterStatus() {
                switch (this.status) {
                    case 1:
                        this.bgClass = 'bg-green'
                        return "顺丰达-装";
                    case 2:
                        this.bgClass = 'bg-red'
                        return "顺丰达-卸";
                    case 3:
                        this.bgClass = 'bg-blue'
                        return "港口达-装";
                    case 4:
                        this.bgClass = 'bg-yellow'
                        return "港口装-卸";
                }
            }
        }
    }
</script>
<style>
    #type {
        font-size: 16px;
        font-weight: bold;
        color: white;
        box-shadow: 5px 5px 5px #b8b6b6;
        padding: 10px;
    }
    .bg-blue {
        background-color: #36a9ce;
    }
    .bg-red {
        background-color: #ec808d;
    }
    .bg-green {
        background-color: #70b603;
    }
    .bg-yellow{
        background-color: #f59a23;
    }
</style>
src/components/daytask/CarTask.vue
New file
@@ -0,0 +1,88 @@
<template>
    <div>
        <div class="dispatch-car">
            <div class="dispatch-car-title">
                <span class="title-right">车辆任务</span>
                <el-select v-model="value" placeholder="请选择车辆">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="dispatch-car-content" v-for="(item, index) in 10" :key="index">
                <div>
                    <span>到达:</span>
                    <span>2021-4-30 10:00 </span>
                    <span>渝A.77238</span>
                </div>
                <div class="up">
                    <div>提箱地</div>
                    <div></div>
                    <div>装卸地</div>
                    <div></div>
                    <div>还箱地</div>
                </div>
                <div class="under">
                    <div>重庆寸滩</div>
                    <div>--------</div>
                    <div>重庆渝北</div>
                    <div>--------</div>
                    <div>重庆寸滩</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{}
</script>
<style>
    .dispatch-car {
        border: 1px solid #f5f5f5;
        box-shadow: 3px 3px 3px #f5f5f5;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        margin: 10px 0;
    }
    .dispatch-car .dispatch-car-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 20px;
    }
    .dispatch-car-content {
        margin: 10px;
        border-bottom: 1px solid #e2e2e2;
        padding: 10px 5px;
        display: block;
    }
    .dispatch-car-content .under>div,
    .dispatch-car-content .up>div {
        text-align: center;
        width: 20%;
        display: inline-block;
        line-height: 30px;
    }
    .dispatch-car-content .up {
        color: lightgray;
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
    }
    .dispatch-car-content .under {
        color: gray;
        margin: 0 auto;
    }
    .dispatch-car .dispatch-car-content span:nth-child(3) {
        font-size: 16px;
        float: right;
        color: orange;
    }
</style>
src/components/daytask/DispatchCar.vue
New file
@@ -0,0 +1,448 @@
<template>
    <div>
        <el-row :gutter="10" width="100%">
            <div class="left-col">
                <el-col :span="18">
                    <div class="dispatch-car ">
                        <div class="dispatch-car-title">
                            调度车辆
                        </div>
                        <div class="dispatch-car-top">
                            <el-form :model="formInline" class="demo-form-inline" :inline="true">
                                <el-form-item label="提单号:">
                                    <el-input placeholder="请输入提单号"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="warning" @click="onSubmit" style="font-size: 16px;">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="line"></div>
                        <div class="dispatch-car-box" v-for="(item, index) in 10" :key="index">
                            <el-row :gutter="10" width="100%" type="flex">
                                <el-col :span="18">
                                    <div class="box">
                                        <div v-for="(item, index) in 2" :key="index">
                                            <div class="box-top">
                                                <div class="box-top-left">
                                                    <div class="left-inner-l">
                                                        <div>任务池:
                                                            <span>X00000000000000000</span>
                                                        </div>
                                                        <div>提单号:
                                                            <span>CSXD2343343433</span>
                                                        </div>
                                                    </div>
                                                    <div class="left-inner-r">
                                                        <SFPort :status="status"></SFPort>
                                                    </div>
                                                </div>
                                                <div class="box-top-center">
                                                    <div class="inner-box">
                                                        <div class="qiangdan">抢单</div>
                                                        <span>40GP</span>
                                                        <span>棉花-36kg</span>
                                                    </div>
                                                </div>
                                                <div class="box-top-right">
                                                    到达时间:2021-4-30 10:00
                                                </div>
                                            </div>
                                            <div class="box-under">
                                                <div class="up">
                                                    <div>
                                                        <span>提箱地</span>
                                                    </div>
                                                    <div></div>
                                                    <div>
                                                        <span>装卸地</span>
                                                    </div>
                                                    <div></div>
                                                    <div>
                                                        <span>还箱地</span>
                                                    </div>
                                                </div>
                                                <div class="under">
                                                    <div>
                                                        <span>重庆寸滩</span>
                                                    </div>
                                                    <div class="icon">
                                                        <i class="el-icon-right"></i>
                                                    </div>
                                                    <div>
                                                        <span>重庆渝北</span>
                                                    </div>
                                                    <div class="icon">
                                                        <i class="el-icon-right"></i>
                                                    </div>
                                                    <div>
                                                        <sapn>重庆-渝北区 新溉大道18号山顶国宾城12栋1916</sapn>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="box box-right">
                                        <div class="box-right-top">
                                            <div class="status">
                                                <img src="../../../public/img/index/time.svg" @click="ChooseDate" />
                                                <span style="color: green;">等待接单</span>
                                                <!-- <span style="color: orange;">已接单</span>
                                                <span style="color: red;">拒绝</span> -->
                                            </div>
                                        </div>
                                        <div class="car">渝A.77238</div>
                                        <div class="edit">
                                            <div class="assign-car">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="assignCar" />
                                            </div>
                                            <div class="chargeback">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="Chargeback" />
                                            </div>
                                            <div class="transfer-order">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="TransferOrder" />
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="pagenation">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
                             :page-size="100" layout="total, prev, pager, next" :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </div>
            <el-col :span="6">
                <CarTask/>
            </el-col>
            <!-- 选择日期对话框 -->
            <el-dialog :visible.sync="DateDialogVisible" width="20%" title="指定到达时间">
                <div class="date-task" v-for="(item, index) in 2" :key="index">
                    <div class="date-task-num">
                        任务池:
                        <span>X00000000000000000</span>
                    </div>
                    <div class="date-task-time">
                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="DateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="DateDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 指定车辆对话框 -->
            <el-dialog :visible.sync="dialogVisible" width="30%">
                <div class="dialog-title">选择车辆</div>
                <div class="car-message" v-for="(item, index) in 5" :key="index">
                    <div class="car-message-left">渝A.77238 陈老五</div>
                    <div class="car-message-right"> 任务:0</div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 转单申请对话框 -->
            <el-dialog :visible.sync="TransferDialogVisible" width="20%">
                <div class="transfer-dialog-title">确定要取消此任务?</div>
                <div class="btn-confirm">
                    <el-button type="warning" @click="TransferDialogVisible = false">确 定</el-button>
                    <el-button @click="TransferDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
            <!-- 退单对话框 -->
            <el-dialog :visible.sync="ChargeDialogVisible" width="20%">
                <div class="charge-dialog-title">请确认已于客服沟通联系!</div>
                <div class="charge-dialog-title-content">要将此单转给其它车队?</div>
                <div class="btn-confirm">
                    <el-button type="warning" @click="ChargeDialogVisible = false">确 定</el-button>
                    <el-button @click="ChargeDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
    import CarTask from "@/components/daytask/CarTask.vue"
    import SFPort from "@/components/common-vue/sf-or-port.vue"
    export default {
        components:{CarTask,SFPort},
        data() {
            return {
                dialogVisible: false,
                DateDialogVisible: false,
                ChargeDialogVisible: false,
                TransferDialogVisible: false,
                value1: '',
                // 顺丰达、港口达
                status: 1,
            }
        },
        methods: {
            assignCar() {
                this.dialogVisible = true
            },
            ChooseDate() {
                this.DateDialogVisible = true
            },
            Chargeback() {
                this.ChargeDialogVisible = true
            },
            TransferOrder() {
                this.TransferDialogVisible = true
            },
        },
    }
</script>
<style lang="less" scoped>
    .dispatch-car {
        border: 1px solid #f5f5f5;
        box-shadow: 3px 3px 3px #f5f5f5;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        margin: 10px 0;
    }
    .dispatch-car .dispatch-car-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 20px;
    }
    .dispatch-car-top {
        margin-top: 30px;
        margin-left: 20px;
    }
    .dispatch-car-title .title-right {
        margin-right: 80px;
    }
    .line {
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        margin: 0 auto;
        margin-bottom: 8px;
    }
    .dispatch-car-box .box {
        border: 1px solid #e2e2e2;
        padding: 10px 8px;
        margin: 10px 0;
    }
    .box-right-top {
        display: flex;
        justify-content: center;
    }
    .box-top {
        display: flex;
        align-items: center;
    }
    .box-top .box-top-left,
    .box-top .box-top-right,
    .box-top .box-top-center {
        display: inline-block;
        width: 31%;
        margin: 5px 10px;
    }
    .box-top .box-top-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box .box-top-left .left-inner-l {
        font-size: 14px;
    }
    .box .box-top-right {
        padding: 3px;
        text-align: right;
        font-size: 14px;
    }
    .box .box-top .box-top-center {
        text-align: center;
    }
    .box-under .up {
        color: #666666;
    }
    .box-under .under {
        color: #959595;
        display: flex;
        align-items: center;
    }
    .box-under .up>div,
    .box-under .under>div {
        text-align: center;
        width: 20%;
        display: inline-block;
        margin-top: 10px;
    }
    .dispatch-car-box .box-top-center .inner-box {
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dispatch-car .dispatch-car-box .box-top-center span:nth-child(2) {
        font-size: 24px;
        font-weight: bold;
        color: #a6a6a6;
        margin: 0 10px;
    }
    .dispatch-car .dispatch-car-box .box-top-center span:nth-child(3) {
        font-size: 14px;
        color: #959595;
        margin: 0 10px;
    }
    .box .status {
        display: flex;
        align-items: center;
        padding: 5px;
    }
    .box .status span {
        margin-left: 5px;
    }
    .box .car {
        color: orange;
        text-align: center;
        padding: 5px;
        margin: 10px 0;
        font-weight: bold;
    }
    .box .edit {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .assign-car,
    .chargeback,
    .transfer-order {
        cursor: pointer;
    }
    .dialog-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .car-message {
        padding: 20px;
        background-color: #f2f2f2;
        margin: 10px 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .car-message:hover {
        background-color: #d9d9d9;
    }
    .car-message .car-message-right {
        margin-right: 30px;
        float: right;
    }
    .car-message>div {
        display: inline-block;
    }
    .transfer-dialog-title,
    .charge-dialog-title {
        text-align: center;
        font-size: 18px;
    }
    .charge-dialog-title-content {
        font-size: 16px;
        margin: 10px;
        text-align: center;
    }
    .btn-confirm {
        margin: 20px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
    }
    .pagenation {
        padding: 20px;
        text-align: center;
        margin: 10px 0;
    }
    .date-task {
        text-align: center;
        margin: 20px 0;
    }
    .date-task-time {
        padding: 5px 2px;
    }
    .icon {
        font-size: 30px;
    }
    .qiangdan{
        background-color: red;
        color: white;
        padding: 6px;
    }
</style>
src/components/finance/FinanceCenter.vue
@@ -151,10 +151,6 @@
</script>
<style lang="less" scoped>
    .common-card-show {
        padding: 3px;
    }
    .card-content {
        margin: 8px;
        height: 150px;
@@ -181,7 +177,7 @@
    .line {
        width: 1px;
        height: 100%;
        background-color: black;
        background-color: #e2e2e2;
    }
    .left-font {
src/components/finance/Income.vue
@@ -7,13 +7,31 @@
                </div>
                <div class="foot-card-bottom">
                    <div class="foot-content-box left">
                        <div class="foot-content">content</div>
                        <div class="foot-content">
                            <div class="foot-content-table">
                                <el-table :data="tableData" style="width: 100%" border>
                                    <el-table-column prop="1" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="2" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="3" label="xx">
                                    </el-table-column>
                                    <el-table-column prop="4" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="5" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="6" label="xx">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="pagenation">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
                             :page-size="100" layout="total, prev, pager, next" :total="1000">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                             :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
@@ -23,20 +41,78 @@
                </div>
                <div class="foot-card-bottom">
                    <div class="foot-content-box right">
                        <div class="foot-content">content</div>
                        <div class="foot-content">
                            <div class="foot-content-table">
                                <el-table :data="tableData" style="width: 100%" border>
                                    <el-table-column prop="1" label="xx" >
                                    </el-table-column>
                                    <el-table-column prop="2" label="xx" >
                                    </el-table-column>
                                    <el-table-column prop="3" label="xx">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default{}
</script>\
    export default {
        data() {
            return {
                tableData: [{
                    1: '2016-05-02',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1518 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-04',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1517 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-01',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1519 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-03',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1516 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }],
                pageNum:'',
                pageSize:'',
                total:0
            }
        },
        methods:{
            handleSizeChange(newSize){
                this.pageSize=newSize
            },
            handleCurrentChange(newPage){
                this.pageNum=newPage
            },
        }
    }
</script>
<style lang="less" scoped>
    .fronthome-top{
    .fronthome-top {
        margin: 20px 0;
    }
    .fronthome-top .foot-card-top {
        margin-top: 10px;
        font-size: 14px;
@@ -51,27 +127,36 @@
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        border-bottom: none;
    }
    .foot-card-bottom .foot-content-box {
        box-shadow: 3px 3px 2px #f1f1f1;
        border: 1px solid #eaeaea;
        margin-left: -2px;
        padding: 10px;
    }
    .foot-content{
    .foot-content {
        height: 90%;
    }
    .foot-card-bottom .left{
        height: 800px;
    .foot-card-bottom .left {
    }
    .foot-card-bottom .right{
        height: 600px;
    .foot-card-bottom .right {
    }
    .foot-card-bottom .foot-content-box .pagenation{
    .foot-card-bottom .foot-content-box .pagenation {
        padding-bottom: 20px;
        text-align: center;
    }
</style>
    .foot-content-table {
        padding: 3px;
        margin: 8px 5px;
    }
</style>
src/components/mainpage/DayTask.vue
@@ -2,13 +2,15 @@
    <div>
        <DayTop/>
        <DayTable/>
        <DispatchCar/>
    </div>
</template>
<script>
import DayTop from "@/components/daytask/DayTop.vue"
import DayTable from "@/components/daytask/DayTable.vue"
import DispatchCar from "@/components/daytask/DispatchCar.vue"
export default {
    components:{DayTop,DayTable},
    components:{DayTop,DayTable,DispatchCar},
    created(){
        console.log("这是当日任务的执行")
    }
src/components/mainpage/TaskPool.vue
New file
@@ -0,0 +1,20 @@
<template>
    <div>
        <PoolTop />
        <PoolList/>
    </div>
</template>
<script>
    import PoolTop from "@/components/taskpool/PoolTop.vue";
    import PoolList from "@/components/taskpool/PoolList.vue";
    export default {
        components: {
            PoolTop,PoolList
        }
    }
</script>
<style>
</style>
src/components/taskpool/PoolTop.vue
New file
@@ -0,0 +1,261 @@
<template>
    <div class="common-main">
        <div class="common">
            <div class="common-top">
                <div class="common-top-title">
                    <i class="el-icon-rank"></i>
                    <span>任务池</span>
                </div>
                <div class="common-top-right">
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-refresh"></i>
                </div>
            </div>
            <el-row :gutter="10" width="100%">
                <el-col :span="12">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>当日任务</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content first-card">
                            <div class="card-content-left">
                                <div class="card-content-title">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div>运输类型</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>任务量</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>抢单</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="card-content-show">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div class="card-content-btn sf">
                                                <div>顺丰达</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="taskload">120</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="graborder">10</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="card-content-show">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div class="card-content-btn port">
                                                <div>港口达</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="taskload">20</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="graborder">0</div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div class="center">
                                <div class="line"></div>
                            </div>
                            <div class="card-content-right">
                                <div class="card-content-title">
                                    总收获
                                </div>
                                <div class="card-right-show">
                                    <div>
                                        抢单任务:<span>10</span>
                                    </div>
                                    <div>
                                        指派任务:<span>0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>总任务</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="content-up">
                                <div class="card-content-btn sf">
                                    <div>顺丰达</div>
                                </div>
                                <div class="card-content-btn port">
                                    <div>港口达</div>
                                </div>
                            </div>
                            <div class="content-under">
                                <div>320</div>
                                <div>320</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>接单明细</div>
                            </div>
                        </div>
                        <div class="card-content third-card" v-for="(item, index) in 5" :key="index">
                            <span>[港口达]</span>
                            <span>果园 ---渝北区---寸滩</span>
                            <span>箱量:2</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {}
</script>
<style>
    .card-content {
        margin: 4px;
        padding: 10px;
        background-color: white;
    }
    .first-card{
        display: flex;
        justify-content: center;
    }
    .line {
        width: 1px;
        height: 100%;
        background-color: #8f8e8e;
    }
    .center {
        width: 5%;
        display: flex;
        justify-content: center;
    }
    .card-content-left {
        width: 60%;
    }
    .card-content-right {
        width: 30%;
    }
    .card-content-title {
        text-align: center;
        font-size: 18px;
        width: 100%;
    }
    .card-content-btn {
        width: 80px;
        box-shadow: 5px 5px 5px #b8b6b6;
        padding: 10px;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin: 20px auto;
    }
    .sf {
        background-color: #a30014;
    }
    .port {
        background-color: #70b603;
    }
    .card-content-show {
        text-align: center;
    }
    .card-content-show .taskload,
    .card-content-show .graborder {
        padding: 20px;
        color: #d90029;
        font-size: 30px;
        font-weight: bold;
    }
    .card-right-show {
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
    }
    .card-right-show div:nth-child(1) {
        color: #a30014;
    }
    .card-right-show div:nth-child(2) {
        color: #4b7902;
    }
    .card-right-show span {
        font-weight: bold;
    }
    .content-up,
    .content-under{
        display: flex;
    }
    .content-under>div{
        margin: 20px auto;
        font-size: 30px;
        font-weight: bold;
        color: #d9001b;
    }
    .third-card{
        margin-top: 6px;
        font-size: 16px;
        padding: 8px;
    }
    .third-card span{
        margin: 0 10px;
    }
</style>
src/router/index.js
@@ -1,3 +1,11 @@
/*
 * @Description:
 * @Author: wenshuang
 * @Date: 2021-05-28 15:23:47
 * @LastEditTime: 2021-05-28 15:39:50
 * @LastEditors: wenshuang
 * @Reference:
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
@@ -9,57 +17,74 @@
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: '首页',
    redirect:"/daytask",
    component: Index,
    meta:{requireAuth: true },
    children:[
      {
        path:"/daytask",
        name:"当日任务",
        component:()=>import('../components/mainpage/DayTask.vue'),
        meta:{requireAuth: true },
      },
      {
        path:"/task",
        name:"任务列表",
        component:()=>import('../components/mainpage/TaskList.vue'),
        meta:{requireAuth: true },
      },
      {
        path:"/finance",
        name:"财务中心",
        component:()=>import('../components/mainpage/FinanceList.vue'),
        meta:{requireAuth: true },
      },
    ]
  },
    {
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        path: '/home',
        name: '首页',
        redirect: "/daytask",
        component: Index,
        meta: {
            requireAuth: true
        },
        children: [
            {
                path: "/daytask",
                name: "当日任务",
                component: () => import('../components/mainpage/DayTask.vue'),
                meta: {
                    requireAuth: true
                },
            },
            {
                path: "/task",
                name: "任务列表",
                component: () => import('../components/mainpage/TaskList.vue'),
                meta: {
                    requireAuth: true
                },
            },
            {
                path: "/finance",
                name: "财务中心",
                component: () => import('../components/mainpage/FinanceList.vue'),
                meta: {
                    requireAuth: true
                },
            },
            {
                path: "/taskpool",
                name: "任务池",
                component: () => import('../components/mainpage/TaskPool.vue'),
                meta: {
                    requireAuth: true
                },
            },
        ]
    },
]
const router = new VueRouter({
  routes,
//  originalPush
    routes,
    //  originalPush
})