butCard.vue 655 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div style="padding:5px">
  3. <div class="card el-button--primary">
  4. <div class="card-content">
  5. <i :class="iconName"></i>
  6. <div>{{ name }}</div>
  7. </div>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {};
  15. },
  16. props: {
  17. name: {
  18. type: String
  19. },
  20. iconName: {
  21. type: String
  22. }
  23. },
  24. methods: {}
  25. };
  26. </script>
  27. <style lang="scss" scoped>
  28. .card{
  29. //background: #ff7d13;
  30. display: flex;
  31. justify-content: center;
  32. align-items: center;
  33. height: 14vh;
  34. .card-content{
  35. text-align: center;
  36. color: #fff;
  37. i{
  38. font-size: 30px;
  39. }
  40. }
  41. }
  42. </style>