写一个基于uniapp开发的书城主页

很高兴回答你的问题！以下是一个基于uniapp开发的书城主页的示例代码：

<template>
<view class="container">
<view class="banner">
<image src="../../static/banner.jpg"></image>
</view>
<view class="book-list">
<view class="book-item" v-for="(book, index) in bookList" :key="index">
<image :src="book.cover"></image>
<view class="book-info">
<view class="book-title">{{ book.title }}</view>
<view class="book-author">{{ book.author }}</view>
<view class="book-desc">{{ book.desc }}</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
bookList: [
{
title: 'JavaScript高级程序设计',
author: 'Nicholas C. Zakas',
desc: '本书全面介绍了JavaScript的核心概念和语言特性，深入讲解了JavaScript的高级应用技巧和最佳实践。',
cover: '../../static/book1.jpg'
},
{
title: 'CSS揭秘',
author: 'Lea Verou',
desc: '本书深入讲解了CSS的各种技巧和实用技术，帮助读者掌握CSS的精髓。',
cover: '../../static/book2.jpg'
},
{
title: 'Vue.js实战',
author: '梁灏',
desc: '本书从实际项目出发，深入讲解了Vue.js的各种应用技巧和最佳实践。',
cover: '../../static/book3.jpg'
}
]
}
}
}
</script>

<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
}

.banner {
width: 100%;
height: 200rpx;
margin-bottom: 20rpx;
}

.banner image {
width: 100%;
height: 100%;
object-fit: cover;
}

.book-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.book-item {
width: 48%;
margin-bottom: 20rpx;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
border-radius: 4rpx;
overflow: hidden;
}

.book-item image {
width: 30%;
height: 100%;
object-fit: cover;
}

.book-info {
width: 70%;
padding: 20rpx;
}

.book-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}

.book-author {
font-size: 28rpx;
color: #999;
margin-bottom: 10rpx;
}

.book-desc {
font-size: 28rpx;
color: #666;
line-height: 1.5;
}
</style>

希望这个示例代码能够帮助你开发出一个漂亮的书城主页！