1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <template>
- <view class="kp-details">
- <!-- 考评项 -->
- <view class="kp-tabsBox">
- <view class="kp-tabs">
- <view class="active">
- <view>正常营业</view>
- <view>(4项)</view>
- </view>
- <view>
- <view>正常营业</view>
- <view>(4项)</view>
- </view>
- <view>
- <view>正常营业</view>
- <view>(4项)</view>
- </view>
- </view>
- <view class="kp-items">
- <view>正常营业</view>
- <view>正常关门</view>
- <view>卫生整洁</view>
- </view>
- </view>
- <!-- 选择按钮 -->
- <view class="kp-ok">
- 确认选择该考评方案
- </view>
- </view>
- </template>
- <script>
- </script>
- <style lang="scss">
- page{
- height: 100%;
- background: #F8F8F8;
- }
- .kp-details{
- height: 100%;
- display: flex;
- flex-direction: column;
- .kp-tabsBox{
- flex-grow: 1;
- overflow: auto;
- display: flex;
- .kp-tabs{
- width: 30%;
- text-align: center;
- margin: 15upx;
- > view{
- padding: 15upx;
- background: #fff;
- border-radius: 6upx;
- box-shadow: 1px 2px 3px #eee;
- margin-bottom: 15upx;
- > view{
- &:last-child{
- color: #666;
- }
- }
- }
- > view.active{
- background: #00aaff;
- color: #fff;
- > view{
- &:last-child{
- color: #fff;
- }
- }
- }
- }
- .kp-items{
- width: 70%;
- margin: 15upx 15upx 15upx 6upx;
- > view{
- padding: 20upx;
- background: #fff;
- border-bottom: 5px solid #F8F8F8;
- }
- }
- }
- .kp-ok{
- text-align: center;
- padding: 26upx;
- background: #55aaff;
- color: #fff;
- font-size: 18px;
- }
- }
- </style>
|