el-card实现菜单栏效果_SmallTeddy

网络 02-07 8333

1、效果

2、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueDemo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .level-nav { background: #fff; width: 100%; height: 100px; line-height: 100px; margin-bottom: 20px; display: flex; } .level-item { cursor: default; flex: 1; margin-right: 20px; } .el-card__body { padding: 0; } .level-main { display: flex; } .level-info { padding-left: 30px; flex: 1; } .level-info p:nth-child(1) { margin: 0; height: 50px; line-height: 70px; } .level-info p:nth-last-child(1) { margin: 0; height: 50px; line-height: 30px; } .level-info span { font-weight: 700; } .level-proportion { box-sizing: border-box; padding-top: 10px; text-align: center; width: 100px; height: 100px; } .el-progress-circle { width: 80px !important; height: 80px !important; } .level-item:nth-last-child(1) { margin-right: 0; } </style> </head> <body> <div class="main"> <div class="level-nav"> <el-card v-for="v in levelList" shadow="hover" class="level-item" :key="v.id" @click.native="levelClick(v)"> <div class="level-main"> <div class="level-proportion"> <el-progress type="circle" class="level-progress" :color="colors" :percentage="v.percentage"></el-progress> </div> <div class="level-info"> <p><span>等级：</span>{{v.name}}</p> <p><span>总数：</span>{{v.total}}</p> </div> </div> </el-card> </div> </div> <script> var vm = new Vue({ el: '.main', data() { return { colors: [ { color: '#f56c6c', percentage: 20 }, { color: '#e6a23c', percentage: 40 }, { color: '#5cb87a', percentage: 60 }, { color: '#1989fa', percentage: 80 }, { color: '#6f7ad3', percentage: 100 } ], levelList: [ { id: 0, name: '111', percentage: 15, total: 0 }, { id: 1, name: '222', percentage: 35, total: 0 }, { id: 2, name: '333', percentage: 100, total: 0 }, { id: 3, name: '444', percentage: 75, total: 0 }, { id: 4, name: '555', percentage: 0, total: 0 }, { id: 5, name: '666', percentage: 55, total: 0 } ] }; }, methods: { levelClick(v) { console.log(v.name) } } }) </script> </body> </html>