首页统计

mini-pro-web/src/views/index/Index.vue

@@ -328,258 +328,5 @@ export default {
}
</script>
<style lang="scss" scoped>
.index-wrap {
	background: url('../../assets/images/index_banner.png') no-repeat;
    background-size: 100%;
    padding-top:20px;
    .home-text{
        width:375px;
        height:44px;
        line-height:44px;
        text-align:center;
        color:#fff;
    }
    .select{
        padding:0 5px;
        height:30px; 
    }
	.panel{
		width: 345px;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px 
			rgba(0, 0, 0, 0.15);
		border-radius: 5px;
		margin: 0 auto;
		.drop-sel{
            background-color: rgba($color: #000000, $alpha: 0.05);
            border-radius: 12px;
            position: relative;
            .sel-body{
                width: 60px;
                left: 0;
                position: absolute;
                box-shadow: 2px 3px 8px 0px 
                    rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                background-color: rgba($color: #ffff, $alpha: 0.8);
                text-align: center;
                padding: 10px 0;
                top: 30px;
                z-index: 1;
            }
        }
        .box-flex-c{
            display: flex;
            justify-content:space-between;
        }
		&.sbzl{
            .Online{
                width:80px;
                height:80px;
                background:#2cc3f9;
                border-radius:5px;
            }
            .total{
                width:124px;
                height:80px;
                background:#42e5d4;
                border-radius:5px;
            }
            .offline{
                width:80px;
                height:80px;
                background:#fc87ba;
                border-radius:5px;
            }
            .equipment-num{
                width:100%;
                text-align:center;
                margin-top:20px;
                font-size:25px;
                color:#fff;
            }
            .equipment-text{
                width:100%;
                text-align:center;
                margin-top:10px;
                font-size:12px;
                color:#fff;
            }
		}
		&.cygn{
            .col{
                height:60px;
                text-align: center;
                position: relative;
                .operations-num{
                    font-size:20px;
                    color:#17b3ec;
                }
                .operations-text{
                    font-size:12px;
                    color:#666666;
                    span{
                        width:18px;
                        height:16px;
                        .img{
                            width:18px;
                            height:16px;
                            margin-right:5px;
                            position:relative;
                            top:2px;
                        }
                    }
                }
            }
            .col-t{
                padding-top:20px;
            }
            .col-tl::after{
                content:"";
                position:absolute;
                top:0;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
            .col-bl::after{
                content:"";
                position:absolute;
                top:20px;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
        }
        &.medicine{
            position:relative;
            .time{
                width:202px;
                height:28px;
                border:1px solid #ccc;
                border-top-left-radius:28px;
                border-bottom-left-radius:28px;
                border-top-right-radius:28px;
                border-bottom-right-radius:28px;
                .ul{
                    li{
                        float:left;
                        width:40px;
                        height:28px;
                        text-align:center;
                        line-height:28px;
                        color:#17b3ec;
                        cursor: pointer;
                    }
                    li:first-child{
                        border-top-left-radius:28px;
                        border-bottom-left-radius:28px;
                    }
                    li:last-child{
                        border-top-right-radius:28px;
                        border-bottom-right-radius:28px;
                    }
                    .border-r{
                        border-right:1px solid #ccc;
                    }
                    .li-bag{
                        background-color:#17b3ec;
                        color:#fff;
                    }
                }
            }
            .medicine-b-l{
                width:130px;
                height:70px;
                border-radius:5px;
                background:url("../../assets/images/quyaochishu_img.png");
                background-size: 100%;
                display:inline-block;
                position:relative;
                .medicine-b-g-num{
                    font-size:30px;
                    color:#fff;
                    position:absolute;
                    top:20px;
                    left:12px;
                    span{
                        font-size:12px;
                        position:relative;
                        left:-8px;
                    }
                }
            }
            .prescription{
                background:url("../../assets/images/chufangdan_img.png");
                background-size: 100%;
            }
            .care{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:30px;
                right:20px;
            }
            .scan{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:58px;
                right:20px;
            }
            .prescription-num{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                // background:red;
                position:absolute;
                bottom:47px;
                right:20px;
            }
            .sales-data{
                width:100%;
                height:63px;
                line-height:20px;
                // background:red;
                display: flex;
                justify-content:space-between;
                div{
                    font-size:14px;
                    color:#666666;
                }
                div:first-child{
                    font-size:20px;
                    color: #ff9600;
                }
                span{
                    color: #17b3ec;
                }
            }
            .sales-chart{
                width:100%;
                height:169px;
                padding-bottom:20px;
            }
        }
    }
    .mt10{
        margin-top:10px;
    }
    .home-bottom{
        width:100%;
        height:55px;
    }
}
@import "./scss/index.scss";
</style>

mini-pro-web/src/views/index/scss/index.scss

@@ -0,0 +1,254 @@
.index-wrap {
	background: url('../../assets/images/index_banner.png') no-repeat;
    background-size: 100%;
    padding-top:20px;
    .home-text{
        width:375px;
        height:44px;
        line-height:44px;
        text-align:center;
        color:#fff;
    }
    .select{
        padding:0 5px;
        height:30px; 
    }
	.panel{
		width: 345px;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px 
			rgba(0, 0, 0, 0.15);
		border-radius: 5px;
		margin: 0 auto;
		.drop-sel{
            background-color: rgba($color: #000000, $alpha: 0.05);
            border-radius: 12px;
            position: relative;
            .sel-body{
                width: 60px;
                left: 0;
                position: absolute;
                box-shadow: 2px 3px 8px 0px 
                    rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                background-color: rgba($color: #ffff, $alpha: 0.8);
                text-align: center;
                padding: 10px 0;
                top: 30px;
                z-index: 1;
            }
        }
        .box-flex-c{
            display: flex;
            justify-content:space-between;
        }
		&.sbzl{
            .Online{
                width:80px;
                height:80px;
                background:#2cc3f9;
                border-radius:5px;
            }
            .total{
                width:124px;
                height:80px;
                background:#42e5d4;
                border-radius:5px;
            }
            .offline{
                width:80px;
                height:80px;
                background:#fc87ba;
                border-radius:5px;
            }
            .equipment-num{
                width:100%;
                text-align:center;
                margin-top:20px;
                font-size:25px;
                color:#fff;
            }
            .equipment-text{
                width:100%;
                text-align:center;
                margin-top:10px;
                font-size:12px;
                color:#fff;
            }
		}
		&.cygn{
            .col{
                height:60px;
                text-align: center;
                position: relative;
                .operations-num{
                    font-size:20px;
                    color:#17b3ec;
                }
                .operations-text{
                    font-size:12px;
                    color:#666666;
                    span{
                        width:18px;
                        height:16px;
                        .img{
                            width:18px;
                            height:16px;
                            margin-right:5px;
                            position:relative;
                            top:2px;
                        }
                    }
                }
            }
            .col-t{
                padding-top:20px;
            }
            .col-tl::after{
                content:"";
                position:absolute;
                top:0;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
            .col-bl::after{
                content:"";
                position:absolute;
                top:20px;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
        }
        &.medicine{
            position:relative;
            .time{
                width:202px;
                height:28px;
                border:1px solid #ccc;
                border-top-left-radius:28px;
                border-bottom-left-radius:28px;
                border-top-right-radius:28px;
                border-bottom-right-radius:28px;
                .ul{
                    li{
                        float:left;
                        width:40px;
                        height:28px;
                        text-align:center;
                        line-height:28px;
                        color:#17b3ec;
                        cursor: pointer;
                    }
                    li:first-child{
                        border-top-left-radius:28px;
                        border-bottom-left-radius:28px;
                    }
                    li:last-child{
                        border-top-right-radius:28px;
                        border-bottom-right-radius:28px;
                    }
                    .border-r{
                        border-right:1px solid #ccc;
                    }
                    .li-bag{
                        background-color:#17b3ec;
                        color:#fff;
                    }
                }
            }
            .medicine-b-l{
                width:130px;
                height:70px;
                border-radius:5px;
                background:url("../../assets/images/quyaochishu_img.png");
                background-size: 100%;
                display:inline-block;
                position:relative;
                .medicine-b-g-num{
                    font-size:30px;
                    color:#fff;
                    position:absolute;
                    top:20px;
                    left:12px;
                    span{
                        font-size:12px;
                        position:relative;
                        left:-8px;
                    }
                }
            }
            .prescription{
                background:url("../../assets/images/chufangdan_img.png");
                background-size: 100%;
            }
            .care{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:30px;
                right:20px;
            }
            .scan{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:58px;
                right:20px;
            }
            .prescription-num{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                // background:red;
                position:absolute;
                bottom:47px;
                right:20px;
            }
            .sales-data{
                width:100%;
                height:63px;
                line-height:20px;
                // background:red;
                display: flex;
                justify-content:space-between;
                div{
                    font-size:14px;
                    color:#666666;
                }
                div:first-child{
                    font-size:20px;
                    color: #ff9600;
                }
                span{
                    color: #17b3ec;
                }
            }
            .sales-chart{
                width:100%;
                height:169px;
                padding-bottom:20px;
            }
        }
    }
    .mt10{
        margin-top:10px;
    }
    .home-bottom{
        width:100%;
        height:55px;
    }
}