添加ai体验中心与ai探究中心

src/components/main/AIExperience.vue

@@ -0,0 +1,82 @@
+<template>
+	<h2 class="contentTitle">AI体验中心</h2>
+
+	<div class="aiex">
+		<div
+			class="cont"
+			v-for="(i, ind) in listData"
+			:key="ind"
+			@click="gotoUrl(i)"
+		>
+			<img :src="i.img" alt="" />
+			<div>{{ i.name }}</div>
+		</div>
+		<div @click="gotoPage" class="cont2">查看更多</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const listData = ref([
+	{
+		name: "手写数字识别的原理演示",
+		url: "https://aihub.cocorobo.cn/homes/details?0",
+		img: "https://aihub.cocorobo.cn/aihub/static/media/%E6%89%8B%E5%86%99%E6%95%B0%E5%AD%97%E8%AF%86%E5%88%AB.06caf300.png",
+	},
+	{
+		name: "CNN 解释器",
+		url: "https://aihub.cocorobo.cn/homes/details?1",
+		img: "https://aihub.cocorobo.cn/aihub/static/media/CNN%20%E8%A7%A3%E9%87%8A%E5%99%A8(%E5%B1%82%E8%AE%A1%E7%AE%97%E8%BF%87%E7%A8%8B.469b6d97.png",
+	},
+	{
+		name: "数据分类器",
+		url: "https://aihub.cocorobo.cn/homes/details?2",
+		img: "https://aihub.cocorobo.cn/aihub/static/media/%E6%95%B0%E6%8D%AE%E5%88%86%E7%B1%BB%E5%99%A8(%E8%B0%83%E5%8F%82%E8%BF%87%E7%A8%8B).bd57672f.png",
+	},
+]);
+// 拉取用户信息并处理
+const gotoUrl = (val) => {
+	window.open(val.url, "_blank");
+};
+
+const gotoPage = () => {
+	router.push("/details/AI体验中心");
+};
+</script>
+
+<style lang="scss" scoped>
+.aiex {
+	display: flex;
+	gap: 20px;
+	.cont {
+		background: #fff;
+		border-radius: 5px;
+		position: relative;
+		padding: 10px 12px;
+		gap: 5px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		flex: 1;
+		cursor: pointer;
+		flex-shrink: 0;
+		img {
+			width: 100%;
+            height: 120px;
+			object-fit: cover;
+			border-radius: 5px;
+		}
+	}
+	.cont2 {
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		border-radius: 5px;
+		background: #fff;
+        cursor: pointer;
+	}
+}
+</style>

src/components/main/AIExperienceCon.vue

