test/ipad/css/taskManagement.css

body,html{
    margin:0;
    padding:0;
    font-size: 10px;
}
.task{
   
    height: calc(100vh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #F2F2F2;
    position: relative;
}
/* 左边 */
.left{
    width: calc(20% - 40px);
    height:calc(100% - 40px);
    overflow: auto;
   
    background: #FFFFFF;
    box-shadow: 3px 0px 10px 0px rgba(6,13,23,0.06);
    border-radius: 1px;
    padding:2rem;
    
}
.left .addBtn{
    background: #6271FE;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding:1.4rem 0;
    text-align: center;
}
.left .addBtn span{
    margin-left:1.2rem;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.6rem;
    color: #FFFFFF;
}
.left .taskItem{
    background: #EDEDEF;
    border-radius: 10px;
    padding:1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:1.6rem 0;
}
.left .taskItem span{
    font-weight: bold;
    font-size: 1.6rem;
    color: #222222;
}
/* 右边 */
.right{
    width:20%;
    height:100%;
    overflow: auto;
    background: #FFFFFF;
    box-shadow: -3px 0px 10px 0px rgba(6,13,23,0.06);
    border-radius: 1px;
    padding:10px 0;
}
.right .pointItem{
    padding:2rem;
    border-bottom: 1px solid #EAEAEA;
}
.right .pointItem .point{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right .pointItem .point .pointName{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right .pointItem .point .pointName span{
   
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.6rem;
    color: #222222;
    margin-left:9px;
}
.right .pointItem .point .edit{
    background: #FFFFFF;
    padding:4px 13px;
    border-radius: 30px;
    border: 1px solid #CCCCCC;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.6rem;
    color: #999999;
}
.right .pointItem .lat{
  
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.4rem;
    color: #999999;
    margin-top:12px;
}
/* 中间 */
.center{
    flex:1;
    /* width: 80%; */
    height:100%;
    display: flex;
    flex-direction: column;
}
.center .title{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 2rem;
    color: #222222;
    margin:38px 0 23px 0;
    text-align: center;
}
.center .map{
   
    flex:1;
    margin: 0 20px;
}
.center .btnGroup{
   
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}
.center .btnItem{
    padding: 13px 16px;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.6rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
   
}
.center .btnItem img{
    width: 22px;
    height: 22px;
}
.center .btnItem span{
    margin-left:10px;
}
.add{
    background-color: #6271FE;
}
.delete{
    background-color: #E81A1A;
}
.caiji{
    background-color: #4BC5D3;
}
/* 新增任务 */
.addMask{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index:99;
}
.addTask{
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: #FFFFFF;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    width: 40%;
    text-align: center;
    
}
.addTask .header{
    padding:20px 0;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.6rem;
    color: #222222;
    position: relative;
    border-bottom: 1px solid #999;
}
.addTask .header>img{
    right:5px;
    top:5px;
    position: absolute;
}
.addTask .form{
    display: flex;
    align-items: center;
    margin:20px 30px;
}
.addTask .form span{
  
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.6rem;
    color: #222222;
}
.addTask .form input{
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #DDDDDD;
    padding: 10px;
    color: #000;
    flex:1
}
.addTask .submit{
    background: #6271FE;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding:10px 20px;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.6rem;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 30px;
}
/* 编辑弹窗 */
.editMask{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index:99;
}
.editDialog{
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: #FFFFFF;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    width: 30%;
    text-align: center;
    
}
.editMask .header{
    padding:20px 0;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 1.8rem;
    color: #222222;
    position: relative;
    border-bottom: 1px solid #999;
}
.editMask .header>img{
    right:5px;
    top:5px;
    position: absolute;
}
.editBtn{
    padding:30px;
}
.editBtn  .getAddr{
    background: #6271FE;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.6rem;
    color: #FFFFFF;
    padding:14px 0;
}
.editBtn .setSpecial{
    background: #E81A1A;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.6rem;
    color: #FFFFFF;
    padding:14px 0;
    margin-top:20px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 0.8rem; /* 对于垂直滚动条，设置宽度 */
    height: 0.8rem; /* 对于水平滚动条，设置高度 */
  }
   
  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f5f5f5; /* 背景颜色 */
  }
   
  /* 滚动条的滑块 */
  ::-webkit-scrollbar-thumb {
    background: #6271FE; /* 滑块颜色 */
    border-radius: 1rem;
  }
   
  /* 滑块hover效果 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块hover颜色 */
  }