pxrztuq3h
/
Dormitory_Management_System
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

3

Browse Source
branch_shen
shen 11 months ago
parent 30e89a98a7
commit 0d66630248
1 changed files with 161 additions and 118 deletions
Show Stats Download Patch File Download Diff File

279
src/main/webapp/css/mobileSelect.css
Unescape View File

@ -1,150 +1,193 @@
/* 定义一个名为 mobileSelect 的类，用于设置选择器的样式 */
.mobileSelect {
position: relative;
z-index: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s, z-index 0.4s;
transition: opacity 0.4s, z-index 0.4s;
}
position: relative; /* 相对定位 */
z-index: 0; /* 层级为0 */
opacity: 0; /* 初始透明度为0，即不可见 */
visibility: hidden; /* 初始状态为隐藏 */
-webkit-transition: opacity 0.4s, z-index 0.4s; /* 过渡效果：透明度和层级变化持续0.4秒 */
transition: opacity 0.4s, z-index 0.4s; /* 标准过渡效果 */
}
/* 设置 mobileSelect 内所有元素的边距和填充为0，并使用盒模型计算方式 */
.mobileSelect * {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 定义 mobileSelect 内的 grayLayer 类的样式 */
.mobileSelect .grayLayer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #eee;
background: rgba(0, 0, 0, 0.7);
z-index: 888;
display: block;
}
position: fixed; /* 固定定位 */
top: 0; /* 距离顶部0 */
left: 0; /* 距离左侧0 */
bottom: 0; /* 距离底部0 */
right: 0; /* 距离右侧0 */
background: #eee; /* 背景色 */
background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
z-index: 888; /* 层级为888 */
display: block; /* 显示为块级元素 */
}
/* 定义 mobileSelect 内的 content 类的样式 */
.mobileSelect .content {
width: 100%;
display: block;
position: fixed;
z-index: 889;
color: black;
-webkit-transition: all 0.4s;
transition: all 0.4s;
bottom: -350px;
left: 0;
background: white;
}
width: 100%; /* 宽度100% */
display: block; /* 显示为块级元素 */
position: fixed; /* 固定定位 */
z-index: 889; /* 层级为889 */
color: black; /* 文字颜色为黑色 */
-webkit-transition: all 0.4s; /* 所有属性的过渡效果持续0.4秒 */
transition: all 0.4s; /* 标准过渡效果 */
bottom: -350px; /* 初始位置在视口下方350px处 */
left: 0; /* 距离左侧0 */
background: white; /* 背景色为白色 */
}
/* 定义 content 内的 fixWidth 类的样式 */
.mobileSelect .content .fixWidth {
width: 90%;
margin: 0 auto;
position: relative;
width: 90%; /* 宽度为90% */
margin: 0 auto; /* 上下边距为0，左右自动调整 */
position: relative; /* 相对定位 */
}
/* 定义 fixWidth 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .fixWidth:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
content: "."; /* 内容为点号 */
display: block; /* 显示为块级元素 */
height: 0; /* 高度为0 */
clear: both; /* 清除浮动 */
visibility: hidden; /* 隐藏 */
}
/* 定义 content 内的 btnBar 类的样式 */
.mobileSelect .content .btnBar {
border-bottom: 1px solid #DCDCDC;
font-size: 15px;
height: 45px;
position: relative;
text-align: center;
line-height: 45px;
}
border-bottom: 1px solid #DCDCDC; /* 底部边框 */
font-size: 15px; /* 字体大小 */
height: 45px; /* 高度 */
position: relative; /* 相对定位 */
text-align: center; /* 文本居中 */
line-height: 45px; /* 行高 */
}
/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {
height: 45px;
width: 55px;
cursor: pointer;
position: absolute;
top: 0;
}
height: 45px; /* 高度 */
width: 55px; /* 宽度 */
cursor: pointer; /* 鼠标指针样式 */
position: absolute; /* 绝对定位 */
top: 0; /* 距离顶部0 */
}
/* cancel 按钮的样式 */
.mobileSelect .content .btnBar .cancel {
left: 0;
color: #666;
left: 0; /* 距离左侧0 */
color: #666; /* 文字颜色 */
}
/* ensure 按钮的样式 */
.mobileSelect .content .btnBar .ensure {
right: 0;
color: #1e83d3;
right: 0; /* 距离右侧0 */
color: #1e83d3; /* 文字颜色 */
}
/* title 的样式 */
.mobileSelect .content .btnBar .title {
font-size: 15px;
padding: 0 15%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
font-size: 15px; /* 字体大小 */
padding: 0 15%; /* 内边距 */
overflow: hidden; /* 溢出隐藏 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* panel 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .panel:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
content: "."; /* 内容为点号 */
display: block; /* 显示为块级元素 */
height: 0; /* 高度为0 */
clear: both; /* 清除浮动 */
visibility: hidden; /* 隐藏 */
}
/* wheels 的样式 */
.mobileSelect .content .panel .wheels {
width: 100%;
height: 200px;
overflow: hidden;
width: 100%; /* 宽度100% */
height: 200px; /* 高度200px */
overflow: hidden; /* 溢出隐藏 */
}
/* wheel 的样式 */
.mobileSelect .content .panel .wheel {
position: relative;
z-index: 0;
float: left;
width: 50%;
height: 200px;
overflow: hidden;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease;
}
position: relative; /* 相对定位 */
z-index: 0; /* 层级为0 */
float: left; /* 左浮动 */
width: 100%; /* 宽度100% */
height: 200px; /* 高度200% */
overflow: hidden; /* 溢出隐藏 */
-webkit-transition: width 0.3s ease; /* Webkit浏览器的过渡效果 */
transition: width 0.3s ease; /* 标准过渡效果 */
}
/* selectContainer 的样式 */
.mobileSelect .content .panel .wheel .selectContainer {
display: block;
text-align: center;
-webkit-transition: -webkit-transform 0.18s ease-out;
transition: -webkit-transform 0.18s ease-out;
transition: transform 0.18s ease-out;
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
}
display: block; /* 显示为块级元素 */
text-align: center; /* 文本居中 */
-webkit-transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的过渡效果 */
transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的标准过渡效果 */
transition: transform 0.18s ease-out; /* 标准过渡效果 */
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; /* 同时应用两种过渡效果 */
}
/* selectContainer li元素的样式 */
.mobileSelect .content .panel .wheel .selectContainer li {
font-size: 15px;
display: block;
height: 40px;
line-height: 40px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
font-size: 15px; /* 字体大小 */
display: block; /* 显示为块级元素 */
height: 40px; /* 高度40px */
line-height: 40px; /* 行高40px */
color: #ffffff; /* 文字颜色为白色 */
cursor: pointer; /* 鼠标指针样式 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* selectLine的样式 */
.mobileSelect .content .panel .selectLine {
height: 40px;
width: 100%;
position: absolute;
top: 80px;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
}
height: 40px; /* 高度40px */
width: 100%; /* 宽度100% */
position: absolute; /* 绝对定位 */
top: 80px; /* 距离顶部80px */
pointer-events: none; /* 禁止鼠标事件 */
-webkit-box-sizing: border-box; /* Webkit浏览器的盒模型计算方式 */
box-sizing: border-box; /* 标准盒模型计算方式 */
border-top: 1px solid #DCDCDC; /* 上边框 */
border-bottom: 1px solid #DCDCDC; /* 下边框 */
}
/* shadowMask的样式 */
.mobileSelect .content .panel .shadowMask {
position: absolute;
top: 0;
width: 100%;
height: 200px;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
opacity: 0.9;
pointer-events: none;
}
position: absolute; /* 绝对定位 */
top: 0; /* 距离顶部0 */
width: 100%; /* 宽度100% */
height: 200px; /* 高度200px */
background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变 */
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* 标准背景渐变 */
background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
}
/* mobileSelect-show类的样式，用于显示时的状态 */
.mobileSelect-show {
opacity: 1;
z-index: 10000;
visibility: visible;
z-index: 10000; /* z轴层级提高至10000 */
}
/* mobileSelect-show类的content子元素的样式，用于显示时的状态 */
.mobileSelect-show .content {
bottom: 0;
bottom: -350px; /* bottom属性设置为-350px，使其完全显示在视窗内 */
}

Write Preview
Loading…
Cancel
Save