代码提交
This commit is contained in:
parent
4df9a2b3c5
commit
cc17b94a53
Binary file not shown.
|
After Width: | Height: | Size: 587 KiB |
|
|
@ -42,7 +42,11 @@ const router = createRouter({
|
|||
},
|
||||
{
|
||||
path: 'subject',
|
||||
component: () => import('@/views/Subject/index.vue')
|
||||
component: () => import('@/views/CatalogResource/index.vue')
|
||||
},
|
||||
{
|
||||
path: 'subSubject',
|
||||
component: () => import('@/views/SubCatalogResource/index.vue')
|
||||
},
|
||||
{
|
||||
path: 'category/:id',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="bread-container">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>专题资源</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="subject-banner">
|
||||
<el-carousel height="500px" arrow="always">
|
||||
<!-- <el-carousel-item v-for="item in bannerList" :key="item.id">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</el-carousel-item> -->
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<img src="@/assets/images/subject-banner.png" alt="">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<el-card style="margin-top: 20px;">
|
||||
<div class="title">
|
||||
专题资源
|
||||
</div>
|
||||
<div class="more">
|
||||
19个专题
|
||||
</div>
|
||||
|
||||
<div class="subject-content">
|
||||
<div class="subject-card" v-for="item in 12">
|
||||
<RouterLink to="subSubject">
|
||||
<el-card>
|
||||
<img src="@/assets/images/subject.png" />
|
||||
</el-card>
|
||||
<div class="subject-top">1790个资源</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
color: #8A8178;
|
||||
}
|
||||
|
||||
.bread-container {
|
||||
padding: 25px 0;
|
||||
|
||||
:deep(.el-breadcrumb__inner) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-breadcrumb__separator) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.subject-banner {
|
||||
margin-top: 20px;
|
||||
width: 1240px;
|
||||
height: 500px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.subject-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
.subject-card {
|
||||
position: relative;
|
||||
|
||||
.subject-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #FCB124;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
line-height: 28px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-page {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: end
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,8 +28,6 @@ import { onMounted, ref } from 'vue'
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.home-banner {
|
||||
width: 1240px;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
</template>
|
||||
<div class="subject-content">
|
||||
<el-card v-for="item in 8">
|
||||
<img src="@/assets/images/subject.png" />
|
||||
|
||||
|
||||
<template #footer>
|
||||
<div class="subject-title">【金版学案】2016-2017学年高中语文人教版(必修3、必修4)检测+课件</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="bread-container">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>专题资源</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>课后服务</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="sub-subject-top">
|
||||
<img src="@/assets/images/subject.png" />
|
||||
<div class="sub-subject-top-right">
|
||||
<div class="title">课后服务</div>
|
||||
<div class="more">创建时间：2024-01-01</div>
|
||||
<div class="more">资源数据：1790个</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" style="margin-top: 10px;">
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card--left-header">
|
||||
<span class="title">目录</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tableData" row-key="id" border default-expand-all :show-header="false">
|
||||
<el-table-column prop="name" label="Name" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="18">
|
||||
<el-card>
|
||||
<div class="card-right-header">
|
||||
<el-table :data="tableSortData" :default-sort="{ prop: 'date', order: 'descending' }">
|
||||
<el-table-column prop="date" label="上传时间" sortable width="180" />
|
||||
<el-table-column prop="name" label="浏览量" sortable width="180" />
|
||||
<el-table-column prop="address" label="下载量" sortable width="180" />
|
||||
</el-table>
|
||||
<div class="header-search">
|
||||
<el-input v-model="input" style="width: 300px" placeholder="请输入关键词" />
|
||||
<el-button type="primary" :icon="Search" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="book-grid">
|
||||
<el-card v-for="item in 6">
|
||||
<div class="book-content">
|
||||
<img class="file-type" src="@/assets/images/word.png" alt="">
|
||||
<img src="@/assets/images/book.png" alt="">
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="book-title">汉字文化云课堂</div>
|
||||
<div class="book-des">
|
||||
<div class="book-teacher">
|
||||
<span>王老师</span> | <span>一年级（2）班</span>
|
||||
</div>
|
||||
<div class="book-view">
|
||||
<span>
|
||||
<el-icon>
|
||||
<View />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span>204</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { View, Search } from '@element-plus/icons-vue'
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '全部',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '我上学了',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '识字',
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
name: '1 天地人',
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
name: '2金木水火土',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '汉语拼音',
|
||||
},
|
||||
]
|
||||
|
||||
const tableSortData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
color: #8A8178;
|
||||
}
|
||||
|
||||
.bread-container {
|
||||
padding: 25px 0;
|
||||
|
||||
:deep(.el-breadcrumb__inner) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-breadcrumb__separator) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-subject-top {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
background-color: #E4F2F9;
|
||||
border-radius: 10px;
|
||||
|
||||
img {
|
||||
margin: 10px 20px 10px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.card--left-header {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right-header {
|
||||
position: relative;
|
||||
|
||||
:deep(.el-table__body-wrapper) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.book-grid {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 7px;
|
||||
|
||||
.book-content {
|
||||
position: relative;
|
||||
|
||||
.file-type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.book-des {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #919DA3;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.book-page {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: end
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>专题资源</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
</style>
|
||||
|
|
@ -133,6 +133,7 @@
|
|||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -250,13 +251,18 @@ const tableSortData = [
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.book-des{
|
||||
.book-des {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color:#919DA3;
|
||||
color: #919DA3;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.book-page {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: end
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue