W250511/17.Vue3/project4/src/App.vue

<template>
  <div>
    <!-- <h1>APP</h1> -->
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-button type="warning">警告按钮</van-button> -->
    <!-- <hr />
    <hr />
    <hr /> -->
    <!-- <Count></Count> -->
    <div class="product-list">
      <div v-for="(item, index) in list" :key="index">
        <div class="list-title">
          <span>{{ item.title }}</span>
          <span>查看更多</span>
        </div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(item1, index1) in item.productDtoList"
            :key="index1"
            class="news"
          >
            <van-image
              :src="item1.pic"
            />
            <p class="prodName">{{ item1.prodName }}</p>
            <p>￥{{ item1.price }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
// import Count from "./components/Count.vue";
onMounted(() => {
  getProductMain();
});
let list = ref([]);
const getProductMain = async () => {
  let res = await axios.get(
    "http://shop-api.edu.koobietech.com/prod/tagProdList"
  );
  console.log(res);
  list.value = res.data.data;
  console.log(list.value);
};
</script>

<style scoped>
  .news {
    width: 125px;
  }
  .prodName {
    width: 125px;
    font-size: 10px;
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
</style>