Compare commits

...

4 Commits

Author SHA1 Message Date
lyc 7d1fd46c46 Merge pull request 'lyc-dev' (#14) from lyc-dev into main 2024-11-04 15:44:41 +08:00
lyc 2ca3d89d1c 模板 2024-11-04 15:45:11 +08:00
lyc 9d3e11f336 Merge branch 'main' into lyc-dev 2024-11-01 16:51:51 +08:00
lyc b63eb6631d 模板 2024-11-01 16:51:26 +08:00
28 changed files with 2269 additions and 230 deletions

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4723712 */
src: url('iconfont.woff2?t=1730356699416') format('woff2'),
url('iconfont.woff?t=1730356699416') format('woff'),
url('iconfont.ttf?t=1730356699416') format('truetype');
src: url('iconfont.woff2?t=1730448425319') format('woff2'),
url('iconfont.woff?t=1730448425319') format('woff'),
url('iconfont.ttf?t=1730448425319') format('truetype');
}
.iconfont {
@ -13,6 +13,34 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-xiaoxi:before {
content: "\e677";
}
.icon-fuzhi:before {
content: "\e6f6";
}
.icon-tianjia:before {
content: "\e675";
}
.icon-bianji-gangbi:before {
content: "\e6d8";
}
.icon-rss-line:before {
content: "\e782";
}
.icon-touxiang:before {
content: "\e655";
}
.icon-xiangxia:before {
content: "\e85d";
}
.icon--kejian:before {
content: "\e6a3";
}

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,55 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "2158298",
"name": "消息",
"font_class": "xiaoxi",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "12024469",
"name": "复制",
"font_class": "fuzhi",
"unicode": "e6f6",
"unicode_decimal": 59126
},
{
"icon_id": "17887886",
"name": "添加",
"font_class": "tianjia",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "24268380",
"name": "编辑-钢笔",
"font_class": "bianji-gangbi",
"unicode": "e6d8",
"unicode_decimal": 59096
},
{
"icon_id": "42198021",
"name": "rss-line",
"font_class": "rss-line",
"unicode": "e782",
"unicode_decimal": 59266
},
{
"icon_id": "700853",
"name": "头像",
"font_class": "touxiang",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "16398985",
"name": "向下",
"font_class": "xiangxia",
"unicode": "e85d",
"unicode_decimal": 59485
},
{
"icon_id": "6571029",
"name": "60-课件",

View File

@ -16,6 +16,10 @@ const props = defineProps({
isWin: {
type: Boolean,
default: false
},
showCatalog: {
type: Boolean,
default: true
}
})
/**pdf文件地址 */
@ -25,7 +29,15 @@ const fileUrl = props.isWin ? props.url : getAppInstallUrl('pdfjs-dist/web/viewe
onMounted(() => {
/** 将传入的pdf地址进行编码防止中文识别错误 */
if(props.isWin) pdfUrl.value = fileUrl
else pdfUrl.value = fileUrl + encodeURIComponent(props.url) + '#pageMode=outline'
else{
let url = fileUrl + encodeURIComponent(props.url)
if(props.showCatalog){
pdfUrl.value = url + '#pageMode=outline'
}
else{
pdfUrl.value = url
}
}
})
</script>

View File

@ -51,6 +51,7 @@ export const useGetSubject = async () =>{
}
const { rows } = await listEvaluation(subjectParams)
subjectList = rows
sessionStore.set('subject.curBook', rows[0])
sessionStore.set('subject.bookList', rows)
treeData = getTreeData(subjectList[0].id)
// 设置一个默认的curNode

View File

@ -75,7 +75,7 @@ const headerMenus = [
name: '教学大模型',
id: 1,
icon: 'icon-shouye',
path: '/index'
path: '/model/index'
},
{
name: '教学工作台',

View File

@ -1,232 +1,63 @@
<template>
<div class="page-header">
<div class="header-center">文枢2.5</div>
<div class="header-left" v-if="isShowBack">
<div class="back" @click="onBack">
<i class="iconfont icon-fanhui"></i>
<span>返回</span>
</div>
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="item in breadList"> {{ item.title }} </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="header-center" v-else>
AI文枢{{ version }}
</div>
<div class="header-right">
<WindowTools />
</div>
</div>
<!-- <div class="title-bar flex">
<div class="left-section">
<div class="flex title-box">
<el-image style="width: 23px; height: 23px" :src="logoIco" />
<span class="title" @click="changeTab">{{homeTitle}}</span>
</div>
<div class="change-tab">
<ul class="flex">
<li class="flex" :class="[activeId == menu.path ? 'active-li' : '', menu.disabled ? 'disabled' : '']"
v-for="menu in headerMenus" :key="menu.id" @click="clickMenu(menu)">
<div class="icon-box">
<svg class="icon iconfont" aria-hidden="true">
<use :xlink:href="menu.icon"></use>
</svg>
</div>
<span class="text">{{ menu.name }}</span>
</li>
</ul>
</div>
</div> -->
<!-- <div class="right-section flex">
<WindowTools />
<div class="user flex">
<div class="avatar-container">
<div class="avatar-wrapper flex">
<el-dropdown class="right-menu-item hover-effect" @command="handleCommand">
<img :src="dev_api + userStore.user.avatar" class="user-avatar" style="float: left" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changePage('/profile')">个人中心</el-dropdown-item>
<el-dropdown-item @click="changePage('/class')">班级中心</el-dropdown-item>
<el-dropdown-item divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="user-info flex">
<span class="user-name">{{ userStore.user.nickName }}</span>
<div class="flex">
<el-dropdown @command="changeSubject" max-height="500">
<div class="user-subject">{{ userStore.user.edusubject }}
<el-icon class="el-icon--right"><arrow-down />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in userSubjectList" :key="item.id" :command="item">
{{ item.edustage }}-{{ item.edusubject }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="user-depname">{{ userStore.user.deptName }}</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { ArrowRight } from '@element-plus/icons-vue'
import WindowTools from '@/components/window-tools/index.vue'
import useUserStore from '@/store/modules/user'
import { updateUserInfo } from '@/api/system/user'
import logoIco from '@/assets/images/logo.png'
import { listEvaluation } from '@/api/classManage/index'
import { sessionStore } from '@/utils/store'
// import Chat from '@/utils/chat' // im
// if (!Chat.imChat) Chat.init()
import pkc from "../../../../../package.json"
const version = ref(pkc.version)
let homeTitle = ref(import.meta.env.VITE_APP_TITLE)
const { ipcRenderer } = window.electron || {}
const userStore = useUserStore()
//
const router = useRouter()
const currentRoute = ref('')
const dev_api = ref(import.meta.env.VITE_APP_BASE_API)
const userSubjectList = ref([])
const activeId = ref('/home')
const headerMenus = [
{
name: '工作台',
id: 1,
icon: '#icon-gongzuotai_xuanzhong',
path: '/home'
},
{
name: '研究室',
id: 2,
icon: '#icon-yanjiushi-2',
disabled: true
},
{
name: '资源库',
id: 3,
icon: '#icon-ziyuanku',
path: '/resource'
},
{
name: '朋友圈',
id: 4,
icon: '#icon-iconfontzhizuobiaozhunbduan3-1',
disabled: true
}
]
const clickMenu = ({ id, disabled, path }) => {
if (disabled) return
activeId.value = id
router.push(path)
const onBack = () => {
router.go(-1)
}
//
const isShowBack = ref(false)
const breadList = ref([])
watch(
() => router.currentRoute.value,
(newValue) => {
currentRoute.value = newValue
activeId.value = newValue.path
let path = newValue.path
console.log(newValue);
if (path.includes('/model') && path !== ('/model/index')) {
isShowBack.value = true
breadList.value = newValue.matched.map(item => item.meta)
}
else {
isShowBack.value = false
}
},
{ immediate: true }
)
const changePage = (url) => {
router.push(url)
}
function handleCommand(command) {
switch (command) {
case 'setLayout':
setLayout()
break
case 'logout':
logout()
// Chat?.logout() // im 退
break
default:
break
}
}
function logout() {
const hasClass = sessionStore.has('activeClass.id')
const hasTool = sessionStore.get('isToolWin')
if (hasClass || hasTool) return ElMessage.warning('当前正在上课,请先结束上课')
ElMessageBox.confirm('确认退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const Chat = (await import('@/utils/chat')).default
if (!!Chat.imChat) Chat.logout()
userStore
.logOut()
.then(() => {
// router.replace('/login')
ipcRenderer && ipcRenderer.send('openLoginWindow')
})
.catch(() => {
// router.replace('/login')
ipcRenderer && ipcRenderer.send('openLoginWindow')
})
}).catch(()=>{})
}
const emits = defineEmits(['setLayout'])
function setLayout() {
emits('setLayout')
}
//
const changeSubject = async (command) =>{
let sessionSubject = {
bookList: null,
curBook: null,
curNode: null,
defaultExpandedKeys: [],
subjectTree: []
}
sessionStore.set( 'subject', sessionSubject)
const { userId, userName, plainpwd } = userStore.user
const data = {
userId,
userName,
edustage: command.edustage,
edusubject: command.edusubject
}
await updateUserInfo(data)
await userStore.login({username: userName, password: plainpwd})
await userStore.getInfo()
router.go()
}
//
const getAllSubject = async () => {
const { rows } = await listEvaluation({ itemkey: "subject", pageSize: 500 })
if(!userStore.user.subject) return
const subject = userStore.user.subject.split(',')
userSubjectList.value = rows.filter(item =>
subject.some(el => item.id == el)
)
}
onMounted(() => {
getAllSubject()
})
</script>
<style lang="scss" scoped>
.page-header{
.page-header {
height: 100%;
background-color: #fff;
display: flex;
@ -234,16 +65,47 @@ onMounted(() => {
align-items: center;
width: 100%;
-webkit-app-region: drag;
.header-center{
.header-left {
padding-left: 20px;
font-size: 13px;
cursor: pointer;
-webkit-app-region: no-drag;
display: flex;
align-items: center;
.back {
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
color: #409EFF;
font-weight: bold;
.icon-fanhui {
margin-top: -2px;
margin-right: 3px;
}
}
:deep(.el-breadcrumb) {
font-size: 13px !important;
}
}
.header-center {
margin-left: auto;
margin-right: auto;
}
.header-right{
.header-right {
height: 100%;
display: flex;
align-items: center;
}
}
.title-bar {
height: 80px;
justify-content: space-between;
@ -282,13 +144,15 @@ onMounted(() => {
padding: 5px 8px;
height: 60px;
align-items: center;
.icon-box{
.icon-box {
width: 100%;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.text {
margin-top: 3px;
font-size: 13px;

View File

@ -26,18 +26,44 @@ export const constantRoutes = [
component: () => import('@/views/classTask/teachClassTask.vue'),
hidden: true
},
{
path: '/model',
component: Layout,
name: 'model',
meta: { title: '教学大模型' },
children: [
{
path: 'index',
component: () => import('@/views/model/index.vue'),
name: 'model-index',
meta: { title: '教学大模型' }
},
{
path: 'curriculum',
component: () => import('@/views/curriculum-standards/index.vue'),
name: 'curriculum-standard',
meta: { title: '课标研读' }
},
{
path: 'teaching',
component: () => import('@/views/teaching-material/index.vue'),
name: 'teaching-material',
meta: { title: '教材研读' }
},
{
path: 'examination',
component: () => import('@/views/examination-analysis/index.vue'),
name: 'examination-analysis',
meta: { title: '考试分析' }
},
]
},
{
path: '/',
component: Layout,
redirect: '/home',
meta: { title: '教学工作台' },
children: [
{
path: '/index',
component: () => import('@/views/index/index.vue'),
name: 'index',
meta: { title: '首页' }
},
{
path: '/home',
component: () => import('@/views/desktop/index.vue'),

View File

@ -0,0 +1,28 @@
<template>
<div class="container-pdf">
<PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import PDF from '@/components/PdfJs/index.vue'
import { sessionStore } from '@/utils/store'
const pdfUrl = ref('')
onMounted(async () =>{
await nextTick()
const { fileurl } = sessionStore.get('subject.curBook')
pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
})
</script>
<style lang="scss" scoped>
.container-pdf{
height: 100%;
}
</style>

View File

@ -0,0 +1,153 @@
<template>
<div class="question-container">
<div class="question-main">
<div class="question-item">
<div class="item-con">
<div class="item-q flex">
<div class="q-user">
<i class="iconfont icon-touxiang"></i>
</div>
<div class="q-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
<div class="item-a flex">
<div class="a-user">
</div>
<div class="a-text">
<p> 语言的建构与运用学生在丰富的语言实践中通过主动的积累梳理和整合逐步掌握祖国语言文字特点及其规律形成个体言语经验发展在具体语言情境中正确有效地运用祖国语言文字进行交流沟通的能力</p>
<a class="" href="">来自高中语文课程标准2020点击查看原文第4页</a>
<p>语言建构有两方面的内涵第一是指出于表达思想的目的按照语言内部系统来建构话语-用词汇组构句子用句子组构段落和篇章第二是指每个人在个人言语经验的基础上逐步建构起自己的言语表达体系包括每个人的言语心理词典句典和表达习惯</p>
<a href="">来自高中语文课程标准解读点击查看原文第58页</a>
<p>高中语文课程标准2003版本中没有核心素养相关表达 </p>
<a href="">来自高中语文课程标准2003 </a>
</div>
</div>
</div>
<div class="item-icon flex">
<div class="flex">
<span>
<i class="iconfont icon-fuzhi"></i>
复制
</span>
<span>
<i class="iconfont icon-bianji-gangbi"></i>
写评价
</span>
<span>
<i class="iconfont icon-rss-line"></i>
添加到微教研
</span>
</div>
<div>
<span>
<i class="iconfont icon-tianjia"></i>
保存
</span>
</div>
</div>
</div>
</div>
<el-input v-model="textarea" class="question-textarea" resize="none" :rows="2" type="textarea" placeholder="在这里输入发消息,输入@或/选择" />
</div>
</template>
<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>
<style lang="scss" scoped>
.question-container {
padding: 10px 15px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.question-item {
display: flex;
flex-direction: column;
.item-con {
background: #fff;
border-radius: 5px;
padding: 10px;
.item-q {
align-items: center;
width: 100%;
margin-bottom: 10px;
.q-user {
width: 30px;
height: 30px;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
.icon-touxiang {
font-size: 18px;
font-weight: bold;
}
}
.q-text {
color: #409eff;
font-size: 13px;
}
}
.item-a {
color: #3D3D3D;
font-size: 13px;
.a-user {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
.a-text {
text-align: left;
a{
color: #409eff;
text-decoration: underline;
margin-bottom: 15px;
display: block;
}
}
}
}
.item-icon{
justify-content: space-between;
align-items: center;
color: #3D3D3D;
margin-top: 10px;
font-size: 13px;
span{
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover{
background: #F5F7FA
}
}
.iconfont{
margin-right: 3px;
color: #3498fc;
}
}
}
.question-textarea {
width: 100%;
}
}
</style>

View File

@ -0,0 +1,210 @@
<template>
<div class="read-container">
<div class="template-list">
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>核心素养与课程目标</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>课程内容相关</div>
<div class="item-text">研读课程标准提取出与本课相关的课程内容要求
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>学业质量要求</div>
<div class="item-text">研读课程标准提取出与本课相关的学业水平要求包括水平一水平二水平三各自的要求描述
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学实施建议</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item template-item-result">
<div class="result-item-header">
<i class="iconfont icon-xiaoxi"></i>
语言建构与运用是指学生在丰富的语言实践中通过主动的积累梳理和整合逐步掌握祖国语言文字特点及其运用规律形成个体言语经验......
</div>
<div class="result-icon-btn flex pl-25">
<div class="flex">
<span><i class="iconfont icon-fuzhi"></i>复制</span>
<span><i class="iconfont icon-bianji-gangbi"></i>写想法</span>
</div>
<div>
<span><i class="iconfont icon-tianjia"></i>加入备课篮</span>
</div>
</div>
<div class="line"></div>
<div class="other-msg pl-25">
<div class="other-user flex">
<i class="iconfont icon-touxiang"></i>
重庆市酉阳县二中 - 李丽
</div>
<div class="other-text flex">北师大王宁老师说语言建构有两方面的含义一是指出于表达思想的目的二是指在个人言语经验的基础上逐步建构起自己的言语体系</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #000;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
}
}
}
.template-item-result {
background: #DDEAFD !important;
.result-item-header {
display: flex;
align-items: flex-start;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.icon-xiaoxi {
color: #5881D5;
font-weight: bold;
font-size: 20px;
margin-right: 10px;
}
}
.result-icon-btn {
justify-content: space-between;
font-size: 13px;
margin-top: 5px;
span {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover {
background: #cfe0fa
}
}
.iconfont {
margin-right: 3px;
color: #3498fc;
}
}
.line {
height: 1px;
background: #D8D8D8;
margin: 10px 0;
}
.other-msg {
font-size: 13px;
.other-user {
align-items: center;
color: #BA4B0F;
font-size: 12px;
.icon-touxiang {
color: #BA4B0F;
font-weight: bold;
font-size: 16px;
margin-right: 5px;
}
}
.other-text {
color: #191919;
text-align: left;
}
}
}
}
.pl-25 {
padding-left: 25px;
}
</style>

View File

@ -0,0 +1,126 @@
<template>
<div class="read-container">
<div class="read-header flex">
<el-dropdown>
<span class="el-dropdown-link">
课标研读模板
<i class="iconfont icon-xiangxia" </i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>课标研读模板一</el-dropdown-item>
<el-dropdown-item>课标研读模板二</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button text class="add-btn">
<i class="iconfont icon-jiahao"></i>
添加
</el-button>
</div>
<div class="template-list">
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>核心素养与课标目标</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>课程内容要求</div>
<div class="item-text">研读课程标准提取出与本课相关的课程内容要求
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>学业质量要求</div>
<div class="item-text">研读课程标准提取出与本课相关的学业水平要求包括水平一水平二水平三各自的要求描述
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学实施建议</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
margin-top: 15px;
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
}
}
}
}
</style>

View File

@ -0,0 +1,178 @@
<template>
<div class="page-curriculum flex">
<el-row>
<el-col :span="12" class="flex">
<div class="page-left">
<template v-if="activeMenu == 1">
<div class="page-title">课程标准研读</div>
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
</el-radio-group>
<div class="list">
<ul>
<li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
@click="clickItem(index)">
<el-image class="img" :src="item.url" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<template v-if="activeMenu != 1">
<PdfTemplate/>
</template>
</div>
</el-col>
<el-col :span="12" class="flex">
<div class="page-right">
<div class="right-header">
<el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
@click="onClickMenu(item)">{{ item.label
}}</el-button>
</div>
<div class="right-con">
<ReadTemplate v-if="activeMenu == 1" />
<QuestionAnswer v-if="activeMenu == 2" />
<ReadResult v-if="activeMenu == 3" />
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ReadTemplate from './container/read-template.vue';
import QuestionAnswer from './container/question-answer.vue'
import ReadResult from './container/read-result.vue'
import PdfTemplate from './container/pdf-template.vue'
const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11044b08-04c1-41a0-a453-1fd20b58a614%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732953359&t=7ab1d1b3a903db85b1149914407aea35'
/************************左侧************* */
const radio = ref(1)
const radioList = ref([
{ label: '浏览研读', value: 1 },
{ label: '跨学科研读', value: 2 },
{ label: '跨学段研读', value: 3 },
{ label: '课标修订研读', value: 4 },
{ label: '自由研读', value: 5 },
])
const list = ref([
{
name: '高中语文课程标准',
url
}
])
const changeRadio = () => {
list.value = []
for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
list.value.push({
name: '高中语文课程标准',
url
})
}
}
const activeIndex = ref(-1)
const clickItem = (index) => {
activeIndex.value = index
}
/************************右侧************* */
const contentMenu = [
{ label: '研读模板', value: 1 },
{ label: '问答模板', value: 2 },
{ label: '研读结果', value: 3 }
]
const activeMenu = ref(1)
const onClickMenu = (item) => {
activeMenu.value = item.value
}
</script>
<style lang="scss" scoped>
.page-curriculum {
height: 100%;
background: #fff;
border-radius: 5px;
overflow: hidden;
.el-row {
width: 100%;
.page-left {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
.page-title {
font-size: 20px;
padding: 20px 0;
}
.list {
ul {
display: flex;
flex-wrap: wrap;
li {
display: flex;
flex-direction: column;
font-size: 13px;
padding: 10px;
cursor: pointer;
border-radius: 5px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 10px;
.img {
width: 100px;
height: 130px;
border: solid #ccc 1px;
margin-bottom: 10px;
}
&:hover {
background: #E0EAFF;
}
}
.li-active {
background: #E0EAFF;
}
}
}
}
.page-right {
width: 100%;
background: #F6F6F6;
border-left: solid #ececec 1px;
display: flex;
flex-direction: column;
.right-header {
padding-left: 30px;
height: 45px;
display: flex;
align-items: center;
background: #fff;
border-bottom: solid #ececec 1px;
}
.right-con {
flex: 1;
}
}
}
}
</style>

View File

@ -0,0 +1,28 @@
<template>
<div class="container-pdf">
<PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import PDF from '@/components/PdfJs/index.vue'
import { sessionStore } from '@/utils/store'
const pdfUrl = ref('')
onMounted(async () =>{
await nextTick()
const { fileurl } = sessionStore.get('subject.curBook')
pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
})
</script>
<style lang="scss" scoped>
.container-pdf{
height: 100%;
}
</style>

View File

@ -0,0 +1,153 @@
<template>
<div class="question-container">
<div class="question-main">
<div class="question-item">
<div class="item-con">
<div class="item-q flex">
<div class="q-user">
<i class="iconfont icon-touxiang"></i>
</div>
<div class="q-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
<div class="item-a flex">
<div class="a-user">
</div>
<div class="a-text">
<p> 语言的建构与运用学生在丰富的语言实践中通过主动的积累梳理和整合逐步掌握祖国语言文字特点及其规律形成个体言语经验发展在具体语言情境中正确有效地运用祖国语言文字进行交流沟通的能力</p>
<a class="" href="">来自高中语文课程标准2020点击查看原文第4页</a>
<p>语言建构有两方面的内涵第一是指出于表达思想的目的按照语言内部系统来建构话语-用词汇组构句子用句子组构段落和篇章第二是指每个人在个人言语经验的基础上逐步建构起自己的言语表达体系包括每个人的言语心理词典句典和表达习惯</p>
<a href="">来自高中语文课程标准解读点击查看原文第58页</a>
<p>高中语文课程标准2003版本中没有核心素养相关表达 </p>
<a href="">来自高中语文课程标准2003 </a>
</div>
</div>
</div>
<div class="item-icon flex">
<div class="flex">
<span>
<i class="iconfont icon-fuzhi"></i>
复制
</span>
<span>
<i class="iconfont icon-bianji-gangbi"></i>
写评价
</span>
<span>
<i class="iconfont icon-rss-line"></i>
添加到微教研
</span>
</div>
<div>
<span>
<i class="iconfont icon-tianjia"></i>
保存
</span>
</div>
</div>
</div>
</div>
<el-input v-model="textarea" class="question-textarea" resize="none" :rows="2" type="textarea" placeholder="在这里输入发消息,输入@或/选择" />
</div>
</template>
<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>
<style lang="scss" scoped>
.question-container {
padding: 10px 15px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.question-item {
display: flex;
flex-direction: column;
.item-con {
background: #fff;
border-radius: 5px;
padding: 10px;
.item-q {
align-items: center;
width: 100%;
margin-bottom: 10px;
.q-user {
width: 30px;
height: 30px;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
.icon-touxiang {
font-size: 18px;
font-weight: bold;
}
}
.q-text {
color: #409eff;
font-size: 13px;
}
}
.item-a {
color: #3D3D3D;
font-size: 13px;
.a-user {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
.a-text {
text-align: left;
a{
color: #409eff;
text-decoration: underline;
margin-bottom: 15px;
display: block;
}
}
}
}
.item-icon{
justify-content: space-between;
align-items: center;
color: #3D3D3D;
margin-top: 10px;
font-size: 13px;
span{
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover{
background: #F5F7FA
}
}
.iconfont{
margin-right: 3px;
color: #3498fc;
}
}
}
.question-textarea {
width: 100%;
}
}
</style>

View File

@ -0,0 +1,174 @@
<template>
<div class="read-container">
<div class="template-list">
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>历年高考真题分析</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>新课标与新高考改革分析</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>模拟命题</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #000;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
}
}
}
.template-item-result {
background: #DDEAFD !important;
.result-item-header {
display: flex;
align-items: flex-start;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.icon-xiaoxi {
color: #5881D5;
font-weight: bold;
font-size: 20px;
margin-right: 10px;
}
}
.result-icon-btn {
justify-content: space-between;
font-size: 13px;
margin-top: 5px;
span {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover {
background: #cfe0fa
}
}
.iconfont {
margin-right: 3px;
color: #3498fc;
}
}
.line {
height: 1px;
background: #D8D8D8;
margin: 10px 0;
}
.other-msg {
font-size: 13px;
.other-user {
align-items: center;
color: #BA4B0F;
font-size: 12px;
.icon-touxiang {
color: #BA4B0F;
font-weight: bold;
font-size: 16px;
margin-right: 5px;
}
}
.other-text {
color: #191919;
text-align: left;
}
}
}
}
.pl-25 {
padding-left: 25px;
}
</style>

View File

@ -0,0 +1,116 @@
<template>
<div class="read-container">
<div class="read-header flex">
<el-dropdown>
<span class="el-dropdown-link">
课标研读模板
<i class="iconfont icon-xiangxia" </i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>考试分析模板一</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button text class="add-btn">
<i class="iconfont icon-jiahao"></i>
添加
</el-button>
</div>
<div class="template-list">
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>历年高考真题分析</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>新课标与新高考改革分析</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>模拟命题</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
margin-top: 15px;
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
}
}
}
}
</style>

View File

@ -0,0 +1,177 @@
<template>
<div class="page-curriculum flex">
<el-row>
<el-col :span="12" class="flex">
<div class="page-left">
<template v-if="activeMenu == 1">
<div class="page-title">考试分析</div>
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
</el-radio-group>
<div class="list">
<ul>
<li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
@click="clickItem(index)">
<el-image class="img" :src="item.url" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<template v-if="activeMenu != 1">
<PdfTemplate/>
</template>
</div>
</el-col>
<el-col :span="12" class="flex">
<div class="page-right">
<div class="right-header">
<el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
@click="onClickMenu(item)">{{ item.label
}}</el-button>
</div>
<div class="right-con">
<ReadTemplate v-if="activeMenu == 1" />
<QuestionAnswer v-if="activeMenu == 2" />
<ReadResult v-if="activeMenu == 3" />
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ReadTemplate from './container/read-template.vue';
import QuestionAnswer from './container/question-answer.vue'
import ReadResult from './container/read-result.vue'
import PdfTemplate from './container/pdf-template.vue'
const url = 'http://t13.baidu.com/it/u=3055765737,2452458153&fm=224&app=112&f=JPEG?w=500&h=500'
/************************左侧************* */
const radio = ref(1)
const radioList = ref([
{ label: '浏览研读', value: 1 },
{ label: '跨学科研读', value: 2 },
{ label: '文献研读', value: 3 },
{ label: '模拟命题', value: 4 },
])
const list = ref([
{
name: '2021年高考真题',
url
}
])
const changeRadio = () => {
list.value = []
for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
list.value.push({
name: '2021年高考真题',
url
})
}
}
const activeIndex = ref(-1)
const clickItem = (index) => {
activeIndex.value = index
}
/************************右侧************* */
const contentMenu = [
{ label: '分析模板', value: 1 },
{ label: '问答分析', value: 2 },
{ label: '分析结果', value: 3 }
]
const activeMenu = ref(1)
const onClickMenu = (item) => {
activeMenu.value = item.value
}
</script>
<style lang="scss" scoped>
.page-curriculum {
height: 100%;
background: #fff;
border-radius: 5px;
overflow: hidden;
.el-row {
width: 100%;
.page-left {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
.page-title {
font-size: 20px;
padding: 20px 0;
}
.list {
ul {
display: flex;
flex-wrap: wrap;
li {
display: flex;
flex-direction: column;
font-size: 13px;
padding: 10px;
cursor: pointer;
border-radius: 5px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 10px;
.img {
width: 100px;
height: 130px;
border: solid #ccc 1px;
margin-bottom: 10px;
}
&:hover {
background: #E0EAFF;
}
}
.li-active {
background: #E0EAFF;
}
}
}
}
.page-right {
width: 100%;
background: #F6F6F6;
border-left: solid #ececec 1px;
display: flex;
flex-direction: column;
.right-header {
padding-left: 30px;
height: 45px;
display: flex;
align-items: center;
background: #fff;
border-bottom: solid #ececec 1px;
}
.right-con {
flex: 1;
}
}
}
}
</style>

View File

@ -1,13 +0,0 @@
<template>
<div>
教学大模型
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,21 @@
<template>
<div>
<div class="mb-4">
<el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
<el-button type="success" @click="onchange('/model/teaching')">教材研读</el-button>
<el-button type="info" @click="onchange('/model/examination')">考试分析</el-button>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const onchange = (path) =>{
router.push(path)
}
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,28 @@
<template>
<div class="container-pdf">
<PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import PDF from '@/components/PdfJs/index.vue'
import { sessionStore } from '@/utils/store'
const pdfUrl = ref('')
onMounted(async () =>{
await nextTick()
const { fileurl } = sessionStore.get('subject.curBook')
pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
})
</script>
<style lang="scss" scoped>
.container-pdf{
height: 100%;
}
</style>

View File

@ -0,0 +1,152 @@
<template>
<div class="question-container">
<div class="question-main">
<div class="question-item">
<div class="item-con">
<div class="item-q flex">
<div class="q-user">
<i class="iconfont icon-touxiang"></i>
</div>
<div class="q-text">总结沁园春·长沙一课的教学目标</div>
</div>
<div class="item-a flex">
<div class="a-user">
</div>
<div class="a-text">
<p>本单元属于必修课程文学阅读与写作任务群课标指出文学阅读与写作任务群旨在引导学生阅读古今中外诗歌散文小说剧本等不同体裁的优秀文学作品使学生在感受形象品味语言体验情感的过程中提升文学欣赏能力并尝试文学写作撰写文学评论借以提高审美鉴赏能力和表达交流能力
毛泽东沁园春·长沙作者充满激情地回忆了青年时期粪土当年万户侯的岁月词作豪迈大气洋溢着不可抗拒的青春热情特别是对当时社会的思考和改造世界的雄心斗志有着强烈的感染力可以激励学生坚定不断进取奉献社会的决心和信心
</p>
<a class="" href="">来自教师用书高中语文点击查看原文第22页</a>
</div>
</div>
</div>
<div class="item-icon flex">
<div class="flex">
<span>
<i class="iconfont icon-fuzhi"></i>
复制
</span>
<span>
<i class="iconfont icon-bianji-gangbi"></i>
写评价
</span>
<span>
<i class="iconfont icon-rss-line"></i>
添加到微教研
</span>
</div>
<div>
<span>
<i class="iconfont icon-tianjia"></i>
保存
</span>
</div>
</div>
</div>
</div>
<el-input v-model="textarea" class="question-textarea" resize="none" :rows="2" type="textarea" placeholder="在这里输入发消息,输入@或/选择" />
</div>
</template>
<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>
<style lang="scss" scoped>
.question-container {
padding: 10px 15px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.question-item {
display: flex;
flex-direction: column;
.item-con {
background: #fff;
border-radius: 5px;
padding: 10px;
.item-q {
align-items: center;
width: 100%;
margin-bottom: 10px;
.q-user {
width: 30px;
height: 30px;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
.icon-touxiang {
font-size: 18px;
font-weight: bold;
}
}
.q-text {
color: #409eff;
font-size: 13px;
}
}
.item-a {
color: #3D3D3D;
font-size: 13px;
.a-user {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #F6F6F6;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
.a-text {
text-align: left;
a{
color: #409eff;
text-decoration: underline;
margin-bottom: 15px;
display: block;
}
}
}
}
.item-icon{
justify-content: space-between;
align-items: center;
color: #3D3D3D;
margin-top: 10px;
font-size: 13px;
span{
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover{
background: #F5F7FA
}
}
.iconfont{
margin-right: 3px;
color: #3498fc;
}
}
}
.question-textarea {
width: 100%;
}
}
</style>

View File

@ -0,0 +1,193 @@
<template>
<div class="read-container">
<div class="template-list">
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学目标研读</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学重点与难点</div>
<div class="item-text">研读课程标准提取出与本课相关的课程内容要求
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>前置知识分析研读</div>
<div class="item-text">研读课程标准提取出与本课相关的学业水平要求包括水平一水平二水平三各自的要求描述
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>课文情境研读</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>例题习题研读</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #000;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
}
}
}
.template-item-result {
background: #DDEAFD !important;
.result-item-header {
display: flex;
align-items: flex-start;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.icon-xiaoxi {
color: #5881D5;
font-weight: bold;
font-size: 20px;
margin-right: 10px;
}
}
.result-icon-btn {
justify-content: space-between;
font-size: 13px;
margin-top: 5px;
span {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
&:hover {
background: #cfe0fa
}
}
.iconfont {
margin-right: 3px;
color: #3498fc;
}
}
.line {
height: 1px;
background: #D8D8D8;
margin: 10px 0;
}
.other-msg {
font-size: 13px;
.other-user {
align-items: center;
color: #BA4B0F;
font-size: 12px;
.icon-touxiang {
color: #BA4B0F;
font-weight: bold;
font-size: 16px;
margin-right: 5px;
}
}
.other-text {
color: #191919;
text-align: left;
}
}
}
}
.pl-25 {
padding-left: 25px;
}
</style>

