python_93040206/ClientPlatform/src 2/pages/server/server.vue

<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>