| | |
| | | <div class="number" :style="colorStyle">{{number}}</div> |
| | | <div class="info">{{info}}</div> |
| | | </div> |
| | | <img class="card-right" :src="src" alt=""> |
| | | <img class="card-right" :src="src" alt="" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | props: { |
| | | number: { |
| | | require: true |
| | | require: true, |
| | | }, |
| | | info: { |
| | | require: true |
| | | require: true, |
| | | }, |
| | | icon: { |
| | | require: true |
| | | require: true, |
| | | }, |
| | | color: { |
| | | require: true |
| | | require: true, |
| | | }, |
| | | src: { |
| | | require: true |
| | | } |
| | | require: true, |
| | | }, |
| | | }, |
| | | data (){ |
| | | return { |
| | | |
| | | } |
| | | return {}; |
| | | }, |
| | | computed: { |
| | | colorStyle (){ |
| | | return { |
| | | "--color":this.color |
| | | } |
| | | } |
| | | } |
| | | } |
| | | "--color": this.color, |
| | | }; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 20px; |
| | | padding: 20px 2%; |
| | | width: 187px; |
| | | height: 90px; |
| | | background: #FFFFFF; |
| | | background: #ffffff; |
| | | box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25); |
| | | border-radius: 15px; |
| | | |
| | |
| | | } |
| | | .info { |
| | | font-size: 12px; |
| | | color: #4F4F4F; |
| | | ; |
| | | color: #4f4f4f; |
| | | } |
| | | } |
| | | |
| | | .card-right { |
| | | width: 58px; |
| | | height: 58px; |
| | | |
| | | } |
| | | } |
| | | </style> |