|
|
@@ -3,52 +3,87 @@
|
|
|
<div class="course_select">
|
|
|
<span class="Screening">筛选</span>
|
|
|
<div style="float: right;">
|
|
|
- 年级：<el-select v-model="value" class="m-2" placeholder="全部" style="width: 240px">
|
|
|
+ 年级：<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>
|
|
|
</div>
|
|
|
<div class="course_select">
|
|
|
<span class="grandTitle">{{ value }}</span>
|
|
|
- <!-- <el-button :class="selectGrand == 0 ? 'el_button_active' : ''" @click="clickGrand(0)">三年级</el-button>
|
|
|
- <el-button :class="selectGrand == 1 ? 'el_button_active' : ''" @click="clickGrand(1)">四年级</el-button>
|
|
|
- <el-button :class="selectGrand == 2 ? 'el_button_active' : ''" @click="clickGrand(2)">五年级</el-button>
|
|
|
- <el-button :class="selectGrand == 3 ? 'el_button_active' : ''" @click="clickGrand(3)">六年级</el-button>
|
|
|
- <el-button :class="selectGrand == 4 ? 'el_button_active' : ''" @click="clickGrand(4)">七年级</el-button>
|
|
|
- <el-button :class="selectGrand == 5 ? 'el_button_active' : ''" @click="clickGrand(5)">八年级</el-button> -->
|
|
|
- </div>
|
|
|
- <el-row :gutter="20" class="course_select">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <img src="" alt="">
|
|
|
- <div>
|
|
|
- <p>title</p>
|
|
|
- <el-button>情绪小怪兽</el-button>
|
|
|
- <el-button class="el_button_active">上课</el-button>
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
+ <div class="class_button">
|
|
|
+ <el-button>备课</el-button>
|
|
|
+ <el-button class="el_button_active">上课</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </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-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="grid-content ep-bg-purple"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="grid-content ep-bg-purple"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="grid-content ep-bg-purple"></div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class="class_button">
|
|
|
+ <el-button>备课</el-button>
|
|
|
+ <el-button class="el_button_active">上课</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
|
|
|
-const value = ref('')
|
|
|
+const value = ref('三年级')
|
|
|
+const currentData = ref({
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "智能安防",
|
|
|
+ url: "../../assets/img/三下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "人脸检测与识别",
|
|
|
+ url: "../../assets/img/三下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "电子警察",
|
|
|
+ url: "../../assets/img/三下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "音频播报",
|
|
|
+ url: "../../assets/img/三下1.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+})
|
|
|
const options = [
|
|
|
- {
|
|
|
- value: 'all',
|
|
|
- label: '全部',
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // value: 'all',
|
|
|
+ // label: '全部',
|
|
|
+ // },
|
|
|
{
|
|
|
value: '三年级',
|
|
|
label: '三年级',
|
|
|
@@ -74,14 +109,160 @@ const options = [
|
|
|
label: '八年级',
|
|
|
},
|
|
|
]
|
|
|
+const courseData = {
|
|
|
+ "三年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "智能安防",
|
|
|
+ url: "../../assets/img/三下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "人脸检测与识别",
|
|
|
+ url: "../../assets/img/三下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "电子警察",
|
|
|
+ url: "../../assets/img/三下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "音频播报",
|
|
|
+ url: "../../assets/img/三下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "四年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "智能出行",
|
|
|
+ url: "../../assets/img/四下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "数字识别与车牌识别",
|
|
|
+ url: "../../assets/img/四下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "摆动起来",
|
|
|
+ url: "../../assets/img/四下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "停车场助手",
|
|
|
+ url: "../../assets/img/四下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "五年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "游戏与生活概率",
|
|
|
+ url: "../../assets/img/五下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "手势识别",
|
|
|
+ url: "../../assets/img/五下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "猜拳机器人",
|
|
|
+ url: "../../assets/img/五下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "猜拳大战",
|
|
|
+ url: "../../assets/img/五下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "六年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "人脸检测知多少",
|
|
|
+ url: "../../assets/img/六下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "人脸检测全流程",
|
|
|
+ url: "../../assets/img/六下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "人脸检测功能实现",
|
|
|
+ url: "../../assets/img/六下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "人脸追踪向日葵功能实现",
|
|
|
+ url: "../../assets/img/六下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "七年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "机器学习",
|
|
|
+ url: "../../assets/img/七下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "萌宠生活（一）",
|
|
|
+ url: "../../assets/img/七下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "萌宠生活（二）",
|
|
|
+ url: "../../assets/img/七下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "萌宠生活（三）",
|
|
|
+ url: "../../assets/img/七下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "八年级": {
|
|
|
+ shang: [
|
|
|
+ ],
|
|
|
+ xia: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ title: "初识人工智能",
|
|
|
+ url: "../../assets/img/八下1.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "无所不在的人工智能",
|
|
|
+ url: "../../assets/img/八下2.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "机器翻译鸟（上）",
|
|
|
+ url: "../../assets/img/八下3.png"
|
|
|
+ }, {
|
|
|
+ id: "",
|
|
|
+ title: "机器翻译鸟（下）",
|
|
|
+ url: "../../assets/img/八下4.png"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ currentData.value = courseData["三年级"]
|
|
|
+})
|
|
|
+const getCurrenData = () => {
|
|
|
+ console.log(value.value, courseData[value.value])
|
|
|
+ currentData.value = courseData[value.value]
|
|
|
+}
|
|
|
|
|
|
-const selectGrand = ref(0)
|
|
|
-const clickGrand = val => {
|
|
|
- selectGrand.value = val
|
|
|
+const getImageUrl = (url) => {
|
|
|
+ return new URL(url, import.meta.url).href
|
|
|
}
|
|
|
|
|
|
-const openCourseDetail = () => {
|
|
|
- top.U.MD.D.I.openInApplication("studyDetail", "课程id", 2, 1); //这个是打开指定的课程接口
|
|
|
+const openCourseDetail = (id) => {
|
|
|
+ top.U.MD.D.I.openInApplication("studyDetail", id, 2, 1); //这个是打开指定的课程接口
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -108,7 +289,6 @@ const openCourseDetail = () => {
|
|
|
|
|
|
.el-button {
|
|
|
// background: rgba(54, 129, 252, 1);
|
|
|
- background: rgba(224, 234, 251, 1);
|
|
|
color: rgba(54, 129, 252, 1);
|
|
|
}
|
|
|
|
|
|
@@ -116,6 +296,17 @@ const openCourseDetail = () => {
|
|
|
background: rgba(54, 129, 252, 1);
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+ .book {
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-row {
|
|
|
@@ -134,7 +325,19 @@ const openCourseDetail = () => {
|
|
|
.grid-content {
|
|
|
border-radius: 4px;
|
|
|
min-height: 36px;
|
|
|
- // background: #000;
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
// height: 300px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course_content {
|
|
|
+ p {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
