Skip to content

C
course_creation
提交 d66f79f3 authored 作者: 蔡芬's avatar 蔡芬
浏览文件
操作

页面初始化

上级 d5e490a5
隐藏空白字符变更
内嵌 并排
正在显示 包含 705 行增加 和 18 行删除
src/assets/css/common.less
浏览文件 @ d66f79f3
......@@ -23,11 +23,28 @@ ul {
::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
.displaynone {display: none;}
.visiblehide {visibility: hidden;}
.textcenter {text-align: center;}
.prel{position: relative;}
.pointer{cursor: pointer;}
.flex {
display: flex;
&1{flex: 1;}
&shrink{flex-shrink: 0;}
&_center{justify-content: center;}
&_end{justify-content: flex-end;}
&_jcbetween{justify-content: space-between;}
&_around{justify-content: space-around;}
&_evenly{justify-content: space-evenly;}
&_acenter{align-items: center;}
}
.botline {
&_eee1 {
......@@ -47,6 +64,10 @@ ul {
}
.margin {
&_15_0 {margin: 15px 0;}
&_top3 {margin-top: 3px;}
&_top18 {margin-top: 18px;}
&_top20 {margin-top: 20px;}
&_left8 {margin-left: 8px;}
}
.border {
&_boteee1 {border-bottom: 1px solid #eee;}
......@@ -55,14 +76,31 @@ ul {
&_15 {padding: 15px;}
&_0_15 {padding: 0 15px;}
&_0_20 {padding: 0 20px;}
&_lr16 {padding-left: 16px;padding-right: 16px;}
&_left5 {padding-left: 5px;}
&_left15 {padding-left: 15px;}
&_top16 {padding-top: 15px;}
&_bot16 {padding-bottom: 15px;}
}
.width {
&_100p {width: 100%;}
}
.height {
&_100p {height: 100%;}
}
.fontsize {
&_12{font-size: 12px;}
&_14{font-size: 14px;}
&_16{font-size: 16px;}
&_18{font-size: 18px;}
}
.color {
&_red {color: red;}
&_333 {color: #333;}
&_666 {color: #666;}
&_999 {color: #999;}
}
.bgc {
&_fff {background-color: #fff;}
&_ccc {background-color: #ccc;}
}
src/libs/lang/en.js
浏览文件 @ d66f79f3
export const lang = {
home: 'home',
course: 'Course',
media: 'Media',
share: 'Share',
help: 'Help',
adduser: 'Add users',
logout: 'Logout',
}
\ No newline at end of file
src/libs/lang/zh.js
浏览文件 @ d66f79f3
export const lang = {
home: '首页',
course: '课程',
media: '媒体',
share: '分享',
help: '帮助',
adduser: '添加用户',
logout: '退出',
mycourse: '我的课程',
createcourse: '创建新课程',
importcourse: '导入课程',
searchofcoursename: '根据课程名称搜索',
searchoftag: '根据标签搜索',
communityedition: '社区版',
upgradenow: '立即升级',
updatetime: '更新时间',
}
\ No newline at end of file
src/renderer/components/Dashboard/Layout.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<div class="home-wrapper">
<navbar></navbar>
<div class="home-inner flex">
<sidebar></sidebar>
<app-main></app-main>
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
mixins: [ResizeMixin],
}
</script>
<style lang="less" scoped>
.home-wrapper {
position: relative;
height: 100%;
width: 100%;
// .clearfix
}
// 主体区域
.home-inner {
height: 100%;
// transition: margin-left .28s;
// margin-left: 220px;
}
</style>
src/renderer/components/Dashboard/components/AppMain.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<section class="home-main flex1">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain'
}
</script>
<style lang="less" scoped>
.home-main {
padding: 20px 32px;
}
</style>
src/renderer/components/Dashboard/components/Navbar.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<el-menu class="home-navbar flex flex_acenter flex_jcbetween" mode="horizontal" >
<el-dropdown @command="handleUser" @visible-change="userVisibleChange" class="home-user-menu">
<span class="el-dropdown-link">
{{username}}<i class="el-icon--right" :class="{'el-icon-arrow-up':showUserControl,'el-icon-arrow-down':!showUserControl}"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="currentuser">
<div>
<span>{{username}}</span>
<i class="el-icon-check" style="padding-left:20px"></i>
</div>
</el-dropdown-item>
<el-dropdown-item command="adduser" divided><i class="el-icon-user"></i>{{$t('lang.adduser')}}</el-dropdown-item>
<el-dropdown-item command="exit"><i class="el-icon-switch-button"></i>{{$t('lang.logout')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="home-navtabs flex flex1 flex_center">
<div :class="{'active':tabsIndex==tind}" v-for="(item,tind) in tabs" :key="item.value" @click="changeTab(tind,item)">
<div class="fontsize_16 color_333 home-navtabs-item" :class="{'active':tabsIndex==tind}">{{$t('lang.'+item.langlabel) || item.name}}</div>
</div>
</div>
<div class="home-navhelp flex flex_acenter flex_end fontsize_14 color_333">
<el-select v-model="currentLanguage" placeholder="" @change="languageChange" popper-class="homelanguage" :popper-append-to-body="false">
<el-option
v-for="item in languageList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<router-link to="/" class="home-helplink flexshrink fontsize_14 color_333">{{$t('lang.help')}}</router-link>
</div>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
components: {
},
data() {
return {
username:"chenft@szlhxx.com",
showUserControl: false,
tabs:[
{name: "课程", langlabel:"course",value:"course",url:"/home"},
{name: "媒体", langlabel:"media",value:"media",url:"/media"},
{name: "分享", langlabel:"share",value:"share",url:"/share"}
],
tabsIndex:0,
currentLanguage:"cn",
languageList:[
{label:"中文",value:"cn"},
{label:"English",value:"en"},
],
}
},
computed: {
...mapGetters([
'sidebar'
])
},
mounted() {
console.log('navbar',this.$route)
let {fullPath} = this.$route;
let curentUrl = this.tabs[this.tabsIndex].url;
if(fullPath !== curentUrl) {
let targetInd = this.tabs.findIndex(v => v.url == fullPath);
if(!targetInd) return;
this.changeTab(targetInd,this.tabs[targetInd],false);
}
},
methods: {
handleUser(command) {
switch(command) {
case "currentuser":
break;
case "adduser":
console.log("跳转添加用户")
break;
case "exit":
console.log("退出登录")
this.logout();
default:
break;
}
},
userVisibleChange(isShow) {
this.showUserControl = isShow;
},
changeTab(index,item, isJump = true) {
if(this.tabsIndex == index) return;
this.tabsIndex = index;
isJump && this.$router.push({path:item.url})
},
languageChange(val) {
// val : en cn
this.$i18n.locale = val == 'cn' ? 'zh' : 'en';
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
<style lang="less" scoped>
.el-select-dropdown{background-color: aquamarine;}
.el-dropdown-menu {
padding: 0;
border: 1px solid #EEEEEE;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 8px;
overflow: hidden;
li.el-dropdown-menu__item {
padding: 0 13px;
line-height: 46px;
font-size: 14px;
color: #333333;
:first-child {
color: #999999;
}
}
/deep/.popper__arrow {
display: none;
&::after {
display: none;
}
}
}
.el-dropdown-menu__item--divided:before {
// margin: 0 -13px;
display: none;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #F0F0F0;
}
.el-select {
width: 100px;
}
/deep/.el-select .el-input.is-focus .el-input__inner,
/deep/.el-select .el-input .el-input__inner {
border:none;
}
/deep/.el-select-dropdown__list,
.el-select-dropdown__list {
padding: 0;
}
.el-select-dropdown {
border-radius: 8px;
overflow: hidden;
/deep/.popper__arrow {
display: none;
&::after {
display: none;
}
}
}
/deep/.el-popper[x-placement^=bottom] {
margin-top: 0;
}
/deep/.el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: transparent;
}
/deep/.el-popper .popper__arrow, .el-popper .popper__arrow::after{
border-style: none !important;
}
.homelanguage {
.el-select-dropdown__item,
.el-select-dropdown__item.selected {
font-weight: normal;
color: #333333;
}
.el-select-dropdown__item{
height: 40px;
line-height: 40px;
}
}
.home-navbar {
position: relative;
z-index: 999;
height: 60px;
// line-height: 60px;
background: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
border-bottom: 0;
.home-navtabs-item {
position: relative;
line-height: 60px;
padding: 0 24px;
cursor: pointer;
&.active::after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(20px);
content: "";
display: block;
width: 44px;
height: 1.5px;
background-color: #E74362;
}
}
.home-helplink {
padding: 10px 25px;
text-decoration: none;
}
.home-user-menu {
padding: 10px 16px;
}
.home-navhelp,.home-user-menu {
width: 220px;
}
}
</style>
src/renderer/components/Dashboard/components/Sidebar/index.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<div class="home-sidebar prel">
<div class="home-sidebar-group-titile fontsize_18 color_333">{{$t('lang.mycourse')}}</div>
<ul class="home-sidebar-group-course fontsize_14">
<router-link :to="{ path: '/course/create' }" tag="li">
<i class="el-icon-collection fontsize_16"></i><span class="padding_left15">{{$t('lang.createcourse')}}</span>
</router-link>
<router-link :to="{ path: '/home' }" tag="li">
<i class="el-icon-edit-outline fontsize_16"></i><span class="padding_left15">{{$t('lang.importcourse')}}</span>
</router-link>
</ul>
<div class="home-sidebar-group-search">
<el-input
:placeholder="$t('lang.searchofcoursename')"
v-model="courseKey" class="margin_top18">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-select v-model="tagname" filterable multiple collapse-tags allow-create :placeholder="$t('lang.searchoftag')" class="home-tags margin_top18">
<el-option
v-for="item in tags"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="home-sidebar-group-community width_100p">
<div class="width_100p flex flex_acenter flex_jcbetween">
<div class="fontsize_14 color_666">
<i class="el-icon-user-solid"></i><span class="padding_left5">{{$t('lang.communityedition')}}</span>
</div>
<el-button type="danger" plain size="small">{{$t('lang.upgradenow')}}</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
computed: {
},
data() {
return {
courseKey: "",
tagname:"",
tags:[{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
},{
value: '选项3',
label: '黄金糕1'
}],
};
},
}
</script>
<style lang="less" scoped>
.home-sidebar {
flex-shrink: 0;
box-sizing: border-box;
padding: 0 8px;
width: 220px;
height: 100%;
background: #FAFAFA;
}
.home-sidebar-group-titile {
padding: 19px 8px;
}
.home-sidebar-group-course {
li {
margin: 0 8px 8px;
height: 40px;
line-height: 40px;
cursor: pointer;
&:last-child {
border-bottom: 1px solid #E4E4E4;
}
}
}
.home-sidebar-group-search {
padding: 0 8px;
}
.home-tags /deep/.el-input__inner {
background: url(~@/assets/logo.png) no-repeat center center; //引入icon
background-size: 17px 19px; //这个是图片的大小，在这里不能直接设置width height,设置宽高其实是select的宽高，图片可能会失真只设置宽度 高度auto也行
background-position:12px center; //在input中定位置 可以调整自定义icon的左右上下位置
padding: 0 0 0 32px; //需要设置padding 把placeholder向右移
box-sizing: border-box;
font-size: 14px;
}
.home-tags /deep/.el-select__tags {
padding-left: 32px;
}
.home-sidebar-group-community {
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
padding: 16px 8px;
}
</style>
src/renderer/components/Dashboard/components/index.js 0 → 100644
浏览文件 @ d66f79f3
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
src/renderer/components/Dashboard/mixin/ResizeHandler.js 0 → 100644
浏览文件 @ d66f79f3
// import store from '@/store'
const { body } = document
const WIDTH = 1024
const RATIO = 3
export default {
watch: {
$route(route) {
// if (this.device === 'mobile' && this.sidebar.opened) {
// store.dispatch('CloseSideBar', { withoutAnimation: false })
// }
}
},
beforeMount() {
// window.addEventListener('resize', this.resizeHandler)
},
mounted() {
// const isMobile = this.isMobile()
// if (isMobile) {
// store.dispatch('ToggleDevice', 'mobile')
// store.dispatch('CloseSideBar', { withoutAnimation: true })
// }
},
methods: {
// isMobile() {
// const rect = body.getBoundingClientRect()
// return rect.width - RATIO < WIDTH
// },
// resizeHandler() {
// if (!document.hidden) {
// const isMobile = this.isMobile()
// store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
// if (isMobile) {
// store.dispatch('CloseSideBar', { withoutAnimation: true })
// }
// }
// }
}
}
src/renderer/main.js
浏览文件 @ d66f79f3
......@@ -9,7 +9,7 @@ import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'
import { Button, Drawer, Message, MessageBox, Row, Col, Form,
FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog, Breadcrumb, BreadcrumbItem,Loading } from 'element-ui';
FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog, Breadcrumb, BreadcrumbItem, Loading, Tag, Image } from 'element-ui';
Vue.config.productionTip = false;
......@@ -40,6 +40,8 @@ Vue.use(Upload);
Vue.use(Dialog);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Tag);
Vue.use(Image);
Vue.use(Loading.directive);
......
src/renderer/router/routes.js
浏览文件 @ d66f79f3
import Login from "../views/Account/Login.vue";
import Login from "../views/account/Login.vue";
import Layout from '../views/layout/Layout';
// RouterTab 内置路由
import { RouterTabRoutes } from 'vue-router-tab'
......@@ -20,29 +20,60 @@ import { RouterTabRoutes } from 'vue-router-tab'
export default [
{ path: '/404', component: () => import('../views/404.vue'), hidden: true },
// {
// path: "/",
// name: "Home",
// component: Layout,
// redirect: '/home',
// meta: { title: 'Home', icon: 'example' },
// hidden: false,
// children: [
// // 引入 RouterTab 内置路由以支持 Iframe 页签
// ...RouterTabRoutes,
// {
// path: 'home', // 默认页和父级路由一致
// name: 'Home',
// component: () => import('../views/Home.vue'),
// meta: {
// title: 'Home' // 页签标题
// }
// },{
// path: '/others',
// name: "others",
// meta: { title: 'others', icon: 'example' },
// component: () => import('../views/Home.vue')
// }]
// },
{
path: "/",
name: "Home",
component: Layout,
component: () => import('../components/Dashboard/Layout.vue'),
redirect: '/home',
meta: { title: 'Home', icon: 'example' },
hidden: false,
children: [
// 引入 RouterTab 内置路由以支持 Iframe 页签
...RouterTabRoutes,
{
path: 'home', // 默认页和父级路由一致
path: 'home',
name: 'Home',
component: () => import('../views/Home.vue'),
component: () => import('../views/course/index.vue'),
meta: {
title: 'Home' // 页签标题
}
},{
path: '/others',
name: "others",
meta: { title: 'others', icon: 'example' },
component: () => import('../views/Home.vue')
}]
path: 'media',
name: 'Media',
component: () => import('../views/media/index.vue'),
meta: {
title: 'Home' // 页签标题
}
},{
path: 'share',
name: 'Share',
component: () => import('../views/share/index.vue'),
meta: {
title: 'Home' // 页签标题
}
}]
},
{
path: "/login",
......@@ -65,12 +96,12 @@ export default [
path: 'list',
name: "list",
meta: { title: 'list', icon: 'example' },
component: () => import('../views/Course/index.vue')
component: () => import('../views/course/index.vue')
},{
path: ':type',
name: "编辑",
meta: { title: '编辑', icon: 'example' },
component: () => import('../views/Course/create.vue')
component: () => import('../views/course/create.vue')
}]
},
// {
......
src/renderer/views/Course/index.vue
浏览文件 @ d66f79f3
<template>
<div>
课程列表
<div class="course-container">
<div class="list-toolbar flex flex_jcbetween flex_acenter">
<div class="fontsize_14 color_333">
<el-select v-model="currentOrder" placeholder="" @change="changeOrder" popper-class="list-order-tool" :popper-append-to-body="false">
<el-option
v-for="item in orderList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div>{{$t('lang.updatetime')}}</div>
<div>
<el-tag v-for="(item,sind) in styleList" :key="item.value" :type="currentStyle==sind ? 'danger' : 'info'" color="transparent" @click="changeStyle(sind)" :class="{'margin_left8': sind !== 0}">
<i :class="[item.icon]"></i>
</el-tag>
</div>
</div>
<div class="list-container margin_top20">
<div class="coursebox-wrapper bgc_fff">
<div class="coursebox-image prel">
<el-image :src="'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'" lazy></el-image>
<div class="coursebox-mask">
<i class="el-icon-edit coursebox-mask-edit pointer"></i>
<div class="coursebox-mask-tools pointer">
<i class="el-icon-edit-outline"></i>
</div>
</div>
</div>
<div class="coursebox-title fontsize_14 color_333 padding_top16 padding_lr16">压力管理</div>
<div class="coursebox-time fontsize_12 color_999 padding_bot16 margin_top3 padding_lr16">2021年12月12日</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentOrder: 1,
orderList:[
{label:"按字母a到z顺序",value:1},
{label:"按字母z到a顺序",value:2},
{label:"最近的",value:3},
],
currentStyle:0,
styleList: [
{icon:"el-icon-menu",value:"网格"},
{icon:"el-icon-s-operation",value:"列表"}
],
};
},
methods: {
changeOrder(val) {
},
changeStyle(ind) {
if(this.currentStyle == ind) return;
this.currentStyle = ind;
}
},
}
</script>
<style>
<style lang="less" scoped>
/deep/.el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: transparent;
}
/deep/.el-popper .popper__arrow, .el-popper .popper__arrow::after{
border-style: none !important;
}
.list-toolbar {
.el-select-dropdown__item,
.el-select-dropdown__item.selected {
font-weight: normal;
color: #333333;
}
.el-select-dropdown__item{
height: 40px;
line-height: 40px;
}
}
.coursebox-wrapper {
overflow: hidden;
border-radius: 4px;
border: 1px solid #E4E4E4;
width: calc(25% - 10px);
min-width: 200px;
max-width: 260px;
&:hover {
.coursebox-mask {
opacity: 1;
}
}
}
.coursebox-mask {
opacity: 0;
transition: opacity .6s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(102,102,102,0.60) 0%, rgba(0,0,0,0.90) 100%);
}
.coursebox-mask-edit {
position: absolute;
right: 0;
width: 52px;
height: 36px;
line-height: 36px;
text-align: center;
background-color: cornflowerblue;
}
.coursebox-mask-tools {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
}
</style>
\ No newline at end of file
src/renderer/views/dashboard/Layout.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/renderer/views/media/index.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<div>
媒体列表
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/renderer/views/share/index.vue 0 → 100644
浏览文件 @ d66f79f3
<template>
<div>
分享列表
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论