topic.vue

<template>
  <div class="app-container">
    <h3>热门专题</h3>
    <ul>
      <li v-for="(item, index) in topicList" :key="index">
        <img :src="item.icon" />
        <p>{{ item.intro }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { getTopicList } from "@/api/app-store";
export default {
  name: "AppTopic",
  data() {
    return {
      topicList: [],
      query: {
        method: "internal.getTabDetail",
        serviceType: 20,
        reqPageNum: 1,
        uri: "automore|pcpostercardwithtitle|903805|PC1000",
        maxResults: 25,
        zone: "",
        locale: "zh",
      },
    };
  },
  methods: {
    getTopicList() {
      getTopicList(this.query)
        .then((res) => {
          if (res.layoutData) {
            this.topicList = res.layoutData[0].dataList;
          }
        })
        .catch((err) => {
          if (err.layoutData && err.layoutData.length) {
            this.topicList = err.layoutData[0].dataList;
          }
        });
    },
  },
  mounted() {},
  created() {
    this.getTopicList();
  },
};
</script>
<style lang="scss" scoped>
div.app-container {
    margin-bottom: 40px;
  & > h3 {
    height: 33px;
    font-size: 24px;
    color: #000;
    line-height: 33px;
    margin: 40px 0px;
  }
  & > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 40px;
    grid-column-gap: 20px;
    & > li {
      & > img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 25px;
      }
      & > p {
        line-height: 22px;
        font-size: 16px;
        color: #191919;
        padding: 0;
        margin: 8px 0 0;
      }
    }
  }
}
</style>