173 lines
4.5 KiB
Vue
173 lines
4.5 KiB
Vue
<template>
|
|
<KlNavTab active="牛人社区" />
|
|
<div class="app-container">
|
|
<!-- 顶部 Banner -->
|
|
<div class="banner"> </div>
|
|
|
|
<!-- 生人推荐部分 -->
|
|
<section class="teacher-recommend text-center">
|
|
<h2>牛人推荐</h2>
|
|
<div class="teacher-cards">
|
|
<TeacherCard v-for="teacher in teachers" :key="teacher.id" :teacher="teacher" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 生人列表部分 -->
|
|
<section class="teacher-list mt-30px text-center">
|
|
<h2>牛人列表</h2>
|
|
<div class="teacher-detail-cards">
|
|
<TeacherDetailCard v-for="teacher in teacherDetails" :key="teacher.id" :teacher="teacher" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import TeacherCard from './components/TeacherCard.vue'
|
|
import TeacherDetailCard from './components/TeacherDetailCard.vue'
|
|
|
|
const teachers = ref([
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
title: 'CAD建模技术、非标设备设计',
|
|
tags: ['在线工程', '电子产品'],
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
title: 'CAD建模技术、非标设备设计',
|
|
tags: ['在线工程', '电子产品'],
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
title: 'CAD建模技术、非标设备设计',
|
|
tags: ['在线工程', '电子产品'],
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
title: 'CAD建模技术、非标设备设计',
|
|
tags: ['在线工程', '电子产品'],
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
title: 'CAD建模技术、非标设备设计',
|
|
tags: ['在线工程', '电子产品'],
|
|
},
|
|
// ... 其他教师数据
|
|
])
|
|
|
|
const teacherDetails = ref([
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
university: '重庆工商大学',
|
|
works: 568,
|
|
students: 378,
|
|
tags: ['在线工程', '电子产品', '设计方案'],
|
|
description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
university: '重庆工商大学',
|
|
works: 568,
|
|
students: 378,
|
|
tags: ['在线工程', '电子产品', '设计方案'],
|
|
description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
university: '重庆工商大学',
|
|
works: 568,
|
|
students: 378,
|
|
tags: ['在线工程', '电子产品', '设计方案'],
|
|
description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
university: '重庆工商大学',
|
|
works: 568,
|
|
students: 378,
|
|
tags: ['在线工程', '电子产品', '设计方案'],
|
|
description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '王刚',
|
|
university: '重庆工商大学',
|
|
works: 568,
|
|
students: 378,
|
|
tags: ['在线工程', '电子产品', '设计方案'],
|
|
description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
|
|
},
|
|
// ... 其他详细教师数据
|
|
])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
width: 1440px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.banner {
|
|
background-color: #4080ff;
|
|
color: white;
|
|
padding: 40px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
background-image: url('~/assets/images/community-banner.png');
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 410px;
|
|
}
|
|
|
|
.primary-btn {
|
|
background-color: #ffb800;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.teacher-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.teacher-detail-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
h2 {
|
|
color: #333;
|
|
margin: 40px 0 20px;
|
|
background-image: url('~/assets/images/community-bg.png');
|
|
background-size: 120px 16px;
|
|
background-position: 14px 22px;
|
|
background-repeat: no-repeat;
|
|
height: 50px;
|
|
width: 120px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|