/* 定义一个名为 mobileSelect 的类，用于设置选择器的样式 */
.mobileSelect {
  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; /* 距离顶部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%; /* 宽度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%; /* 宽度为90% */
  margin: 0 auto; /* 上下边距为0，左右自动调整 */
  position: relative; /* 相对定位 */
}

/* 定义 fixWidth 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .fixWidth:after {
  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; /* 行高 */
}

/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {
  height: 45px; /* 高度 */
  width: 55px; /* 宽度 */
  cursor: pointer; /* 鼠标指针样式 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部0 */
}

/* cancel 按钮的样式 */
.mobileSelect .content .btnBar .cancel {
  left: 0; /* 距离左侧0 */
  color: #666; /* 文字颜色 */
}

/* ensure 按钮的样式 */
.mobileSelect .content .btnBar .ensure {
  right: 0; /* 距离右侧0 */
  color: #1e83d3; /* 文字颜色 */
}

/* title 的样式 */
.mobileSelect .content .btnBar .title {
  font-size: 15px; /* 字体大小 */
  padding: 0 15%; /* 内边距 */
  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* panel 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .panel:after {
  content: "."; /* 内容为点号 */
  display: block; /* 显示为块级元素 */
  height: 0; /* 高度为0 */
  clear: both; /* 清除浮动 */
  visibility: hidden; /* 隐藏 */
}

/* wheels 的样式 */
.mobileSelect .content .panel .wheels {
  width: 100%; /* 宽度100% */
  height: 200px; /* 高度200px */
  overflow: hidden; /* 溢出隐藏 */
}

/* wheel 的样式 */
.mobileSelect .content .panel .wheel {
  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; /* 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; /* 高度40px */
  line-height: 40px; /* 行高40px */
  color: #ffffff; /* 文字颜色为白色 */
  cursor: pointer; /* 鼠标指针样式 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* selectLine的样式 */
.mobileSelect .content .panel .selectLine {
  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; /* 距离顶部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 {
  z-index: 10000; /* z轴层级提高至10000 */
}

/* mobileSelect-show类的content子元素的样式，用于显示时的状态 */
.mobileSelect-show .content {
  bottom: -350px; /* bottom属性设置为-350px，使其完全显示在视窗内 */
}
