@charset "UTF-8";
/* CSS Document */



body{
    margin: 0px;
    min-height: 100vh;
    position: relative;

    /* 处理安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    
    color: #9B9B9B; /*默认全局字体颜色*/
    background-color: #8c8eff;  /* 与 theme-color 保持一致 */
    
/*    background: linear-gradient(to bottom, #8c8eff,#f0f1ff);*/

}


/* 创建全屏背景层 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* 确保背景在内容后面 */

/*    background: linear-gradient(to bottom, #9191ff,#ead9ff);
    background: linear-gradient(to bottom, #a291ff,#e0e0ff);
    background: linear-gradient(to bottom, #8c8eff,#f0f1ff);*/

    background: linear-gradient(to bottom, #8c8eff,#f0f1ff);
}



/* 或者只为头部导航栏添加 */
.header {
    padding-top: env(safe-area-inset-top); /* 为iOS设备预留状态栏高度 */
    padding-top: constant(safe-area-inset-top); /* 兼容旧版iOS */
    background-color: #8c8eff;
    color: white; /* 因为状态栏图标是白色的，所以头部文字最好也是浅色 */
}


/* 导航条样式 */
.nav-bar{
    background-color: white;
    text-align:center;
    box-shadow: 0px 0px  15px rgba(0, 0, 0, .2);
    line-height: 6px;
}


/* 顶部button所在区域样式 */
.nav-bar-buttonarea{
    padding-top: 4px;
    padding-bottom: 16px;
    display: flex;
    justify-content: center;
}



/* 右上角样式切换按钮 */
.nav-bar-top-right{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 2px;
    right:2px;
    box-shadow: 0px 0px  8px rgba(0, 0, 0, .2);
}
.nav-bar-top-right-img{
    width: 30px;
    height: 30px;
}


/*
隐藏标签的几种方式
1. display: none
2. hidden属性     -> 效果和display: none一样，注意：如果JS在其他地方更改了display属性，可能会使该属性失效。
3. visibility:hidden      ->     visible：显示 ，hidden 隐藏
4. opacity: 0   ->   设置透明度为0可以隐藏标签，并且可以设置动画，其它3中方式不支持动画
其中：
1,2方式隐藏标签。不占据控件，会触发回流影响布局
3,4方式隐藏标签。会占据控件，不会影响布局
*/
/* 显示 */
.fade {
    transition: opacity .5s;

/*    opacity: 1;
    pointer-events: auto;*/
}
/* 隐藏 */
.fade-out {
    opacity: 0;
    pointer-events: none;
}




/*-----------------------------------------------------------首页布局为网格样式时需要用到的CSS样式-----------------------------------------------------------*/
/* 首页grid网格样式 */
.home-grid-container {
    display: grid;

    /*grid-template-columns: 1fr 1fr 1fr ;*/
    /*grid-template-columns: auto auto auto;*/
    /*grid-template-rows: repeat(auto-fit, 10rem);  /*每行自动填充 高度为20rem */

    /*可用于窗口自适应*/
    place-content: center;
    grid-template-columns: repeat(auto-fit, 20rem);  /*每列自动填充 宽度为20rem */

/*    margin: 24px;
    margin-top: 24px;
    margin-bottom: 64px;*/


/*    border-radius: 8px;*/

    padding:12px;
    padding-top: 24px;
    padding-bottom: 64px;


    grid-row-gap: 24px;
    grid-column-gap: 64px; /* 126px */
/*    background-color: #F6F6F6;*/
    color: #9B9B9B;


/*    background-color: #19ff98;*/
}


/* 首页网格item样式 */
.home-grid-item{
    background-color: #ffffff;
    width: 320px;
    height: 420px;  /*460px*/
    /* 阴影水平向右偏移10px，垂直向下偏移10px 边缘模糊半径10px */
    box-shadow: 0px 0px  15px rgba(0, 0, 0, .2);
    border-radius: 8px;


    /* 设置该属性才能让home-grid-item-buttonarea中的下对齐有效 */
    position: relative;
}


/* 首页网格item中应用类型样式图标 */
.home-grid-item-icon{
    height: 48px;
    margin-right: 4px;
    margin-top: 4px;
}
/* 首页网格item中应用类型样式图标 设置具体大小并固定样式*/
.home-grid-item-icon-fixsize{
/*    background-image: url("src/images/apple.png");
    background: url("src/images/apple.png");*/
    background-size: 20px 20px;
    /*background-color: #e0e0e0;*/
    width: 44px;
    height: 44px;
    float: right;
    position: relative;
    right: 0px;
    z-index: 1;
}

/*首页item中应用logo*/
.home-grid-item-logo{
    height: 100px;
    width: 100px;
    border-radius: 16px;
    margin-left: 40px;
}


/*首页item中所有文字所在的区域*/
.home-grid-item-textarea{
    margin-left: 40px;
    margin-right: 4px;
    margin-top: 20px;   /*离应用类型图标底部的距离*/
}


/*首页item应用名称显示样式样式*/
.home-grid-item-text-name{
    color: #9b9b9b;
    font-size: 18px;
     line-height: 30px;
     margin-top: 15px;
     margin-bottom: 15px;
}


/*首页item中包名行显示样式*/
.home-grid-item-text-line{
    line-height: 17px;
    margin-top: 12px;
    font-size: 12px;
    color: #9b9b9b;
}

/*首页item中包名等具体数据显示样式*/
.home-grid-item-text-info{
    font-size: 12px;
    color: #1a1a1a;
}


