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, // 横屏时使用的视口宽度
                    }),
                ],
            },
        },
相关推荐
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)3 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中3 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我3 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing3 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端