|
|
@@ -2,139 +2,302 @@
|
|
|
<div class="analysis">
|
|
|
<div class="a-header">
|
|
|
<div class="a-h-left" @click.stop="changeShowItem(!showItem)">
|
|
|
- <span :class="['a-h-l-icon',showItem?'a-h-l-showIcon':'']"></span>
|
|
|
+ <span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
|
|
|
<span class="a-h-l-title">{{ title }}</span>
|
|
|
</div>
|
|
|
<div class="a-h-right">
|
|
|
<div class="a-h-r-btn" @click.stop="addTemplate()">
|
|
|
- <img src="@/assets/icon/classroomObservation/newcon.png" alt="">
|
|
|
+ <img src="@/assets/icon/classroomObservation/newcon.png" alt="" />
|
|
|
添加模块
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="a-main" v-show="showItem">
|
|
|
- <analysisItem v-for="item in analysisList" :key="item.id" :data="item"/>
|
|
|
+ <analysisItem v-for="item in analysisList" :key="item.id" :data="item" />
|
|
|
</div>
|
|
|
<div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog>
|
|
|
- <div class="a-d-top">
|
|
|
- <div class="a-d-t-left">
|
|
|
- <div :style="tagIndex==index?'background:white':''" class="a-d-t-l-item" v-for="(item,index) in dialogTagList" :key="item.id" @click.stop="tagIndex=index">
|
|
|
- {{ item.name }}
|
|
|
+ <div class="a-d-top">
|
|
|
+ <div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="input2"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="a-d-t-right">
|
|
|
- <span @click.stop="showDialog=false">×</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="a-d-box">
|
|
|
- <div class="a-d-b-item" v-for="(item,index) in dialogTagDataList[tagIndex]" :key="index">
|
|
|
- <div class="a-d-b-i-top">
|
|
|
- <img :src="require('../../../../assets/icon/classroomObservation/avatar.png')">
|
|
|
- <div class="a-d-b-i-t-title">{{item.title}}</div>
|
|
|
- <div class="a-d-b-i-t-btn">添加</div>
|
|
|
+ <div class="a-d-t-right">
|
|
|
+ <span @click.stop="showDialog = false">×</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; height: 100%">
|
|
|
+ <div class="a-d-t-left">
|
|
|
+ <div class="itemTit">我的模块</div>
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ tagIndex == index
|
|
|
+ ? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ class="a-d-t-l-item"
|
|
|
+ v-for="(item, index) in dialogTagList"
|
|
|
+ :key="item.id"
|
|
|
+ @click.stop="tagIndex = index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-box">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 推荐
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="a-d-b-item"
|
|
|
+ v-for="(item, index) in dialogTagDataList[tagIndex]"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="a-d-b-i-top">
|
|
|
+ <img
|
|
|
+ style="height: 22px; width: 22px"
|
|
|
+ :src="
|
|
|
+ require('../../../../assets/icon/classroomObservation/digImg.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div class="a-d-b-i-t-title">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottom">{{ item.brief }}</div>
|
|
|
+ <div class="a-d-b-i-bottomPer" style="display: block">
|
|
|
+ 3982人已使用
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottomBtn" style="display: none">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-around;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="a-d-b-i-t-btn">详情</div>
|
|
|
+ <div class="a-d-b-i-t-btn1">添加</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="a-d-b-i-bottom">{{item.brief}}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import analysisItem from './analysisItem'
|
|
|
+import analysisItem from "./analysisItem";
|
|
|
export default {
|
|
|
- components:{
|
|
|
- analysisItem
|
|
|
+ components: {
|
|
|
+ analysisItem,
|
|
|
},
|
|
|
- data(){
|
|
|
- return{
|
|
|
- title:"科学课堂分析",
|
|
|
- showDialog:false,
|
|
|
- showItem:true,
|
|
|
- tagIndex:1,
|
|
|
- dialogTagList:[
|
|
|
- {id:1,name:"通用课堂分析"},
|
|
|
- {id:2,name:"学科课堂分析"},
|
|
|
- {id:3,name:"扩展分析"},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "科学课堂分析",
|
|
|
+ showDialog: false,
|
|
|
+ showItem: true,
|
|
|
+ tagIndex: 1,
|
|
|
+ dialogTagList: [
|
|
|
+ { id: 1, name: "通用课堂分析" },
|
|
|
+ { id: 2, name: "学科课堂分析" },
|
|
|
+ { id: 3, name: "扩展分析" },
|
|
|
],
|
|
|
- dialogTagDataList:[
|
|
|
+ dialogTagDataList: [
|
|
|
+ [
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
+ ],
|
|
|
[
|
|
|
- {title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
|
|
|
- {title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
|
|
|
- {title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
|
|
|
- {title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
|
|
|
- {title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
|
|
|
- {title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
|
|
|
- {title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
|
|
|
- {title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
|
|
|
- {title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
|
|
|
- {title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
|
|
|
- {title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
|
|
|
- {title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
|
|
|
- {title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
|
|
|
- {title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
|
|
|
- {title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
|
|
|
- {title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
],
|
|
|
- [{title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
|
|
|
- {title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
|
|
|
- {title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
|
|
|
- {title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
|
|
|
- {title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
|
|
|
- {title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
|
|
|
- {title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
|
|
|
- {title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
|
|
|
- {title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
|
|
|
- {title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
|
|
|
- {title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
|
|
|
- {title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
|
|
|
- {title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
|
|
|
- {title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
|
|
|
- {title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
|
|
|
- {title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},],
|
|
|
- [{title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
|
|
|
- {title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
|
|
|
- {title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
|
|
|
- {title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
|
|
|
- {title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
|
|
|
- {title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
|
|
|
- {title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
|
|
|
- {title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
|
|
|
- {title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
|
|
|
- {title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
|
|
|
- {title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
|
|
|
- {title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
|
|
|
- {title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
|
|
|
- {title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
|
|
|
- {title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
|
|
|
- {title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},],
|
|
|
],
|
|
|
- analysisList:[
|
|
|
- {id:1,title:"课堂活动类型",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
|
|
|
- {id:2,title:"学科核心素养发展",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
|
|
|
- {id:3,title:"科学教育目标分析",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
|
|
|
- {id:4,title:"PORTAAL课堂观察",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
|
|
|
- ]
|
|
|
- }
|
|
|
+ analysisList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "课堂活动类型",
|
|
|
+ content:
|
|
|
+ "<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: "学科核心素养发展",
|
|
|
+ content:
|
|
|
+ "<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: "科学教育目标分析",
|
|
|
+ content:
|
|
|
+ "<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: "PORTAAL课堂观察",
|
|
|
+ content:
|
|
|
+ "<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
- addTemplate(){
|
|
|
+ methods: {
|
|
|
+ addTemplate() {
|
|
|
this.showDialog = true;
|
|
|
},
|
|
|
- changeShowItem(newValue){
|
|
|
+ changeShowItem(newValue) {
|
|
|
this.showItem = newValue;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.analysis{
|
|
|
+.itemTit {
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+ gap: 8px;
|
|
|
+ opacity: 0px;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+.analysis {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
-.a-header{
|
|
|
+.a-header {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
@@ -144,30 +307,31 @@ export default {
|
|
|
padding-right: 40px;
|
|
|
}
|
|
|
|
|
|
-.a-h-left{
|
|
|
+.a-h-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.a-h-l-icon{
|
|
|
+.a-h-l-icon {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
- background: url("../../../../assets/icon/classroomObservation/right.png") no-repeat;
|
|
|
+ background: url("../../../../assets/icon/classroomObservation/right.png")
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 5px;
|
|
|
- transition: .3s;
|
|
|
+ transition: 0.3s;
|
|
|
}
|
|
|
|
|
|
-.a-h-l-showIcon{
|
|
|
+.a-h-l-showIcon {
|
|
|
transform: rotate(90deg);
|
|
|
}
|
|
|
|
|
|
-.a-h-l-title{
|
|
|
+.a-h-l-title {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
-.a-h-r-btn{
|
|
|
+.a-h-r-btn {
|
|
|
font-size: 16px;
|
|
|
height: 35px;
|
|
|
width: auto;
|
|
|
@@ -183,75 +347,110 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.a-h-r-btn > img{
|
|
|
+.a-h-r-btn > img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.a-main{
|
|
|
+.a-main {
|
|
|
width: calc(100%);
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
.a-dialog {
|
|
|
- position: fixed;
|
|
|
- width: 1200px;
|
|
|
- height: 500px;
|
|
|
- min-height: 600px;
|
|
|
- box-shadow: 0px 0 8px 0px #555555;
|
|
|
- border-radius: 15px;
|
|
|
- z-index: 999;
|
|
|
- left:0;
|
|
|
- right:0;
|
|
|
+ position: fixed;
|
|
|
+ width: 1200px;
|
|
|
+ height: 500px;
|
|
|
+ min-height: 600px;
|
|
|
+ box-shadow: 0px 0 8px 0px #555555;
|
|
|
+ border-radius: 8px;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
top: 100px;
|
|
|
- margin:0 auto;
|
|
|
+ margin: 0 auto;
|
|
|
/* margin: 0 auto; */
|
|
|
- /* top: 50%; */
|
|
|
- /* margin: -18% 0 0 -300px; */
|
|
|
+ /* top: 50%; */
|
|
|
+ /* margin: -18% 0 0 -300px; */
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.a-d-top{
|
|
|
- background: #ADADAD;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: nowrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 40px;
|
|
|
- border-radius: 15px 15px 0 0;
|
|
|
- user-select: none;
|
|
|
+.a-d-top {
|
|
|
+ /* background: #adadad; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ user-select: none;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
}
|
|
|
-
|
|
|
-.a-d-t-left{
|
|
|
- width: calc(100% - 40px);
|
|
|
+.a-d-top >>> .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+.a-d-topTit {
|
|
|
+ width: 171px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 22px;
|
|
|
+ justify-content: center;
|
|
|
+ /* text-align: left; */
|
|
|
+}
|
|
|
+.a-d-t-left {
|
|
|
+ width: 200px;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: flex-start;
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 5px;
|
|
|
}
|
|
|
|
|
|
-.a-d-t-l-item{
|
|
|
- width: auto;
|
|
|
+.a-d-t-l-item {
|
|
|
+ /* width: auto;
|
|
|
height: 90%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 0 10px;
|
|
|
border-radius: 10px;
|
|
|
- background-color: #D4D9DA;
|
|
|
+ background-color: #d4d9da;
|
|
|
margin-right: 3px;
|
|
|
+ cursor: pointer; */
|
|
|
cursor: pointer;
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-.a-d-t-l-item:hover{
|
|
|
- background-color: white
|
|
|
+.a-d-t-l-item:hover {
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
|
|
|
-.a-d-t-right{
|
|
|
+.a-d-t-right {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
margin-right: 10px;
|
|
|
@@ -261,7 +460,7 @@ export default {
|
|
|
color: black !important;
|
|
|
}
|
|
|
|
|
|
-.a-d-t-right>span{
|
|
|
+.a-d-t-right > span {
|
|
|
width: 25px;
|
|
|
height: 25px;
|
|
|
border-radius: 25px;
|
|
|
@@ -271,42 +470,58 @@ export default {
|
|
|
/* align-items: center; */
|
|
|
font-size: 22px;
|
|
|
color: #fff;
|
|
|
- background-color: #ADADAD;
|
|
|
+ /* background-color: #adadad; */
|
|
|
cursor: pointer;
|
|
|
- background-color: #E6E6E6;
|
|
|
- color: #ADADAD;
|
|
|
+ /* background-color: #e6e6e6; */
|
|
|
+ color: #adadad;
|
|
|
}
|
|
|
|
|
|
-.a-d-box{
|
|
|
+.a-d-box {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
- background-color: #F0F2F5;
|
|
|
+ height: 100%;
|
|
|
+ /* height: calc(100% - 40px); */
|
|
|
+ background-color: #f0f2f5;
|
|
|
overflow: auto;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px;
|
|
|
+ padding-bottom: 50px;
|
|
|
}
|
|
|
|
|
|
-.a-d-b-item{
|
|
|
- width: 23%;
|
|
|
- height: 100px;
|
|
|
- background-color:#D9D9D9;
|
|
|
+.a-d-b-item {
|
|
|
+ width: 22%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
border-radius: 10px;
|
|
|
- margin: 10px;
|
|
|
- padding: 10px;
|
|
|
+ padding: 15px;
|
|
|
float: left;
|
|
|
box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /* position: relative; */
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomPer {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
-.a-d-b-i-top{
|
|
|
+.a-d-b-i-top {
|
|
|
width: 100%;
|
|
|
- height: 50%;
|
|
|
+ /* height: 50%; */
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
/* justify-content: space-between; */
|
|
|
}
|
|
|
-.a-d-b-i-top>img{
|
|
|
+.a-d-b-i-top > img {
|
|
|
width: 35px;
|
|
|
height: 35px;
|
|
|
}
|
|
|
/* .a-d-b-i-top>div{ */
|
|
|
- /* width: auto;
|
|
|
+/* width: auto;
|
|
|
height: 35px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -314,48 +529,69 @@ export default {
|
|
|
margin-left: 10px; */
|
|
|
/* } */
|
|
|
|
|
|
-.a-d-b-i-t-title{
|
|
|
- width: calc(100% - 90px);
|
|
|
+.a-d-b-i-t-title {
|
|
|
+ width: 100%;
|
|
|
height: 35px;
|
|
|
display: block;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 10px;
|
|
|
text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-all;
|
|
|
- white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
line-height: 35px;
|
|
|
/* display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
overflow: hidden; */
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-.a-d-b-i-bottom{
|
|
|
+.a-d-b-i-bottom {
|
|
|
width: 100%;
|
|
|
- height: 50%;
|
|
|
- display: flex;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ /* max-height: 186px; */
|
|
|
font-size: 14px;
|
|
|
- align-items: center;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ line-height: 20px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
-.a-d-b-i-t-btn{
|
|
|
+.a-d-b-i-t-btn {
|
|
|
font-size: 14px;
|
|
|
- height: 30px;
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
+ /* height: 30px; */
|
|
|
+ /* position: relative; */
|
|
|
+ /* top: 5px; */
|
|
|
box-sizing: border-box;
|
|
|
- padding: 0 10px;
|
|
|
- background-color: #F3F3F3;
|
|
|
+ padding: 8px 25px;
|
|
|
+ /* background-color: #f3f3f3; */
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
border-radius: 5px;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 10px;
|
|
|
+ /* position: absolute; */
|
|
|
+ /* right: 10px; */
|
|
|
+ /* top: 10px; */
|
|
|
+}
|
|
|
+.a-d-b-i-t-btn1 {
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
11wqe1
