<template>
<div class="select-bg">
<div class="select-box">
<div class="btn-box">
<button class="select-btn black">项目看板</button>
<button class="select-btn blue">系统设置</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.select-bg{
height: 100%;
background: url(https://mobile-i-uj.oss-cn-hangzhou.aliyuncs.com/zhdt/static/images/select-bg.jpeg) no-repeat center;
background-size: 100% 100%;
min-width: 968px;
&::before{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(255,255,255, .5);
z-index: 1;
}
.select-box{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
z-index: 3;
display: flex;
align-content: center;
justify-content: center;
.btn-box{
display: flex;
flex-direction: column;
justify-content: center;
.select-btn{
border: none;
color: #fff;
width: 500px;
height: 90px;
border-radius: 5px;
font-size: 38px;
font-weight: bold;
&:nth-of-type(1){
margin-bottom: 50px;
}
&.black{
background-color: #000000;
}
&.blue{
background-color: #169bd5;
}
}
}
}
}
</style>