一些样式修改

This commit is contained in:
lyc 2024-07-11 11:40:38 +08:00
parent 08eda419e0
commit 4f600ced49
6 changed files with 281 additions and 223 deletions

View File

@ -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>

View File

@ -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')

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
}
}
})