map.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div class="homeMap">
  3. <div class="map">
  4. <div :scroll-x="true" class="scrolldiv-box">
  5. <div class="chinaMap" v-show="show">
  6. <echarsMap :data="province" v-if="province.length"></echarsMap>
  7. </div>
  8. <div class="allMap" v-show="!show">
  9. <div class="goChina" @click="show = !show"></div>
  10. </div>
  11. </div>
  12. </div>
  13. <div class="people">
  14. <img
  15. height="30px"
  16. width="30px"
  17. mode="heightFix"
  18. src="/static/img/icon_lotus_dark@2x.png"
  19. ></img>
  20. <span class="peopleNum">祈愿人数</span>
  21. <span class="peopleNum">{{ people }}</span>
  22. </div>
  23. <div class="bottom flex justify-between items-end">
  24. <div class="list">
  25. <div class="listItem" v-for="item in list" :key="item.id">
  26. {{item.creatorName}}
  27. <span style="color: #7EE3DE">【{{item.province}}】</span>
  28. {{item.name}}
  29. </div>
  30. </div>
  31. <div class="qiyuan" @click="handleqiyuan">
  32. <img
  33. height="70px"
  34. width="70px"
  35. mode="heightFix"
  36. src="/static/img/btn_wish@2x.png"
  37. ></img>
  38. </div>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import echarsMap from '@/components/echars/index.vue'
  44. export default {
  45. components: {
  46. echarsMap
  47. },
  48. data() {
  49. return {
  50. show: false,
  51. people: 0,
  52. province: [],
  53. list: []
  54. }
  55. },
  56. onReady() {},
  57. created() {
  58. this.getRequest('/api/show/pray/getList').then(res => {
  59. console.log(res, 'getList')
  60. this.list = res.data
  61. })
  62. this.getRequest('/api/show/pray/count').then(res => {
  63. console.log(res, 'getList')
  64. this.people = res.data.total
  65. let province = []
  66. for (let key of Object.keys(res.data.province)) {
  67. console.log(key); // 'a', 'b', 'c'
  68. province.push({
  69. name: key,
  70. value: res.data.province[key]
  71. })
  72. }
  73. this.province = province
  74. })
  75. },
  76. methods: {
  77. handleHome() {
  78. // console.log('开启云上观灯', uni)
  79. // uni.$u.route('/pages/home/home')
  80. },
  81. handleqiyuan() {
  82. this.show = false
  83. this.$router.push('/prayers/list')
  84. },
  85. }
  86. }
  87. </script>
  88. <style lang="scss">
  89. .homeMap {
  90. width: 100%;
  91. height: 100vh;
  92. position: relative;
  93. background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png) 100% 100% no-repeat;
  94. background-size: cover;
  95. .bottom {
  96. width: calc(100% - 47px);
  97. position: absolute;
  98. bottom: 50px;
  99. left: 0;
  100. height: 25vh;
  101. padding: 0 27px 0 20px;
  102. .list {
  103. .listItem {
  104. padding: 6px 10px;
  105. background: rgba(0, 0, 0, 0.3);
  106. border-radius: 50px;
  107. margin-top: 10px;
  108. font-weight: 400;
  109. font-size: 12px;
  110. color: #ffffff;
  111. line-height: 14px;
  112. text-align: center;
  113. font-style: normal;
  114. }
  115. }
  116. }
  117. .people {
  118. position: absolute;
  119. height: 35px;
  120. padding: 0 5px;
  121. background: rgba(0, 0, 0, 0.5);
  122. right: 0;
  123. top: 125px;
  124. display: flex;
  125. justify-content: center;
  126. align-items: center;
  127. border-radius: 20px 0 0 20px;
  128. .peopleNum {
  129. font-size: 24rpx;
  130. color: #fff;
  131. margin-right: 8px;
  132. }
  133. }
  134. .map {
  135. width: 100%;
  136. height: 100%;
  137. .scrolldiv-box {
  138. white-space: nowrap; // 滚动必须加的属性
  139. width: 100%;
  140. height: 100%;
  141. }
  142. .chinaMap {
  143. overflow: hidden;
  144. width: 100vw;
  145. height: 100%;
  146. background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/chinaMap.jpg) 100% 100%
  147. no-repeat;
  148. // background-position: 20px 34px;
  149. background-size: 100%;
  150. background-position: 2px 11px;
  151. }
  152. .allMap {
  153. width: 375px;
  154. height: calc(100vh - 358px);
  155. background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/map@2x.png) 100% 55%
  156. no-repeat;
  157. background-position-y: 47px;
  158. background-position-x: -231px;
  159. // background-size: 100vh 1097px;
  160. // background-size: cover;
  161. background-size: 183vw auto;
  162. position: relative;
  163. // background-position: -1758px -600px;
  164. .goChina {
  165. width: 100px;
  166. height: 100px;
  167. position: absolute;
  168. left: 240px;
  169. top: 236px;
  170. }
  171. }
  172. }
  173. }
  174. </style>