学校弹窗

1

src/assets/icon/iconfont.css

@@ -1,5 +1,6 @@
 @font-face {
-  font-family: "iconfont"; /* Project id  */
+  font-family: "iconfont";
+  /* Project id  */
   src: url('iconfont.ttf?t=1653293897401') format('truetype');
 }
 
@@ -449,5 +450,4 @@
 
 .icon-zhiboshangpinguanli:before {
   content: "\e689";
-}
-
+}

src/views/schoolManager/modals/patrolModel.vue

@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script>
-export default {
-  data() {
-    return;
-  },
-  mounted() {},
-  methods: {},
-};
-</script>
-<style lang="scss" scoped></style>

src/views/schoolManager/modals/patrolModels.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="patrolWrap">
+    <div class="top">
+      <p class="topTimer">上课时间：2023-03-16 13:00-14:00</p>
+      <p class="topStatus">不合格</p>
+    </div>
+    <div class="teacherInfo">
+      <el-image :src="avatar" class="teacherAvatar"></el-image>
+      <div class="teacherText">
+        <p class="courseName">声部课 · 上低音号</p>
+        <p class="teacherName">老师姓名</p>
+      </div>
+    </div>
+    <div class="qusestList">
+      <h4>问题类型</h4>
+      <div class="qusestWrap">
+        <div class="questItem" v-for="(item, index) in questList" :key="index">
+          {{ item }}
+        </div>
+      </div>
+      <p class="questMsg">没有组织学员将乐器箱包放在指定地点</p>
+    </div>
+    <div class="infoList">
+      <h4>照片&视频</h4>
+      <div class="infoWrap">
+        <el-image
+          fit="cover"
+          class="infoItem"
+          v-for="(item, index) in imgList"
+          :key="index"
+          :src="item"
+          :preview-src-list="[item]"
+        ></el-image>
+      </div>
+    </div>
+    <div class="froms">
+      <h4>处理意见</h4>
+      <el-input v-model="opinions" type="textarea" :rows="3"></el-input>
+    </div>
+  </div>
+</template>
+<script>
+import avatar from "@/assets/images/base/woman.png";
+export default {
+  data() {
+    return {
+      avatar,
+      opinions: "",
+      id: "",
+      questList: [
+        "课堂纪律",
+        "放学组织",
+        "环境卫生",
+        "教态仪表",
+        "沟通表达",
+        "专业能力",
+        "其他",
+      ],
+      imgList: [
+        "https://ks3-cn-beijing.ksyuncs.com/daya/1665455361674QQ截图20221011102856.jpg",
+        "https://ks3-cn-beijing.ksyuncs.com/daya/1665455361674QQ截图20221011102856.jpg",
+        "https://ks3-cn-beijing.ksyuncs.com/daya/1665455361674QQ截图20221011102856.jpg",
+        "https://ks3-cn-beijing.ksyuncs.com/daya/1665455361674QQ截图20221011102856.jpg",
+        "https://ks3-cn-beijing.ksyuncs.com/daya/1665455361674QQ截图20221011102856.jpg",
+      ],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.patrolWrap {
+  .top {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    color: #101010;
+    .topTimer {
+      font-size: 14px;
+    }
+  }
+  .teacherInfo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+    .courseName {
+      color: #101010;
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+    .teacherName {
+      color: #999;
+      font-size: 12px;
+    }
+  }
+  .teacherAvatar {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+  }
+  .qusestList {
+    h4 {
+      color: #999;
+      margin-bottom: 14px;
+    }
+    .qusestWrap {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .questItem {
+        line-height: 25px;
+        width: 95px;
+        border-radius: 16px;
+        border: 1px solid #00a79d;
+        margin: 5px 3px 0;
+        text-align: center;
+        color: #00a79d;
+      }
+    }
+    .questMsg {
+      margin: 10px 0 20px;
+      color: #000;
+    }
+  }
+  .infoList {
+    h4 {
+      margin-bottom: 14px;
+    }
+    .infoWrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      flex-wrap: wrap;
+    }
+    .infoItem {
+      width: 100px;
+      height: 100px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+}
+.froms {
+  h4 {
+    margin-bottom: 14px;
+  }
+}
+</style>

src/views/schoolManager/patrol.vue

@@ -203,6 +203,13 @@
         />
       </div>
     </div>
+    <el-dialog title="详情" width="450px" :visible.sync="dialogFormVisible">
+      <patrolModels />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button @click="dialogFormVisible = false" type="primary">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -214,8 +221,9 @@ import load from "@/utils/loading";
 import { getTimes } from "@/utils";
 import { queryByOrganId } from "@/api/systemManage";
 import { courseType, courseListType } from "@/utils/searchArray";
+import patrolModels from "./modals/patrolModels";
 export default {
-  components: { pagination },
+  components: { pagination, patrolModels },
   data() {
     return {
       searchForm: {
@@ -234,6 +242,7 @@ export default {
         total: 0, // 总条数
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
+      dialogFormVisible: false,
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -261,6 +270,7 @@ export default {
     },
     onReSet() {},
     lookDetail(row) {
+      this.dialogFormVisible = true;
       console.log("查看详情");
     },
     handleOpinion(row) {