book_admin/application/index/view/public/changxiao.html

<style>
	.toggle-box{
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		padding-right: 0.15rem;
		padding-bottom: 0.05rem;
		box-sizing: border-box;
		font-size: 0;

	}
	.toggle-item{
		width: 2.85rem;
		height: 1.84rem;
		border-radius: 0.08rem;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 0.08rem 0px rgba(239,239,239,1);
		overflow: hidden;
		margin-left: 0.15rem;
		position: relative;
		display: inline-block;
	}
	.title-left{
		font-size:0.18rem;
		font-family:PingFang-SC-Bold,PingFang-SC;
		font-weight:bold;
		color:rgba(47,47,47,1);
		margin: 0.1rem 0 0 0.09rem;
	}
	.title-right{
		font-size:0.12rem;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(47,47,47,1);
		position: absolute;
		top: 0.15rem;
		right: 0.22rem;
		padding-right: .12rem;
		background: url('{:asset('/img/frontend/icon/arrow.png')}') no-repeat right center;
		background-size: auto .08rem;
	}
	.title-right::after{
		content: '';
		position: absolute;
		width: 0.15rem;
		height: 0.15rem;
		/*background: url('{:asset('/img/frontend/icon/more-right.png')}') no-repeat center center/100% 100%;*/
		top: 0.01rem;
	}
	.books-list{
		font-size: 0;
		margin-top: 0.15rem;
		height: 0.99rem;
	}
	.book-item{
		display: inline-block;
		width: 0.75rem;
		margin-left: 0.15rem;
		position: relative;
		height: 0.99rem;
	}
	.book-item .w_book_img{
		width: 0.75rem;
		height: 0.99rem;
		left: 0;
		top: 0;
		position: relative;
	}
	.book-item .book-title{
		font-size:0.13rem;
		font-family:PingFang-SC-Regular,PingFang-SC;
		font-weight:400;
		color:rgba(47,47,47,1);
		margin-top: 0.06rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.w_book_icon{
		position: absolute;
		width: 0.2rem;
		height: 0.25rem;
		left: -0.06rem;
		top: -0.1rem;
		z-index: 9;
	}
</style>
<div class="toggle-box">
	<div class="toggle-item">
		<div class="title-left">点击榜</div>
		<a class="title-right" style="color:#2F2F2F;" href="/index/book/list?sex={$sexid}&type=click">更多</a>
		<div class="books-list">
			{foreach $ranklist['click'] as $key=>$data}
			<a href="/index/book/info?book_id={$data.id}" class="section-data" data-zone="点击榜"
			   data-book_id="{$data.id}">
				<div class="book-item">
					<img src="{:asset('/img/frontend/icon/'.($key+1).'_icon.png')}" alt="" class="w_book_icon">
					<img class="w_book_img" src="{:asset('/img/frontend/images/default_img.png')}" data-original="{$data.image}" alt="">
					<div class="book-title">{$data.name}</div>
				</div>
			</a>
			{/foreach}
		</div>
	</div>

	<div class="toggle-item">
		<div class="title-left">畅销榜</div>
		<a class="title-right" style="color:#2F2F2F;" href="/index/book/list?sex={$sexid}&type=sell">更多</a>
		<div class="books-list">
			{foreach $ranklist['idx'] as $key=>$data}
			<a href="/index/book/info?book_id={$data.id}" class="section-data" data-zone="点击榜"
			   data-book_id="{$data.id}">
				<div class="book-item">
					<img src="{:asset('/img/frontend/icon/'.($key+1).'_icon.png')}" alt="" class="w_book_icon">
					<img src="{:asset('/img/frontend/images/default_img.png')}" data-original="{$data.image}" alt="" class="w_book_img">
					<div class="book-title">{$data.name}</div>
				</div>
			</a>
			{/foreach}
		</div>
	</div>
</div>