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/tiku/kaoti_timu">
<image class
="zuixin_kecheng_fengmian_img" mode
="widthFix" src
="/tupian/01.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/tiku/kaoti_timu">
<image class
="zuixin_kecheng_fengmian_img" mode
="widthFix" src
="/tupian/02.jpg"></image
>
</navigator
>
<view class
="zuixin_kecheng_biaoti">HTML5入门考题
</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/tiku/kaoti_timu">
<image class
="zuixin_kecheng_fengmian_img" mode
="widthFix" src
="/tupian/03.jpg"></image
>
</navigator
>
<view class
="zuixin_kecheng_biaoti">CSS入门考题
</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/tiku/kaoti_timu">
<image class
="zuixin_kecheng_fengmian_img" mode
="widthFix" src
="/tupian/04.jpg"></image
>
</navigator
>
<view class
="zuixin_kecheng_biaoti">CSS3入门考题
</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%;
}
.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
;
}