@@ -0,0 +1,94 @@
+<template>
+     <div class="alexp" v-loading="loading">
+        <div v-for="i in listData" :key="i.id" class="areaL">
+            <div class="tit">{{ i.name }}</div>
+            <div class="con">
+                <div v-for="l in i.ch" :key="l" class="conL" @click="gotoPage(l)">
+                    <img :src="l.img" alt="">
+                    <div>{{ l.name }}</div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { ref,onMounted } from 'vue';
+
+const listData = ref([])
+const loading = ref(false)
+
+
+onMounted(() => {
+    requestUser()
+})
+// 拉取用户信息并处理
+const requestUser = () => {
+    loading.value = true
+    axios.get(`https://pbl.cocorobo.cn/api/pbl/selectAiExp?cl=0`)
+    .then(res => {
+        console.log(res);
+        let data = res.data
+        data[0].forEach(item1 => {
+            // 在第二个数组中查找匹配的数据
+            const matchedItems = data[1].filter(item2 => item2.levA === item1.id);
+            // 将匹配的数据存入ch属性
+            item1.ch = matchedItems;
+        });
+        listData.value = data[0]   
+        loading.value = false
+    })
+    .catch(err=>{
+        console.log(err);
+        loading.value = false
+    })
+};
+const gotoPage = (val)=>{
+    window.open(val.link, "_blank")
+}
+
+</script>
+
+<style lang="scss" scoped>
+.alexp{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .areaL{
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+    .tit{
+        font-size: 16px;
+        color: #000;
+        font-weight: 600;
+    }
+    .con{
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        .conL{
+            flex: 1;
+            padding: 12px;
+            box-sizing: border-box;
+            background: #fff;
+            border-radius: 10px;
+            gap: 10px;
+            display: flex;
+            cursor: pointer;
+            flex-direction: column;
+            justify-content: space-between;
+            img{
+                width: 100%;
+                height: 120px;
+                object-fit: cover;
+                border-radius: 5px;
+            }
+        }
+    }
+}
+
+</style>

src/components/main/AIexploration.vue

@@ -0,0 +1,81 @@
+<template>
+	<h2 class="contentTitle">AI探究中心</h2>
+
+	<div class="aiex">
+		<div
+			class="cont"
+			v-for="(i, ind) in listData"
+			:key="ind"
+			@click="gotoUrl(i)"
+		>
+			<img :src="i.img" alt="" />
+		</div>
+		<div @click="gotoPage" class="cont" style="padding: 10px 0 16px 0;box-sizing: border-box;">
+			<div
+				style="
+					background-color: #fff;
+					height: 100%;
+					width: 100%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+                    border-radius:9px;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+				"
+			>
+				查看更多
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const listData = ref([
+	{
+		name: "智能台灯设计模拟器",
+		url: "https://v0.cocorobo.cn/SmartDeskLamp/%E6%99%BA%E8%83%BD%E5%8F%B0%E7%81%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E6%8B%9F%E5%99%A8.html",
+		img: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F1+%E6%99%BA%E8%83%BD%E5%8F%B0%E7%81%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E6%8B%9F%E5%99%A81761038342134.png",
+	},
+	{
+		name: "校园里的智能眼睛",
+		url: "https://v0.cocorobo.cn/sensor-learning/out/index.html",
+		img: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F2+%E6%A0%A1%E5%9B%AD%E9%87%8C%E7%9A%84%E6%99%BA%E8%83%BD%E7%9C%BC%E7%9D%9B1761038342144.png",
+	},
+	{
+		name: "智慧校园路灯系统",
+		url: "https://v0.cocorobo.cn/smart-streetlight-system/out/index.html",
+		img: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F3+%E6%99%BA%E6%85%A7%E6%A0%A1%E5%9B%AD%E8%B7%AF%E7%81%AF%E7%B3%BB%E7%BB%9F1761038342145.png",
+	},
+]);
+// 拉取用户信息并处理
+const gotoUrl = (val) => {
+	window.open(val.url, "_blank");
+};
+const gotoPage = () => {
+	router.push("/details/AI探究中心");
+};
+</script>
+
+<style lang="scss" scoped>
+.aiex {
+	display: flex;
+	gap: 20px;
+	.cont {
+		border-radius: 5px;
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+		justify-content: center;
+		cursor: pointer;
+		img {
+			width: 100%;
+			display: block;
+			padding: 0 !important;
+		}
+	}
+}
+</style>

src/components/main/AIexplorationCon.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="alexp"  v-loading="loading">
+        <div v-for="i in listData" :key="i.id" class="areaL">
+            <div class="tit">{{ i.name }}</div>
+            <div class="con">
+                <div v-for="l in i.ch" :key="l" class="conL" @click="gotoPage(l)">
+                    <!-- <div>{{ l.name }}</div>
+                    <div>{{ l.bri }}</div> -->
+                    <img :src="l.img" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { ref,onMounted } from 'vue';
+
+
+const listData = ref([])
+const loading = ref(false)
+
+onMounted(() => {
+    requestUser()
+})
+// 拉取用户信息并处理
+const requestUser = () => {
+    loading.value = true
+
+    axios.get(`https://pbl.cocorobo.cn/api/pbl/selectAiExp?cl=1`)
+    .then(res => {
+        console.log(res);
+        let data = res.data
+        data[0].forEach(item1 => {
+            // 在第二个数组中查找匹配的数据
+            const matchedItems = data[1].filter(item2 => item2.levA === item1.id);
+            // 将匹配的数据存入ch属性
+            item1.ch = matchedItems;
+        });
+        listData.value = data[0]        
+        loading.value = false
+    })
+    .catch(err=>{
+        console.log(err);
+        loading.value = false
+    })
+};
+const gotoPage = (val)=>{
+    window.open(val.link, "_blank")
+}
+</script>
+
+<style lang="scss" scoped>
+.alexp{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .areaL{
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+    .tit{
+        font-size: 16px;
+        color: #000;
+        font-weight: 600;
+    }
+    .con{
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 0px;
+        .conL{
+            flex: 1;
+            box-sizing: border-box;
+            // background: #fff;
+            // border-radius: 10px;
+            display: flex;
+            cursor: pointer;
+            flex-direction: column;
+            justify-content: space-between;
+            img{
+                width: 100%;
+                object-fit: cover;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+</style>

src/views/Details.vue

@@ -14,6 +14,8 @@
             <resource v-else-if="detailsTitle == '资源中心'"></resource>
             <Practice v-else-if="detailsTitle == '实践中心'"></Practice>
             <other v-else-if="detailsTitle == '其他课程资源'"></other>
+            <AIExperienceCon v-else-if="detailsTitle == 'AI体验中心'"></AIExperienceCon>
+            <AIexplorationCon v-else-if="detailsTitle == 'AI探究中心'"></AIexplorationCon>
         </div>
     </el-page-header>
 </template>
@@ -24,6 +26,8 @@ import CourseSelect from '@/components/main/courseSelect.vue'
 import resource from '@/components/main/resource.vue';
 import Practice from '@/components/main/Practice.vue';
 import other from '@/components/main/other.vue';
+import AIExperienceCon from '@/components/main/AIExperienceCon.vue';
+import AIexplorationCon from '@/components/main/AIexplorationCon.vue';
 import Header from './header.vue';
 import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
 const { query, params } = useRoute()

src/views/main.vue

@@ -62,6 +62,8 @@
       <div class="main" :style="leftShow ? { width: '100%' } : ''" v-if="activeIndex == 0">
         <!-- <BannerVue></BannerVue> -->
         <CourseSelect></CourseSelect>
+        <AIExperience></AIExperience>
+        <AIexploration></AIexploration>
         <DemoCurourse />
         <resource></resource>
         <Practice></Practice>
@@ -117,6 +119,8 @@ import CourseSelect from '@/components/main/courseSelect.vue'
 import DemoCurourse from '@/components/main/demoCourse.vue'
 import resource from '@/components/main/resource.vue';
 import Practice from '@/components/main/Practice.vue';
+import AIExperience from '@/components/main/AIExperience.vue';
+import AIexploration from '@/components/main/AIexploration.vue';
 import other from '@/components/main/other.vue';
 import Edu from '@/components/main/edu.vue';
 import Feedback from '@/components/main/feedback.vue';