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

3

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

Write Preview
Loading…
Cancel
Save