1、文字不换行
场景1：使 div 标签的文字内容不换行
代码示例：
<div class="nowrap-div">这是一段很长的文字，我们不会让它换行。</div>.nowrap-div { white-space: nowrap; }
2、步骤条
场景2：特殊样式的步骤条
场景结果：
代码示例：
<template> <div> <div class="step-tabs"> <div v-for="(item,index) in tabs" :key="item.title" :class="item.isActive?'tab tab-active':'tab'" @click="changeTab(index)">{{ item.title }}</div> </div> </div> </template> <script> export default { name: 'StepTabs', data() { return { // 5步骤列表 tabs:[ { isActive:true, title:'1.第一步', }, { isActive:false, title:'2.第二步', }, { isActive:false, title:'3.第三步', }, { isActive:false, title:'4.第四步', }, { isActive:false, title:'5.第五步', }, ], }; }, methods: { changeTab(index){ this.tabs.map(item=>item.isActive = false); this.tabs[index].isActive = true; }, }, }; </script> <style scoped lang="scss"> .step-tabs{ display: flex; justify-content: space-between; margin-bottom: 16px; .tab{ position: relative; width: 20%; background-color: #e6e8ec; text-align: center; padding: 8px; margin-right: 25px; cursor: pointer; &::before{ content: ""; width: 0; height: 0; position: absolute; left: 0; top: 0; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #fff); } &::after{ content: ""; width: 0; height: 0; position: absolute; right: -34px; top: 1px; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #e6e8ec); } &:nth-child(1):before{ content: ""; width: 0; height: 0; position: absolute; left: 0; top: 0; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #e6e8ec); } &:nth-last-child(1)::after{ content: ""; width: 0; height: 0; position: absolute; right: -38px; top: 0; border: 0; } } .tab-active{ color: #fff; border: 0; background-color: #2C8AEC; &::before{ content: ""; width: 0; height: 0; position: absolute; left: 0; top: 0; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #fff); } &::after{ content: ""; width: 0; height: 0; position: absolute; right: -34px; top: 1px; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #2C8AEC); } &:nth-child(1):before{ content: ""; width: 0; height: 0; position: absolute; left: 0; top: 0; border: solid 17.5px transparent; border-left-color: var(--devui-brand, #2C8AEC); } } } </style>
3、box-shadow阴影
场景3：给div标签加上阴影
场景结果：
基本语法：
element { box-shadow: offset-x offset-y blur spread color inset; }
- offset-x：阴影的水平偏移量。正值向右偏移，负值向左偏移
- offset-y：阴影的垂直偏移量。正值向下偏移，负值向上偏移
- blur：阴影的模糊半径。值越大，阴影越模糊。如果不设置（默认为 0），则阴影的边缘是清晰的
- spread：阴影的扩展半径。正值会使阴影扩展并变得更大，负值会使阴影收缩并变得更小，默认为 0
- color：阴影的颜色
- inset：将外部阴影（outset）改为内部阴影。如果指定了这个值，则阴影会出现在元素内容的内侧，而不是外侧
代码示例：
<div class="box"> <div class="box1">外部阴影</div> <div class="box2">内部阴影</div> <div class="box3">多个阴影</div> </div>.box{ width: 100%; display: flex; justify-content: space-around; margin-top: 20px; line-height: 100px; text-align: center; color: #fff; } .box1 { width: 100px; height: 100px; background-color: rgb(56, 184, 56); box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6); } .box2 { width: 100px; height: 100px; background-color: skyblue; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } .box3 { width: 100px; height: 100px; background-color: red; box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6), /* 第一个阴影 */ -10px -10px 15px rgba(255, 0, 0, 0.4); /* 第二个阴影 */ }
4、数据大屏方格背景
场景4：数据大屏的背景由深蓝色方块、灰白色边框的格子组成，并且要自适应各种屏幕大小
场景结果：
代码示例：
GridBack.vue页面
<template> <div> <div class="grid-background"></div> </div> </template> <style lang="scss" scoped> @import '@/styles/index.scss'; body{ margin: 0; } .grid-background { width: vw-from-design(1920);/* 将1920px转换为vw */ height: vh-from-design(1080); background-color: #012B5D; /* 设置背景大小为10px的格子，这样可以控制格子的大小 */ background-size: 50px 50px; /* 使用两个线性渐变来创建水平和垂直的线条效果 */ /* 第一个渐变创建水平线条（灰色和透明交替） */ /* 第二个渐变创建垂直线条（同样灰色和透明交替），并通过background-position偏移来避免与水平线条重合 */ background-image: linear-gradient(90deg, rgba(58, 150, 225, 0.225) 3%, transparent 0), linear-gradient(rgba(58, 150, 225, 0.225) 3%, transparent 0); /* 确保背景图像覆盖整个元素 */ background-position: 0 0, 0 1px; /* 偏移垂直渐变以避免与水平渐变重合 */ /* 确保背景图像不会重复 */ background-repeat: repeat; } </style>src\styles\index.scss封装方法
@use "sass:math"; // 默认设计稿的宽度 $designWidth: 1920; // 默认设计稿的高度 $designHeight: 1080; // px 转为 vw 的函数 @function vw-from-design($px) { @return math.div($px, $designWidth) * 100vw; } // px 转为 vh 的函数 @function vh-from-design($px) { @return math.div($px, $designHeight) * 100vh; }
