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

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

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