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

86 lines
1.7 KiB

  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" :key="index">
  9. <view class="experience-box-img">
  10. <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="16rpx" width="100%" height="360rpx"
  11. :fade="false" />
  12. </view>
  13. <view class="experience-box-font">
  14. <view style="font-weight: 600;">孙天天陶瓷工作室</view>
  15. <view style="font-size: 24rpx; color: #999999;">开放时间0800-2100</view>
  16. <view class="experience-box-button">
  17. <view>线上预订</view>
  18. </view>
  19. </view>
  20. </view>
  21. <tabber/>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. }
  29. },
  30. methods: {
  31. }
  32. }
  33. </script>
  34. <style scoped lang="scss">
  35. .experience {
  36. .experience-img {
  37. height: 400rpx;
  38. image {
  39. height: 100%;
  40. width: 100%;
  41. }
  42. }
  43. .experience-box {
  44. width: 94%;
  45. margin-left: 3%;
  46. margin-top: 20rpx;
  47. background-color: #fff;
  48. box-shadow: 0px 0px 3px 0px #000;
  49. border-radius: 12rpx;
  50. .experience-box-img {
  51. width: 94%;
  52. margin-left: 3%;
  53. padding-top: 20rpx;
  54. }
  55. .experience-box-font {
  56. width: 94%;
  57. margin-left: 3%;
  58. margin-top: 30rpx;
  59. .experience-box-button {
  60. display: flex;
  61. justify-content: flex-end;
  62. align-items: center;
  63. font-size: 28rpx;
  64. color: #fff;
  65. padding-bottom: 40rpx;
  66. view {
  67. padding: 10rpx 40rpx;
  68. border-radius: 40rpx;
  69. background-color: #C83741;
  70. }
  71. }
  72. }
  73. }
  74. }
  75. </style>