标签:flex 5px color 微信 程序 padding 毕业设计 font border
首页主要是查询、最新资讯、最新疫苗
界面如图
wxml代码
<view>
<image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<form bindsubmit='chaxun' >
<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>
</form>
<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>
<block wx:for="{{xinxis}}" wx:key="myid">
<navigator url='/pages/xinxi/xiangqing?cs_xxid={{item.myid}}' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
</block>
<navigator class="yuyue" url="/pages/dianying/index" open-type='switchTab' >
查看所有疫苗
</navigator>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">最新疫苗</view>
<navigator class="qukuai_you" url="/pages/dianying/index" open-type="switch-tab">所有疫苗</navigator>
</view>
<view class="zuixin">
<view class="zuixin_kecheng" wx:for="{{shipins}}" wx:key="sp_id">
<navigator class="zuixin_kecheng_fengmian" url="/pages/dianying/xiangqing?sp_id={{item.sp_id}}&sp_mc={{item.sp_mc}}">
<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="{{item.sp_tupian}}"></image>
</navigator>
<view class="zuixin_kecheng_biaoti">{{item.sp_mc}}</view>
<view class="zuixin_kecheng_xinxi">
<view class="zuixin_kecheng_xinxi_zuo">价格</view>
<view class="zuixin_kecheng_xinxi_you">
<block wx:if="{{item.sp_jiage==0}}">
免费
</block>
<block wx:else>
¥ {{item.sp_jiage}} 元
</block>
</view>
</view>
</view>
</view>
wxss代码
/* pages/index/index.wxss */
.ad01{
width: 100%;
}
.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;
}
.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;
}
.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;
}
.shuoming{
padding: 5px;
color: gray;
font-size: 15px;
}
.shuoming_biaoti{
background-color: #f9f9f9;
font-weight: bold;
color: orangered;
border-bottom: 1px solid gainsboro;
padding: 5px 0px;
}
.shuoming_xiangmu{
padding: 5px 0px;
border-bottom: 1px dotted gainsboro;
}
.yuyue{
background-color: orangered;
color: white;
text-align: center;
margin: 10px;
padding: 10px;
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;
}
标签:flex,5px,color,微信,程序,padding,毕业设计,font,border 来源: https://blog.51cto.com/u_13898481/2890843
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。