一些样式修改
This commit is contained in:
parent
08eda419e0
commit
4f600ced49
|
|
@ -5,11 +5,16 @@
|
|||
<i class="iconfont icon-xiangyou"></i>
|
||||
</div>
|
||||
<div class="book-list">
|
||||
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
|
||||
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
|
||||
<template #default="{ node }">
|
||||
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<!--弹窗 选择教材-->
|
||||
<el-dialog v-model="dialogVisible" class="choose-dialog" append-to-body :show-close="false" width="550">
|
||||
<el-dialog v-model="dialogVisible" class="choose-dialog" :show-close="false" width="550"
|
||||
style="border-radius: 10px; padding: 10px 15px;">
|
||||
<template #header>
|
||||
<div class="choose-book-header flex">
|
||||
<span>切换教材</span>
|
||||
|
|
@ -141,6 +146,10 @@ const isHaveUnit = (id) => {
|
|||
})
|
||||
}
|
||||
|
||||
const renderContent = (h, { node, data }) => {
|
||||
console.log(node, data)
|
||||
}
|
||||
|
||||
const handleNodeClick = (data) => {
|
||||
emit('nodeClick', data)
|
||||
}
|
||||
|
|
@ -158,6 +167,8 @@ onMounted(() => {
|
|||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.book-name {
|
||||
height: 45px;
|
||||
|
|
@ -172,6 +183,7 @@ onMounted(() => {
|
|||
|
||||
.book-list {
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,6 +194,7 @@ onMounted(() => {
|
|||
.choose-book-header {
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
|
||||
.icon-guanbi {
|
||||
font-size: 20px;
|
||||
|
|
@ -199,6 +212,7 @@ onMounted(() => {
|
|||
.book-name {
|
||||
margin-left: 20px;
|
||||
color: #3b3b3b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -224,6 +238,7 @@ onMounted(() => {
|
|||
:deep(.el-tree-node) {
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: #eaf3ff;
|
||||
}
|
||||
|
|
@ -231,4 +246,13 @@ onMounted(() => {
|
|||
|
||||
}
|
||||
|
||||
.tree-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@ import './assets/main.css'
|
|||
import { createApp } from 'vue'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
|
||||
import './utils/messageConfig'
|
||||
import 'element-plus/dist/index.css'
|
||||
import './assets/iconfont/iconfont.css'
|
||||
|
|
@ -18,4 +19,4 @@ const app = createApp(App)
|
|||
|
||||
app.use(router)
|
||||
.use(store)
|
||||
.use(ElementPlus).mount('#app')
|
||||
.use(ElementPlus, { locale: zhLocale }).mount('#app')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="resource-list">
|
||||
<el-scrollbar height="400px">
|
||||
<ul>
|
||||
<li class="list-item">
|
||||
<div class="item-left flex">
|
||||
<div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
|
||||
<div class="item-tags flex">
|
||||
<el-tag type="info" class="mr-10">教案</el-tag>
|
||||
<el-tag type="info" class="mr-10">PPT</el-tag>
|
||||
<span class="gray-text mr-10">2024-07-13上传</span>
|
||||
<span class="line mr-10"></span>
|
||||
<span class="gray-text mr-10">下载3次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-btns">
|
||||
|
||||
<el-button size="small" plain round type="primary">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
备课</el-button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pagination-box">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]" background size="small" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(100)
|
||||
|
||||
const handleSizeChange = () => { }
|
||||
const handleCurrentChange = () => { }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.resource-list {
|
||||
.list-item {
|
||||
padding: 10px 20px;
|
||||
border-bottom: solid #f1f1f1 1px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.item-left {
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background-color: #d9dce2;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.gray-text {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.icon-jiahao {
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="resoure-search">
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12" class="tab-btns flex">
|
||||
<el-button text v-for="item in sourceStore.tabs" :key="item.id"
|
||||
:type="sourceStore.curTab == item.id ? 'primary' : ''" @click="sourceStore.changeTab(item.id)">{{ item.text
|
||||
}}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12" class="search-box flex">
|
||||
<el-input v-model="sourceStore.searchKey" style="width: 240px" placeholder="请输入关键词" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="resoure-btns">
|
||||
<el-col :span="24" class="query-row flex">
|
||||
<div class="flex"> <el-select v-model="sourceStore.curFormat" placeholder="Select" size="small" style="width: 100px">
|
||||
<el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<div class="line"></div>
|
||||
<el-button size="small" v-for="item in sourceStore.typeList" :key="item.id"
|
||||
:type="sourceStore.curType == item.id ? 'primary' : ''" round @click="sourceStore.changeType(item.id)">{{
|
||||
item.text }}</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" round size="small">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
新建资源</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useResoureStore from '../store'
|
||||
|
||||
const sourceStore = useResoureStore()
|
||||
</script>
|
||||
ziy
|
||||
<style lang="scss" scoped>
|
||||
.resoure-search {
|
||||
padding: 20px;
|
||||
border-bottom: solid #f1f1f1 1px;
|
||||
|
||||
.tab-btns {
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.resoure-btns {
|
||||
margin-top: 15px;
|
||||
justify-content: center;
|
||||
.query-row{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background-color: #d9dce2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-jiahao{
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,150 +3,17 @@
|
|||
<ChooseTextbook @nodeClick="nodeClick" />
|
||||
|
||||
<div class="page-right">
|
||||
<div class="right-header">
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12" class="tab-btns flex">
|
||||
<el-button text v-for="item in tabs" :key="item.id" :type="activeVal == item.id ? 'primary' : ''"
|
||||
@click="changeTab(item.id)">{{ item.text }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12" class="search-box flex">
|
||||
<el-input v-model="keyVal" style="width: 240px" placeholder="请输入关键词" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="resoure-btns">
|
||||
<el-col :span="24" class="flex">
|
||||
<el-select v-model="curResource" placeholder="Select" size="small" style="width: 100px">
|
||||
<el-option v-for="item in resourceList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="line"></div>
|
||||
<el-button size="small" v-for="item in types" :key="item.id" :type="curType == item.id ? 'primary' : ''"
|
||||
round @click="changeType(item.id)">{{ item.text }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-scrollbar height="400px">
|
||||
<ul class="resource-list">
|
||||
<li class="list-item">
|
||||
<div class="item-left flex">
|
||||
<div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
|
||||
<div class="item-tags flex">
|
||||
<el-tag type="info" class="mr-10">教案</el-tag>
|
||||
<el-tag type="info" class="mr-10">PPT</el-tag>
|
||||
<span class="gray-text mr-10">2024-07-13上传</span>
|
||||
<span class="line mr-10" </span>
|
||||
<span class="gray-text mr-10">下载3次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-btns">
|
||||
|
||||
<el-button size="small" plain round type="primary">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
备课</el-button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pagination-box">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]" background
|
||||
size="small"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
<ResoureSearch />
|
||||
<ResoureList />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRaw } from 'vue'
|
||||
import { toRaw } from 'vue'
|
||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||
|
||||
const keyVal = ref('')
|
||||
const activeVal = ref(1)
|
||||
const tabs = [
|
||||
{
|
||||
type: '',
|
||||
text: '平台资源',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '校本资源',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const curType = ref(1)
|
||||
const types = [
|
||||
{
|
||||
type: '',
|
||||
text: '全部',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '素材',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '微课',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '课件',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '试卷',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '教案',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '导教学',
|
||||
id: 7
|
||||
},
|
||||
]
|
||||
|
||||
const curResource = ref(-1)
|
||||
const resourceList = [
|
||||
{
|
||||
label: '资源格式',
|
||||
value: -1
|
||||
},
|
||||
{
|
||||
label: 'word',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'ppt',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
|
||||
const changeType = (id) => {
|
||||
curType.value = id
|
||||
}
|
||||
|
||||
const changeTab = (id) => {
|
||||
activeVal.value = id
|
||||
}
|
||||
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(100)
|
||||
|
||||
const handleSizeChange = ()=>{}
|
||||
const handleCurrentChange = ()=>{}
|
||||
import ResoureSearch from './container/resoure-search.vue';
|
||||
import ResoureList from './container/resoure-list.vue';
|
||||
|
||||
// const { ipcRenderer } = window.electron
|
||||
// ipcRenderer.send('set-winsize',{x:1000,y: 700})
|
||||
|
|
@ -169,88 +36,6 @@ const nodeClick = (data) => {
|
|||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
|
||||
|
||||
.right-header {
|
||||
padding: 20px;
|
||||
border-bottom: solid #f1f1f1 1px;
|
||||
|
||||
.tab-btns {
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-box {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.resoure-btns {
|
||||
margin-top: 15px;
|
||||
justify-content: center;
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background-color: #d9dce2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.resource-list {
|
||||
.list-item {
|
||||
padding: 10px 20px;
|
||||
border-bottom: solid #f1f1f1 1px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.item-left {
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background-color: #d9dce2;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.gray-text {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.icon-jiahao{
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-box{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
type: '',
|
||||
text: '平台资源',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '校本资源',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
|
||||
const typeList = [
|
||||
{
|
||||
type: '',
|
||||
text: '全部',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '素材',
|
||||
id: 2
|
||||
},
|
||||
|
||||
{
|
||||
type: '',
|
||||
text: '课件',
|
||||
id: 4
|
||||
},
|
||||
|
||||
{
|
||||
type: '',
|
||||
text: '教案',
|
||||
id: 6
|
||||
},
|
||||
|
||||
]
|
||||
// 资源格式
|
||||
const formatList = [
|
||||
{
|
||||
label: '资源格式',
|
||||
value: -1
|
||||
},
|
||||
{
|
||||
label: 'word',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'ppt',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
export default defineStore('resource', {
|
||||
state: () => ({
|
||||
tabs,
|
||||
typeList,
|
||||
formatList,
|
||||
curTab: 1,
|
||||
curType: 1,
|
||||
curFormat: -1,
|
||||
searchKey: ''
|
||||
}),
|
||||
actions: {
|
||||
changeTab(val) {
|
||||
this.curTab = val
|
||||
},
|
||||
changeType(val) {
|
||||
this.curType = val
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue