饮食分类部分页面

.wing/settings.json

+{
+    "editor.fontSize": 16
+}
\ No newline at end of file

app.json

@@ -2,10 +2,10 @@
   "pages":[
     "pages/add_record/index",
     "pages/home/teacher/index",
+    
     "pages/home/reviewer/index",
     "pages/home/parents/index"
     
-
   ],
   "window":{
     "backgroundTextStyle":"light",

app.wxss

@@ -6,47 +6,47 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 200rpx 0;
+  padding: 200rrpx 0;
   box-sizing: border-box;
 }
 
 .kg-text-title {
-  font-size: 17px;
+  font-size: 32rpx;
   font-weight: bold;
 }
 
 .kg-text-normal-gray {
-  font-size: 15px;
+  font-size: 30rpx;
   color: rgb(78, 78, 78);
 }
 
 .kg-text-normal-dark {
-  font-size: 16px;
+  font-size: 32rpx;
   color: black;
 }
 
 .kg-separater {
   background-color: #f2f6f9;
-  height: 10px;
+  height: 20rpx;
   width: 100vw;
 }
 
 .kg-operate-btn-bg {
   position: fixed;
-  bottom: 0px;
+  bottom: 0rpx;
   /* background-color: red; */
-  height: 80px;
+  height: 140rpx;
   width: 100vh;
   display: flex;
   align-items: center;
 }
 
 .kg-operate-btn {
-  width: calc(100vw - 80px);
-  margin-left: 40px;
+  width: calc(100vw - 160rpx);
+  margin-left: 80rpx;
   background-color: #f9aa76;
   color: white;
-  font-size: 18px;
+  font-size: 36rpx;
 }
 
 .kg-btn-no-border::after {
@@ -56,6 +56,6 @@
 .kg-section-header {
   display: flex;
   flex-direction: row;
-  height: 30px;
+  height: 60rpx;
   align-items: center;
 }

jsconfig.json

+{
+   "compilerOptions": {
+
+   },
+   "exclude": [
+   ]
+}
\ No newline at end of file

pages/add_record/index.js

@@ -13,9 +13,18 @@ Page({
     ],
     clazz: [],
     controlIndex:0,
+    categorys: ['早餐', '午餐', '晚餐', '上午加餐', '下午加餐', '喝水', '牛奶'],
+    selectIndex:0,
 
   },
 
+  tapCategory: function(e) {
+
+    this.setData({
+      selectIndex: e.target.dataset.index,
+    })
+  },
+
   indexChanged: function(e){
 		// 点中的是组中第个元素
 		var index = e.target.dataset.index;

pages/add_record/index.wxml

-<!--pages/add_record/index.wxml-->
-<view class='kg-separater ' style='height:1px;'></view>
+<!-- pages/add_record/index.wxml -->
+<import src='/template/operate_btn/index.wxml'></import>
+<view class='kg-separater ' style='height:1rpx;'></view>
 <view class="segmentedControl">
   <!-- 循环遍历 -->
   <block wx:for="{{radioValues}}">
     <text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
   </block>
 </view>
-<view class='kg-separater '></view>
+<view class='kg-separater'></view>
 <view hidden='{{controlIndex != 0}}'>
   <!-- 滑动区域 -->
-  <scroll-view style='height:calc(100vh - 100px - 80px)' scroll-y='true'>
-    <view class='kg-section-header'>
-      <view style='width:4px; height:15px;background-color:#f9aa76; margin-left:10px'></view>
-      <view class='kg-text-normal-gray' style='margin-left:8px'>分类</view>
+  <scroll-view style='height:calc(100vh - 100rpx - 80rpx)' scroll-y='true'>
+    <template is="section_header" data="{{title:'分类'}}"></template>
+    <view class="category">
+      <view wx:for="{{categorys}}">
+        <view class="eat_category_btn {{selectIndex == index ? 'selected' : ''}}" bindtap='tapCategory' data-index='{{index}}'>{{item}}</view>
+      </view>
     </view>
+    <template is="section_header" data="{{title:'今日拍照'}}"></template>
   </scroll-view>
-
 </view>
 <view hidden='{{controlIndex != 1}}'>睡觉</view>
 <view hidden='{{controlIndex != 2}}'>WC</view>
\ No newline at end of file

pages/add_record/index.wxss

@@ -46,4 +46,32 @@
 	border-right: 0;
 	/*高度也不必减少2px，就是控件高度的1/3*/
 	width: calc((100vw - 20px) / 3);
-}
\ No newline at end of file
+}
+
+.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;
+}

