vue 走马灯纵向滚动

背景：

走马灯纵向滚动，使用element的走马灯组件可能会出现显示不全的情况。如下图：

解决效果：

布局自适应

核心代码：

html 复制代码

        <el-carousel
          style="width: 100%; height: 100%"
          :autoplay="true"
          :interval="5000"
          :direction="'vertical'"
          :motion-blur="true"
          :height="'42vh'"
        >
          <el-carousel-item
            v-for="(item, index) of state.shipList"
            :key="index"
          >
            <div class="contents">
              <div class="ship-img-box">
                <el-image
                  v-if="item.photo"
                  class="carousel-image"
                  :src="BASEUrl + '/file/' + item.photo"
                  :preview-src-list="[BASEUrl + '/file/' + item.photo]"
                  :initial-index="index"
                  :preview-teleported="true"
                  alt=""
                />
                <div class="umpty_box" v-else>暂无渡船照片</div>
              </div>
              <div class="ship-people-content">
                <div class="ship-name-status">
                  <p>
                    {{ item.cname || "--" }}
                  </p>
                  <p :style="{ color: item.color }">
                    {{ item.text }}
                  </p>
                </div>
                <div class="info-box">
                  <div class="row-box">
                    <p>
                      <span>船长/宽：</span>
                      <span
                        >{{ item.length || "--" }}m/{{
                          item.width || "--"
                        }}m</span
                      >
                    </p>
                    <p>
                      <span>总吨位：</span>
                      <span>{{ item.grossTonnage || "--" }}吨</span>
                    </p>
                  </div>
                  <div
                    class="row-box"
                    v-for="(aitem, aindex) of item.crewInfoList"
                    :key="aindex"
                  >
                    <p>
                      <span>船员：</span>
                      <span>{{ aitem.name || "--" }}</span>
                    </p>
                    <p>
                      <span>电话：</span>
                      <span>{{ aitem.photo || "--" }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="num-text-box">
                <p>准载客</p>
                <p>
                  {{ item.carryPassengersNum || "--" }}
                </p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

核心样式：

javascript 复制代码

.contents {
  width: 100%;
  height: 98%;
  // background-color: pink;
  display: flex;
}

javascript 复制代码

<style lang="scss" scoped>
:deep(.el-carousel__container) {
  height: 100% !important;
}
:deep(.el-carousel__item){
  box-sizing: border-box;
}
</style>

拖动窗口，字体、布局自适应，使用了vite.config.js的配置：

代码：

javascript 复制代码

css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@import '/src/assets/css/global.scss';`,
                },
            },
            postcss: {
                plugins: [
                    postcssPxToViewport8Plugin({
                        unitToConvert: 'px',
                        viewportWidth: file => {
                            let num = 1920;
                            if (file.indexOf('m_') !== -1) {
                                num = 375;
                            }
                            return num;
                        },
                        unitPrecision: 5, // 单位转换后保留的精度
                        propList: ['*'], // 能转化为vw的属性列表
                        viewportUnit: 'vw', // 希望使用的视口单位
                        fontViewportUnit: 'vw', // 字体使用的视口单位
                        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
                        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
                        mediaQuery: true, // 媒体查询里的单位是否需要转换单位
                        replace: true, //  是否直接更换属性值，而不添加备用属性
                        exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
                        include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
                        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
                        landscapeUnit: 'vw', // 横屏时使用的单位
                        landscapeWidth: 1024, // 横屏时使用的视口宽度
                    }),
                ],
            },
        },

vue 走马灯 纵向滚动

vue 走马灯纵向滚动