123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <template>
- <div class="page-box">
- server
- </div>
- </template>
- <script>
- import axios from "axios";
- import { hotTags, getClicks, getBlogs } from "@/api";
- export default {
- name: "home",
- data() {
- return {
- /*
- * active
- * 浏览量排序: views
- * 点赞量排序: likes
- * 评论数排序: comments
- * 发布时间排序: time
- * */
- active: "views",
- tag: "",
- searchText: "",
- tags: [],
- blogsList: [],
- clickList: [],
- color: [
- "#2B6363",
- "#DB704D",
- "#63B4AE",
- "#EA5368",
- "#EFA19D",
- "#E7CA65",
- "#C7C7AB",
- "#EA5368",
- "#EFA19D",
- "#2B6363",
- "#DB704D",
- ],
- total: 0,
- pageSize: 15,
- size: 1,
- };
- },
- watch: {
- tags() {
- console.log(119);
- },
- },
- mounted() {
- setTimeout(() => {
- if (this.$route.query && this.$route.query.search) {
- this.searchText = this.$route.query.search;
- }
- this.getList("views");
- this.getTagsFn();
- this.getClickListFn();
- }, 200);
- },
- methods: {
- async getList(type) {
- if (this.active !== type) {
- this.active = type;
- }
- const params = {
- sort: this.active,
- tag: this.tag,
- searchText: this.searchText,
- size: this.size,
- pageSize: this.pageSize,
- };
- const res = await getBlogs(params);
- this.total = res.data.total;
- this.blogsList = res.data.list;
- },
- async getClickListFn() {
- const res = await getClicks();
- this.clickList = res.data;
- },
- async getTagsFn() {
- const res = await hotTags();
- console.log("8080", res);
- this.tags = res.data.map((item) => {
- return {
- name: item,
- color: this.color[Math.floor(Math.random() * 9)],
- };
- });
- },
- showDetail(id) {
- this.$router.push({
- path: "/blogDetails",
- query: {
- id,
- },
- });
- },
- search() {
- this.tag = "";
- this.total = 0;
- this.pageSize = 15;
- this.size = 1;
- this.getList();
- },
- searchTag(tag) {
- this.tag = tag;
- this.searchText = "";
- this.total = 0;
- this.pageSize = 15;
- this.size = 1;
- this.getList();
- },
- sizeChange(size) {
- this.size = size;
- this.getList();
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .home-box {
- //background-color: #ffffff;
- .event-box {
- padding: 15px 20px;
- margin-bottom: 20px;
- background-color: #ffffff;
- border-radius: 4px;
- .sort-box {
- //font-size: 14px;
- span {
- &:hover {
- cursor: pointer;
- }
- }
- }
- .active {
- color: #409eff;
- }
- }
- .body-box {
- display: flex;
- .bolg-box {
- flex: 1;
- .list-box {
- display: flex;
- flex-wrap: wrap;
- .item {
- //width: 300px;
- background-color: #ffffff;
- flex: 1 1 260px;
- margin-right: 15px;
- margin-bottom: 15px;
- img {
- cursor: pointer;
- }
- }
- img {
- }
- }
- }
- .other-box {
- .tag-box {
- border-radius: 4px;
- width: 280px;
- background-color: #f8f9fb;
- margin-bottom: 24px;
- .title {
- text-align: left;
- padding-left: 5px;
- &:before {
- content: "";
- display: block;
- position: relative;
- top: 35px;
- width: 85px;
- height: 2px;
- border-radius: 4px;
- background: #2c3e50;
- }
- }
- .tags {
- padding: 0 5px;
- text-align: left;
- min-height: 150px;
- .tag {
- font-size: 14px;
- color: #ffffff;
- cursor: pointer;
- padding: 1px 5px;
- border-radius: 4px;
- margin-right: 5px;
- margin-bottom: 5px;
- display: inline-block;
- transition: all 0.3ms;
- &:hover {
- color: #409eff;
- }
- }
- }
- }
- .click-box {
- border-radius: 4px;
- width: 280px;
- background-color: #f8f9fb;
- .title {
- text-align: left;
- padding-left: 5px;
- &:before {
- content: "";
- display: block;
- position: relative;
- top: 35px;
- width: 85px;
- height: 2px;
- border-radius: 4px;
- background: #2c3e50;
- }
- }
- .list-box {
- //height: 250px;
- min-height: 250px;
- max-height: 470px;
- //max-height: 50vh;
- padding: 5px;
- overflow: scroll;
- background-color: #f8f9fb;
- .item {
- cursor: pointer;
- .index {
- margin-bottom: 5px;
- img {
- cursor: pointer;
- }
- .name {
- transition: color ease-in-out 0.3s;
- background-color: #000000;
- color: #ffffff;
- }
- &:hover {
- .name {
- color: #409eff;
- }
- }
- }
- .other {
- display: flex;
- margin-bottom: 10px;
- img {
- cursor: pointer;
- width: 70px;
- height: 70px;
- }
- .content {
- text-align: left;
- color: #333;
- padding-left: 10px;
- font-size: 18px;
- }
- &:hover {
- .content {
- color: #409eff;
- }
- }
- }
- }
- }
- }
- }
- }
- }
- </style>
|