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

Compare commits

base: work:0096587bd765dcbae467995c76b2df61ebe209f9
Branches Tags
work:main
..
compare: work:4ba7f85676ba45595408dd9f8e7ac42187728906
Branches Tags
work:main

No commits in common. "0096587bd765dcbae467995c76b2df61ebe209f9" and "4ba7f85676ba45595408dd9f8e7ac42187728906" have entirely different histories.
0096587bd7 ... 4ba7f85676

1 changed files with 44 additions and 34 deletions
Show Stats Expand all files Collapse all files

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

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