Commit 826e817b authored by 张杰's avatar 张杰

饮食分类部分页面

parent aa2641a8
{
"editor.fontSize": 16
}
\ No newline at end of file
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
"pages":[ "pages":[
"pages/add_record/index", "pages/add_record/index",
"pages/home/teacher/index", "pages/home/teacher/index",
"pages/home/reviewer/index", "pages/home/reviewer/index",
"pages/home/parents/index" "pages/home/parents/index"
], ],
"window":{ "window":{
"backgroundTextStyle":"light", "backgroundTextStyle":"light",
......
...@@ -6,47 +6,47 @@ ...@@ -6,47 +6,47 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 200rpx 0; padding: 200rrpx 0;
box-sizing: border-box; box-sizing: border-box;
} }
.kg-text-title { .kg-text-title {
font-size: 17px; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
.kg-text-normal-gray { .kg-text-normal-gray {
font-size: 15px; font-size: 30rpx;
color: rgb(78, 78, 78); color: rgb(78, 78, 78);
} }
.kg-text-normal-dark { .kg-text-normal-dark {
font-size: 16px; font-size: 32rpx;
color: black; color: black;
} }
.kg-separater { .kg-separater {
background-color: #f2f6f9; background-color: #f2f6f9;
height: 10px; height: 20rpx;
width: 100vw; width: 100vw;
} }
.kg-operate-btn-bg { .kg-operate-btn-bg {
position: fixed; position: fixed;
bottom: 0px; bottom: 0rpx;
/* background-color: red; */ /* background-color: red; */
height: 80px; height: 140rpx;
width: 100vh; width: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.kg-operate-btn { .kg-operate-btn {
width: calc(100vw - 80px); width: calc(100vw - 160rpx);
margin-left: 40px; margin-left: 80rpx;
background-color: #f9aa76; background-color: #f9aa76;
color: white; color: white;
font-size: 18px; font-size: 36rpx;
} }
.kg-btn-no-border::after { .kg-btn-no-border::after {
...@@ -56,6 +56,6 @@ ...@@ -56,6 +56,6 @@
.kg-section-header { .kg-section-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 30px; height: 60rpx;
align-items: center; align-items: center;
} }
{
"compilerOptions": {
},
"exclude": [
]
}
\ No newline at end of file
This diff is collapsed.
...@@ -13,9 +13,18 @@ Page({ ...@@ -13,9 +13,18 @@ Page({
], ],
clazz: [], clazz: [],
controlIndex:0, controlIndex:0,
categorys: ['早餐', '午餐', '晚餐', '上午加餐', '下午加餐', '喝水', '牛奶'],
selectIndex:0,
}, },
tapCategory: function(e) {
this.setData({
selectIndex: e.target.dataset.index,
})
},
indexChanged: function(e){ indexChanged: function(e){
// 点中的是组中第个元素 // 点中的是组中第个元素
var index = e.target.dataset.index; var index = e.target.dataset.index;
......
<!--pages/add_record/index.wxml--> <!-- pages/add_record/index.wxml -->
<view class='kg-separater ' style='height:1px;'></view> <import src='/template/operate_btn/index.wxml'></import>
<view class='kg-separater ' style='height:1rpx;'></view>
<view class="segmentedControl"> <view class="segmentedControl">
<!-- 循环遍历 --> <!-- 循环遍历 -->
<block wx:for="{{radioValues}}"> <block wx:for="{{radioValues}}">
<text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text> <text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
</block> </block>
</view> </view>
<view class='kg-separater '></view> <view class='kg-separater'></view>
<view hidden='{{controlIndex != 0}}'> <view hidden='{{controlIndex != 0}}'>
<!-- 滑动区域 --> <!-- 滑动区域 -->
<scroll-view style='height:calc(100vh - 100px - 80px)' scroll-y='true'> <scroll-view style='height:calc(100vh - 100rpx - 80rpx)' scroll-y='true'>
<view class='kg-section-header'> <template is="section_header" data="{{title:'分类'}}"></template>
<view style='width:4px; height:15px;background-color:#f9aa76; margin-left:10px'></view> <view class="category">
<view class='kg-text-normal-gray' style='margin-left:8px'>分类</view> <view wx:for="{{categorys}}">
<view class="eat_category_btn {{selectIndex == index ? 'selected' : ''}}" bindtap='tapCategory' data-index='{{index}}'>{{item}}</view>
</view> </view>
</view>
<template is="section_header" data="{{title:'今日拍照'}}"></template>
</scroll-view> </scroll-view>
</view> </view>
<view hidden='{{controlIndex != 1}}'>睡觉</view> <view hidden='{{controlIndex != 1}}'>睡觉</view>
<view hidden='{{controlIndex != 2}}'>WC</view> <view hidden='{{controlIndex != 2}}'>WC</view>
\ No newline at end of file
...@@ -47,3 +47,31 @@ ...@@ -47,3 +47,31 @@
/*高度也不必减少2px,就是控件高度的1/3*/ /*高度也不必减少2px,就是控件高度的1/3*/
width: calc((100vw - 20px) / 3); width: calc((100vw - 20px) / 3);
} }
.category {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 20rpx 20rpx 0rpx;
margin-right: -40rpx;
justify-content: flex-start;
}
.eat_category_btn {
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid rgb(190, 190, 190);
border-radius: 6rpx;
width: calc((100vw - 40rpx - 92rpx) / 3);
margin-right: 40rpx;
margin-bottom: 20rpx;
height: 70rpx;
line-height: 70rpx;
color: rgb(190, 190, 190);
}
.eat_category_btn.selected {
border-color: #f9aa76;
color: #f9aa76;
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<image class='home-header-user-icon' src='{{userIcon}}'></image> <image class='home-header-user-icon' src='{{userIcon}}'></image>
<view class='home-header-user-info'> <view class='home-header-user-info'>
<view class='kg-text-title'>向日葵小班-张老师</view> <view class='kg-text-title'>向日葵小班-张老师</view>
<view class='kg-text-normal-grayl'>共19人</view> <view class='kg-text-normal-gray'>共19人</view>
</view> </view>
<view class='home-header-roll-call'> <view class='home-header-roll-call'>
<image class='roll-call-image' src='{{signIcon}}'></image> <image class='roll-call-image' src='{{signIcon}}'></image>
...@@ -13,11 +13,8 @@ ...@@ -13,11 +13,8 @@
</view> </view>
<view class='kg-separater'></view> <view class='kg-separater'></view>
<!-- 滑动区域 --> <!-- 滑动区域 -->
<scroll-view style='height:calc(100vh - 100px - 80px)' scroll-y='true'> <scroll-view style='height:calc(100vh - 190rpx - 140rpx)' scroll-y='true'>
<view class='kg-section-header'> <template is="section_header" data="{{title:'2018-09-12'}}"></template>
<view style='width:4px; height:15px;background-color:#f9aa76; margin-left:10px'></view>
<view class='kg-text-normal-gray' style='margin-left:8px'>2018-09-12</view>
</view>
<view wx:for="{{[1,2,3,4,5,6]}}"> <view wx:for="{{[1,2,3,4,5,6]}}">
<view class='home-student-info'> <view class='home-student-info'>
<!-- 名字 --> <!-- 名字 -->
...@@ -32,7 +29,7 @@ ...@@ -32,7 +29,7 @@
<image src='/src/img/student_picture.png' class='home-student-picture' mode='aspectFill'></image> <image src='/src/img/student_picture.png' class='home-student-picture' mode='aspectFill'></image>
</view> </view>
<!-- 行为 --> <!-- 行为 -->
<view class='home-student-name' style='justify-content: space-between;margin:0px 10px;'> <view class='home-student-name' style='justify-content: space-between;margin:0rpx 10rpx;'>
<view wx:for="{{[1,2,3]}}"> <view wx:for="{{[1,2,3]}}">
<view class='home-student-name'> <view class='home-student-name'>
<image src='/src/img/eat.png' class='home-student-behavior' mode='aspectFit'></image> <image src='/src/img/eat.png' class='home-student-behavior' mode='aspectFit'></image>
......
/* pages/home/teacher/index.wxss */ /* pages/home/teacher/index.wxss */
.home-header { .home-header {
height: 90px; height: 180rpx;
/* background-color: rgb(182, 179, 179); */ /* background-color: rgb(182, 179, 179); */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: 16px; margin-left: 32rpx;
margin-right: 16px; margin-right: 32rpx;
justify-content: space-between; justify-content: space-between;
} }
.home-header-user-icon { .home-header-user-icon {
height: 60px; height: 120rpx;
width: 60px; width: 120rpx;
border-radius: 30px; border-radius: 60rpx;
background-color: blueviolet; background-color: blueviolet;
} }
.home-header-user-info { .home-header-user-info {
height: 60px; height: 120rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
/* background-color: burlywood; */ /* background-color: burlywood; */
flex-grow: 1; flex-grow: 1;
margin-left: 8px; margin-left: 16rpx;
} }
.home-header-roll-call { .home-header-roll-call {
width: 60px; width: 120rpx;
height: 40px; height: 80rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: 8px; margin-left: 16rpx;
} }
.roll-call-image { .roll-call-image {
height: 20px; height: 40rpx;
width: 20px; width: 40rpx;
} }
.roll-call-title { .roll-call-title {
font-size: 16px; font-size: 32rpx;
color: #f9aa76; color: #f9aa76;
margin-left: 4px; margin-left: 8rpx;
} }
.home-student-info { .home-student-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px; margin-left: 20rpx;
margin-right: 10px; margin-right: 20rpx;
margin-top: 10px; margin-top: 20rpx;
margin-bottom: 8px; margin-bottom: 16rpx;
border-radius: 3px; border-radius: 6rpx;
box-shadow: 0px 0px 4px 4px #f2f6f9; box-shadow: 0rpx 0rpx 8rpx 8rpx #f2f6f9;
padding: 6px 14px; padding: 12rpx 28rpx;
} }
.home-student-name { .home-student-name {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 40px; height: 80rpx;
align-items: center; align-items: center;
} }
.home-student-sex { .home-student-sex {
height: 20px; height: 40rpx;
width: 15px; width: 30rpx;
margin-left: 4px; margin-left: 8rpx;
} }
.home-student-behavior { .home-student-behavior {
width: 30px; width: 60rpx;
height: 24px; height: 48rpx;
} }
.home-student-picture-item { .home-student-picture-item {
...@@ -86,8 +86,8 @@ ...@@ -86,8 +86,8 @@
} }
.home-student-picture { .home-student-picture {
width:calc(100vw/4.5); width:calc(100vw / 4.5);
height:calc(100vw/4.5); height:calc(100vw / 4.5);
margin-left:10px margin-left:20rpx
} }
\ No newline at end of file
<!--template/operate_btn/index.wxml--> <!--template/operate_btn/index.wxml-->
<template name="operate_btn"> <template name="operate_btn">
<view class='kg-separater ' style='height:1px;'></view> <view class='kg-separater ' style='height:4rpx;'></view>
<view class='kg-operate-btn-bg'> <view class='kg-operate-btn-bg'>
<button class='kg-operate-btn kg-btn-no-border' bindtap='operateTap'>记录一笔</button> <button class='kg-operate-btn kg-btn-no-border' bindtap='operateTap'>记录一笔</button>
</view> </view>
</template> </template>
<!--通用的分区标题-->
<template name='section_header'> <template name='section_header'>
<view class='kg-section-header'>
<view style='width:10rpx; height:30rpx;background-color:#f9aa76; margin-left:20rpx'></view>
<view class='kg-text-normal-gray' style='margin-left:16rpx'>{{title}}</view>
</view>
</template> </template>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment