- 效果图
- 实现
<template><div class="year_area"><div class="year_list"><el-row :span="24"><div :class="showAll"><el-col :span="5" v-for="(item, index) in defaulList" :key="index" class="year_list_content":style="{ borderLeft: item.color }"><div @click="handleClick(item)" class="year-model"><div class="year_text"><div class="year_text_font">{{ item.year }}</div></div></div></el-col><div class="search_fload" @click="handFload"><span class="fload_is_show"> {{ showAll ? "收起更多" : "展开更多" }} </span><i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></div></div></el-row></div></div>
</template>
<script>
import { getAllYear} from "@/api/year.js";export default{data(){return{showAll:false, // 展开或收起allList:[], // 所有项defaulList:[] // 默认展开项}},mounted(){this.fetchData()},methods:{/*** 初始化列表数据*/fetchData(){getAllYear().then((res) => {this.showAll = false;console.log(res.data,"aa");res.data.forEach((e) => {this.allList.push({year: e.split("-")[0],color: this.randomHexColor()})});if(!this.showAll){// 默认仅展示15条this.defaulList= this.allList.slice(0,15)}else{this.defaulList= this.allList}});},/*** 展开或合并*/handFload() {this.showAll = !this.showAll;if (this.showAll) {this.defaulList = this.allList;} else {this.defaulList = this.allList.slice(0, 15);}},/*** 随机生成十六进制颜色*/randomHexColor() {return ("8px solid #" +("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));},/*** 跳转到详情页*/handleClick(item) {this.$router.push({path: `/`,});},}
}
</script>
<style scoped lang="less">
.year_area {width: 1024px;margin: 0 auto;min-height: calc(70vh);.year_list {display: flex;width: 1024px;padding: 12px;flex-direction: column;// gap: 12px;border-radius: 5px;background: #fff;margin-top: 12px;.year_list_content {border-radius: 5px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;border-right: 1px solid #eee;background: #fff;margin: 10px 20px;height: 56px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);.year-model {width: 100%;height: 100%;display: flex;justify-content: center;.year_text {display: flex;justify-content: center;align-items: center;gap: 8px;align-self: stretch;cursor: pointer;.year_text_font {color: #333;font-family: "Source Han Sans CN";font-size: 18px;font-style: normal;font-weight: 500;line-height: 24px;}}}}.search_fload {text-align: center;line-height: 70px;cursor: pointer;}}
}
</style>
- 数据结构
@/api/year.js
["2021","2020","2019","2018","2017","2016","2015","2014","2013","2012","2011","2010","2009","2008","2007","2006","2005","2004","2003","2002","2001"
]
- border-left
复合属性，它用于设置 HTML 元素或 CSS 规则中左侧边框的宽度、样式以及颜色
