课堂观察

src/plugins/vant.js

@@ -26,7 +26,9 @@ import {
   Grid,
   GridItem,
   DropdownMenu,
-  DropdownItem
+  DropdownItem,
+  ActionSheet,
+  Popover
 } from 'vant'
 Vue.use(Button)
   .use(Cell)
@@ -54,3 +56,5 @@ Vue.use(Button)
   .use(GridItem)
   .use(DropdownMenu)
   .use(DropdownItem)
+  .use(ActionSheet)
+  .use(Popover)

src/router/router.config.js

@@ -45,9 +45,31 @@ export const constantRouterMap = [
         name: 'eva',
         component: () => import('@/views/eva/index'),
         meta: { title: '学生评价', keepAlive: false }
+      },
+      {
+        path: 'classObserve',
+        name: 'classObserve',
+        component: () => import('@/views/classObserve/index'),
+        meta: { title: '课堂观察', keepAlive: false }
       }
     ]
   },
+  {
+    path: '/aiChat',
+    component: () => import('@/views/classObserve/aiChat'),
+    meta: {
+      title: 'AI对话',
+      keepAlive: false
+    }
+  },
+  {
+    path: '/outcome',
+    component: () => import('@/views/classObserve/outcome'),
+    meta: {
+      title: '分析结果',
+      keepAlive: false
+    }
+  },
   {
     path: '/courseDetail',
     component: () => import('@/views/courseDetail/index'),

src/store/modules/user.js

@@ -76,10 +76,10 @@ const actions = {
           resolve(_user.userid)
         })
         .catch(error => {
-          // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
-          // commit('SET_ID', _user.userid)
-          // setToken(_user.userid)
-          // resolve(_user.userid)
+          var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
+          commit('SET_ID', _user.userid)
+          setToken(_user.userid)
+          resolve(_user.userid)
           reject(error)
         })
     })

