
/* 导航栏 */
#app .app-nav{
    display: flex;
    align-items: center;
    background: var(--color-blue);
    color: white;
    justify-content: space-between;
    padding: 1em 0;
    margin-bottom: 1em;
}

/* 导航栏下的div */
#app .app-nav > div{
    width: 33%;
}

/* 列表 */
#app .app-list{
}

/* 节点 */
#app .app-list .app-list-item{
    width: 85%;
    margin: 0 auto 1em;
    background: white;
    padding: 1em;
    border-radius: 1em;
}

/* 标题 */
#app .app-list .app-list-item .app-list-title{
    font-weight: bold;
    margin: .8em 0;
}

/* 数据 */
#app .app-list .app-list-item .app-list-data {
    width: 95%;
    margin: .5em auto;
    padding-left: 1em;
    position: relative;
    font-size: .9em;
}

/* 圆点 */
#app .app-list .app-list-item .app-list-data::before{
    --size:.4em;
    content: '';
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: var(--color-light-blue);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 列表底部 */
#app .app-list .app-list-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 已预约状态 */
#app .app-list .app-list-footer .app-list-footer-statu1 {
    color: var(--color-blue2);
    font-size: .9em;
}

/* 待考试状态 */
#app .app-list .app-list-footer .app-list-footer-statu2 {
    color: var(--color-yellow);
    font-size: .9em;
}
#app .app-list .app-list-footer .cancel-remark {
    color: var(--color-red);
    font-size: .9em;
}

/* 按钮 */
#app .app-list .app-list-footer .app-list-footer-button {
    padding: .2em .8em;
    border: 1px solid transparent;
    border-radius: 2em;
    font-size: .9em;
}

/* 按钮1 */
#app .app-list .app-list-footer  .button1{
    border-color: var(--color-red);
    color: var(--color-red);

}

/* 按钮2 */
#app .app-list .app-list-footer  .button2{
    border-color: var(--color-blue2);
    color: var(--color-blue2);

}
/* 分割线 */
#app .app-list  .app-list-line{
    width: 100%;
    height: 1px;
    margin: 1em 0;
    background-color: rgba(0,0,0,.2);
}