2023-03-05 20:30:44 +08:00
|
|
|
<template>
|
2023-03-11 01:16:28 +08:00
|
|
|
<div style="width: 1200px;" class="body-div">
|
2023-03-05 20:30:44 +08:00
|
|
|
<div class="header">
|
|
|
|
|
<el-form :inline="true" >
|
|
|
|
|
<el-form-item label="标签：" >
|
|
|
|
|
<el-input placeholder="请输入标签"
|
|
|
|
|
:suffix-icon="Calendar"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="内容：">
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="搜索当下分类下的内容"
|
|
|
|
|
:suffix-icon="Calendar"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div class="form-right">
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
<el-button type="primary">查询</el-button>
|
|
|
|
|
|
|
|
|
|
<el-dropdown>
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
展开
|
|
|
|
|
<el-icon class="el-icon--right">
|
|
|
|
|
<arrow-down />
|
|
|
|
|
</el-icon>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item>Action 1</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item>Action 2</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item>Action 3</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
|
|
<el-tab-pane label="推荐" name="first"> </el-tab-pane>
|
|
|
|
|
<el-tab-pane label="最新" name="second"> </el-tab-pane>
|
|
|
|
|
<el-tab-pane label="最热" name="third"> </el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<div class="div-item" v-for="i in 10" >
|
|
|
|
|
<DisscussCard/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
|
import DisscussCard from '@/components/DisscussCard.vue'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
const activeName = ref('first')
|
|
|
|
|
|
|
|
|
|
const handleClick = (tab, event) => {
|
|
|
|
|
console.log(tab, event)
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.body-div{
|
|
|
|
|
min-height: 1000px;
|
|
|
|
|
}
|
|
|
|
|
.el-dropdown-link {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.header{
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
padding: 1rem;
|
2023-03-11 01:16:28 +08:00
|
|
|
margin: 1rem 0rem ;
|
2023-03-05 20:30:44 +08:00
|
|
|
}
|
|
|
|
|
.header .el-input
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.el-tabs
|
|
|
|
|
{
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
padding-left: 2rem;
|
|
|
|
|
}
|
|
|
|
|
.el-tabs >>> .el-tabs__header
|
|
|
|
|
{
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.div-item
|
|
|
|
|
{
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form {
|
|
|
|
|
--el-form-label-font-size: var(--el-font-size-base);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.el-form-item
|
|
|
|
|
{padding-top: 0.8rem;}
|
|
|
|
|
.form-right
|
|
|
|
|
{
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
.form-right .el-button
|
|
|
|
|
{
|
|
|
|
|
margin-right: 0.6rem;
|
|
|
|
|
}
|
|
|
|
|
.header .el-input
|
|
|
|
|
{
|
|
|
|
|
width:20rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
