no message

app.json

 {
   "pages":[
+    "pages/add_record/index",
     "pages/home/teacher/index",
     "pages/home/reviewer/index",
-    "pages/home/parents/index",
-    "pages/add_record/index"
+    "pages/home/parents/index"
+    
 
   ],
   "window":{

app.wxss

@@ -52,3 +52,10 @@
 .kg-btn-no-border::after {
   border: none;
 }
+
+.kg-section-header {
+  display: flex;
+  flex-direction: row;
+  height: 30px;
+  align-items: center;
+}

pages/add_record/index.js

 // pages/add_record/index.js
 Page({
+  
 
   /**
    * 页面的初始数据
    */
   data: {
+    radioValues: [
+      { 'value': '饮食', 'selected': true },
+      { 'value': '睡觉', 'selected': false },
+      { 'value': 'WC', 'selected': false },
+    ],
+    clazz: [],
+    controlIndex:0,
 
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
-  },
+  indexChanged: function(e){
+		// 点中的是组中第个元素
+		var index = e.target.dataset.index;
+    
+		// 读取原始的数组
+		var radioValues = this.data.radioValues;
+		for (var i = 0; i < radioValues.length; i++){
+			// 全部改为非选中
+			radioValues[i].selected = false;
+			// 当前那个改为选中
+			radioValues[index].selected = true;
+		}
+
+    // console.log(radioValues)
+		// 写回数据
+		this.setData({
+			radioValues: radioValues,
+      controlIndex: index
+		});
+		// clazz状态
+		this.clazzStatus();
+	},
+	onLoad: function(){
+		// onLoad 比 onReady 更早调用，后者为选中时屏幕闪动一下
+		this.clazzStatus();
+	},
+	clazzStatus: function(){
+		/* 此方法分别被加载时调用，点击某段时调用 */
+		// class样式表如"selected last","selected"
+		var clazz = [];
+		// 参照数据源
+		var radioValues = this.data.radioValues;
+		for (var i = 0; i < radioValues.length; i++){
+			// 默认为空串，即普通按钮
+			var cls = '';
+			// 高亮，追回selected
+			if (radioValues[i].selected) {
+				cls += 'selected ';
+			}
+			// 最后个元素, 追加last
+			if (i == radioValues.length - 1) {
+				cls += 'last ';
+			}
+			//去掉尾部空格
+			cls = cls.replace(/(\s*$)/g,'');
+			clazz[i] = cls;
+		}
+
+    // console.log(clazz)
+		// 写回数据
+		this.setData({
+			clazz: clazz
+		});
+	},
 
   /**
    * 生命周期函数--监听页面初次渲染完成

pages/add_record/index.wxml

 <!--pages/add_record/index.wxml-->
-<text>pages/add_record/index.wxml</text>
+<view class='kg-separater ' style='height:1px;'></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 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>
+    </view>
+  </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

-/* pages/add_record/index.wxss */
\ No newline at end of file
+/* pages/add_record/index.wxss */
+
+/*LXSegmentedControl容器*/
+.segmentedControl {
+	/*水平居中*/
+	margin: 10px auto;
+	/*边框为2px 主色调为蓝*/
+	border: 1px solid #f9aa76;
+	/*圆角6px*/
+	border-radius: 6px;
+	/*控件宽度*/
+	width: calc(100vw - 20px);
+	/*控件高度*/
+	height: 30px;
+}
+
+/*普通文本*/
+.segmentedControl text {
+	/*水平排列*/
+	float: left;
+	/*宽度为控件宽度的1/3 再减去2px的右边框*/
+	width: calc((100vw - 20px) / 3 - 1px);
+	/*字体大小*/
+	font-size: 14px;
+	/*主色调*/
+	color: #f9aa76;
+	/*行高，与控件高度相等*/
+	line-height: 30px;
+	/*文本水平居中*/
+	text-align: center;
+	/*右边距*/
+	border-right: 1px solid #f9aa76;
+}
+
+/*选中状态文本*/
+.segmentedControl text.selected {
+	/*同主色调*/
+	background-color: #f9aa76;
+	/*前景色为白色*/
+	color: white;
+}
+
+/*最后一个分组按钮*/
+.segmentedControl text.last {
+	/*不必右边框*/
+	border-right: 0;
+	/*高度也不必减少2px，就是控件高度的1/3*/
+	width: calc((100vw - 20px) / 3);
+}
\ No newline at end of file

pages/home/teacher/index.wxml

@@ -14,7 +14,7 @@
 <view class='kg-separater'></view>
 <!-- 滑动区域 -->
 <scroll-view style='height:calc(100vh - 100px - 80px)' scroll-y='true'>
-  <view class='home-date-header'>
+  <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>
@@ -28,8 +28,8 @@
       <!-- 图片 -->
        <view class='home-student-picture-item'>
         <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'></image>
-        <image src='/src/img/student_picture.png' class='home-student-picture'></image>
+        <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 class='home-student-name' style='justify-content: space-between;margin:0px 10px;'>

pages/home/teacher/index.wxss

@@ -48,13 +48,6 @@
   margin-left: 4px;
 }
 
-.home-date-header {
-  display: flex;
-  flex-direction: row;
-  height: 30px;
-  align-items: center;
-}
-
 .home-student-info {
   display: flex;
   flex-direction: column;

template/operate_btn/index.wxml

 <!--template/operate_btn/index.wxml-->
 
 <template name="operate_btn">
-  <view style='height:1px;width:100vw;background-color:#f2f6f9'></view>
+  <view class='kg-separater ' style='height:1px;'></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'>
+
 </template>
\ No newline at end of file