/* 外层滚动容器样式 */
#scroll-container {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* 隐藏默认滚动条 */
  padding: 10px; /* 可选的内边距 */
  box-sizing: border-box;
}
/* 股票数据容器样式 */
#stock-data {
  display: flex;
  flex-wrap: nowrap; /* 不允许换行 */
  gap: 10px; /* 框之间的间距 */
  justify-content: flex-start; /* 从左向右排列 */
  overflow-x: scroll; /* 允许横向滚动 */
  white-space: nowrap; /* 确保子元素在一行内排列 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
  box-sizing: border-box;
}
/* 隐藏滚动条 */
#stock-data::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}
#stock-data {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}
/* 每个框的样式 */
.selected-data-box {
  border: 1px solid #d3d3d3; /* 修改边框颜色 */
  border-radius: 10px;
  padding: 10px; /* 上下左右均设置相同 */
  flex: 0 0 16%; /* 设置固定宽度并防止缩放 */
  min-height: 100px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: flex-start; /* 水平对齐开始 */
}
/* 标题样式 */
.selected-data-box strong {
  display: block;
  font-size: 20px;
  color: #333;
  margin: 0 0 5px 0; /* 下边距 */
  line-height: 1.2; /* 设置行高 */
}
/* 股票名称样式 */
.selected-data-box .stock-name {
  font-size: 16px;
  color: #555;
  line-height: 1.2;
  margin-bottom: 10px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  width: 100%; /* 确保宽度为父容器宽度 */
}
/* 价格和涨跌幅的容器样式 */
.selected-data-box .price-change-container {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 使容器宽度适应方盒宽度 */
  line-height: 1.2; /* 设置价格和涨跌幅行距 */
}
/* 价格样式 */
.selected-data-box .price {
  font-size: 20px;
  font-weight: bold;
}
/* 涨跌幅样式 */
.selected-data-box .change-rate {
  font-size: 20px;
  font-weight: bold;
}
/* 当涨跌幅为正值时（上涨） */
.selected-data-box .change-rate.up {
  color: #28a745; /* 绿色 */
}
/* 当涨跌幅为负值时（下跌） */
.selected-data-box .change-rate.down {
  color: #dc3545; /* 红色 */
}
/* 箭头按钮样式 */
.scroll-button {
  background: none; /* 去掉背景 */
  color: #333; /* 箭头颜色 */
  border: none;
  font-size: 34px; /* 箭头大小 */
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* 确保按钮在内容之上 */
  transition: color 0.3s, outline 0.3s; /* 动画过渡效果 */
}
/* 鼠标悬停时的圆圈效果 */
.scroll-button::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: rgba(0,123,255,0.2); /* 圆圈背景颜色 */
  top: -10%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.3s; /* 动画过渡效果 */
  z-index: -1; /* 确保圆圈在按钮后面 */
}
.scroll-button:hover::before {
  opacity: 1;
}
/* 左右箭头位置 */
#scroll-left {
  left: 10px;
}
#scroll-right {
  right: 10px;
}