planDetail.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <view class="kp-details">
  3. <!-- 考评项 -->
  4. <view class="kp-tabsBox">
  5. <view class="kp-tabs">
  6. <view class="active">
  7. <view>正常营业</view>
  8. <view>(4项)</view>
  9. </view>
  10. <view>
  11. <view>正常营业</view>
  12. <view>(4项)</view>
  13. </view>
  14. <view>
  15. <view>正常营业</view>
  16. <view>(4项)</view>
  17. </view>
  18. </view>
  19. <view class="kp-items">
  20. <view>正常营业</view>
  21. <view>正常关门</view>
  22. <view>卫生整洁</view>
  23. </view>
  24. </view>
  25. <!-- 选择按钮 -->
  26. <view class="kp-ok">
  27. 确认选择该考评方案
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. </script>
  33. <style lang="scss">
  34. page{
  35. height: 100%;
  36. background: #F8F8F8;
  37. }
  38. .kp-details{
  39. height: 100%;
  40. display: flex;
  41. flex-direction: column;
  42. .kp-tabsBox{
  43. flex-grow: 1;
  44. overflow: auto;
  45. display: flex;
  46. .kp-tabs{
  47. width: 30%;
  48. text-align: center;
  49. margin: 15upx;
  50. > view{
  51. padding: 15upx;
  52. background: #fff;
  53. border-radius: 6upx;
  54. box-shadow: 1px 2px 3px #eee;
  55. margin-bottom: 15upx;
  56. > view{
  57. &:last-child{
  58. color: #666;
  59. }
  60. }
  61. }
  62. > view.active{
  63. background: #00aaff;
  64. color: #fff;
  65. > view{
  66. &:last-child{
  67. color: #fff;
  68. }
  69. }
  70. }
  71. }
  72. .kp-items{
  73. width: 70%;
  74. margin: 15upx 15upx 15upx 6upx;
  75. > view{
  76. padding: 20upx;
  77. background: #fff;
  78. border-bottom: 5px solid #F8F8F8;
  79. }
  80. }
  81. }
  82. .kp-ok{
  83. text-align: center;
  84. padding: 26upx;
  85. background: #55aaff;
  86. color: #fff;
  87. font-size: 18px;
  88. }
  89. }
  90. </style>