/* =========================
   V5.2 同学蹭饭地图
   手机适配版
========================= */



*{

box-sizing:border-box;

}



body{

margin:0;

font-family:

"Microsoft YaHei",
"PingFang SC",
Arial,
sans-serif;


background:#f6f8fc;


}




/* =========================
顶部
========================= */


.header{


height:60px;


background:

linear-gradient(
135deg,
#4facfe,
#00f2fe
);



color:white;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 25px;


box-shadow:

0 3px 12px rgba(0,0,0,.18);


z-index:10;


}



.header h2{


margin:0;


font-size:22px;


font-weight:700;


}






/* =========================
主体
========================= */


.container{


position:relative;


display:flex;


height:

calc(100vh - 60px);


}




#map{


flex:1;


}





/* =========================
地图按钮
========================= */


.map-btn{


position:absolute;


right:15px;


top:15px;


z-index:999;


}



.map-btn button{


background:white;


border:none;


padding:

10px 16px;


border-radius:22px;


font-size:15px;


box-shadow:

0 3px 12px rgba(0,0,0,.2);


cursor:pointer;


}






/* =========================
右侧面板
========================= */


.panel{


width:370px;


background:

rgba(255,255,255,.97);


padding:18px;


overflow-y:auto;


box-shadow:

-5px 0 18px rgba(0,0,0,.12);


}





#search{


width:100%;


height:42px;


border-radius:22px;


border:

1px solid #ddd;


padding:0 18px;


font-size:15px;


outline:none;


}




#search:focus{


border-color:#4facfe;


}








/* =========================
排行榜
========================= */


#ranking{


margin-top:15px;


padding:15px;


border-radius:16px;


background:

linear-gradient(
135deg,
#fff7e6,
#ffffff
);


box-shadow:

0 4px 12px rgba(0,0,0,.08);


}



#ranking h3{


margin:0 0 10px;


font-size:18px;


color:#ff9800;


}



.rank{


height:36px;


display:flex;


align-items:center;


justify-content:space-between;


font-size:15px;


border-bottom:

1px dashed #eee;


}



.rank:last-child{


border:none;


}



.rank b{


color:#ff6b00;


}






/* =========================
旅行模块
========================= */


.trip-box{


margin-top:18px;


padding:15px;


border-radius:16px;


background:

linear-gradient(
135deg,
#e8f5ff,
#ffffff
);



box-shadow:

0 4px 12px rgba(0,0,0,.08);


}



.trip-box h3{


margin-top:0;


color:#1677ff;


}




#tripInput{


width:100%;


height:40px;


border-radius:20px;


border:

1px solid #ddd;


padding:0 15px;


font-size:15px;


}





#tripBtn{


width:100%;


height:40px;


margin-top:10px;


border:none;


border-radius:20px;


background:

linear-gradient(
135deg,
#00c6ff,
#0072ff
);


color:white;


font-size:15px;


cursor:pointer;


}





#tripBtn:hover{


opacity:.85;


}





.trip-city{


background:white;


margin-top:12px;


padding:12px;


border-radius:12px;


}









/* =========================
同学列表
========================= */


.person{


background:white;


padding:14px;


margin-top:10px;


border-radius:15px;


box-shadow:

0 3px 10px rgba(0,0,0,.08);


cursor:pointer;


transition:.2s;


}



.person:hover{


transform:

translateY(-3px);


box-shadow:

0 8px 18px rgba(0,0,0,.12);


}



.person b{


font-size:17px;


}









/* =========================
城市气泡
========================= */


.city-marker{


border-radius:50%;


background:

linear-gradient(
135deg,
#667eea,
#764ba2
);



color:white;


display:flex;


justify-content:center;


align-items:center;


font-weight:bold;


border:

4px solid white;


box-shadow:

0 8px 20px rgba(102,126,234,.45);


}








/* =========================
地图弹窗
========================= */


.info{


min-width:250px;


max-width:300px;


}



.info h2{


margin-top:0;


color:#667eea;


}



.info h3{


color:#ff9800;


}





.person-info{


padding:

12px 5px;


line-height:1.7;


border-bottom:

1px solid #eee;


}



.person-info:last-child{


border:none;


}





.person-info button{


width:120px;


height:36px;


border:none;


border-radius:18px;


background:

linear-gradient(
135deg,
#00c6ff,
#0072ff
);


color:white;


font-size:14px;


cursor:pointer;


}









/* =========================
手机端
========================= */


@media(max-width:700px){



body{


overflow:hidden;


}





.header{


height:55px;


padding:0 15px;


}



.header h2{


font-size:17px;


}





.container{


display:block;


height:

calc(100vh - 55px);


}





#map{


height:55vh;


width:100%;


}





.panel{


width:100%;


height:45vh;


padding:12px;


border-radius:

22px 22px 0 0;


box-shadow:

0 -5px 20px rgba(0,0,0,.18);


}





#search{


height:42px;


font-size:16px;


}





#ranking{


padding:12px;


margin-top:10px;


}



#ranking h3{


font-size:16px;


}



.rank{


font-size:14px;


height:32px;


}






.trip-box{


margin-top:12px;


padding:12px;


}




.trip-box h3{


font-size:16px;


}




#tripInput{


height:42px;


font-size:16px;


}




#tripBtn{


height:42px;


font-size:16px;


}






.person{


padding:12px;


margin-top:8px;


}





.person b{


font-size:16px;


}






.map-btn{


top:10px;


right:10px;


}



.map-btn button{


padding:8px 14px;


font-size:14px;


}






.info{


min-width:230px;


font-size:14px;


}




.person-info button{


height:40px;


width:130px;


font-size:15px;


}


}
/* =========================
   流动播报横幅
========================= */

.announcement-bar {
    height: 42px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
    overflow: hidden;
    padding: 0 10px;
    color: #5f4300;
    background:
        linear-gradient(
            90deg,
            #fff7cf,
            #fffdf2,
            #fff7cf
        );
    border-bottom: 1px solid rgba(255, 183, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.announcement-icon {
    flex: 0 0 auto;
    margin-right: 9px;
    font-size: 18px;
}

.announcement-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.announcement-text {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    font-size: 15px;
    font-weight: 600;
    animation-name: announcement-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.announcement-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    border: none;
    border-radius: 50%;
    color: #7a5a00;
    background: transparent;
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
}

.announcement-close:hover {
    background: rgba(255, 183, 0, 0.16);
}

.pause-on-hover:hover .announcement-text {
    animation-play-state: paused;
}

@keyframes announcement-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* 原主体高度要扣除横幅高度 */
.container {
    height: calc(100vh - 102px);
}

body.announcement-hidden .container {
    height: calc(100vh - 60px);
}

@media (max-width: 700px) {
    .announcement-bar {
        height: 38px;
        padding: 0 8px;
    }

    .announcement-icon {
        font-size: 16px;
        margin-right: 6px;
    }

    .announcement-text {
        font-size: 14px;
    }

    .announcement-close {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }

    .container {
        height: calc(100vh - 93px);
    }

    body.announcement-hidden .container {
        height: calc(100vh - 55px);
    }
}