ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

基于微信小程序毕业设计选题课题 疫苗预约小程序的设计与实现(1)首页

2021-06-10 17:02:53  阅读:123  来源: 互联网

标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有