南昌中小企业网站制作网页广告设计师培训

背景：

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

解决效果：

布局自适应

核心代码：

        <el-carouselstyle="width: 100%; height: 100%":autoplay="true":interval="5000":direction="'vertical'":motion-blur="true":height="'42vh'"><el-carousel-itemv-for="(item, index) of state.shipList":key="index"><div class="contents"><div class="ship-img-box"><el-imagev-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><divclass="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>

核心样式：

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

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

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

代码：

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, // 横屏时使用的视口宽度}),],},},