景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

256 lines
5.0 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <!-- '遗产讲述', '达人同游' 我要跟拍 的共同详情页面 -->
  3. <view class="page">
  4. <navbar :title="titles[type]" leftClick @leftClick="$utils.navigateBack" />
  5. <view class="info">
  6. <!-- 上面 -->
  7. <view class="top">
  8. <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
  9. <view class="left">
  10. <view class="title">
  11. 摄影师协会
  12. </view>
  13. <view class="left-list">
  14. <view>
  15. <uv-icon
  16. name="star"
  17. size="50rpx"
  18. ></uv-icon>
  19. 收藏
  20. </view>
  21. <view>
  22. <uv-icon
  23. name="star"
  24. size="50rpx"
  25. ></uv-icon>
  26. 收藏
  27. </view>
  28. <view>
  29. <uv-icon
  30. name="star"
  31. size="50rpx"
  32. ></uv-icon>
  33. 收藏
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <!-- 下面 -->
  39. <view class="bottom">
  40. <view>
  41. <image src="../static/reservationDetail/1.png" mode=""></image>
  42. <view>
  43. 预约时间
  44. </view>
  45. </view>
  46. <view>
  47. <image src="../static/reservationDetail/2.png" mode=""></image>
  48. <view>
  49. 价格
  50. </view>
  51. </view>
  52. <view>
  53. <image src="../static/reservationDetail/3.png" mode=""></image>
  54. <view>
  55. 预约
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="detail">
  61. <view class="content">
  62. <view class="thumb-up">
  63. <uv-icon
  64. name="thumb-up"
  65. size="40rpx"
  66. color="#B12731"
  67. ></uv-icon>
  68. <text>推荐度</text> <text>9</text>
  69. </view>
  70. <view class="text">
  71. <view class="line">
  72. <view class="left">
  73. 专业擅长
  74. </view>
  75. <view class="right">
  76. 景德镇陶瓷考古研究所资料陈列馆副主任累德镇交物鉴定小组成员现为景德镇市第三批市级非物质文化遗产项目景德镇传统陶瓷书法
  77. </view>
  78. </view>
  79. <view class="line">
  80. <view class="left">
  81. 个人简介
  82. </view>
  83. <view class="right">
  84. 景德镇陶瓷考古研究所资料陈列馆副主任累德镇交物鉴定小组成员现为景德镇市第三批市级非物质文化遗产项目景德镇传统陶瓷书法
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="video-list">
  90. <view class="title">
  91. 讲解现场
  92. </view>
  93. <!-- <view class="list">
  94. <view
  95. v-for="(item, index) in 10"
  96. :key="index">
  97. <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
  98. </view>
  99. </view> -->
  100. </view>
  101. <videoList ref="videoList"/>
  102. </view>
  103. <tabber/>
  104. </view>
  105. </template>
  106. <script>
  107. import videoList from '@/components/list/videoList.vue'
  108. export default {
  109. components : {
  110. videoList,
  111. },
  112. data() {
  113. return {
  114. titles: ['遗产讲述', '达人同游', '我要跟拍'],
  115. type: 0,
  116. }
  117. },
  118. onLoad(args) {
  119. this.type = args.type
  120. },
  121. onShow() {
  122. this.$refs.videoList.queryVideoList()
  123. },
  124. //滚动到屏幕底部
  125. onReachBottom() {
  126. this.$refs.videoList.loadMoreData()
  127. },
  128. methods: {
  129. }
  130. }
  131. </script>
  132. <style scoped lang="scss">
  133. .page{
  134. .info{
  135. .top{
  136. display: flex;
  137. padding: 40rpx;
  138. image{
  139. width: 240rpx;
  140. height: 280rpx;
  141. border-radius: 20rpx;
  142. margin-right: 40rpx;
  143. }
  144. .left{
  145. .title{
  146. font-size: 32rpx;
  147. margin-top: 20rpx;
  148. }
  149. .left-list{
  150. display: flex;
  151. font-size: 26rpx;
  152. background-color: #fff;
  153. border-radius: 20rpx;
  154. padding: 20rpx;
  155. margin-top: 50rpx;
  156. box-shadow: 0 0 10rpx 10rpx #00000010;
  157. >view{
  158. margin: 20rpx 30rpx;
  159. display: flex;
  160. flex-direction: column;
  161. justify-content: center;
  162. align-items: center;
  163. }
  164. }
  165. }
  166. }
  167. .bottom{
  168. display: flex;
  169. justify-content: space-around;
  170. image{
  171. width: 100rpx;
  172. height: 100rpx;
  173. margin-bottom: 10rpx;
  174. }
  175. >view{
  176. background-color: #fff;
  177. box-shadow: 0 0 10rpx 10rpx #00000010;
  178. border-radius: 20rpx;
  179. height: 180rpx;
  180. width: 180rpx;
  181. display: flex;
  182. justify-content: center;
  183. align-items: center;
  184. flex-direction: column;
  185. color: $uni-color;
  186. }
  187. }
  188. }
  189. .detail{
  190. width: 100%;
  191. background-color: #fff;
  192. .content{
  193. padding: 40rpx;
  194. .thumb-up{
  195. background-color: #F6F2E7;
  196. color: $uni-color;
  197. font-size: 28rpx;
  198. font-weight: 900;
  199. padding: 10rpx 25rpx;
  200. display: flex;
  201. width: fit-content;
  202. border-radius: 30rpx;
  203. text{
  204. margin-left: 10rpx;
  205. }
  206. }
  207. .text{
  208. .line{
  209. margin-top: 40rpx;
  210. display: flex;
  211. line-height: 50rpx;
  212. .left{
  213. width: 180rpx;
  214. flex-shrink: 0;
  215. color: $uni-color;
  216. font-weight: 900;
  217. }
  218. }
  219. }
  220. }
  221. .video-list{
  222. padding: 15rpx;
  223. .title{
  224. font-weight: 900;
  225. color: $uni-color;
  226. padding: 15rpx;
  227. }
  228. .list{
  229. display: flex;
  230. flex-wrap: wrap;
  231. >view{
  232. margin: 15rpx;
  233. image{
  234. width: 330rpx;
  235. height: 350rpx;
  236. border-radius: 30rpx;
  237. }
  238. }
  239. }
  240. }
  241. }
  242. }
  243. </style>