View File

@ -0,0 +1,157 @@
<template>
<div class="read-container">
<div class="read-header flex">
<el-dropdown>
<span class="el-dropdown-link">
课标研读模板
<i class="iconfont icon-xiangxia" </i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>课标研读模板一</el-dropdown-item>
<el-dropdown-item>课标研读模板二</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button text class="add-btn">
<i class="iconfont icon-jiahao"></i>
添加
</el-button>
</div>
<div class="template-list">
<el-row :gutter="20">
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学目标研读</div>
<div class="item-text">研读课程标准提取出与本课相关的核心素养与课程目标</div>
</div>
</el-col>
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>教学重点与难点</div>
<div class="item-text">研读课程标准提取出与本课相关的课程内容要求</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>课程内容要求</div>
<div class="item-text">研读课程标准提取出与本课相关的课程内容要求
</div>
</div>
</el-col>
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>前置知识分析研读</div>
<div class="item-text">
研读课程标准提取出与本课相关的学业水平要求包括水平一水平二水平三各自的要求描述
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>例题习题研读</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>插图素材研读</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="template-item">
<div class="item-header"><span class="blue">#</span>拓展知识研读</div>
<div class="item-text">研读课程标准提取出与本课相关的教学实施建议
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.read-container {
padding: 15px;
.el-dropdown-link {
font-weight: bold;
.el-icon--right {
font-weight: bold;
}
}
.read-header {
justify-content: space-between;
align-items: center;
.add-btn {
font-size: 13px;
.icon-jiahao {
margin-right: 3px;
font-size: 14px;
}
}
}
.template-list {
margin-top: 15px;
.template-item {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
.item-header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #3D3D3D;
.blue {
font-size: 22px;
color: #409eff;
margin-right: 5px;
}
}
.item-text {
display: flex;
color: #409eff;
font-size: 13px;
padding-left: 20px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
/* -webkit-line-clamp 其实是一个不规范属性使用了WebKit的CSS扩展属性该方法适用于WebKit浏览器及移动端*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
}
}
}
</style>

View File

@ -0,0 +1,178 @@
<template>
<div class="page-curriculum flex">
<el-row>
<el-col :span="12" class="flex">
<div class="page-left">
<template v-if="activeMenu == 1">
<div class="page-title">教材研读</div>
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
</el-radio-group>
<div class="list">
<ul>
<li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
@click="clickItem(index)">
<el-image class="img" :src="item.url" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<template v-if="activeMenu != 1">
<PdfTemplate/>
</template>
</div>
</el-col>
<el-col :span="12" class="flex">
<div class="page-right">
<div class="right-header">
<el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
@click="onClickMenu(item)">{{ item.label
}}</el-button>
</div>
<div class="right-con">
<ReadTemplate v-if="activeMenu == 1" />
<QuestionAnswer v-if="activeMenu == 2" />
<ReadResult v-if="activeMenu == 3" />
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ReadTemplate from './container/read-template.vue';
import QuestionAnswer from './container/question-answer.vue'
import ReadResult from './container/read-result.vue'
import PdfTemplate from './container/pdf-template.vue'
const url = 'https://p5.itc.cn/images01/20220529/f30e3c4164dc4f7495ed196577a2a312.jpeg'
/************************左侧************* */
const radio = ref(1)
const radioList = ref([
{ label: '浏览研读', value: 1 },
{ label: '跨学科研读', value: 2 },
{ label: '跨学段研读', value: 3 },
{ label: '课标修订研读', value: 4 },
{ label: '自由研读', value: 5 },
])
const list = ref([
{
name: '高中语文必修上',
url
}
])
const changeRadio = () => {
list.value = []
for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
list.value.push({
name: '高中语文必修上',
url
})
}
}
const activeIndex = ref(-1)
const clickItem = (index) => {
activeIndex.value = index
}
/************************右侧************* */
const contentMenu = [
{ label: '研读模板', value: 1 },
{ label: '问答模板', value: 2 },
{ label: '研读结果', value: 3 }
]
const activeMenu = ref(1)
const onClickMenu = (item) => {
activeMenu.value = item.value
}
</script>
<style lang="scss" scoped>
.page-curriculum {
height: 100%;
background: #fff;
border-radius: 5px;
overflow: hidden;
.el-row {
width: 100%;
.page-left {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
.page-title {
font-size: 20px;
padding: 20px 0;
}
.list {
ul {
display: flex;
flex-wrap: wrap;
li {
display: flex;
flex-direction: column;
font-size: 13px;
padding: 10px;
cursor: pointer;
border-radius: 5px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 10px;
.img {
width: 100px;
height: 130px;
border: solid #ccc 1px;
margin-bottom: 10px;
}
&:hover {
background: #E0EAFF;
}
}
.li-active {
background: #E0EAFF;
}
}
}
}
.page-right {
width: 100%;
background: #F6F6F6;
border-left: solid #ececec 1px;
display: flex;
flex-direction: column;
.right-header {
padding-left: 30px;
height: 45px;
display: flex;
align-items: center;
background: #fff;
border-bottom: solid #ececec 1px;
}
.right-con {
flex: 1;
}
}
}
}
</style>