div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
 position: relative; /* 添加相对定位，以便伪元素可以相对于通知栏定位 */
 width: 100%;/*单行显示，超出隐藏*/
 height: 35px;/*固定公告栏显示区域的高度*/
 padding: 0 30px;
 /*background-color: #b3effe;*/
 overflow: hidden;
 border: 1px dashed orange;
 border-radius: 20px; /* 添加圆角 */
}

/*
.notice::before {
  content: "\f0a1";
  font-family: "FontAwesome";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
*/

.notice::before {
  content: ""; /* 移除原有的图标Unicode代码 */
  background-image: url('/images/喇叭.svg'); /* 使用url()函数添加外部图片链接 */
  background-size: contain; /* 确保图片完整显示，不失真 */
  background-repeat: no-repeat; /* 防止图片重复 */
  position: absolute; /* 绝对定位，相对于通知栏 */
  left: 10px; /* 距离最左侧10像素 */
  top: 55%; /* 垂直居中 */
  transform: translateY(-50%); /* 使用transform来确保垂直居中 */
  width: 20px; /* 设置图片宽度，根据实际情况调整 */
  height: 20px; /* 设置图片高度，根据实际情况调整 */
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #008000;
  cursor: pointer;
}

.notice ul li {
 list-style: none;
 line-height: 35px;
 /*以下为了单行显示，超出隐藏*/
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 text-align: left; /* 内容靠左显示 */
 padding-left: 10px; /* 增加左边距，进一步拉开图标与文字的距离 */
}