work/book-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zyh

This commit is contained in:
zhao 2024-07-18 17:41:23 +08:00
parent 22daba05c8
commit 3bf6467574
1 changed files with 34 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/book/component/home.vue
View File

@ -1,26 +1,26 @@
<script setup lang="ts">
import {useT_bookApi} from 'src\\api\\maku\\t_book.ts'
import {ref} from 'vue'
import { ref } from 'vue';
import { useT_bookApi } from "../../../api/maku/t_book";
const book =ref({
id:0,
bookname:'',
author:'',
price:'',
bookcover:'',
store:0,
introduction:'',
description:''
})
// function getbook(){
// useT_bookApi(1).then(res=>{
// book.value=res.data
// })
// }
// getbook()
const totalBooks = 5; // 假设有5本书
// 创建一个包含所有书籍的数组，初始值为5个空对象
const books = ref(Array(totalBooks).fill({}));
// 定义一个函数，用于根据索引调用对应的API获取书籍信息
function getBook(index: number) {
useT_bookApi(index + 1).then(res => {
books.value[index] = res.data;
});
}
// 使用循环调用获取书籍信息的函数
for (let i = 0; i < totalBooks; i++) {
getBook(i);
}
</script>
<template>
<div class="search-suggest-combobox">
<div class="input-search">
@ -29,30 +29,18 @@ const book =ref({
</div>
</div>
<div class="screen-outer">
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
<div class="info-wrapper">进口安佳淡奶油1L动物奶油新西兰家用生日蛋糕裱花蛋挞液专用烘焙</div>
<div class="price-wrapper">
<span class="price-unit">¥</span>
<span class="price-value">30</span>
</div>
</div>
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
</div>
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
</div>
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
</div>
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
</div>
<div class="tb-pick-content-item">
<div class="img-wrapper"></div>
</div>
</div>
<div class="tb-pick-content-item" v-for="book in books" :key="book.id">
<div class="img-wrapper">
<img :src="book.bookCover" style="width:100%; height:120%;" alt="Book Cover">
</div>
<div class="info-wrapper">{{ book.bookName }}</div>
<div class="price-wrapper">
<span class="price-unit">¥</span>
<span class="price-value">{{ book.price }}</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@ -96,6 +84,8 @@ const book =ref({
}
.screen-outer {
transform:translate(10px);
background: #fff;
width: 1552px;
margin: 30px auto;
@ -142,7 +132,7 @@ const book =ref({
}
.img-wrapper {
background-image: url('https://img.alicdn.com/bao/uploaded/i1/3937219703/O1CN01FZXnRo2LY1zwkI3j0_!!3937219703-0-C2M.jpg');
// background-image: url();
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;