zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页布局压缩

Browse Source
This commit is contained in:
@fawn-nine
2023-11-10 17:44:41 +08:00
parent ca693e3a4d
commit 7db05c39fa
11 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
pages/peanut/home.vue
View File

@@ -3,12 +3,14 @@
<!-- <z-nav-bar backState="2000" title="首页"></z-nav-bar> -->
<view class="home_bg">
<view class="" style=" ">
<view class="icon_hua">
<image src="../../static/icon/home_icon_3.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="hehan">
<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="icon_hua">
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="hehan">
<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="fiveIcon flexbox" >
<div class="item item1" @click="onPageJump('../acupoint/acupoint')">
<image src="../../static/icon/five1.png" mode="aspectFit" ></image>
@@ -50,23 +52,23 @@
<!-- <view class="home_nar" v-if="showEbook"> -->
<view class="home_nar">
<view class="hn_cl_tit shuguan" @click="onPageJump('../clock/index')">
<image src="../../static/icon/home1.png" mode="aspectFit"></image>
<image src="../../static/icon/home1-1.png" mode="aspectFit"></image>
<!-- <text>打 卡</text> -->
</view>
<view class="hn_cl_tit dianzishu" @click="onPageJump('../listen/home')">
<image src="../../static/icon/home2.png" mode="aspectFit"></image>
<image src="../../static/icon/home2-1.png" mode="aspectFit"></image>
<!-- <text>听 书</text> -->
</view>
<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->
<view class="hn_cl_tit shuping" @click="onPageJump('../comments/commentsList')">
<image src="../../static/icon/home3.png" mode="aspectFit"></image>
<image src="../../static/icon/home3-1.png" mode="aspectFit"></image>
<!-- <text>书 评</text> -->
</view>
<view class="hn_cl_tit chaoshi" @click="onPageJump('../talkBook/talkBook')">
<image src="../../static/icon/home4.png" mode="aspectFit"></image>
<image src="../../static/icon/home4-1.png" mode="aspectFit"></image>
<!-- <text>讲 书</text> -->
</view>
</view>
@@ -125,14 +127,14 @@
</view>
</view> -->
<view class="head_line" style="margin-top: -20rpx;">
<view class="head_line" style="background-color: #fff;">
<b></b>
<text>新书上市</text>
<!-- <i @click="onBookMore('New')">查看更多 ></i> -->
</view>
<view class="newBook">
<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10">
<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10" style="margin-top: 0 !important;">
<view :class="['item']" v-for="(item,index) in newBookList" :key="index">
<view class="videoBox" @click="goDetail(item.productId)">
<image v-if="item.productImages != ''" :src="item.productImages" mode="scaleToFill"></image>
@@ -727,23 +729,23 @@
.ProTabs{
// margin: 20rpx 0;
padding:0 20rpx;
text{padding: 12rpx 14rpx; font-size: 32rpx; border-radius: 10rpx; overflow: hidden;
text{padding: 8rpx 14rpx; font-size: 32rpx; display: inline-block; border-radius: 10rpx; overflow: hidden;
// background-color: #eee;
color: #55aa7f; margin-right: 10rpx;}
text.cur{background-color:#55aa7f ; color: #fff;}
}
.newBook{margin-top: 20rpx;}
// .newBook{margin-top: 10rpx;}
.scroll-view_H{background-color: #fff;white-space: nowrap;
padding:10rpx ; }
padding:10rpx ; margin-top: 12rpx;}
.scroll-view_H{
.item { padding: 10rpx; overflow: hidden; display: inline-block;
.item { padding: 10rpx; overflow: hidden; display: inline-block; padding-bottom: 0;
width: 180rpx !important; margin-right: 20rpx; border-radius: 10rpx;
.videoBox{
image{display: block; width:150rpx;
height: 170rpx;
}
}
.bookName{display: block; margin-top: 20rpx; color: #666; font-size: 24rpx; white-space: nowrap;
.bookName{display: block; margin-top: 6rpx; color: #666; font-size: 24rpx; white-space: nowrap;
overflow-x: hidden; overflow: hidden;
text-overflow: ellipsis;}
}
@@ -751,7 +753,8 @@
}
.flexbox{display: flex;}
.head_line {
margin: 20rpx 0 0 0;
padding-top: 8rpx;
margin: 12rpx 0 0 0;
b {
@@ -793,8 +796,8 @@
image{width: 150rpx; height: 80rpx;}
}
.icon_hua{width: 100%; text-align: center; display: block;
image{width: 150rpx; height: 150rpx; margin: 0 auto;}
}
image{width: 150rpx; height: 150rpx; margin: 0 auto;}
}
.search_box { margin: 0 auto; margin-top: 20rpx; align-items: center;
width: calc(100% - 30rpx); margin-top: 0;
margin-bottom: 20rpx;
@@ -828,8 +831,10 @@
font-size: 30rpx; color: #fff;
}
}
.home_nar {
margin: 10rpx 20rpx; justify-content: space-between;
.home_nar {
background-color: #fff;
padding: 20rpx 30rpx;
justify-content: space-between;
display: flex;
color: #333;
margin-bottom: 0;
@@ -839,18 +844,18 @@
// .chaoshi{background-color:#fff2d8 ; border: 2px solid #ede6d3; }
// .shuping{ background-color: #d6ffda; border: 2px solid #bae9bf;}
// .shuguan{ background-color:#e3f9f9 ; border: 2px solid #d7eced; }
.hn_cl_tit { padding-bottom: 10rpx;
.hn_cl_tit {
// width: 23%;
width: 31%;
text-align: center;
border-radius: 20rpx ; padding-top: 10rpx;
border-radius: 20rpx ;
// line-height: 110upx;
//display: flex;
align-content: center;
justify-content: center;
image {
width:90%;
height:156rpx;
width:120rpx;
height:120rpx;
display: block;
margin: 0 auto;
// margin: 0 20rpx;
@@ -1119,13 +1124,13 @@
.goods {
width: 100%;
margin:18rpx 0 50rpx 0;
margin:0 0 50rpx 0; background-color: #fff;
.goodsItem {
display: inline-block;
width: 46%;
border-radius: 20rpx;
padding: 25rpx 25rpx 20rpx 25rpx;
padding: 25rpx; padding-bottom: 5rpx;
margin: 0 20rpx 20rpx 20rpx;
background-color: #fff;
border: 1px solid #eee;
@@ -1140,12 +1145,12 @@
.goodsName {
margin-top: 10rpx;
font-size: 30rpx;
font-size: 28rpx;
// font-weight: bold;
}
.goodsPrice {
font-size: 30rpx;
font-size: 28rpx;
margin: 5rpx 0 0 3rpx;
display: flex; justify-content: space-between;
.price{