Info.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div class="mobile-fix-content">
  3. <div class="info">
  4. <div class="line">
  5. <span>用户名:</span>
  6. {{info.userName}}
  7. </div>
  8. <div class="line">
  9. <span>手机:</span>
  10. {{info.userTel}}
  11. </div>
  12. <div class="line">
  13. <span>邮箱:</span>
  14. {{info.userEmail}}
  15. </div>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. props: {
  22. info: {
  23. default: {},
  24. type: Object
  25. }
  26. }
  27. }
  28. </script>
  29. <style lang="scss" scoped>
  30. .mobile-fix-content {
  31. background: #f1f3f6;
  32. }
  33. .info {
  34. width: 7.1rem;
  35. background: #fff;
  36. margin: 0 auto;
  37. height: 3.5rem;
  38. padding: 0 .24rem;
  39. font-size: .28rem;
  40. color: #999;
  41. border-radius: .05rem;
  42. margin-top: .3rem;
  43. .line {
  44. overflow: hidden;
  45. text-overflow: ellipsis;
  46. white-space: nowrap;
  47. height: 1.16rem;
  48. line-height: 1.16rem;
  49. border-bottom: .01rem solid #d9d9d9;
  50. &:last-child {
  51. border-bottom: none;
  52. }
  53. span {
  54. margin-left: .56rem;
  55. display: inline-block;
  56. width: 1.2rem;
  57. text-align: right;
  58. }
  59. }
  60. }
  61. </style>