.

src/App.vue

@@ -87,7 +87,6 @@ const getUrlParam = (urlStr, urlKey) => {
 </script>
 
 <template>
-  <Header></Header>
   <!-- <keep-alive> -->
   <router-view></router-view>
   <!-- </keep-alive> -->

src/assets/main.css

@@ -1,8 +1,109 @@
 @import './base.css';
 
-*{
+* {
   box-sizing: border-box;
 }
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #fff;
+  color: #555;
+  font-size: 14px;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+td,
+th,
+caption {
+  font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 100%;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+a {
+  color: #555;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img {
+  border: none;
+}
+
+ol,
+ul,
+li {
+  list-style: none;
+}
+
+input,
+textarea,
+select,
+button {
+  font: 14px Verdana, Helvetica, Arial, sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+html {
+  overflow-y: scroll;
+}
+
 #app {
   /* padding: 0 20px; */
   height: 100vh;
@@ -23,9 +124,16 @@
   zoom: 1;
 }
 
-.contentTitle{
+.contentTitle {
   margin: 20px 0;
 }
-.contentTitle:nth-of-type(1){
+
+.contentTitle:nth-of-type(1) {
   margin-top: 0px;
+}
+
+.img_text_middle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }

src/components/admin/adminHeader.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="admin_header ">
+        <div class="img_text_middle">
+            <el-button @click="goBack()">返回人工智能专栏</el-button>
+            <img :src="userImg" alt="">
+            <span>{{ userName }}</span>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, watchEffect } from 'vue';
+import userImg from '@/assets/img/user.png'
+import { userInfoStore } from '@/stores/counter'
+
+// U.MD.D.I.openInApplication('teacher')  教师管理
+const user = userInfoStore()
+const userName = ref('userName')
+const goBack = () => {
+    top.location.href = "https://zy.szedu.cn/ai/"
+}
+watchEffect(() => {
+    if (JSON.stringify(user.user) != "{}") {
+        userName.value = user.user.userName
+    }
+})
+</script>
+<style lang="scss" scoped>
+.admin_header {
+    width: 100%;
+    padding: 12px 36px;
+    height: 60px;
+
+    .img_text_middle {
+        float: right;
+        img{
+            margin: 0 8px 0 30px;
+        }
+    }
+
+    .el-button {
+        background: rgba(54, 129, 252, 1);
+        color: #fff;
+    }
+}
+</style>

src/components/admin/adminLeft.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="admin_left">
+        <router-link to="/" class="admin_left_title">
+            <img :src="Logo" alt="">
+        </router-link>
+        <ul>
+            <li :class="selectValue == 0 ? 'li_active' : ''" @click="getSelectionValue(0)">
+                <img :src="selectValue == 0 ? StudentImgSelect : StudentImg" alt="">
+                <span>学生管理</span>
+            </li>
+            <li :class="selectValue == 1 ? 'li_active' : ''" @click="getSelectionValue(1)">
+                <img :src="selectValue == 1 ? ClassImgSelect : ClassImg" alt="">
+                <span>班级管理</span>
+            </li>
+            <li :class="selectValue == 2 ? 'li_active' : ''" @click="getSelectionValue(2)">
+                <img :src="selectValue == 2 ? TeacherImgSelect : TeacherImg" alt="">
+                <span>教师管理</span>
+            </li>
+        </ul>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import Logo from '../../assets/img/admin_left_logo.png'
+import StudentImg from '../../assets/img/student.png'
+import ClassImg from '../../assets/img/banji.png'
+import TeacherImg from '../../assets/img/jiaoshi.png'
+import StudentImgSelect from '../../assets/img/studentSelect.png'
+import ClassImgSelect from '../../assets/img/banjiSelect.png'
+import TeacherImgSelect from '../../assets/img/jiaoshiSelect.png'
+
+const selectValue = ref(0)
+const getSelectionValue = val => {
+    selectValue.value = val
+}
+</script>
+<style lang="scss">
+.admin_left {
+    background: rgba(21, 35, 62);
+    width: 235px;
+    height: 100vh;
+    color: #fff;
+
+    .admin_left_title {
+        padding: 14px 0;
+        font-size: 20px;
+        color: #fff;
+        display: block;
+        text-align: center;
+    }
+
+    ul {
+        padding: 8px;
+
+        li {
+            padding: 7px 16px;
+            border-radius: 3px;
+            color: rgba(255, 255, 255, 0.55);
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            font-size: 14px;
+            cursor: pointer;
+
+            img {
+                margin-right: 8px;
+            }
+        }
+
+        .li_active {
+            background: rgba(54, 129, 252, 1);
+            color: #fff;
+
+        }
+    }
+}
+</style>

src/components/admin/adminRight.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="admin_right">
+        <adminHeader />
+        <div class="admin_main">
+
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import adminHeader from './adminHeader.vue';
+</script>
+<style lang="scss" scoped>
+.admin_right {
+    width: 100%;
+    position: relative;
+    .admin_main{
+        background: #ccc;
+        height: calc(100% - 60px);
+    }
+}
+</style>

src/components/admin/adminStudent.vue

@@ -1,62 +1,13 @@
 <template>
     <div class="adminStudent">
-        <!-- <div>
-            <el-form :inline="true" :model="formInline" class="demo-form-inline">
-                <el-form-item label="年级">
-                    <el-input v-model="formInline.user" placeholder="请输入年级" clearable />
-                </el-form-item>
-                <el-form-item label="状态">
-                    <el-select v-model="formInline.region" placeholder="请选择状态" clearable>
-                        <el-option label="开" value="on" />
-                        <el-option label="关" value="off" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSubmit">查询</el-button>
-                    <el-button type="primary" @click="onSubmit">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </div> -->
-        <div style="width: 100%;height: 100%;">
-            <iframe src="//beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/works?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=" frameborder="0"
-            allow="camera *; fullscreen *;fullscreen 'src'"></iframe>
-            <!-- <div>
-                <el-button>新建</el-button>
-                <el-button>批量操作</el-button>
-                <el-button>更多操作</el-button>
-                <span>
-                    已选{{ selectNum }}
-                </span>
-            </div>
-            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55" />
-                <el-table-column label="班级" width="120" property="calss">
-                </el-table-column>
-                <el-table-column property="year" label="入学年份" width="120" />
-                <el-table-column property="peopleNum" label="人数" />
-                <el-table-column property="status" label="状态" />
-                <el-table-column property="updateDate" label="更新时间" />
-                <el-table-column property="option" label="操作">
-                    <template #default="scope">
-                        <el-button @click="Details(scope.row)">详情</el-button>
-                        <el-button @click="deleteList(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-config-provider :locale="zhCn">
-                <el-pagination class="clearfix" v-model:current-page="currentPage4" v-model:page-size="pageSize"
-                    :page-sizes="[10, 50, 100, 400]" :small="small" :disabled="disabled" :background="background"
-                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </el-config-provider> -->
-
-        </div>
+        <adminLeft />
+        <adminRight />
     </div>
 </template>
 <script setup>
 import { ref, reactive } from 'vue';
-import zhCn from "element-plus/es/locale/lang/zh-cn";
+import adminRight from './adminRight.vue';
+import adminLeft from './adminLeft.vue';
 const formInline = reactive({
     user: '',
     region: '',
@@ -136,13 +87,13 @@ const handleCurrentChange = (val) => {
 
 <style lang="scss" scoped>
 .adminStudent {
-    padding: 0 20px;
-    height: calc(100vh - 70px);
+    display: flex;
     .el-pagination {
         float: right;
         margin-top: 15px;
     }
-    iframe{
+
+    iframe {
         width: 100%;
         height: 100%;
     }

src/components/main/courseSelect.vue

@@ -19,7 +19,8 @@
             <div class="course_content">
               <p>{{ item.title }}<span>上册</span></p>
               <div class="class_button" v-if="isupdateCourse">
-                <el-button style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);">还原</el-button>
+                <el-button
+                  style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);">还原</el-button>
                 <el-button style="width: 30%;background: #fff" @click="updateCourse(item.id)">修改</el-button>FF
                 <el-button class="el_button_active" @click="openCourseDetail(item.id)">查看</el-button>
               </div>
@@ -37,7 +38,8 @@
               <p>{{ item.title }} <span>下册</span></p>
             </div>
             <div class="class_button" v-if="isupdateCourse">
-              <el-button style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);">还原</el-button>
+              <el-button style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);"
+                @click="ReductionCourse(item.id)">还原</el-button>
               <el-button style="width: 30%;background: #fff" @click="updateCourse(item.id)">修改</el-button>
               <el-button style="width: 30%;" class="el_button_active" @click="openCourseDetail(item.id)">查看</el-button>
             </div>
@@ -46,10 +48,28 @@
       </el-row>
     </div>
   </div>
+  <el-dialog v-model="dialogVisible" :before-close="handleClose" width=500>
+    <template #header>
+      <div class="dialog-header img_text_middle">
+        <img :src="WarningImg" alt="">
+        <span class="warning_text">操作警告</span>
+      </div>
+    </template>
+    <span>启用还原功能将重置当前修改，并将课程内容恢复至标准版本。请确认是否继续执行相关操作。</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="updateReduction()">
+          确认修改
+        </el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <script setup>
 import { ref, onMounted, watchEffect } from 'vue';
 import { userInfoStore } from '../../stores/counter'
+import WarningImg from '@/assets/icon/icon.png'
 import san1 from '../../assets/img/三下1.png'
 import san2 from '@/assets/img/三下2.png'
 import san3 from '@/assets/img/三下3.png'
@@ -101,6 +121,8 @@ const currentData = ref({
     },
   ]
 })
+const dialogVisible = ref(false)
+const updateReductionId = ref("")
 
 const courseData = {
   "三年级": {
@@ -168,7 +190,7 @@ const courseData = {
       }, {
         id: "",
         title: "猜拳大战",
-        url:wu4
+        url: wu4
       },
     ]
   },
@@ -260,9 +282,18 @@ const updateCourse = id => {
   top.U.MD.D.I.openInApplication('openCourseUpdate', id)
 }
 
+const ReductionCourse = id => {
+  dialogVisible.value = true
+  updateReductionId.value = id
+}
+
+const updateReduction = () => {
+
+}
+
 watchEffect(() => {
   if (JSON.stringify(user.user) != "{}") {
-    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher"|| user.user.currentRole == "visitor") {
+    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher" || user.user.currentRole == "visitor") {
       isupdateCourse.value = true
     }
   }
@@ -348,4 +379,10 @@ watchEffect(() => {
 .el-col {
   border-radius: 4px;
 }
+.warning_text{
+  font-weight: bold;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.9);
+  margin-left: 8px;
+}
 </style>

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/main.vue'
 import iframeView from '@/views/iframeRoute.vue'
+import login from '@/views/login.vue'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -10,6 +11,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: login
+    },
     {
       path: '/details/:title',
       name: 'Details',

src/views/login.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="login">
+        <!-- iframe 全屏显示 -->
+        <iframe src="//edu.cocorobo.cn/ResourcesLogin" frameborder="0"></iframe>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const userData = ref(null)
+</script>
+<style lang="scss" scoped>
+.login {
+    width: 100%;
+    height: 100vh;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+}
+</style>

src/views/main.vue

@@ -1,21 +1,25 @@
 <template>
+  <div style="height:100%">
+    <Header></Header>
     <div class="main">
-        <!-- <BannerVue></BannerVue> -->
-        <CourseSelect></CourseSelect>
-        <resource></resource>
-        <Practice></Practice>
-        <other v-if="isupdateCourse"></other>
-        <Edu v-if="isupdateCourse"></Edu>
+      <!-- <BannerVue></BannerVue> -->
+      <CourseSelect></CourseSelect>
+      <resource></resource>
+      <Practice></Practice>
+      <other v-if="isupdateCourse"></other>
+      <Edu v-if="isupdateCourse"></Edu>
     </div>
+  </div>
 </template>
 <script setup>
-import { ref,watchEffect } from 'vue';
+import { ref, watchEffect } from 'vue';
 import BannerVue from '@/components/main/banner.vue'
 import CourseSelect from '@/components/main/courseSelect.vue'
 import resource from '@/components/main/resource.vue';
 import Practice from '@/components/main/Practice.vue';
 import other from '@/components/main/other.vue';
 import Edu from '@/components/main/edu.vue';
+import Header from './header.vue'
 import { userInfoStore } from '../stores/counter'
 
 const user = userInfoStore()
@@ -23,17 +27,16 @@ const isupdateCourse = ref(false)
 
 watchEffect(() => {
   if (JSON.stringify(user.user) != "{}") {
-    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher"|| user.user.currentRole == "visitor") {
+    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher" || user.user.currentRole == "visitor") {
       isupdateCourse.value = true
     }
   }
 })
 </script>
 <style lang="scss" scoped>
-.main{
-    background: #F0F2F5;
-    padding: 20px 10%;
-    min-height: calc(100% - 60px);
+.main {
+  background: #F0F2F5;
+  padding: 20px 10%;
+  min-height: calc(100% - 60px);
 }
-
 </style>