strategyDetatil.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="container">
  3. <view class="title">这里不是瑞士!是江西靖安!</view>
  4. <view class="time">2023-09-08 15:15:15</view>
  5. <rich-text class="desc" :nodes="strings"></rich-text>
  6. <rich-text class="desc" :nodes="strings2"></rich-text>
  7. <view class="tags">
  8. <view class="tag">#南昌周边游</view>
  9. <view class="tag">#江西旅游</view>
  10. <view class="tag">#靖安旅游</view>
  11. <view class="tag">#靖安民宿</view>
  12. <view class="tag">#民宿推荐</view>
  13. <view class="tag">#周末去哪玩</view>
  14. </view>
  15. <view class="imgList">
  16. <img v-for="(ele, index) in imgList" :key="index" mode="scpectfill" :src="ele" @click="handleImg(index)" />
  17. </view>
  18. <view class="info" @click="handleClick">
  19. <view class="info_left">
  20. <view class="left_top">
  21. <img src="../../static/index/hotel2.png" />
  22. <view class="top_info">附近 | 靖安沐光源宿</view>
  23. <view class="top_rate">5.0分</view>
  24. </view>
  25. <view class="left_bottom">经济型 中源乡 4.4km</view>
  26. </view>
  27. <view class="info_right">
  28. <img src="../../static/index/star.png" />
  29. 2100
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. strings:
  39. '<div>南昌周边度假的宝藏民宿🏠享受山野间森呼吸🌿</div> <div>很适合逃离城市奔向大自然的快乐躺平☁</div> <div>阴雨绵绵也抵挡不住它的美☔</div> <div>心向山野 尽请赴约🍃</div> <div>一房一景 设计独特 🪐</div> <div>室内有着巨大落地窗🚪</div> <div>地址⛺️宜春市靖安县宁福线中源乡合港村南段组10号</div> <div>交通🚘南昌自驾开车约2H</div> <div>风格⛱民宿是新中式生活美学的格调 非常高级还配备中餐厅、商务会议室、茶室、休闲娱乐包厢等🎞</div> <div>适合情侣、家庭自驾游玩 💕</div>',
  40. strings2:
  41. '<div>🔆附近景区游玩推荐:</div> <div>北岭花海、九岭瀑布、九门楼、九岭尖云海、日出、冰雪、风车、草甸、露营、游客中心、清水平台观景、河道游船、观赏荷花、采莲、客家民俗、农俗活动及客家美食、小吃、果脯、高山滑雪、梯田等</div>',
  42. imgList: [
  43. 'https://chtech.ncjti.edu.cn/hotelReservation/image/19.jpg',
  44. 'https://chtech.ncjti.edu.cn/hotelReservation/image/20.jpg',
  45. 'https://chtech.ncjti.edu.cn/hotelReservation/image/21.jpg',
  46. 'https://chtech.ncjti.edu.cn/hotelReservation/image/22.jpg',
  47. 'https://chtech.ncjti.edu.cn/hotelReservation/image/23.jpg',
  48. 'https://chtech.ncjti.edu.cn/hotelReservation/image/24.jpg',
  49. 'https://chtech.ncjti.edu.cn/hotelReservation/image/25.jpg',
  50. 'https://chtech.ncjti.edu.cn/hotelReservation/image/26.jpg',
  51. 'https://chtech.ncjti.edu.cn/hotelReservation/image/27.jpg'
  52. ]
  53. }
  54. },
  55. mounted() {
  56. // 开启转发功能
  57. uni.showShareMenu({
  58. withShareTicket: true,
  59. menus: ['shareAppMessage', 'shareTimeline']
  60. })
  61. },
  62. methods: {
  63. handleClick() {
  64. uni.navigateTo({
  65. url: `/pages/detail/detail?id=${1363527549}`
  66. })
  67. },
  68. handleImg(index) {
  69. uni.previewImage({
  70. urls: this.imgList,
  71. current: index
  72. })
  73. }
  74. }
  75. }
  76. </script>
  77. <style lang="scss" scoped>
  78. .container {
  79. padding: 30rpx;
  80. min-height: 100vh;
  81. background-color: #ffffff;
  82. .title {
  83. font-size: 36rpx;
  84. font-weight: bold;
  85. }
  86. .time {
  87. margin: 10rpx 0 20rpx;
  88. color: #808080;
  89. font-size: 28rpx;
  90. }
  91. .desc {
  92. line-height: 45rpx;
  93. font-size: 28rpx;
  94. }
  95. .tags {
  96. display: flex;
  97. flex-wrap: wrap;
  98. margin: 15rpx 0;
  99. font-size: 28rpx;
  100. color: #1e7dfb;
  101. .tag {
  102. }
  103. }
  104. .imgList {
  105. display: grid;
  106. grid-template-columns: repeat(auto-fill, 223rpx);
  107. gap: 10rpx;
  108. img {
  109. width: 223rpx;
  110. height: 223rpx;
  111. border-radius: 11rpx;
  112. }
  113. }
  114. .info {
  115. display: flex;
  116. box-sizing: border-box;
  117. padding: 0 20rpx 0 15rpx;
  118. margin: 40rpx 0 48rpx;
  119. width: 690rpx;
  120. height: 130rpx;
  121. border-radius: 13rpx;
  122. background-color: #f2f2f2;
  123. .info_left {
  124. flex: 4;
  125. display: flex;
  126. flex-direction: column;
  127. justify-content: space-evenly;
  128. .left_top {
  129. display: flex;
  130. align-items: center;
  131. img {
  132. width: 34rpx;
  133. height: 34rpx;
  134. }
  135. .top_info {
  136. margin: 0 34rpx 0 13rpx;
  137. font-size: 28rpx;
  138. }
  139. .top_rate {
  140. font-size: 24rpx;
  141. }
  142. }
  143. .left_bottom {
  144. margin-left: 46rpx;
  145. color: #a6a6a6;
  146. font-size: 24rpx;
  147. }
  148. }
  149. .info_right {
  150. flex: 1;
  151. display: flex;
  152. justify-content: space-around;
  153. align-items: center;
  154. font-size: 28rpx;
  155. img {
  156. width: 42rpx;
  157. height: 43rpx;
  158. }
  159. }
  160. }
  161. }
  162. </style>