besiweb/pages/index/book/newbook.vue

<template>
	<view class="">
			<view class="nav">
				<u-icon class="back" name="arrow-left" color="#fff" size="48" @click="backHome()"></u-icon>
				<view class="text">
					<text>最新佛经</text>
				</view>

			</view>
			<view class="book" v-for="(item,index) in book" :key="index">
				<navigator url="./xiangqing">
				<image src="../../../static/index/jingshu/bood.png" mode=""></image>
				<view class="bookC">
					<text>{{item.name}}</text>
					<text class="t1">{{item.autho}}</text>
					<text class="t2">{{item.num+'人阅读'}}</text>
				</view>
				</navigator>
			</view>
		
	</view>
</template>

<script>
	export default{
				data(){
					return{
						book:[
							{name:'大方广佛华严经合论纂要卷上',autho:'明 方泽纂',num:600},
							{name:'大方广佛华严经合论纂要卷上',autho:'明 方泽纂',num:600},
							{name:'大方广佛华严经合论纂要卷上',autho:'明 方泽纂',num:600},
							{name:'大方广佛华严经合论纂要卷上',autho:'明 方泽纂',num:600},
							{name:'大方广佛华严经合论纂要卷上',autho:'明 方泽纂',num:600}
						]
						}
						},
				methods:{
					backHome() {
						uni.navigateBack({
							delta: 1
						});
					},
				},
				}
</script>

<style>
	.nav {
		  position: sticky;
		  top: 0;
		  z-index: 9;
		  width: 100%;
		  height: 100rpx;
		  background-color: #ff8359;
		  color: #fff;
		  font-size: 45rpx;
		  font-weight: 600;
		}
		.nav .back {
		  height: 100rpx;
		  width: 15%;
		  position: absolute;
		  text-align: center;
		}
		.nav .back text {
		  line-height: 100rpx;
		}
		.nav .text {
		  position: absolute;
		  height: 100rpx;
		  width: 70%;
		  left: 15%;
		}
		.nav .text text {
		  line-height: 100rpx;
		}
		.nav .menu {
		  position: absolute;
		  width: 15%;
		  height: 100rpx;
		  left: 85%;
		}
		.nav .menu image {
		  height: 100rpx;
		  width: 100%;
		}
		 .book {
			 margin-top: 30rpx;
		  margin-bottom: 30rpx;
		  position: relative;
		  width: 94%;
		  margin-left: 3%;
		}
		 .book image {
		  background-color: #000000;
		  width: 150rpx;
		  height: 200rpx;
		}
		 .book .bookC {
		  position: absolute;
		  top: 0;
		  left: 200rpx;
		  display: flex;
		  font-size: 35rpx;
		  line-height: 2;
		  flex-direction: column;
		}
		 .book .bookC .t1,
		 .book .bookC .t2 {
		  color: #ccc;
		}
</style>