wxml代码
<view>
<!--广告图片 mode="widthFix" 设定高度随宽度自动变化-->
<image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="chaxun">
<input class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="请输入图书名称"></input>
<button class="chaxun_you" type="mini" form-type="submit" >查询</button>
</view>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">最新资讯</view>
<navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=资讯中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>06-19 八月份上架新书目录通知</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>06-19 用户微信直接登录功能开通</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>06-19 关于违规会员处理的通知</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator class="fenlei" url="/pages/shu/fenlei" open-type="switchTab">电子书分类</navigator>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">最新书籍</view>
<view class="qukuai_you">所有</view>
</view>
<view class="zuixin">
<view class="zuixin_kecheng">
<navigator class="zuixin_kecheng_fengmian" url="/pages/shu/mulu">
<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tushu/t01.jpg"></image>
</navigator>
<view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
<view class="zuixin_kecheng_xinxi">
<view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
<view class="zuixin_kecheng_xinxi_you">免费</view>
</view>
</view>
<view class="zuixin_kecheng">
<navigator class="zuixin_kecheng_fengmian" url="/pages/shu/mulu">
<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tushu/t02.jpg"></image>
</navigator>
<view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
<view class="zuixin_kecheng_xinxi">
<view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
<view class="zuixin_kecheng_xinxi_you">免费</view>
</view>
</view>
<view class="zuixin_kecheng">
<navigator class="zuixin_kecheng_fengmian" url="/pages/shu/mulu">
<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tushu/t04.jpg"></image>
</navigator>
<view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
<view class="zuixin_kecheng_xinxi">
<view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
<view class="zuixin_kecheng_xinxi_you">免费</view>
</view>
</view>
<view class="zuixin_kecheng">
<navigator class="zuixin_kecheng_fengmian" url="/pages/shu/mulu">
<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tushu/t07.jpg"></image>
</navigator>
<view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
<view class="zuixin_kecheng_xinxi">
<view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
<view class="zuixin_kecheng_xinxi_you">免费</view>
</view>
</view>
</view>
wxss代码
/* 广告图片*/
.ad01{
width: 100%; /* 宽度100%*/
}
.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}
.xinxi {
display: flex;
align-items: center;
padding: 5px;
border-bottom: 1px solid #f2f2f2;
font-size: 14px;
color: gray;
}
.xinxi-icon {
width: 19px;
height: 19px;
}
.xinxi-text {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xinxi-arrow {
width: 13px;
height: 13px;
}
.chaxun{
background-color:#f2f2f2;
display: flex;
margin: 10px;
align-items: center;
}
.chaxun_zuo{
padding-left: 15px;
flex-grow: 1;
}
.chaxun_you{
border-radius: 0px;
background-color: orange;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.fenlei{ background-color: orangered;text-align: center;padding: 7px; color: white; margin: 5px; border-radius: 5px;}
.zuixin{ padding: 2px;display: flex; flex-wrap: wrap;}
.zuixin_kecheng{
width: 48%;
margin: 3px;
padding: 3px;
box-sizing: border-box;
border:1px solid #f2f2f2;
box-shadow: 1px 1px 2px gainsboro;
color: gray;
}
.zuixin_kecheng_fengmian{
width: 100%;
}
.zuixin_kecheng_fengmian_img{
width: 100%;
}
.zuixin_kecheng_biaoti{
font-size: 14px;
}
.zuixin_kecheng_xinxi{
display: flex;
align-items: center;
}
.zuixin_kecheng_xinxi_zuo{
font-size: 12px;
flex-grow: 1;
}
.zuixin_kecheng_xinxi_you{
color: red;
font-size: 14px;
}
