<template>
	<div class="index-wrap pt30">
    	<div class="panel plr15">
			<div class="kitbox pt15 ">
				<div class="box-flex-1 c-333 fs-16 f-bold">今日订单数量</div>
				<div class="c-666 fs-12 box-v-middle">
					<div @click="searchTypeShow=!searchTypeShow" class="drop-sel c-666 fs-12 plr10 ptb4">
						<span  class="v-middle">{{searchType}}</span>
						<van-icon class="v-middle ml4" name="arrow-down" />
						<div v-show="searchTypeShow" class="sel-body fs-12 c-666">
							<div v-for="(item, i) in options" :key="i" v-show="searchType!=item" @click.stop="searchType=item;searchTypeShow=false;search()" class="ptb6">{{item}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-20d7ad fs-23 pt10">
				752,600
			</div>
			<div class="c-666 fs-14 pt10 pb10">今日补货量 <span class="ml10 c-17b3ec">0</span></div>
		</div>

		<div class="mt10">
			<div class="panel  sbzl">
				<div class="kitbox pt15 plr15">
					<div class="box-flex-1 c-333 fs-16 f-bold">设备总览</div>
				</div>
				<div class="pt20 pb20 plr5">
					<van-row class="">
						<van-col span="6" class="tc ">
							<div class="fs-23 c-17b3ec">10</div>
							<div class="fs-14 c-666 pt5">全部设备</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-ff9526">10</div>
							<div class="fs-14 c-666 pt5">在线设备</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-ff5e6c">90%</div>
							<div class="fs-14 c-666 pt5">在线率</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-17b3ec">10</div>
							<div class="fs-14 c-666 pt5">在售设备</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>

		<div class="mt10">
			<div class="panel cygn">
				<div class="kitbox pt15 plr15">
					<div class="box-flex-1 c-333 fs-16 f-bold">常用功能</div>
				</div>
				<div class="ptb10 plr5">
					<van-row class="">
						<van-col span="6" class="tc ">
							<div class="fs-23 c-17b3ec"><img src="@/assets/images/dingdanguanli.png" alt=""></div>
							<div class="fs-14 c-666 pt5">订单管理</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-ff9526"><img src="@/assets/images/shebeiguanli.png" alt=""></div>
							<div class="fs-14 c-666 pt5">设备管理</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "index",
	components: {
		
  	},
  	data() {
    	return {
			searchTypeShow: false,
            searchType: "今日",
			options: ['今日', '7天内', '30天内']
			
    	}
  	},
	created(){
		
	},
  	mounted() {

  	},
  	methods: {
		search(){
			
		}
    },
}
</script>
<style lang="scss" scoped>
.index-wrap {
	background: url('../../assets/images/index_banner.png') no-repeat;
	background-size: 100%;
	.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;
            }
        }
		&.sbzl{
			.van-col {
				position: relative;
				&::after{
					content: "";
					width: 1px;
					height: 41px;
					background-color: #e7e7e7;
					right: 0;
					position: absolute;
					top: 2px;
				}
				&:last-child{
					&::after{
						display: none;
					}
				}
			}
		}
		&.cygn{
			.van-col{
				padding: 10px 0;
				img{
					display: block;
					width: 40px;
					height: 40px;
					margin: 0 auto;
				}
			}
			
		}
	}
}
</style>