index.wxss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /**index.wxss**/
  2. .page {
  3. height: 100vh;
  4. display: flex;
  5. flex-direction: column;
  6. background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/bg2.png');
  7. background-position: center top;
  8. background-repeat: no-repeat;
  9. background-size: contain;
  10. }
  11. .top {
  12. padding-top: 15vh;
  13. width: 100%;
  14. display: flex;
  15. flex-direction: column;
  16. justify-content: flex-start;
  17. align-items: center;
  18. }
  19. .section {
  20. width: 339px;
  21. height: 136px;
  22. display: flex;
  23. flex-direction: column;
  24. justify-content: flex-start;
  25. margin-bottom: 25px;
  26. position: relative;
  27. }
  28. .section .cover1 {
  29. background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic1.png');
  30. background-repeat: no-repeat;
  31. background-position: top top;
  32. background-size: cover;
  33. width: 100%;
  34. height: 104px;
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. z-index: 100;
  39. }
  40. .section .text {
  41. background-color: #ffffff;
  42. width: calc(100% - 8px);
  43. height: 39px;
  44. border-radius: 10px;
  45. position: absolute;
  46. z-index: 0;
  47. bottom: 0;
  48. left: 50%;
  49. transform: translateX(-50%);
  50. display: flex;
  51. align-items: center;
  52. }
  53. .section2 {
  54. background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic2.png');
  55. }
  56. .section3 {
  57. background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic3.png');
  58. }