src/views/classObserve/addTel.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="stencilled">
+    <bar @cutPage="cutPage" :tit="'添加模块'" :backPage="0"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+    <div class="selectInp">
+      <van-search shape="round" v-model="selectValue" placeholder="搜索表单" />
+      <span>搜索</span>
+    </div>
+    <div class="sortList">
+      <div>通用</div>
+      <div>学科</div>
+      <div>扩展</div>
+    </div>
+    <div class="stencilList">
+      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
+        <addStencil></addStencil>
+      </div>
+    </div>
+    <!-- <div class="stencilList">
+      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
+        <addStencil></addStencil>
+      </div>
+    </div>
+    <div class="stencilList">
+      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
+        <addStencil></addStencil>
+      </div>
+    </div> -->
+    <div class="botBtn">
+      <div class="btn">
+        添加()
+      </div>
+    </div>
+
+    <div style="height: 50px;width: 100%;"></div>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+import addStencil from './components/addStencil'
+
+export default {
+  components: {
+    bar,
+    addStencil
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      selectValue: ''
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 6)
+    },
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.actionTel {
+  height: 100% !important;
+  // height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  // padding: 10px 15px;
+  box-sizing: border-box;
+  .telCon {
+    flex: 1;
+    overflow: auto;
+    .telConCell {
+    }
+    .tit {
+      width: 100%;
+      padding: 13px 15px;
+      background-color: rgba(231, 231, 231, 1);
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 12px;
+      font-weight: 400;
+      box-sizing: border-box;
+    }
+    .list {
+      padding: 0 10px;
+    }
+    .cell {
+      padding: 15px 0px;
+      border-bottom: 0.5px solid rgba(231, 231, 231, 1);
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
+  .actionBtn {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px;
+    .btn {
+      width: 48%;
+      border-radius: 6px;
+      padding: 12px 0;
+      display: flex;
+      justify-content: center;
+      color: rgba(54, 129, 252, 1);
+      background-color: rgba(242, 243, 255, 1);
+      font-size: 16px;
+    }
+    .btn1 {
+      color: #fff;
+      background-color: rgba(54, 129, 252, 1);
+    }
+  }
+}
+.stencilled {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+/deep/.van-action-sheet {
+  height: 80% !important;
+}
+/deep/.van-action-sheet__header {
+  font-weight: 600;
+}
+.selectInp {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .van-search {
+    width: 100%;
+    .van-search__content {
+      height: 45px;
+      align-items: center;
+    }
+  }
+  span {
+    color: rgba(54, 129, 252, 1);
+    font-size: 16px;
+    font-weight: 600;
+    display: block;
+    width: 40px;
+  }
+}
+.sortList {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  border-bottom: 0.5px rgba(231, 231, 231, 1) solid;
+  div {
+    width: 33%;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  .sortImg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 0.5px rgba(231, 231, 231, 1) solid;
+  }
+}
+.stencilList {
+  flex: 1;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.botBtn {
+  height: 60px;
+  background-color: #fff;
+  width: 100%;
+  padding: 10px 25px;
+  box-sizing: border-box;
+  border-top: 0.5px #ccc solid;
+  .btn {
+    width: 100%;
+    background-color: rgba(54, 129, 252, 1);
+    color: #fff;
+    height: 40px;
+    border-radius: 5px;
+    display: flex;
+    font-size: 16px;
+    // font-weight: 600;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.actionCon {
+  height: 100% !important;
+  // height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  .sheetTit {
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 10px;
+  }
+  .claList {
+    flex: 1;
+    overflow: auto;
+    .ListBlc {
+      width: 30%;
+      height: 35px;
+      border-radius: 30px;
+      display: inline-block;
+      box-sizing: border-box;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 35px;
+      background-color: rgba(243, 247, 253, 1);
+      text-align: center;
+      border: 1px rgba(242, 243, 255, 1) solid;
+    }
+  }
+  .claList > div {
+    margin-right: calc(10% / 2);
+    margin-bottom: 10px;
+  }
+  .claList :nth-child(3n) {
+    margin-right: 0;
+  }
+  .actionBtn {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      width: 48%;
+      border-radius: 6px;
+      padding: 12px 0;
+      display: flex;
+      justify-content: center;
+      color: rgba(54, 129, 252, 1);
+      background-color: rgba(242, 243, 255, 1);
+      font-size: 16px;
+    }
+    .btn1 {
+      color: #fff;
+      background-color: rgba(54, 129, 252, 1);
+    }
+  }
+}
+</style>

src/views/classObserve/aiChat.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="bindFrom">
+    <bar @cutPage="cutPage" @backPage="1" :tit="'AI对话'" :backPage="1"></bar>
+    <div style="height: 50px;width: 100%;"></div>
+    <div class="con">
+      <div class="chat1">
+        <div class="PicturePop">
+          <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
+        </div>
+        <div class="conText">
+          <div class="Txt">您好！欢迎使用课堂观察功能，您可以在此处，针对此当前课堂记录的内容开始进行AI对话。</div>
+          <img
+            style="position: absolute;right: -25px;bottom: -10px;"
+            src="../../assets/images/classObserve/copyTextZ.png"
+            alt=""
+          />
+          <div class="DateT">2002-11-12</div>
+        </div>
+      </div>
+      <div class="chat1" style="justify-content: flex-end;">
+        <div class="conText">
+          <div class="Txt">你好</div>
+          <img
+            style="position: absolute;left: -25px;bottom: -10px;"
+            src="../../assets/images/classObserve/copyTextZ.png"
+            alt=""
+          />
+          <div class="DateT" style="right: 0 !important;">2002-11-12</div>
+        </div>
+        <div class="PicturePop">
+          <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
+        </div>
+      </div>
+      <div class="langBtn">
+        <img src="../../assets/images/classObserve/langcut.png" alt="" />
+        <span>普通话</span>
+      </div>
+    </div>
+    <div class="bot">
+      <img class="pict1" src="../../assets/images/classObserve/maike.png" alt="" />
+      <el-input v-model="input" placeholder="请在此输入您想了解的内容"></el-input>
+      <img class="pict2" src="../../assets/images/classObserve/sendimg.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+import fromList from './components/fromList'
+
+export default {
+  components: {
+    bar,
+    fromList
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      selectValue: '',
+      input: ''
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bindFrom {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+}
+.con {
+  flex: 1;
+  padding: 20px 10px;
+  box-sizing: border-box;
+  position: relative;
+  background-image: linear-gradient(to bottom, #fff 0%, #ebf1fd 100%);
+  .chat1 {
+    display: flex;
+    margin-bottom: 30px;
+    .PicturePop {
+      border-radius: 50%;
+      border: 1px rgba(54, 129, 252, 1) solid;
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      flex-shrink: 0;
+      margin-right: 5px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .conText {
+      width: 80%;
+      position: relative;
+      .Txt {
+        background-color: rgba(246, 249, 255, 1);
+        padding: 10px 15px;
+        box-sizing: border-box;
+        font-size: 13px;
+        border-radius: 2px;
+      }
+      .DateT {
+        color: rgba(0, 0, 0, 0.4);
+        font-size: 10px;
+        font-weight: 400;
+        position: absolute;
+        bottom: -15px;
+        left: 0;
+      }
+    }
+  }
+  .langBtn {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background-color: #fff;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.9);
+    padding: 5px 10px;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 3px;
+    }
+  }
+}
+
+.bot {
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  align-items: center;
+  box-sizing: border-box;
+  .pict1 {
+    width: 24px;
+    height: 24px;
+    padding: 10px;
+  }
+  .pict2 {
+    width: 35px;
+    height: 35px;
+    padding: 5px;
+  }
+  .el-input__inner {
+    border-radius: 30px !important;
+  }
+}
+</style>

src/views/classObserve/bindFrom.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="bindFrom">
+    <bar @cutPage="cutPage" :tit="'绑定表单'" :backPage="0"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+    <div class="selectInp">
+      <van-search shape="round" v-model="selectValue" placeholder="搜索表单" />
+      <span>搜索</span>
+    </div>
+    <div class="con">
+      <div class="conBlock" v-for="item in 30" :key="item">
+        <fromList></fromList>
+      </div>
+    </div>
+    <div class="bot">
+      <div class="botBtn">确认绑定</div>
+    </div>
+    <!-- <div style="height: 50px;width: 100%;"></div> -->
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+import fromList from './components/fromList'
+
+export default {
+  components: {
+    bar,
+    fromList
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      selectValue: ''
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bindFrom {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 50px);
+}
+.selectInp {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  // height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .van-search {
+    width: 100%;
+    .van-search__content{
+      height: 45px;
+      align-items: center;
+    }
+  }
+  span {
+    color: rgba(54, 129, 252, 1);
+    font-size: 16px;
+    font-weight: 600;
+    display: block;
+    width: 40px;
+  }
+}
+.con {
+  flex: 1;
+  overflow: auto;
+  background-image: linear-gradient(to bottom, #fff 0%, #ebf1fd 100%);
+  .conBlock {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+  }
+}
+.bot {
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  box-sizing: border-box;
+  .botBtn {
+    background-color: rgba(54, 129, 252, 1);
+    width: 85%;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+</style>

src/views/classObserve/classInfo.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="classInfo">
+    <bar @cutPage="cutPage" :tit="'课程信息设置'" :backPage="0"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+    <div class="cellList">
+      <div class="cellB">
+        <div class="tit">课程名称</div>
+        <div>
+          <input type="text" placeholder="请输入课程名称" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">学生人数</div>
+        <div>
+          <input type="text" placeholder="请输入" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">授课老师</div>
+        <div>
+          <input type="text" placeholder="请输入" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">授课时间</div>
+        <div @click="show = true">
+          <span v-if="!changeTime">请选择</span>
+          <span v-else>{{ changeTime }}</span>
+          <van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">授课年级</div>
+        <div @click="show = true">
+          <span v-if="!currentDate">请选择</span>
+          <span v-else></span>
+          <van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">授课科目</div>
+        <div @click="show = true">
+          <span v-if="!currentDate">请选择</span>
+          <span v-else></span>
+          <van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="cellB">
+        <div class="tit">教材版本</div>
+        <div @click="show = true">
+          <span v-if="!currentDate">请选择</span>
+          <span v-else></span>
+          <van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="cellC">
+        <div class="tit">课堂图片</div>
+        <div>
+          <img src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2FRectangle+15471721807777029.png" alt="" />
+        </div>
+      </div>
+      <div class="cellC">
+        <div class="tit">课堂视频</div>
+        <div>
+          <img src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2FRectangle+15471721807777029.png" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <van-action-sheet v-model="show" title="授课时间">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="datetime"
+        title=""
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+
+export default {
+  components: {
+    bar
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      minDate: new Date(2024, 0, 1),
+      maxDate: new Date(2028, 10, 1),
+      currentDate: new Date(),
+      changeTime: '',
+      selectValue: '',
+      value: '',
+      show: false,
+      dateTime: '',
+      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
+    }
+  },
+  // computed: {
+  //   chanDate() {
+  //     return this.timeFormat(this.currentDate)
+  //   }
+  // },
+  methods: {
+    onConfirm(value) {
+      this.show = false
+      this.changeTime = this.timeFormat(value)
+      // this.currentDate = value
+    },
+
+    onCancel() {
+      this.currentDate = new Date()
+      this.show = false
+    },
+    timeFormat(time) {
+      // 时间格式化 2019-09-08
+      let year = time.getFullYear()
+      let month = time.getMonth() + 1
+      let day = time.getDate()
+      // 提取小时和分钟
+      let hours = String(time.getHours()).padStart(2, '0') // 确保小时为两位数
+      let minutes = String(time.getMinutes()).padStart(2, '0') // 确保分钟为两位数
+      return year + '年' + month + '月' + day + '日' + hours + ':' + minutes
+    },
+    cutPage() {
+      this.$emit('cutPage', 1)
+    },
+
+    formatter(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      if (type === 'month') {
+        return val + '月'
+      }
+      if (type === 'day') {
+        return val + '日'
+      }
+      if (type === 'hour') {
+        return val + '时'
+      }
+      if (type === 'minute') {
+        return val + '分'
+      }
+      return val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classInfo {
+  padding: 0 20px;
+  height: calc(100% - 50px);
+  box-sizing: border-box;
+  // margin-top: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .van-cell {
+    padding: 0;
+    padding: 15px 0;
+    border-bottom: 1px #ccc solid !important;
+  }
+  .van-cell__title {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
+.cellList{
+  flex: 1;
+  overflow: auto;
+}
+.cellB {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 15px 0;
+  justify-content: space-between;
+  border-bottom: 1px #ccc solid;
+
+  .tit {
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 16px;
+    font-weight: 500;
+  }
+  span {
+    font-size: 14px;
+    color: #757575;
+    margin-right: 2px;
+  }
+  input {
+    border: none;
+    height: 100%;
+    font-size: 14px;
+    text-align: right;
+    // resize: none;
+  }
+}
+.cellC {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 15px 0;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px #ccc solid;
+
+  .tit {
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>

src/views/classObserve/components/addStencil.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="stencilledCon">
+      <div class="top">
+        <div class="tit">OMO智慧课堂分析</div>
+        <div class="btn">
+          <img src="../../../assets/images/classObserve/Selected.png" alt="" />
+        </div>
+      </div>
+      <div class="con">
+        针对性分析科学课堂，包含通用分析模块以及科学学科分析模块，并采用5E和5EX课程设计模型对课堂进行改编。
+      </div>
+      <div class="bom">
+        <div>14人已使用</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .stencilledCon {
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+    box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
+    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 0;
+    .tit {
+      font-size: 16px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      img {
+        margin-right: 5px;
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .btnTxt {
+        background-color: rgba(240, 242, 245, 1);
+        padding: 7px 15px;
+        border-radius: 5px;
+        margin-left: 7px;
+      }
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  .con {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    padding: 10px 0;
+  }
+  .bom {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+  </style>
+  

src/views/classObserve/components/bar.vue

@@ -0,0 +1,68 @@
+<template>
+  <!-- 导航条 -->
+  <div class="bar" :style="{ background: num ? '#005CCD' : '#f9f9f9', color: num ? '#fff' : 'rgba(0, 0, 0, 0.90)' }">
+    <div v-if="!num" style="position: absolute;left: 10px;">
+      <van-icon @click="back" name="arrow-left" />
+    </div>
+   
+    <div style="font-size: 16px;">
+      {{ tit }}
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tit: {
+      type: String,
+      default: ''
+    },
+    num: {
+      type: Number,
+      default: 0
+    },
+    backPage: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      barBackColor: 'barBackColor'
+    }
+  },
+  
+  methods: {
+    back() {
+      if (this.backPage == 1) {
+        console.log(this.backPage)
+        this.$router.go(-1)
+        // this.$router.push({ path: '/classObserve', query: {} })
+      } else {
+        this.$emit('cutPage')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bar {
+  width: 100%;
+  height: 50px;
+  z-index: 999;
+  font-weight: 550;
+  // background-color: #f9f9f9;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 10px;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 17px;
+}
+</style>

src/views/classObserve/components/fromList.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="fromList">
+    <div style="text-align: center;width: 15%;" class="fromCol">01</div>
+    <div  class="fromCol" style="flex: 1;font-size: 16px;font-weight: 600;">智能音箱</div>
+    <div  class="perName">袁一鸣</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fromList {
+  width: 85%;
+  border: 1px #ccc solid;
+  border-radius: 10px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  .fromCol {
+    color: rgba(54, 129, 252, 1);
+    font-size: 24px;
+  }
+  .perName{
+    width: 20%;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+  }
+}
+</style>

src/views/classObserve/components/stencilledCon.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="stencilledCon">
+    <div class="top">
+      <div class="tit"><img src="../../../assets/images/classObserve/science.png" alt="" /> 科学通用模版</div>
+      <div class="btn">
+        <img src="../../../assets/images/classObserve/collSatrY.png" alt="" />
+        <div class="btnTxt" @click="PerTel">预览</div>
+      </div>
+    </div>
+    <div class="con">
+      针对性分析科学课堂，包含通用分析模块以及科学学科分析模块，并采用5E和5EX课程设计模型对课堂进行改编。
+    </div>
+    <div class="bom">
+      <div>14人已使用</div>
+      <div>科学</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    PerTel() {
+      this.$emit('previewTel')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.stencilledCon {
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0;
+  .tit {
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    img {
+      margin-right: 5px;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btnTxt {
+      background-color: rgba(240, 242, 245, 1);
+      padding: 7px 15px;
+      border-radius: 5px;
+      margin-left: 7px;
+    }
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+.con {
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  padding: 10px 0;
+}
+.bom {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/classObserve/editTel.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="editTel">
+    <bar @cutPage="cutPage" :tit="'编辑模板'" :backPage="0"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+    <div class="TelList">
+      <div class="telConCell" v-for="item in 5" :key="item">
+        <div class="tit">
+          <div>通用课堂分析</div>
+          <div style="color: rgba(54, 129, 252, 1);" @click="addTel">添加模块</div>
+        </div>
+        <div class="list" v-for="item in 5" :key="item + 'a'">
+          <van-swipe-cell>
+            <div class="cell">omo智慧课堂分析</div>
+            <template #right>
+              <van-button square text="删除" type="danger" class="delete-button" />
+            </template>
+          </van-swipe-cell>
+        </div>
+      </div>
+    </div>
+    <div class="bot">
+      <div class="botBtn" @click="saveTel">另存为模板</div>
+    </div>
+    <van-popup v-model="showPopup">
+      <div class="popupCon">
+        <div class="tit">模板信息</div>
+        <div class="bri">请根据提示补充模版信息</div>
+        <div>
+          <el-input v-model="input" placeholder="模版名称"></el-input>
+          <el-input type="textarea" :rows="3" resize="none" v-model="input" placeholder="模版简介"></el-input>
+          <el-select v-model="value" placeholder="所属学科">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </div>
+
+        <div class="switch">
+          <span style="margin-right: 5px;">公开到社区</span
+          ><el-switch v-model="switchValue" active-color="rgba(54, 129, 252, 1)"> </el-switch>
+        </div>
+      </div>
+      <div class="btnS">
+        <div @click="cancell">取消</div>
+        <div style="color: rgba(54, 129, 252, 1);" @click="saveInfo">保存</div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+
+export default {
+  components: {
+    bar
+  },
+  data() {
+    return {
+      showPopup: false,
+      input: '',
+      switchValue: false,
+      options: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 5)
+    },
+    cancell() {
+      this.showPopup = false
+    },
+    saveInfo() {
+      this.$message.success('模版已保存')
+      this.showPopup = false
+    },
+    addTel() {
+      this.$emit('cutPage', 7)
+    },
+    saveTel() {
+      this.showPopup = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editTel {
+  height: calc(100% - 50px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.TelList {
+  flex: 1;
+  overflow: auto;
+}
+.telConCell {
+  .tit {
+    width: 100%;
+    padding: 13px 15px;
+    background-color: rgba(231, 231, 231, 1);
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    font-weight: 400;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+  }
+  .list {
+    // padding: 0 10px;
+  }
+  /deep/.van-button {
+    height: 100% !important;
+  }
+  .cell {
+    padding: 15px 0px;
+    padding-left: 15px;
+    border-bottom: 0.5px solid rgba(231, 231, 231, 1);
+    font-size: 16px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.9);
+  }
+}
+
+.bot {
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  box-sizing: border-box;
+  .botBtn {
+    background-color: rgba(54, 129, 252, 1);
+    width: 85%;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+/deep/ .van-popup--center {
+  border-radius: 10px;
+  width: 280px;
+}
+/deep/.el-input__inner {
+  border: 0;
+  background-color: rgba(243, 243, 243, 1);
+}
+/deep/.el-select {
+  width: 100%;
+}
+/deep/.el-textarea__inner {
+  border: 0;
+  background-color: rgba(243, 243, 243, 1);
+  margin: 10px 0;
+}
+/deep/.el-select-dropdown {
+  z-index: 99999;
+}
+.popupCon {
+  padding: 10px 15px;
+  .tit {
+    width: 100%;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 10px 0;
+  }
+  .bri {
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.6);
+    padding-bottom: 10px;
+  }
+  .switch {
+    margin: 10px 0;
+    font-size: 14px;
+    // font-weight: 600;
+    color: rgba(0, 0, 0, 0.9);
+  }
+}
+.btnS {
+  display: flex;
+  border-top: 0.5px solid rgba(231, 231, 231, 1);
+  justify-content: space-between;
+  div {
+    flex: 1;
+    text-align: center;
+    padding: 17px 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+</style>

src/views/classObserve/homePage.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="observe">
+    <div class="top">
+      <div class="Title">
+        课堂观察
+      </div>
+      <div>
+        <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
+      </div>
+    </div>
+    <div class="brief">
+      <div class="txt">您好，我是 CocoClass 课堂观察</div>
+      <div class="txt2">基于课堂录音和实录文稿进行分析，为您提供不同启发。</div>
+    </div>
+    <div class="FunctionalArea">
+      <div class="tit">
+        <div>课程名称</div>
+        <span @click="BindForm(2)">
+          <img src="../../assets/images/classObserve/lianjie.png" alt="" />
+        </span>
+      </div>
+      <div class="teaInfo" @click="BindForm(3)">
+        <div class="teaName">王老师</div>
+        <div class="classInfo">9年级</div>
+        <div class="classInfo">科学</div>
+        <img src="../../assets/images/classObserve/fillInfo.png" alt="" />
+      </div>
+      <div class="chat">
+        <div class="chatTxt">
+          请用日常生活为主题，跟我进行英语对话， 这里是语音同步转文字， 这里是语音同步转文字这里是语音同转文字这｜...
+          请用日常生活为主题，跟我进行英语对话， 这里是语音同步转文字， 这里是语音同步转文字这里是语音同转文字这｜...
+        </div>
+        <img src="../../assets/images/classObserve/waveanimation.png" alt="" />
+        <div class="time">00:08</div>
+      </div>
+      <div class="controlArea">
+        <img @click="goChat" src="../../assets/images/classObserve/rootper.png" alt="" />
+        <img src="../../assets/images/classObserve/langcut.png" alt="" />
+        <img @click="ctrlRecord" v-if="isParse" src="../../assets/images/classObserve/endLang.png" alt="" />
+        <img @click="ctrlRecord" v-else src="../../assets/images/classObserve/recording.png" alt="" />
+        <img src="../../assets/images/classObserve/suspend.png" alt="" />
+        <div @click="historyBtn" style="position: relative;">
+          <span
+            style="position: absolute;top: -5px;right: -9px;color: rgba(54, 129, 252, 1);width: 15px;font-size: 10px;"
+            >99</span
+          >
+          <img src="../../assets/images/classObserve/book.png" alt="" />
+        </div>
+      </div>
+      <div class="selectBtn">
+        <button :disabled="isParse" class="btn1" @click="BindForm(5)">
+          选择模版
+          <div v-if="isParse" class="one"></div>
+        </button>
+        <button :disabled="isParse" class="btn2" @click="analysis">
+          一键分析
+          <div v-if="isParse" class="one"></div>
+        </button>
+      </div>
+    </div>
+
+    <van-action-sheet v-model="historyShow" title="历史记录">
+      <div class="historyList">
+        <div class="con" v-for="item in 10" :key="item">
+          <div class="tit">课程信息</div>
+          <van-popover placement="bottom-end" v-model="abuShow" trigger="click">
+            <div class="abu">
+              <div class="abuBtn">
+                <img src="../../assets/images/classObserve/edit.png" alt="" />
+                <span>重命名</span>
+              </div>
+              <div class="abuBtn">
+                <img src="../../assets/images/classObserve/del.png" alt="" />
+                <span>删除</span>
+              </div>
+            </div>
+            <template #reference>
+              <img src="../../assets/images/classObserve/colD.png" alt="" />
+            </template>
+          </van-popover>
+        </div>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      isParse: false,
+      historyShow: false,
+      abuShow: false
+    }
+  },
+  methods: {
+  
+    goChat() {
+      this.$router.push({ path: '/aiChat', query: {} })
+    },
+    historyBtn() {
+      this.historyShow = true
+    },
+    // 绑定表单
+    BindForm(val) {
+      this.$emit('cutPage', val)
+    },
+    
+    ctrlRecord() {
+      this.isParse = !this.isParse
+    },
+
+    analysis() {
+      console.log(22)
+      this.$router.push({ path: '/outcome', query: {} })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.observe {
+  background-color: #e0eafb;
+  height: calc(100% - 50px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+}
+/deep/.van-action-sheet {
+  min-height: 80% !important;
+}
+.top {
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 15px;
+  background-color: rgba(54, 129, 252, 1);
+  flex: 1;
+  box-sizing: border-box;
+  border-radius: 0 0 23% 23%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  img {
+    display: block;
+  }
+  .Title {
+    font-size: 20px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+  }
+}
+.brief {
+  width: 100%;
+  padding-bottom: 20px;
+  .txt {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(54, 129, 252, 1);
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .txt2 {
+    display: flex;
+    justify-content: center;
+    color: rgba(65, 80, 109, 0.6);
+    font-size: 12px;
+  }
+}
+.FunctionalArea {
+  width: 100%;
+  padding: 0 30px;
+  box-sizing: border-box;
+  .tit {
+    display: flex;
+    justify-content: space-between;
+    div {
+      font-weight: 600;
+      font-size: 22px;
+      color: rgba(0, 0, 0, 0.9);
+    }
+    img {
+      width: 20px;
+      object-fit: contain;
+    }
+  }
+  .teaInfo {
+    display: flex;
+    justify-content: flex-start;
+    padding: 10px 0;
+    .teaName {
+      padding-right: 10px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .classInfo {
+      background-color: rgba(255, 255, 255, 0.55);
+      font-size: 10px;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      margin-right: 10px;
+      color: rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+.chat {
+  .chatTxt {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    -webkit-line-clamp: 4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: rgba(0, 0, 0, 0.6);
+  }
+  img {
+    width: 100%;
+  }
+  .time {
+    color: rgba(54, 129, 252, 1);
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+  }
+}
+.controlArea {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  img {
+    object-fit: contain;
+  }
+}
+.selectBtn {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 10px;
+
+  .one {
+    background-color: rgba(249, 245, 245, 0.7);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+  }
+  .btn1 {
+    position: relative;
+    width: 45%;
+    overflow: hidden;
+    padding: 15px 0;
+    border-radius: 13px;
+    border: none;
+    color: rgba(0, 0, 0, 0.9);
+    font-weight: 550;
+    font-size: 16px;
+    background-color: #fff;
+  }
+  .btn2 {
+    width: 45%;
+    position: relative;
+    padding: 15px 0;
+    border-radius: 13px;
+    overflow: hidden;
+    border: none;
+    color: rgba(255, 255, 255, 0.9);
+    background-color: rgba(54, 129, 252, 1);
+    font-weight: 550;
+    font-size: 16px;
+  }
+}
+.historyList {
+  box-sizing: border-box;
+  padding: 10px 20px;
+
+  .con {
+    display: flex;
+    border-bottom: 1px #ccc solid;
+    justify-content: space-between;
+    padding: 15px 0;
+    .tit {
+      font-weight: 400;
+      font-size: 16px;
+    }
+  }
+}
+.abu {
+  background-color: #fff;
+  width: 100px;
+  border-radius: 6px;
+  padding: 10px 10px;
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+  .abuBtn {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    font-size: 12px;
+    font-weight: 400;
+    img {
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/views/classObserve/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="allPage">
+    <homePage @cutPage="cutPage" :page="page" v-if="page == 1"></homePage>
+    <bindFrom @cutPage="cutPage" :page="page" v-if="page == 2"></bindFrom>
+    <classInfo @cutPage="cutPage" :page="page" v-if="page == 3"></classInfo>
+    <stencilled @cutPage="cutPage" :page="page" v-if="page == 5"></stencilled>
+    <editTel @cutPage="cutPage" :page="page" v-if="page == 6"></editTel>
+    <addTel @cutPage="cutPage" :page="page" v-if="page == 7"></addTel>
+
+  </div>
+</template>
+
+<script>
+import homePage from './homePage'
+import bindFrom from './bindFrom'
+import classInfo from './classInfo'
+import stencilled from './stencilled'
+import editTel from './editTel'
+import addTel from './addTel'
+
+
+
+
+export default {
+  components: { homePage, bindFrom, classInfo, stencilled,editTel,addTel },
+  data() {
+    return {
+      page: 1
+    }
+  },
+  methods: {
+    cutPage(val) {
+      this.page = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.allPage {
+  height: 100vh;
+}
+</style>

src/views/classObserve/outcome.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="outcome">
+    <bar @cutPage="cutPage" :tit="'分析结果'" :backPage="1"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+
+    <div class="sortList">
+      <div>通用</div>
+      <div>学科</div>
+      <div>扩展</div>
+    </div>
+    <div class="stencilList">
+      <div class="outcomeCon">
+        <div @click="ctrlShow" style="height: 50px;display: flex; justify-content: space-between;align-items: center;">
+          <div>
+            <van-icon v-if="!cellShow" name="arrow" />
+            <van-icon v-else name="arrow-down" />
+            <span class="tit">麦卡锡问题分析</span>
+          </div>
+          <van-popover placement="bottom-end" v-model="abuShow">
+            <div class="abu">
+              <div class="abuBtn">
+                <img src="../../assets/images/classObserve/addTel.png" alt="" />
+                <span>重命名</span>
+              </div>
+              <div class="abuBtn">
+                <img src="../../assets/images/classObserve/del.png" alt="" />
+                <span>删除</span>
+              </div>
+            </div>
+            <template #reference>
+              <img @click.stop="showAbu" src="../../assets/images/classObserve/colD.png" alt="" />
+            </template>
+          </van-popover>
+        </div>
+        <div v-if="cellShow">
+          <div>
+            6666
+          </div>
+          <div class="outcomeBtn">
+            <div><img src="../../assets/images/classObserve/revoke.png" alt="" /><span>撤销</span></div>
+            <div><img src="../../assets/images/classObserve/restore.png" alt="" /><span>恢复</span></div>
+            <div><img src="../../assets/images/classObserve/optimize.png" alt="" /><span>优化</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="botBtn">
+      <div class="shareBtn">
+        <img src="../../assets/images/classObserve/share.png" alt="" />
+        <span>分享</span>
+      </div>
+      <div class="btn">
+        查看报告
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+
+export default {
+  components: {
+    bar
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      abuShow: false,
+      cellShow: false
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 6)
+    },
+    ctrlShow() {
+      this.cellShow = !this.cellShow
+    },
+    showAbu() {
+      this.abuShow = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.outcome {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.sortList {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding: 15px;
+  border-bottom: 0.5px rgba(231, 231, 231, 1) solid;
+  div {
+    width: 33%;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  .sortImg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 0.5px rgba(231, 231, 231, 1) solid;
+  }
+}
+.stencilList {
+  flex: 1;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: auto;
+  background-image: linear-gradient(to bottom, #fff 0%, #ebf1fd 100%);
+  .tit {
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 14px;
+    font-weight: 600;
+    margin-left: 5px;
+  }
+  .outcomeCon {
+    // display: flex;
+    min-height: 50px;
+    border: 0.5px #ccc solid;
+    align-items: center;
+    border-radius: 5px;
+    min-height: 40px;
+    padding: 0 10px;
+  }
+}
+.botBtn {
+  background-color: #fff;
+  width: 100%;
+  padding: 10px 25px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  .shareBtn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 20px;
+    justify-content: space-between;
+    font-size: 12px;
+    font-size: 400;
+    color: rgba(4, 0, 0, 1);
+  }
+  .btn {
+    flex: 1;
+    background-color: rgba(54, 129, 252, 1);
+    color: #fff;
+    height: 45px;
+    border-radius: 10px;
+    display: flex;
+    font-size: 16px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.abu {
+  background-color: #fff;
+  width: 100px;
+  border-radius: 6px;
+  //   padding: 10px 10px;
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+  .abuBtn {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    font-size: 12px;
+    font-weight: 400;
+    img {
+      margin-right: 5px;
+    }
+  }
+}
+.outcomeBtn {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px 0;
+  div {
+    display: flex;
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>

src/views/classObserve/stencilled.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="stencilled">
+    <bar @cutPage="cutPage" :tit="'模版中心'" :backPage="0"></bar>
+    <div style="height: 55px;width: 100%;"></div>
+    <div class="selectInp">
+      <van-search shape="round" v-model="selectValue" placeholder="搜索表单" />
+      <span>搜索</span>
+    </div>
+    <div class="sortList">
+      <div>社区</div>
+      <div>我的</div>
+      <div>收藏</div>
+      <div @click="reveal" class="sortImg"><img src="../../assets/images/classObserve/filter.png" alt="" /> 筛选</div>
+    </div>
+    <div class="stencilList">
+      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
+        <stencilledCon @previewTel="previewTel"></stencilledCon>
+      </div>
+    </div>
+    <div class="botBtn">
+      <div class="btn" @click="analysis">
+        使用该模版，一键分析
+      </div>
+    </div>
+
+    <van-action-sheet v-model="sortShow" title="全部筛选">
+      <div class="actionCon">
+        <div class="sheetTit">学科</div>
+        <div class="claList">
+          <div class="ListBlc" v-for="item in 100" :key="item">语文</div>
+        </div>
+        <div class="actionBtn">
+          <div class="btn">重置</div>
+          <div class="btn btn1">确认</div>
+        </div>
+      </div>
+    </van-action-sheet>
+
+    <van-action-sheet v-model="templateShow" title="预览模板">
+      <div class="actionTel">
+        <div class="telCon">
+          <div class="telConCell" v-for="item in 5" :key="item">
+            <div class="tit">通用课堂分析</div>
+            <div class="list">
+              <div class="cell">omo智慧课堂分析</div>
+              <div class="cell">omo智慧课堂分析</div>
+              <div class="cell">omo智慧课堂分析</div>
+            </div>
+          </div>
+        </div>
+        <div class="actionBtn">
+          <div class="btn" @click="editTel">编辑模板</div>
+          <div class="btn btn1">一键分析</div>
+        </div>
+      </div>
+    </van-action-sheet>
+
+    <div style="height: 50px;width: 100%;"></div>
+  </div>
+</template>
+
+<script>
+import bar from './components/bar.vue'
+import stencilledCon from './components/stencilledCon'
+
+export default {
+  components: {
+    bar,
+    stencilledCon
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      selectValue: '',
+      sortShow: false,
+      abuShow: false,
+      templateShow: false
+    }
+  },
+  methods: {
+    cutPage() {
+      this.$emit('cutPage', 1)
+    },
+    editTel(){
+      // console.log('1111');
+      this.$emit('cutPage', 6)
+    },
+    reveal() {
+      this.sortShow = true
+    },
+    analysis() {
+      console.log(22)
+      // this.$router.push({ path: '/outcome', query: {} })
+    },
+    previewTel() {
+      this.templateShow = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.actionTel {
+  height: 100% !important;
+  // height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  // padding: 10px 15px;
+  box-sizing: border-box;
+  .telCon {
+    flex: 1;
+    overflow: auto;
+    .telConCell {
+    }
+    .tit {
+      width: 100%;
+      padding: 13px 15px;
+      background-color: rgba(231, 231, 231, 1);
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 12px;
+      font-weight: 400;
+      box-sizing: border-box;
+    }
+    .list {
+      padding: 0 10px;
+    }
+    .cell {
+      padding: 15px 0px;
+      border-bottom: 0.5px solid rgba(231, 231, 231, 1);
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
+  .actionBtn {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px;
+    .btn {
+      width: 48%;
+      border-radius: 6px;
+      padding: 12px 0;
+      display: flex;
+      justify-content: center;
+      color: rgba(54, 129, 252, 1);
+      background-color: rgba(242, 243, 255, 1);
+      font-size: 16px;
+    }
+    .btn1 {
+      color: #fff;
+      background-color: rgba(54, 129, 252, 1);
+    }
+  }
+}
+.stencilled {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+/deep/.van-action-sheet {
+  height: 80% !important;
+}
+/deep/.van-action-sheet__header {
+  font-weight: 600;
+}
+.selectInp {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .van-search {
+    width: 100%;
+    .van-search__content {
+      height: 45px;
+      align-items: center;
+    }
+  }
+  span {
+    color: rgba(54, 129, 252, 1);
+    font-size: 16px;
+    font-weight: 600;
+    display: block;
+    width: 40px;
+  }
+}
+.sortList {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  border-bottom: 0.5px rgba(231, 231, 231, 1) solid;
+  div {
+    width: 25%;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  .sortImg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 0.5px rgba(231, 231, 231, 1) solid;
+  }
+}
+.stencilList {
+  flex: 1;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.botBtn {
+  height: 60px;
+  background-color: #fff;
+  width: 100%;
+  padding: 10px 25px;
+  box-sizing: border-box;
+  border-top: 0.5px #ccc solid;
+  .btn {
+    width: 100%;
+    background-color: rgba(54, 129, 252, 1);
+    color: #fff;
+    height: 40px;
+    border-radius: 5px;
+    display: flex;
+    font-size: 16px;
+    // font-weight: 600;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.actionCon {
+  height: 100% !important;
+  // height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  .sheetTit {
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 10px;
+  }
+  .claList {
+    flex: 1;
+    overflow: auto;
+    .ListBlc {
+      width: 30%;
+      height: 35px;
+      border-radius: 30px;
+      display: inline-block;
+      box-sizing: border-box;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 35px;
+      background-color: rgba(243, 247, 253, 1);
+      text-align: center;
+      border: 1px rgba(242, 243, 255, 1) solid;
+    }
+  }
+  .claList > div {
+    margin-right: calc(10% / 2);
+    margin-bottom: 10px;
+  }
+  .claList :nth-child(3n) {
+    margin-right: 0;
+  }
+  .actionBtn {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      width: 48%;
+      border-radius: 6px;
+      padding: 12px 0;
+      display: flex;
+      justify-content: center;
+      color: rgba(54, 129, 252, 1);
+      background-color: rgba(242, 243, 255, 1);
+      font-size: 16px;
+    }
+    .btn1 {
+      color: #fff;
+      background-color: rgba(54, 129, 252, 1);
+    }
+  }
+}
+</style>

src/views/eva/index.vue

@@ -108,6 +108,8 @@ export default {
     },
     // 搜索按钮跳转详情页
     gotoStudentDetail2(i) {
+      // console.log(i);
+      if (i.username ==="暂时没有您想要查询的学生") return
       localStorage.setItem('userId', i.userid)
       localStorage.setItem('classId', '')
       this.$router.push('/studentDetail')

src/views/layouts/index.vue

@@ -59,6 +59,14 @@ export default {
           },
           activeIcon: require('../../assets/images/course/commmt-active1.png'),
           normalIcon: require('../../assets/images/course/comment1.png')
+        },
+        {
+          title: '课堂观察',
+          to: {
+            path: '/classObserve'
+          },
+          activeIcon: require('../../assets/images/course/commmt-active1.png'),
+          normalIcon: require('../../assets/images/course/comment1.png')
         }
       )
     }