/*首页item中按钮所在的区域*/
.home-grid-item-buttonarea{
    /* 与父标签的底部对齐 */
    position: absolute;
    bottom: 34px;
    right: 20px;
    left: 20px;

    /*  水平方向上居中对齐  */
/*    text-align: center;*/

    display: flex;
    justify-content: center; /* 垂直居中 */
}



/*-----------------------------------------------------------首页布局为网格样式时需要用到的CSS样式-----------------------------------------------------------*/




/*-----------------------------------------------------------首页布局为列表样式时需要用到的CSS样式-----------------------------------------------------------*/
/* 首页table网格样式 */
.home-table-container {
/*    display: grid;*/
/*    display: block;*/


/*    grid-template-columns: 1fr 1fr 1fr ;*/
    /*grid-template-columns: auto auto auto;*/
    /*grid-template-rows: repeat(auto-fit, 10rem);  /*每行自动填充 高度为20rem */

    /*可用于窗口自适应*/
    place-content: center;
     /*每列自动填充 宽度为20rem */
/*    grid-template-columns: repeat(auto-fit, 20rem); */
/*    grid-template-columns: 1;*/

    
   

/*    margin: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
*/


    padding:12px;
    padding-top: 24px;
    padding-bottom: 64px;


/*    position: relative;
/*    bottom: 20px;
    top: 20px;*/

/*    margin-top: 24px;
    margin-bottom: 64px;*/

/*
    grid-row-gap: 24px;
    grid-column-gap: 64px;
*/
/*    background-color: #F6F6F6;*/
    color: #9B9B9B;

/*     background-color: #19ff98;*/
}


/* 首页列表 item样式 */
.home-table-item{
    background-color: #ffffff;
/*    width: 100%;*/
    height: 130px;  /*420 460px*/
    /* 阴影水平向右偏移10px，垂直向下偏移10px 边缘模糊半径10px */
    box-shadow: 0px 0px  15px rgba(0, 0, 0, .2);
    border-radius: 8px;
    margin-bottom: 12px;

    /* 设置该属性才能让home-grid-item-buttonarea中的下对齐有效 */
    position: relative;
}


/* 首页列表item中应用类型样式图标 */
.home-table-item-icon{
    right: 2px;
    top: 2px;
    position: absolute;
}
/* 首页列表item中应用类型样式图标 设置具体大小并固定样式*/
.home-table-item-icon-fixsize{
    width: 20px;
    height: 22px;
}

/*首页列表中应用logo*/
.home-table-item-logo{
    height: 68px;
    width: 68px;
    border-radius: 16px;
    margin-top: 31px;
    margin-left: 2%;
    float: left;
}


/*首页列表item中所有文字所在的区域*/
.home-table-item-textarea{
    margin-left: 2%;
    width: 80%;

    position: absolute;

    white-space: nowrap;
    word-break: break-all;
    display: inline-block;
}


/*首页列表item应用名称显示样式样式*/
.home-table-item-text-name{
    color: #9b9b9b;
    font-size: 14px;
    line-height: 30px;
    margin-top: 10px;
}


/*首页列表item中包名行显示样式*/
.home-table-item-text-line{
    line-height: 17px;
    margin-top: 6px;
    font-size: 12px;
    color: #9b9b9b;
}

/*首页列表item中包名等具体数据显示样式*/
.home-table-item-text-info{
    font-size: 12px;
    color: #1a1a1a;
}


/*首页列表item中按钮所在的区域*/
.home-table-item-buttonarea{
    /* 与父标签的底部对齐 */
    position: absolute;
    right: 1%;
    top: 23px;

    /*  水平方向上居中对齐  */
    text-align: center;

/*    display: flex;
    justify-content: center; /* 垂直居中 */
}

/*-----------------------------------------------------------首页布局为列表样式时需要用到的CSS样式-----------------------------------------------------------*/



/*-----------------------------------------------------------Button所用到的样式CSS样式-----------------------------------------------------------*/
/* 根据鼠标进入，离开标签时Button样式的变换，当前变成草绿色 */
.button-movemouse{
    border: 1px solid;
    border-radius: 18px;
    background-color: white;
    color: #9B9B9B;
}
.button-movemouse:active,
.button-movemouse:hover{
    background-color: #53b3a8;
    color: white;
}


.button-smail{
    width: 100px;
    height: 36px;
    border-radius: 18px;
    font-size: 15px;
}

.button-large{
    width: 200px;
    height: 40px;
    border-radius: 20px;
    font-size: 15px;
}

/* 按钮常规样式 */
.button-normal{
    background-color: white;
    color: #9B9B9B;
    font-size: 15px;
    width: 100px;
    height: 36px;
    border: 1px solid;
    border-radius: 18px;
}

/* 按钮点击选中样式 */
.button-selected{
    background-color: #53b3a8;
    color: white;
    font-size: 15px;
    width: 100px;
    height: 36px;
    border: 1px solid;
    border-radius: 18px;
}


/*-----------------------------------------------------------Button所用到的样式CSS样式-----------------------------------------------------------*/





/*-----------------------------------------------------------IMG-----------------------------------------------------------*/
/*首页item中APP名称旁边的用户图标*/
.img-user-size16{
    width: 16px;
    height: 16px;

    float: left;
    margin-top: 7px;
    margin-right: 4px;
}



/*-----------------------------------------------------------其它-----------------------------------------------------------*/