card.vue 829 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div class="little-card" >
  3. <div>
  4. <div>{{ num }}</div>
  5. <div>{{ title }}</div>
  6. </div>
  7. <div>
  8. <img :src="picture" alt="">
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'topNav',
  15. props: {
  16. title: {
  17. type: String
  18. },
  19. num: {
  20. type: Number
  21. },
  22. picture: {
  23. type: String
  24. }
  25. }
  26. }
  27. </script>
  28. <style lang="less" scoped>
  29. .little-card {
  30. width:23.5%;
  31. background: #fff;
  32. height: 100px;
  33. display:flex;
  34. align-items:center;
  35. justify-content:space-between;
  36. padding:10px 20px 10px 30px;
  37. >div:first-child {
  38. display:flex;
  39. flex-direction:column;
  40. div:first-child {
  41. font-size: 18px;
  42. font-weight: bold;
  43. }
  44. div:last-child {
  45. font-size: 8px;
  46. color:#b1b1b1;
  47. margin-top:5px;
  48. }
  49. }
  50. }
  51. </style>