businessHours.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="container">
  3. <view style="height:25rpx;"></view>
  4. <view class="page-block">
  5. <view class="content">
  6. <view class="cell flex flex-y-center box-pack-between">
  7. <view class="title-block">
  8. <text>营业状态</text>
  9. </view>
  10. <view class="switch-btn flex flex-y-center">
  11. <view class="name">{{type == 1 ?'营业中':'休息'}}</view>
  12. <switch :checked="type == 1" @change="onTypeChange" color="#247EFF" style="zoom:0.7" />
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="page-block">
  18. <view class="page-title-block">
  19. <view class="title">营业信息</view>
  20. </view>
  21. <view class="content">
  22. <view class="cell flex flex-y-center arr-r">
  23. <view class="title-block">
  24. <text>营业时间</text>
  25. </view>
  26. <view class="desc">
  27. <view class="input-box">08:00~12:00</view>
  28. </view>
  29. </view>
  30. <view class="add-btn flex flex-center">
  31. 添加营业时间段
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. type: 0
  42. }
  43. },
  44. methods: {
  45. onTypeChange(e) {
  46. this.type = e.detail.value
  47. },
  48. }
  49. }
  50. </script>
  51. <style>
  52. @import url("../static/css/common.css");
  53. page {
  54. background-color: #f4f5f7;
  55. }
  56. .switch-btn .name {
  57. font-size: 28rpx;
  58. color: #247EFF;
  59. padding-right: 20rpx;
  60. }
  61. .add-btn {
  62. height: 100rpx;
  63. font-size: 28rpx;
  64. color: #333;
  65. }
  66. .add-btn::before {
  67. content: "+";
  68. display: block;
  69. width: 32rpx;
  70. height: 32rpx;
  71. background-color: #247EFF;
  72. color: #fff;
  73. border-radius: 50%;
  74. margin-right: 8rpx;
  75. text-align: center;
  76. line-height: 32rpx;
  77. }
  78. /* */
  79. .picker-view {
  80. width: 750rpx;
  81. height: 600rpx;
  82. margin-top: 20rpx;
  83. }
  84. .picker-view .item {
  85. height: 50px;
  86. align-items: center;
  87. justify-content: center;
  88. text-align: center;
  89. }
  90. </style>