景徳镇旅游微信小程序
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.

91 lines
1.9 KiB

8 months ago
8 months ago
8 months ago
  1. <template>
  2. <!-- 非遗体验 -->
  3. <view class="experience">
  4. <navbar title="非遗体验" leftClick @leftClick="$utils.navigateBack" />
  5. <view class="experience-img">
  6. <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill" />
  7. </view>
  8. <view class="experience-box" v-for="(item,index) in 10"
  9. @click="toUrl(item)"
  10. :key="index">
  11. <view class="experience-box-img">
  12. <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="16rpx" width="100%" height="360rpx"
  13. :fade="false" />
  14. </view>
  15. <view class="experience-box-font">
  16. <view style="font-weight: 600;">孙天天陶瓷工作室</view>
  17. <view style="font-size: 24rpx; color: #999999;">开放时间0800-2100</view>
  18. <view class="experience-box-button">
  19. <view>线上预订</view>
  20. </view>
  21. </view>
  22. </view>
  23. <tabber/>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. }
  31. },
  32. methods: {
  33. toUrl(item){
  34. console.log(item);
  35. this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=2`)
  36. },
  37. }
  38. }
  39. </script>
  40. <style scoped lang="scss">
  41. .experience {
  42. .experience-img {
  43. height: 400rpx;
  44. image {
  45. height: 100%;
  46. width: 100%;
  47. }
  48. }
  49. .experience-box {
  50. width: 94%;
  51. margin-left: 3%;
  52. margin-top: 20rpx;
  53. background-color: #fff;
  54. box-shadow: 0px 0px 10rpx 0rpx #00000022;
  55. border-radius: 12rpx;
  56. .experience-box-img {
  57. width: 94%;
  58. margin-left: 3%;
  59. padding-top: 20rpx;
  60. }
  61. .experience-box-font {
  62. width: 94%;
  63. margin-left: 3%;
  64. margin-top: 30rpx;
  65. .experience-box-button {
  66. display: flex;
  67. justify-content: flex-end;
  68. align-items: center;
  69. font-size: 28rpx;
  70. color: #fff;
  71. padding-bottom: 40rpx;
  72. view {
  73. padding: 10rpx 40rpx;
  74. border-radius: 40rpx;
  75. background-color: #C83741;
  76. }
  77. }
  78. }
  79. }
  80. }
  81. </style>