123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <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 v-for="item in items" :key="item.id" class="checkbox-item">
- {{item.name}}
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- items: [
- {name:"正常营业"},
- {name:"干净整洁"},
- {name:"晨会正常"},
- ]
- }
- },
- methods:{
- }
- }
- </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;
- }
- }
- .checkbox-item{
- width:100%;
- padding: 15upx;
- border-radius: 6upx;
- box-shadow: 1px 2px 3px #eee;
- background: #fff;
- display: flex;
- justify-content: space-between;
- margin-bottom: 15upx;
- }
- }
- </style>
|