myCollect.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view>
  3. <van-tabs :active="active" bind:change="onChange">
  4. <van-tab :name="1" title="酒店">
  5. <view>
  6. <van-cell title="酒店" title-class ="titlepadding">
  7. <template slot="icon">
  8. <image src="" style="width: 50upx;height: 50upx;background-color: #007AFF;border-radius: 50%;"></image>
  9. </template>
  10. </van-cell>
  11. <view class="hotelcontent">
  12. <view class="contentleft">
  13. <image style="width: 100%;height: 100%;"></image>
  14. </view>
  15. <view class="contentitle">
  16. <view>乐成国际大酒店</view>
  17. <view class="contentip">舒适宽敞</view>
  18. </view>
  19. </view>
  20. </view>
  21. </van-tab>
  22. <van-tab :name="2" title="商品">
  23. <view>
  24. <van-cell title="酒店" title-class ="titlepadding">
  25. <template slot="icon">
  26. <image src="" style="width: 50upx;height: 50upx;background-color: #007AFF;border-radius: 50%;"></image>
  27. </template>
  28. </van-cell>
  29. <view style="border-bottom: 20upx solid #F5F5F5;">
  30. <van-card
  31. title-class="priceClass"
  32. desc-class="desclass"
  33. price-class ="priceClass"
  34. price="10.00"
  35. desc="描述信息"
  36. title="商品标题"
  37. thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
  38. >
  39. </van-card>
  40. </view>
  41. </view>
  42. </van-tab>
  43. </van-tabs>
  44. </view>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. active: 1
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss">
  56. .titlepadding {
  57. padding-left: 10upx;
  58. }
  59. .hotelcontent {
  60. display: flex;
  61. flex-direction: row;
  62. padding: 18upx 32upx;
  63. border-bottom: 20upx solid #F5F5F5;
  64. .contentleft {
  65. width: 200upx;
  66. height: 180upx;
  67. background-color: red;
  68. }
  69. .contentitle {
  70. padding-left: 35upx;
  71. .contentip {
  72. float: left;
  73. color: #909399;
  74. padding-top: 15upx;
  75. font-size: 24upx;
  76. }
  77. }
  78. }
  79. .van-card {
  80. background-color: #fff!important;
  81. }
  82. .priceClass {
  83. color: #303133!important;
  84. font-size: 28upx!important;
  85. font-weight: normal!important;
  86. }
  87. .desclass {
  88. color: #909399!important;
  89. font-size: 24upx;
  90. }
  91. </style>