.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    text-align: center;
    padding: 10px;
}

/* 滚动公告整体容器样式 */
  .scroll-notice-wrapper {
      width: 100%;
      overflow: hidden; /* 超出部分隐藏，保证只有一条消息且循环滚动时看不到多余部分 */
      margin: 10px 0; /* 上下外边距为10px，左右为0，可按需调整 */
    }

    /* 公告内容列表容器样式 */
  .scroll-notice-content {
      display: flex; /* 使用弹性布局方便控制内部元素排列 */
      white-space: nowrap; /* 让内部文本不换行，实现横向排列 */
      animation: scrollNotice 15s linear infinite; /* 添加动画，实现循环滚动效果，时长15秒，匀速，无限循环 */
    }

    /* 单个公告消息元素样式 */
  .scroll-notice-item {
      font-size: 14px; /* 字体大小 */
      line-height: 30px; /* 行高，使文字垂直居中 */
      padding-right: 20px; /* 消息右边预留一点间距，视觉上更好看些 */
    }

    /* 定义滚动动画 */
    @keyframes scrollNotice {
      from {
        transform: translateX(0); /* 初始位置 */
      }
      to {
        transform: translateX(-100%); /* 滚动到完全移出可视区域，实现循环滚动的视觉效果 */
      }
    }
    
    /* 针对mui-table-view mui-grid-view mui-grid-9内的li元素整体样式优化 */
  .mui-table-view.mui-grid-view.mui-grid-9 li {
      position: relative; /* 相对定位，方便内部元素定位等操作 */
      border-radius: 10px; /* 圆角，让元素看起来更圆润精致 */
      overflow: hidden; /* 超出部分隐藏，比如图片等超出li范围时隐藏，使整体更整洁 */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果，增强立体感 */
      transition: all 0.3s ease; /* 过渡效果，让样式变化更平滑，比如鼠标悬停时的效果过渡 */
      margin: 5px 0px; /* 外边距，增加元素之间的间距，视觉上更舒适 */
    }

    /* 鼠标悬停时的效果 */
  .mui-table-view.mui-grid-view.mui-grid-9 li:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深，增强交互感 */
      transform: translateY(-3px); /* 向上稍微移动一点，营造悬浮效果 */
    }

    /* 优化内部的图标样式 */
  .mui-table-view.mui-grid-view.mui-grid-9 li.mui-icon {
      font-size: 24px; /* 图标字体大小增大，更醒目 */
      color: #333; /* 图标颜色设置 */
      margin-bottom: 5px; /* 图标与下方文字的间距 */
      display: block; /* 让图标占一行，便于排版 */
    }

    /* 优化内部文字主体样式 */
  .mui-table-view.mui-grid-view.mui-grid-9 li.mui-media-body {
      font-size: 14px; /* 文字大小 */
      color: #666; /* 文字颜色 */
      text-align: center; /* 文字居中对齐 */
    }

    /* 针对不同列宽的li元素微调样式（比如列宽不同时文字排版等） */
  .mui-table-view.mui-grid-view.mui-grid-9 li.mui-col-xs-6 {
      flex-basis: calc(50% - 10px); /* 两列布局时，每列宽度减去外边距 */
    }

  .mui-table-view.mui-grid-view.mui-grid-9 li.mui-col-xs-4 {
      flex-basis: calc(33.33% - 10px); /* 三列布局时，每列宽度减去外边距 */
    }

  .mui-table-view.mui-grid-view.mui-grid-9 li.mui-col-xs-12 {
      flex-basis: calc(100% - 10px); /* 单列占满一行时宽度减去外边距 */
    }