introduce.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view class="background1">
  3. <view class="background2">
  4. <view class="wenben">
  5. <view class="wenben1">
  6. 五分鐘一期
  7. </view>
  8. <view class="wenben2">
  9. 自由區
  10. </view>
  11. <view class="xian"></view>
  12. <view class="weben3">
  13. <view class="tet">
  14. 壓和值(01234)上,(56789)下,(13579)奇,(02468)偶,壓100U中180U
  15. </view>
  16. </view>
  17. <view class="wenben4">
  18. 体验區
  19. </view>
  20. <view class="xian"></view>
  21. <view class="weben5">
  22. <view class="te">
  23. 壓和值(01234)上,(56789)下,(13579)奇,(02468)偶,壓100U中100.2U,沒中返本金。 體驗區每
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {};
  34. },
  35. };
  36. </script>
  37. <style lang="scss">
  38. .background1 {
  39. position: relative;
  40. // width: 100vw;
  41. height: calc(100vh - var(--status-bar-height));
  42. background: url("/index/static/shouye/beijing1.png");
  43. background-size: 100% 100%;
  44. background-position: 50% 50%;
  45. background-repeat: no-repeat;
  46. }
  47. .background2 {
  48. background-image: url("/index/static/shouye/beijing2.png");
  49. position: absolute;
  50. background-size: 100% 100%;
  51. width: 650rpx;
  52. height: 900rpx;
  53. top: 50%;
  54. left: 50%;
  55. transform: translate(-50%, -60%);
  56. }
  57. .wenben1 {
  58. margin-left: 240rpx;
  59. margin-top: 87rpx;
  60. height: 35rpx;
  61. font-size: 36rpx;
  62. font-family: Source Han Sans CN;
  63. font-weight: bold;
  64. color: #201809;
  65. line-height: 36rpx;
  66. }
  67. .wenben2 {
  68. margin-left: 274rpx;
  69. margin-top: 90rpx;
  70. height: 35rpx;
  71. font-size: 37rpx;
  72. font-family: Source Han Sans CN;
  73. font-weight: bold;
  74. color: #D7BB80;
  75. line-height: 10rpx;
  76. }
  77. .xian {
  78. width: 200rpx;
  79. height: 8rpx;
  80. color: #000000;
  81. }
  82. .wenben3 {
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. width: 528rpx;
  87. height: 138rpx;
  88. }
  89. .tet {
  90. margin-left: 62rpx;
  91. margin-top: 40rpx;
  92. padding-top: 30rpx;
  93. font-size: 24rpx;
  94. font-family: Source Han Sans CN;
  95. font-weight: bold;
  96. color: #211808;
  97. line-height: 42rpx;
  98. width: 528rpx;
  99. height: 138rpx;
  100. background-color: #FAEDD6;
  101. text-align: center;
  102. }
  103. .wenben4 {
  104. margin-left: 274rpx;
  105. margin-top: 50rpx;
  106. height: 35rpx;
  107. font-size: 37rpx;
  108. font-family: Source Han Sans CN;
  109. font-weight: bold;
  110. color: #D7BB80;
  111. line-height: 10rpx;
  112. }
  113. .wenben5 {
  114. display: flex;
  115. justify-content: center;
  116. align-items: center;
  117. // width: 528rpx;
  118. // height: 138rpx;
  119. }
  120. .te {
  121. margin-left: 62rpx;
  122. margin-top: 40rpx;
  123. padding-top: 40rpx;
  124. font-size: 24rpx;
  125. font-family: Source Han Sans CN;
  126. font-weight: bold;
  127. color: #211808;
  128. line-height: 42rpx;
  129. width: 528rpx;
  130. height: 206rpx;
  131. background-color: #FAEDD6;
  132. text-align: center;
  133. }
  134. </style>