pages/home/teacher/index.wxml

@@ -4,7 +4,7 @@
   <image class='home-header-user-icon' src='{{userIcon}}'></image>
   <view class='home-header-user-info'>
     <view class='kg-text-title'>向日葵小班-张老师</view>
-    <view class='kg-text-normal-grayl'>共19人</view>
+    <view class='kg-text-normal-gray'>共19人</view>
   </view>
   <view class='home-header-roll-call'>
     <image class='roll-call-image' src='{{signIcon}}'></image>
@@ -13,11 +13,8 @@
 </view>
 <view class='kg-separater'></view>
 <!-- 滑动区域 -->
-<scroll-view style='height:calc(100vh - 100px - 80px)' scroll-y='true'>
-  <view class='kg-section-header'>
-    <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>
+<scroll-view style='height:calc(100vh - 190rpx - 140rpx)' scroll-y='true'>
+  <template is="section_header" data="{{title:'2018-09-12'}}"></template>
   <view wx:for="{{[1,2,3,4,5,6]}}">
     <view class='home-student-info'>
       <!-- 名字 -->
@@ -32,7 +29,7 @@
         <image src='/src/img/student_picture.png' class='home-student-picture' mode='aspectFill'></image>
       </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 class='home-student-name'>
             <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 {
-  height: 90px;
+  height: 180rpx;
   /* background-color: rgb(182, 179, 179); */
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-left: 16px;
-  margin-right: 16px;
+  margin-left: 32rpx;
+  margin-right: 32rpx;
   justify-content: space-between;
 }
 
 .home-header-user-icon {
-  height: 60px;
-  width: 60px;
-  border-radius: 30px;
+  height: 120rpx;
+  width: 120rpx;
+  border-radius: 60rpx;
   background-color: blueviolet;
 }
 
 .home-header-user-info {
-  height: 60px;
+  height: 120rpx;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* background-color: burlywood; */
   flex-grow: 1;
-  margin-left: 8px;
+  margin-left: 16rpx;
 }
 
 .home-header-roll-call {
-  width: 60px;
-  height: 40px;
+  width: 120rpx;
+  height: 80rpx;
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-left: 8px;
+  margin-left: 16rpx;
 }
 
 .roll-call-image {
-  height: 20px;
-  width: 20px;
+  height: 40rpx;
+  width: 40rpx;
 }
 
 .roll-call-title {
-  font-size: 16px;
+  font-size: 32rpx;
   color: #f9aa76;
-  margin-left: 4px;
+  margin-left: 8rpx;
 }
 
 .home-student-info {
   display: flex;
   flex-direction: column;
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-top: 10px;
-  margin-bottom: 8px;
-  border-radius: 3px;
-  box-shadow: 0px 0px 4px 4px #f2f6f9;
-  padding: 6px 14px;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+  margin-top: 20rpx;
+  margin-bottom: 16rpx;
+  border-radius: 6rpx;
+  box-shadow: 0rpx 0rpx 8rpx 8rpx #f2f6f9;
+  padding: 12rpx 28rpx;
 }
 
 .home-student-name {
   display: flex;
   flex-direction: row;
-  height: 40px;
+  height: 80rpx;
   align-items: center;
 }
 
 .home-student-sex {
-  height: 20px;
-  width: 15px;
-  margin-left: 4px;
+  height: 40rpx;
+  width: 30rpx;
+  margin-left: 8rpx;
 }
 
 .home-student-behavior {
-  width: 30px;
-  height: 24px;
+  width: 60rpx;
+  height: 48rpx;
 }
 
 .home-student-picture-item {
@@ -86,8 +86,8 @@
 }
 
 .home-student-picture {
-  width:calc(100vw/4.5); 
-  height:calc(100vw/4.5); 
-  margin-left:10px
+  width:calc(100vw / 4.5); 
+  height:calc(100vw / 4.5); 
+  margin-left:20rpx
 
 }
\ No newline at end of file

template/operate_btn/index.wxml

 <!--template/operate_btn/index.wxml-->
 
 <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'>
     <button class='kg-operate-btn kg-btn-no-border' bindtap='operateTap'>记录一笔</button>
   </view>
 </template>
 
+<!--通用的分区标题-->
 <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>
\ No newline at end of file