六、编程题 1.请使用swiper 组件，结合flex布局，实现“一行7个图标，共两行”的显示效果。

六、编程题 - Swiper组件与Flex布局实现图标布局

要使用Swiper组件（一种常用的轮播插件）结合Flex布局来实现一行展示7个图标，总共两行的效果，你可以按照以下步骤操作：

首先，在HTML部分，设置一个包含Swiper容器的div，并给每个图标创建一个小div：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide icon" v-for="(icon, index) in icons" :key="index"></div>
  </div>
</div>

然后，引入Swiper库（假设已经通过cdn引入）：

<script src="https://unpkg.com/swiper@8/dist/swiper.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/dist/css/swiper.min.css">

接下来，在CSS部分，定义`.icon`样式并设置Flex布局，同时限制`.swiper-container`的高度以便适应两行：

.swiper-container {
  height: calc(75% * 2); /* 根据实际屏幕调整 */
  display: flex;
  flex-wrap: wrap;
}

.icon {
  width: 14%; /* 计算每个图标占用的百分比，总宽度除以图标数量 */
  margin-right: 4px; /* 间距调整 */
  box-sizing: border-box;
  flex-shrink: 0; /* 防止图标缩小 */
}

最后，在JavaScript或Vue等前端框架中初始化Swiper实例，并设置其滑动步数（这里设为7*2）：

// 如果是Vue项目
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      icons: [
        ... /* 这里添加你的7个图标内容 */
      ],
    };
  },
  mounted() {
    this.$refs.mySwiper.init({
      slidesPerView: 7, // 每次滚动展示7个图标
      spaceBetween: 4, // 图标之间的间距
      loop: true, // 循环滚动
    });
  },
};