index.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view >
  3. <view class="container">
  4. <view class="content">
  5. <text class="title">扫码关注</text>
  6. <text class="subtitle">获取更多信息</text>
  7. <image class="qr-code" src="https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912211722_826.jpg" mode="aspectFit"></image>
  8. </view>
  9. <view class="footer">
  10. <text class="company-name">上海壹领医疗</text>
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <style>
  16. .container {
  17. display: flex;
  18. flex-direction: column;
  19. height: 600px;
  20. color: white;
  21. }
  22. .content {
  23. flex: 1;
  24. display: flex;
  25. flex-direction: column;
  26. align-items: center;
  27. justify-content: center;
  28. padding: 0px 0px 30px 0px;
  29. background-color: #1296db;
  30. }
  31. .title {
  32. font-size: 54px;
  33. font-weight: bold;
  34. margin-bottom: 10px;
  35. margin: 20px auto;
  36. text-align: center;
  37. }
  38. .subtitle {
  39. font-size: 16px;
  40. }
  41. .qr-code {
  42. width: 200px;
  43. height: 200px;
  44. }
  45. .footer {
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. }
  50. .company-name {
  51. font-size: 14px;
  52. color: black;
  53. padding-top: 20px;
  54. }
  55. </style>