*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    font-family:"HarmonyOS Sans","Microsoft YaHei",sans-serif;
}

body{
    background:#171717;
    color:#fff;
    font-size:14px;
}

.container{
    padding:16px;
    padding-bottom:80px;
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
}

.left{
    display:flex;
    align-items:center;
}

.avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    background:#333;
}

.userinfo{
    margin-left:12px;
}

.name{
    font-size:15px;
    background:#303030;
    border-radius:20px;
    display:inline-block;
    padding:5px 14px;
}

.vip{
    margin-top:8px;
    color:#9b9b9b;
    font-size:12px;
}

.vip span{
    color:#ff3b30;
}

.setting{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#2f2f2f;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.weather{
    margin-top:18px;
    background:#333;
    border-radius:20px;
    height:150px;
    display:flex;
    align-items:center;
    padding:22px;
}

.weatherIcon{
    font-size:48px;
    margin-right:24px;
}

.city{
    font-size:24px;
}

.temp{
    margin-top:12px;
    color:#d0d0d0;
    font-size:18px;
}

.section{
    display:flex;
    align-items:center;
    margin-top:20px;
    margin-bottom:14px;
}

.dot{
    width:16px;
    height:16px;
    border-radius:50%;
    margin-right:10px;
}

.cyan{
    background:#00d2d3;
}

.blue{
    background:#5d8cff;
}

.title{
    font-size:16px;
    font-weight:bold;
}
/*==========================
  操作台
==========================*/

.action{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}

.actionBtn{
    height:86px;
    background:#2f2f2f;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.25s;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.actionBtn:active{
    transform:scale(.96);
}

.actionIcon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#6ca8ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    margin-bottom:8px;
}

/*==========================
  工具列表
==========================*/

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.item{
    height:82px;
    background:#2f2f2f;
    border-radius:18px;
    display:flex;
    align-items:center;
    padding:14px;
    transition:.25s;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.item:active{
    transform:scale(.97);
}

.icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#4f63ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    margin-right:12px;
    flex-shrink:0;
}

.text{
    font-size:14px;
    font-weight:600;
    line-height:20px;
    color:#ffffff;
}

/*==========================
  滚动条
==========================*/

::-webkit-scrollbar{
    width:0;
    height:0;
}
/*==========================
  底部导航
==========================*/

.bottomBar{
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;

    height:62px;

    background:rgba(40,40,40,.95);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    display:flex;
    justify-content:space-around;
    align-items:center;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    z-index:999;
}

.navItem{

    display:flex;
    flex-direction:column;
    align-items:center;

    color:#8d8d8d;

    font-size:11px;

    transition:.25s;
}

.navItem i{

    font-style:normal;

    font-size:20px;

    margin-bottom:4px;
}

.navItem.active{

    color:#4da3ff;
}

.navItem:active{

    transform:scale(.92);
}

/*==========================
  动画
==========================*/

.weather,
.actionBtn,
.item{

    animation:show .35s ease;
}

@keyframes show{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================
  Hover
==========================*/

.item:hover,
.actionBtn:hover{

    background:#373737;
}

.setting:hover{

    transform:rotate(90deg);

    transition:.3s;
}

/*==========================
  手机适配
==========================*/

@media(max-width:380px){

.avatar{

width:42px;
height:42px;

}

.name{

font-size:14px;

}

.weather{

height:130px;

}

.city{

font-size:20px;

}

.temp{

font-size:16px;

}

.item{

height:74px;

padding:12px;

}

.icon{

width:38px;
height:38px;

font-size:18px;

margin-right:10px;

}

.text{

font-size:13px;

}

.actionBtn{

height:76px;

}

}


.actionIcon{

background:linear-gradient(
135deg,
#00d2d3,
#4da3ff
);

}

/*==========================
  页面结束
==========================*/


/*==========================
  搜索框
==========================*/

.searchBox{

    height:52px;

    background:#2f2f2f;

    border-radius:16px;

    display:flex;

    align-items:center;

    padding:0 16px;

    margin:16px 0;

}

.searchIcon{

    font-size:18px;

    color:#999;

}

.searchBox input{

    flex:1;

    height:100%;

    margin-left:12px;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:14px;

}

.searchBox input::placeholder{

    color:#8a8a8a;

}

/*=====================
  底部导航
=====================*/

.bottomNav{

    position:fixed;

    left:12px;

    right:12px;

    bottom:12px;

    height:66px;

    background:rgba(40,40,40,.95);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 8px 30px rgba(0,0,0,.35);

    z-index:9999;

}

.navItem{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#888;

    transition:.25s;

}

.navItem:active{

    transform:scale(.92);

}

.navIcon{

    font-size:22px;

}

.navText{

    margin-top:4px;

    font-size:11px;

}

.navItem.active{

    color:#4DA3FF;

}

.navItem.active .navIcon{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#4DA3FF;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

}