修改ai体验与ai中心

src/components/main/AIExperience.vue

@@ -9,9 +9,13 @@
 			@click="gotoUrl(i)"
 		>
 			<img :src="i.img" alt="" />
-			<div>{{ i.name }}</div>
+			<div class="tit">
+				{{ i.name }}
+			</div>
+		</div>
+		<div @click="gotoPage" class="cont" style="display: flex;justify-content: center;align-items: center;">
+				查看更多
 		</div>
-		<div @click="gotoPage" class="cont2">查看更多</div>
 	</div>
 </template>
 
@@ -48,35 +52,30 @@ const gotoPage = () => {
 
 <style lang="scss" scoped>
 .aiex {
-	display: flex;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	.cont {
-		background: #fff;
-		border-radius: 5px;
+		border-radius: 4px;
 		position: relative;
-		padding: 10px 12px;
-		gap: 5px;
 		display: flex;
 		flex-direction: column;
-		justify-content: space-between;
 		flex: 1;
 		cursor: pointer;
-		flex-shrink: 0;
+		padding: 12px;
+		box-sizing: border-box;
+		min-height: 36px;
+		background: #fff;
 		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;
+		.tit{
+			margin-top: 16px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
 	}
 }
 </style>

src/components/main/AIExperienceCon.vue

@@ -2,13 +2,23 @@
      <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 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 class="aiex">
+                <div
+                    class="cont"
+                    v-for="l in i.ch" :key="l"  @click="gotoPage(l)"
+                >
+                    <img :src="l.img" alt="" />
+                    <div class="tit">
+                        {{ l.name }}
+                    </div>
+                </div>
             </div>
-            
         </div>
     </div>
 </template>
@@ -66,29 +76,37 @@ const gotoPage = (val)=>{
         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;
-            }
-        }
-    }
 }
-
+.aiex {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 20px;
+	.cont {
+		border-radius: 4px;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		cursor: pointer;
+		padding: 12px;
+		box-sizing: border-box;
+		min-height: 36px;
+		background: #fff;
+		img {
+			height: 170px;
+            width: 100%;
+            object-fit: cover;
+			border-radius: 5px;
+		}
+		.tit{
+			margin-top: 16px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+            font-weight: normal;
+            color: #555555;
+            font-size: 14px;
+		}
+	}
+}
 </style>

src/components/main/AIexploration.vue

@@ -9,22 +9,12 @@
 			@click="gotoUrl(i)"
 		>
 			<img :src="i.img" alt="" />
+			<div class="tit">
+				{{ i.name }}
+			</div>
 		</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 @click="gotoPage" class="cont" style="display: flex;justify-content: center;align-items: center;">
 				查看更多
-			</div>
 		</div>
 	</div>
 </template>
@@ -32,22 +22,28 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import taideng from '@/assets/img/taideng.png'
+import esy from '@/assets/img/esy.png'
+import ludeng from '@/assets/img/ludeng.png'
+
+
+
 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",
+		img: taideng,
 	},
 	{
 		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",
+		img: esy,
 	},
 	{
 		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",
+		img: ludeng,
 	},
 ]);
 // 拉取用户信息并处理
@@ -61,20 +57,29 @@ const gotoPage = () => {
 
 <style lang="scss" scoped>
 .aiex {
-	display: flex;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	.cont {
-		border-radius: 5px;
+		border-radius: 4px;
 		position: relative;
 		display: flex;
-		align-items: center;
+		flex-direction: column;
 		flex: 1;
-		justify-content: center;
 		cursor: pointer;
+		padding: 12px;
+		box-sizing: border-box;
+		min-height: 36px;
+		background: #fff;
 		img {
 			width: 100%;
-			display: block;
-			padding: 0 !important;
+			border-radius: 5px;
+		}
+		.tit{
+			margin-top: 16px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
 		}
 	}
 }

src/components/main/AIexplorationCon.vue

@@ -2,11 +2,15 @@
     <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 class="aiex">
+                <div
+                    class="cont"
+                    v-for="l in i.ch" :key="l"  @click="gotoPage(l)"
+                >
+                    <img :src="l.img" alt="" />
+                    <div class="tit">
+                        {{ l.name }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -88,5 +92,36 @@ const gotoPage = (val)=>{
         }
     }
 }
-
+.aiex {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 20px;
+	.cont {
+		border-radius: 4px;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		cursor: pointer;
+		padding: 12px;
+		box-sizing: border-box;
+		min-height: 36px;
+		background: #fff;
+		img {
+			height: 170px;
+            width: 100%;
+            object-fit: cover;
+			border-radius: 5px;
+		}
+		.tit{
+			margin-top: 16px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+            font-weight: normal;
+            color: #555555;
+            font-size: 14px;
+		}
+	}
+}
 </style>