From 95a27fe55990ca151cbe08f99cbeb669b4cb9dd8 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期四, 20 六月 2024 17:07:16 +0800 Subject: [PATCH] fix:修改在线培训 --- vue.config.js | 19 ++- public/index.html | 35 ++++-- src/views/train/data-list/index.vue | 98 +++++++++++++------ src/views/train/index.vue | 35 +++++- src/views/meet/index.vue | 49 ++++++--- src/router.js | 13 +- 6 files changed, 170 insertions(+), 79 deletions(-) diff --git a/public/index.html b/public/index.html index 6148799..dc077a3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> @@ -14,13 +15,16 @@ height: 100%; width: 100%; } + body { padding: 0; margin: 0; - height:100%; + height: 100%; width: 100%; } </style> + + <script src='https://ycl.easyblog.vip:8443/external_api.js'></script> <script src='./admin/components/echarts/echarts.min.js'></script> <script src='./admin/components/echarts/theme/macarons.js'></script> @@ -35,19 +39,28 @@ <script> var _hmt = _hmt || []; (function () { - var hm = document.createElement('script') - hm.src = 'https://hm.baidu.com/hm.js?cd8218cd51f800ed2b73e5751cb3f4f9' - var s = document.getElementsByTagName('script')[0] - s.parentNode.insertBefore(hm, s) + var hm = document.createElement('script'); + hm.src = 'https://hm.baidu.com/hm.js?cd8218cd51f800ed2b73e5751cb3f4f9'; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(hm, s); })() </script> + <script> + window.onload = () => { + window.JitsiMeetExternalAPI = JitsiMeetExternalAPI; + } + </script> + </head> + <body> -<noscript> - <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> -</noscript> -<div id="app"></div> -<!-- built files will be auto injected --> + <noscript> + <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to + continue.</strong> + </noscript> + <div id="app"></div> + <!-- built files will be auto injected --> </body> -</html> + +</html> \ No newline at end of file diff --git a/src/router.js b/src/router.js index f0ddcab..2f798d4 100644 --- a/src/router.js +++ b/src/router.js @@ -219,17 +219,18 @@ component: () => import('@/views/train/index'), name: 'TrainListPage', meta: { title: '鍦ㄧ嚎鍩硅', noCache: true } - }, - { - path: 'meet/index', - component: () => import('@/views/meet/index'), - name: 'meet', - hidden: true } ] }, { + path: '/meet', + component: () => import('@/views/meet/index'), + meta: { title: '鍦ㄧ嚎鏁欏', noCache: true }, + hidden: true + }, + + { path: '/education', component: Layout, name: 'EducationPage', diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue index 8b6e996..feea68f 100644 --- a/src/views/meet/index.vue +++ b/src/views/meet/index.vue @@ -1,24 +1,43 @@ <template> - <body><div id="meet" /></body> + <div id="meet" ref="meet" /> </template> -<script src='https://ycl.easyblog.vip:8443/external_api.js'></script> <script> -let api -const initIframeAPI = () => { - const domain = 'ycl.easyblog.vip:8443' - const options = { - roomName: 'test', - width: 700, - height: 700, - parentNode: document.querySelector('#meet') +let jitsiApi = null; +export default { + mounted() { + const width = window.innerWidth; + const height = window.innerHeight; + const domain = 'ycl.easyblog.vip:8443'; + const options = { + roomName: 'test', + width: width, + height: height, + parentNode: this.$refs.meet, + lang: 'zh_CN', + configOverwrite: { + prejoinConfig: { + enabled: false + }, + whiteboard: { + enabled: true + } + }, + toolbarButtons: ['whiteboard'] + }; + jitsiApi = new window.JitsiMeetExternalAPI(domain, options); + + jitsiApi.addListener('readyToClose', () => { + window.close(); + }); } - api = new JitsiMeetExternalAPI(domain, options) } -window.onload = () => { - initIframeAPI() -} </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +#meet { + width: 100%; + height: 100%; +} +</style> diff --git a/src/views/train/data-list/index.vue b/src/views/train/data-list/index.vue index 965749d..a3e3a16 100644 --- a/src/views/train/data-list/index.vue +++ b/src/views/train/data-list/index.vue @@ -1,38 +1,40 @@ <template> <div class="list-container w-full h-full"> - <div class="list-content w-full overflow-x-hidden"> - <el-row :gutter="20"> - <el-col :span="6" v-for="item in dataList" class="mb-5"> - <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }"> - <div class="img-container w-full"> - <img src="@/assets/list-card-bg.jpg" class="w-full"> + <div class="list-content w-full overflow-x-hidden"> + <el-row :gutter="20"> + <el-col :span="6" v-for="item in dataList" class="margin-col"> + <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }"> + <div class="img-container w-full"> + <img src="@/assets/list-card-bg.jpg" class="width-img"> + </div> + <div class="item-info p-3"> + <div class="info-title">{{ item.title }}</div> + <div class="info-teacher"> + <div class="info-label">涓昏:</div> + <div class="info-text">{{ item.teacher }}</div> </div> - <div class="item-info p-3"> - <div class="info-title font-bold">{{ item.title }}</div> - <div class="info-teacher flex text-sm text-gray-500"> - <div class="info-label">涓昏:</div> - <div class="info-text">{{ item.teacher }}</div> - </div> - <div class="info-time flex text-sm text-gray-500"> - <div class="info-label">寮�濮嬫椂闂�:</div> - <div class="info-text">{{ item.startTime }}</div> - </div> - <div class="info-time flex text-sm text-gray-500"> - <div class="info-label">缁撴潫鏃堕棿:</div> - <div class="info-text">{{ item.endTime }}</div> - </div> + <div class="info-time"> + <div class="info-label">寮�濮嬫椂闂�:</div> + <div class="info-text">{{ item.startTime }}</div> </div> - <el-button size="mini" @click="start" >寮�濮嬩笂璇�</el-button> - </el-card> - </el-col> - </el-row> - </div> + <div class="info-time"> + <div class="info-label">缁撴潫鏃堕棿:</div> + <div class="info-text">{{ item.endTime }}</div> + </div> + <div class="button-container"> + <el-button @click="start">寮�濮嬩笂璇�</el-button> + </div> + </div> + </el-card> + </el-col> + </el-row> + </div> </div> </template> <script> export default { - data () { + data() { return { dataList: [ { @@ -71,15 +73,18 @@ roomName: 'test' } ] - } + }; }, methods: { - start(){ - // this.$router.push({path:'/train/meet/index'}) - window.open('https://ycl.easyblog.vip:8443/test'); + start () { + let routeUrl = this.$router.resolve({ + path: "/meet", + }) + window.open(routeUrl.href, '_blank') + // window.open('https://ycl.easyblog.vip:8443/test'); } } -} +}; </script> <style lang="scss" scoped> @@ -103,4 +108,35 @@ .list-card { border-radius: 10px; } + +.item-info { + padding: 12px; + color: #8a8a8a; +} + +.info-title { + font-weight: bold; +} + +.info-teacher { + display: flex; + font-size: 14px; +} + +.info-time { + display: flex; +} + +.margin-col { + margin-bottom: 20px; +} + +.width-img { + width: 100%; +} + +.button-container { + display: flex; + margin-top: 10px; +} </style> diff --git a/src/views/train/index.vue b/src/views/train/index.vue index b164d9f..a7551f7 100644 --- a/src/views/train/index.vue +++ b/src/views/train/index.vue @@ -1,12 +1,12 @@ <template> - <div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center"> + <div class="train-container "> - <div class="list-container container grow relative"> + <div class="list-container"> <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4"> - <div class="list-wrapper w-full h-full"> - <el-card clasdivs="h-full" :body-style="{ height: '100%' }"> - <div class="card-wrapper w-full h-full flex flex-col px-8 box-border"> - <div class="card-header flex justify-between items-center shrink-0"> + <div class="list-wrapper"> + <el-card :body-style="{ height: '100%' }"> + <div class="card-wrapper"> + <div class="card-header"> <div class="header-tab"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane> @@ -15,7 +15,7 @@ <el-tab-pane label="宸茬粨鏉�" name="4"></el-tab-pane> </el-tabs> </div> - <div class="header-search flex items-center"> + <div class="header-search"> <el-input v-model="searchText" placeholder="璇疯緭鍏ヨ�冭瘯鍚嶇О"/> <el-button type="primary" class="ml-4">鎼滅储</el-button> </div> @@ -102,4 +102,25 @@ :deep(.el-tabs__nav-wrap:after) { display: none; } +.train-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + .list-container { + flex: 1; + position: relative; + } +} +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; +} +.header-search { + display: flex; + align-items: center; +} </style> diff --git a/vue.config.js b/vue.config.js index 43e9f92..cc6f74c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,8 +1,8 @@ -'use strict' -const path = require('path') +'use strict'; +const path = require('path'); -function resolve (dir) { - return path.join(__dirname, dir) +function resolve(dir) { + return path.join(__dirname, dir); } module.exports = { @@ -19,7 +19,8 @@ hotOnly: false, proxy: { '/api': { - target: 'http://localhost:8000', + // target: 'http://localhost:8000', + target: 'http://192.168.3.64:8000', changeOrigin: true } } @@ -31,12 +32,12 @@ filename: 'index.html' } }, - chainWebpack (config) { + chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) - .end() + .end(); config.module .rule('icons') .test(/\.svg$/) @@ -47,6 +48,6 @@ .options({ symbolId: 'icon-[name]' }) - .end() + .end(); } -} +}; -- Gitblit v1.8.0