* {
      margin: 0;				/* 清除所有元素默认外边距 */
      padding: 0;				/* 清除所有元素默认内边距 */
      box-sizing: border-box;	/* 盒子模型统一设置，宽高包含内边距和边框 */
    }
    body {
      background: #fff;					/* 设置页面背景为白色 */
      font-family: Arial, sans-serif;	/* 设置页面通用字体 */
      overscroll-behavior-x: none;		/* 禁止页面左右滑动触发浏览器默认回弹/侧滑返回 */
      touch-action: pan-y;				/* 只允许手指上下滑动，禁用左右默认触摸行为 */
    }

    /* 最外层：固定图标+进度条的总高度，无空白 */
    .icon-module {
      width: 100%;					/* 宽度铺满整行 */
      height: 97px; 				/* 固定整体高度，统一容纳图标+下方进度条 */
      display: flex;				/* 开启弹性布局 */
      flex-direction: column;		/* 内部元素垂直从上到下排列 */
      justify-content: center;		/* 内部内容垂直居中 */
    }

    /* 滑动容器 */
    .swiper-container {
      width: 100%;					/* 宽度100%自适应 */
      overflow: hidden;				/* 隐藏超出可视区域的内容，实现切屏效果 */
    }

    /* 滑动轨道 */
    .swiper-wrapper {
      display: flex;						/* 开启弹性布局，让两个页面横向并排 */
      width: 200%;							/* 总宽度为两倍，放下左右两个页面 */
      transition: transform 0.35s ease-out;	/* 设置滑动过渡动画，0.35秒平滑切换 */
    }

    /* 第一屏：高度自适应，无多余空白 */
    .slide-1 {
      width: 100%;		 /* 单个页面宽度占满父容器 */
    }

    /* 第二屏 */
    .slide-2 {
      width: 100%;		/* 单个页面宽度占满父容器 */
    }

    /* 图标样式 */
    .item {
      display: flex;			/* 弹性布局 */
      flex-direction: column;	/* 图标在上，文字在下垂直排列 */
      align-items: center;		/* 内部内容水平居中 */
      padding: 8px 0;			/* 上下设置内边距，拉开图标间距 */
    }
    .icon {
      width: 50px;				/* 图标盒子宽度 */
      height: 50px;				/* 图标盒子高度 */
      background: #f5f5f5;		/* 图标背景浅灰色 */
      border-radius: 10px;		/* 图标圆角 */
      display: flex;			/* 居中摆放图标文字 */
      align-items: center;		/* 垂直居中 */
      justify-content: center;	/* 水平居中 */
      font-size: 22px;			/* 图标内文字大小 */
      margin-bottom: 6px;		/* 图标和下方文字留出间距 */
    }
    .text {
      font-size: 12px;		/* 分类文字字号 */
      color: #333;			/* 文字深灰色 */
    }

    /* 第一屏布局：5.5个图标 */
    .slide-1-inner {
      width: 120%;			/* 加宽容器，让第六个图标能露出一半 */
      overflow: hidden;		/* 裁剪多余部分，只显示5.5个图标 */
    }
    .slide-1 .grid {
      display: flex;		/* 弹性横向排列 */
      flex-wrap: nowrap;	/* 强制不换行，所有图标同一行 */
    }
    .slide-1 .item {
      flex: 0 0 calc(100vw / 5.5);		/* 每个图标占屏幕宽度1/5.5，精准实现5.5个显示 */
    }

    /* 第二屏布局 */
    .slide-2 .grid {
      display: grid;							/* 网格布局 */
      grid-template-columns: repeat(5, 1fr);	/* 一行固定平均分5个图标，自动换行成两行 */
    }

    /* 进度条：紧贴图标下方，无空白 */
    .dots {
      display: flex;				/* 小圆点横向排列 */
      justify-content: center;		/* 整体水平居中 */
      gap: 6px;						/* 两个圆点之间间距 */
      height: 6px;					/* 进度条高度 */
      margin-top: 2px;				/* 距离上方图标轻微下移，紧贴图标底部 */
    }
    .dot {
      width: 6px;				/* 圆点宽度 */
      height: 6px;				/* 圆点高度 */
      border-radius: 50%;		/* 做成正圆形 */
      background: #ddd; 		/* 默认浅灰色 */
    }
    .dot.active {
      width: 18px;				/* 激活后拉长变横条 */
      border-radius: 3px;		/* 改成小圆角长条 */
      background: #ff6700;		/* 主题橙色高亮 */
    }
	.icon_img{width:50px;height:50px;}