121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
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>
|
|||
|
|
<!-- 路径 -->
|
|||
|
|
<div class="path-box">
|
|||
|
|
<div>论坛</div>
|
|||
|
|
<div class="oneEllipsis">论坛论坛论坛论坛论坛</div>
|
|||
|
|
<div class="oneEllipsis">论坛</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<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-look"></svg-icon>
|
|||
|
|
<div>12</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 精华 -->
|
|||
|
|
<div class="rightTop">
|
|||
|
|
<div>
|
|||
|
|
<span>精华</span>
|
|||
|
|
</div>
|
|||
|
|
</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>
|
|||
|
|
export default {
|
|||
|
|
name: "Recommend",//推荐阅读
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
hotActive: -1,//热门版块活跃点击
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
label: "香港留学"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "香港留学"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "香港留学"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "香港留学"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
hotLabelClick(index) {
|
|||
|
|
this.hotActive = index
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|