|
|
@@ -1,27 +1,25 @@
|
|
|
<template>
|
|
|
<h2 class="contentTitle">课程列表</h2>
|
|
|
<div class="course_select">
|
|
|
- <span class="Screening">筛选</span>
|
|
|
- <div style="float: right;">
|
|
|
- 年级：<el-select v-model="value" class="m-2" placeholder="三年级" style="width: 240px" @change="getCurrenData()">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <span class="grandTitle">年级：</span>
|
|
|
+ <el-button :class="selectGrand == '三年级' ? 'el_button_active' : ''" @click="clickGrand('三年级')">三年级</el-button>
|
|
|
+ <el-button :class="selectGrand == '四年级' ? 'el_button_active' : ''" @click="clickGrand('四年级')">四年级</el-button>
|
|
|
+ <el-button :class="selectGrand == '五年级' ? 'el_button_active' : ''" @click="clickGrand('五年级')">五年级</el-button>
|
|
|
+ <el-button :class="selectGrand == '六年级' ? 'el_button_active' : ''" @click="clickGrand('六年级')">六年级</el-button>
|
|
|
+ <el-button :class="selectGrand == '七年级' ? 'el_button_active' : ''" @click="clickGrand('七年级')">七年级</el-button>
|
|
|
+ <el-button :class="selectGrand == '八年级' ? 'el_button_active' : ''" @click="clickGrand('八年级')">八年级</el-button>
|
|
|
</div>
|
|
|
<div class="course_select">
|
|
|
<span class="grandTitle">{{ value }}</span>
|
|
|
<div v-if="currentData && currentData.shang.length > 0">
|
|
|
- <div class="book">
|
|
|
- <img src="../../assets/icon/shang.png" alt="">
|
|
|
- <span>上册</span>
|
|
|
- </div>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="6" v-for="item in currentData.shang" :key="item.title">
|
|
|
<div class="grid-content ep-bg-purple">
|
|
|
<img :src="getImageUrl(item.url)" alt="">
|
|
|
<div class="course_content">
|
|
|
- <p>{{ item.title }}</p>
|
|
|
+ <p>{{ item.title }}<span>上册</span></p>
|
|
|
<div class="class_button">
|
|
|
+ <el-button>还原</el-button>
|
|
|
<el-button>备课</el-button>
|
|
|
<el-button class="el_button_active">上课</el-button>
|
|
|
</div>
|
|
|
@@ -31,20 +29,17 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div v-if="currentData && currentData.xia.length > 0">
|
|
|
- <div class="book">
|
|
|
- <img src="../../assets/icon/xia.png" alt="">
|
|
|
- <span>下册</span>
|
|
|
- </div>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="6" v-for="item in currentData.xia" :key="item.title">
|
|
|
<div class="grid-content ep-bg-purple">
|
|
|
<img :src="getImageUrl(item.url)" alt="">
|
|
|
<div class="course_content">
|
|
|
- <p>{{ item.title }}</p>
|
|
|
+ <p>{{ item.title }} <span>下册</span></p>
|
|
|
</div>
|
|
|
<div class="class_button">
|
|
|
- <el-button>备课</el-button>
|
|
|
- <el-button class="el_button_active">上课</el-button>
|
|
|
+ <el-button style="width: 30%;">还原</el-button>
|
|
|
+ <el-button style="width: 30%;">备课</el-button>
|
|
|
+ <el-button style="width: 30%;" class="el_button_active">上课</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -55,7 +50,7 @@
|
|
|
<script setup>
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
|
|
-const value = ref('三年级')
|
|
|
+const selectGrand = ref('三年级')
|
|
|
const currentData = ref({
|
|
|
shang: [
|
|
|
],
|
|
|
@@ -79,36 +74,7 @@ const currentData = ref({
|
|
|
},
|
|
|
]
|
|
|
})
|
|
|
-const options = [
|
|
|
- // {
|
|
|
- // value: 'all',
|
|
|
- // label: '全部',
|
|
|
- // },
|
|
|
- {
|
|
|
- value: '三年级',
|
|
|
- label: '三年级',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '四年级',
|
|
|
- label: '四年级',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '五年级',
|
|
|
- label: '五年级',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '六年级',
|
|
|
- label: '六年级',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '七年级',
|
|
|
- label: '七年级',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '八年级',
|
|
|
- label: '八年级',
|
|
|
- },
|
|
|
-]
|
|
|
+
|
|
|
const courseData = {
|
|
|
"三年级": {
|
|
|
shang: [
|
|
|
@@ -253,10 +219,12 @@ onMounted(() => {
|
|
|
currentData.value = courseData["三年级"]
|
|
|
})
|
|
|
const getCurrenData = () => {
|
|
|
- console.log(value.value, courseData[value.value])
|
|
|
currentData.value = courseData[value.value]
|
|
|
}
|
|
|
-
|
|
|
+const clickGrand = val => {
|
|
|
+ selectGrand.value = val
|
|
|
+ currentData.value = courseData[val]
|
|
|
+}
|
|
|
const getImageUrl = (url) => {
|
|
|
return new URL(url, import.meta.url).href
|
|
|
}
|
|
|
@@ -269,6 +237,35 @@ const openCourseDetail = (id) => {
|
|
|
.course_select {
|
|
|
margin-top: 10px;
|
|
|
|
|
|
+ .grid-content {
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 36px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ // height: 300px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course_content {
|
|
|
+ p {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ // display: inline-block;
|
|
|
+ padding: 2px 8px;
|
|
|
+ background: rgba(224, 234, 251, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ float: right;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.Screening {
|
|
|
font-size: 20px;
|
|
|
font-weight: 400;
|
|
|
@@ -297,15 +294,10 @@ const openCourseDetail = (id) => {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
- .book {
|
|
|
- margin-top: 10px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- img {
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
+ .class_button {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -321,23 +313,4 @@ const openCourseDetail = (id) => {
|
|
|
.el-col {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
-.grid-content {
|
|
|
- border-radius: 4px;
|
|
|
- min-height: 36px;
|
|
|
- background: #fff;
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- // height: 300px;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .course_content {
|
|
|
- p {
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
