实现效果： <img src="https://img.tnblog.net/arcimg/aojiancc2/3a943849c5f542289f4c57f76e182816.png" style="width:399px;height:auto;"> #### 核心样式 ``` .good { background: rgba(0, 180, 255, 0.5); border: 1px solid #00b4ff; box-shadow: 0px 0px 10px 1px #00b4ff inset; /* 内阴影，模拟边框高亮效果 */ } ``` #### 所有的Html结构和样式 ``` <template> <div class="baseData-container"> <div class="bc-line"> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(90))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(90)"> <div class="bci-ic-tag">班级数</div> <div class="bci-ic-value">22</div> </div> </div> <div class="bci-spacer"></div> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(60))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(60)"> <div class="bci-ic-tag">课程数</div> <div class="bci-ic-value">35</div> </div> </div> </div> <div class="bc-line"> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(90))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(90)"> <div class="bci-ic-tag">学生数</div> <div class="bci-ic-value">22</div> </div> </div> <div class="bci-spacer"></div> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(77))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(77)"> <div class="bci-ic-tag">微课数</div> <div class="bci-ic-value">35</div> </div> </div> </div> <div class="bc-line"> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(80))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(80)"> <div class="bci-ic-tag">实验数</div> <div class="bci-ic-value">22</div> </div> </div> <div class="bci-spacer"></div> <div class="bci-item"> <img :src="require('@/assets/img/useData/' + parseImg(60))" class="tag_img" style="" alt="" /> <div class="bci-item-content" :class="parseClass(60)"> <div class="bci-ic-tag">项目数</div> <div class="bci-ic-value">35</div> </div> </div> </div> </div> </template> <script> export default { // 组件名字 name: "baseData", // 组件参数 props: { percentage: { type: Number, default: 0, }, title: { type: String, default: "", }, }, data() { return { courseID: "", labId: "", chapter: {}, }; }, mounted() { this.initPic(); }, // 组件方法 methods: { initPic() {}, parseImg(_pr) { if (_pr >= 90) { return "excellent.png"; } else if (_pr >= 80) { return "good.png"; } else if (_pr >= 70) { return "average.png"; } else { return "poor.png"; } }, parseClass(_pr) { if (_pr >= 90) { return "excellent"; } else if (_pr >= 80) { return "good"; } else if (_pr >= 70) { return "average"; } else { return "poor"; } }, }, }; </script> <style scoped="scoped" lang="scss"> .baseData-container { .bc-line { display: flex; height: 43px; justify-content: space-between; margin-bottom: 15px; .bci-spacer { width: 10px; } .bci-item { display: flex; flex: 1; .tag_img { width: 41px; height: 100%; margin-right: 4px; } .bci-item-content { display: flex; flex: 1; background: rgba(255, 48, 38, 0.5); border: 1px solid #ff625a; align-items: center; justify-content: space-between; padding-left: 10px; padding-right: 10px; } // 优 .excellent { background: rgba(58, 154, 13, 0.5); border: 1px solid #69c23f; box-shadow: 0px 0px 10px 1px #69c23f inset; /* 内阴影，模拟边框高亮效果 */ } // 良 .good { background: rgba(0, 180, 255, 0.5); border: 1px solid #00b4ff; box-shadow: 0px 0px 10px 1px #00b4ff inset; /* 内阴影，模拟边框高亮效果 */ } // 中 .average { background: rgba(253, 141, 34, 0.5); border: 1px solid #fd9837; box-shadow: 0px 0px 10px 1px #fd9837 inset; /* 内阴影，模拟边框高亮效果 */ } // 差 .poor{ background: rgba(255, 48, 38, 0.5); border: 1px solid #ff625a; box-shadow: 0px 0px 10px 1px #ff625a inset; /* 内阴影，模拟边框高亮效果 */ } } } } </style> ```