<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2022-09-06 13:43:06 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2022-09-07 10:23:47 * @FilePath: /danger-manage-web/src/views/indexComponents/allComponents/Tittle.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="title-wrapper"> <div class="text">{{ text }}</div> </div> </template> <script> export default { name: "", props: { text: { type: String, default: "设备运行", }, }, data() { return {}; }, methods: {}, }; </script> <style lang="scss" scoped> .title-wrapper { width: 100%; border-bottom: 1px solid #1998bb; margin-bottom:20px; .text { display: inline-block; font-size: 16px; padding-bottom: 11px; font-weight: 400; color: #ffffff; box-sizing: border-box; position: relative; &::after { content: ""; width: 100%; border-bottom: 2px solid #58faf4; // background: linear-gradient(0deg, #FAFCFE 9%, #ABD9F4 64%, #2D80CD 93%); box-shadow: 2px 0px 5px 5px rgba(88, 250, 244, 0.3); left: 0; bottom: -2px; position: absolute; } } } </style>