GterForumWeB/src/views/index/recommend/Recommend.vue

<template>
	<div class="recommend">
		<!-- 热门版块 -->
		<div class="hot-box">
			<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in list" :key="index"
				@click="hotLabelClick(index)">{{ item.label }}</div>
		</div>
		<!-- 路径 -->
		<plate-navigation stairname="香港澳门台湾" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
		<section>
			<!-- 帖子 -->
			<div class="card-box">
				<div class="top moreEllipsis">
					<div class="top-label">经验</div>
					<div class="top-title">23fall 美国llm 求定位</div>
				</div>
				<div class="center">
					<div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point
						Bar6666666666666666666666</div>
				</div>
				<div class="bottom">
					<div class="bottom-box">
						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
						<div class="bottom-name">匿名用户</div>
					</div>
					<div class="bottom-box">
						<div class="bottom-right">
							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
							<div>1552</div>
						</div>
						<div class="bottom-right">
							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
							<div>12</div>
						</div>
					</div>
				</div>
				<!-- 精华 -->
				<div class="rightTop">
					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
					<span>精华</span>
				</div>
			</div>
			<div class="card-box">
				<div class="top moreEllipsis">
					<div class="top-label">经验</div>
					<div class="top-title">23fall 美国llm 求定位</div>
				</div>
				<div class="center">
					<div class="center-text-visible">
						回复可见
					</div>
				</div>
				<div class="bottom">
					<div class="bottom-box">
						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
						<div class="bottom-name">匿名用户</div>
					</div>
					<div class="bottom-box">
						<div class="bottom-right">
							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
							<div>1552</div>
						</div>
						<div class="bottom-right">
							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
							<div>12</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 广告 -->
			<div class="banner-box">
				<svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
			</div>
			<!-- 分页 -->
			<div class="paging-box">
				<el-pagination layout="prev, pager, next" :total="100">
				</el-pagination>
			</div>
		</section>
	</div>
</template>

<script>
import plateNavigation from '@/components/PlateNavigation.vue'
export default {
	name: "Recommend",//推荐阅读
	data() {
		return {
			hotActive: -1,//热门版块活跃点击
			list: [
				{
					label: "香港留学"
				},
				{
					label: "香港留学"
				},
				{
					label: "香港留学"
				},
				{
					label: "香港留学"
				}
			]
		}
	},
	components: {
		plateNavigation
	},
	methods: {
		hotLabelClick(index) {
			this.hotActive = index
		}
	}
}
</script>

<style></style>