首页主要是最新的资讯、场地球馆说明

效果图

wxml页面

<view><image class="ad01" src="/img/1.png" mode="widthFix"></image>
</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>
<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><view class="shuoming"><view class="shuoming_biaoti">场地预约使用说明</view><view class="shuoming_xiangmu">1:需要登录,可提前预约4天</view><view class="shuoming_xiangmu">2:先选定日期,然后选场地类型,选场地</view><view class="shuoming_xiangmu">3:填写预约人的姓名和联系方式,然后按“提交场地预约”按扭即可。</view>
</view>
<navigator class="yuyue" url="/pages/dingzuo/index"  open-type='switchTab' >我要预约场地
</navigator>

wxss代码

/* pages/index/index.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: 15px;}.xinxi-icon {width: 22px;height: 22px;}.xinxi-text {flex-grow: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.xinxi-arrow {width: 13px;height: 13px;}.shuoming{padding: 5px;color: gray;
}
.shuoming_biaoti{font-weight: bold;color: orangered;border-bottom: 1px solid gainsboro;padding: 5px 0px;
}
.shuoming_xiangmu{padding: 5px 0px;border-bottom: 1px dotted  gainsboro;font-size: 14px;
}
.yuyue{background-color: orangered;color: white;text-align: center;margin: 10px;padding: 10px;border-radius: 5px;
}

原创 基于微信小程序毕业设计题目选题课题 羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现(1)首页相关推荐

  1. 原创 基于微信小程序毕业设计题目选题课题 羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现(3)我的预约列表

    我的预约列表,效果图 wxml代码 <!--pages/huiyuan/yuyue_list.wxml--> <view class="yuyue" wx:for ...

  2. 原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现(1)首页

    首页主要显示:轮播图.菜单.最新资讯.最新上架的图书 效果图 wxml代码 <!--轮播:远程数据(图片地址+连接地址)[对象数组,数组中的每个元素包含图片地址+链接地址]--> < ...

  3. 校园失物招领小程序 开题报告和作品效果图(基于微信小程序毕业设计题目选题课题)

    用户首次登陆系统需要注册一个用户或直接使用微信作为账号,用户在登录平台后,可以进行平台的操作.主要模块包括以下几点: (1)登录功能:注册普通账号登录:也可以直接使用微信登录:登录后可以修改用户的基本 ...

  4. 基于微信小程序的租车小程序 毕业设计毕业论文 开题报告和效果图(基于微信小程序毕业设计题目选题课题)

  5. 自习室图书馆座位预约小程序 开题报告(基于微信小程序毕业设计题目选题课题)

    开题报告 效果图

  6. 校园、同城二手交易信息小程序 毕业设计毕业论文 开题报告和效果图参考(基于微信小程序毕业设计题目选题课题)

  7. 医院预约挂号小程序 毕业设计毕业论文 开题报告和效果图参考(基于微信小程序毕业设计题目选题课题)

  8. 基于微信运动场地预约小程序 毕业设计毕业论文 开题报告和效果图(基于微信小程序毕业设计题目选题课题)

  9. 房产中介预约看房小程序 毕业设计毕业论文 开题报告和效果图参考(基于微信小程序毕业设计题目选题课题)

最新文章

  1. cakephp中使用大括号的形式避免用点号连接sql语句
  2. 【转载】BTEs业务交易事件初识
  3. Freebsd10.3(FreeBSD11 Beta1)使用手记
  4. Java SpringMVC框架学习(二)httpServeltRequest和Model传值的区别
  5. Maven项目缺少Maven Dependencies解决方法总结
  6. 2011年计算机一级考试题,2011年计算机一级考试试题及答案
  7. JAVA中基本类型Boolean占几个字节
  8. android横向滑动选项卡,android – 如何使用可滑动选项卡实现PageTransformer
  9. 语义分割之原图与mask的可视化
  10. Java 8 中处理集合的优雅姿势——Stream
  11. 《Web Load Testing For Dummie》读书笔记
  12. YYKit源码学习——YYMemoryCache
  13. app系统账号绑定微信openid,H5与后台交互
  14. vue+elementUI 表格下载为excel
  15. 图片转ICO工具升级版本(支持多位深度32位 24位 8位 4位 1位,单文件)
  16. httpmember.php,PHPMyWind 5.1 /member.php 远程密码修改漏洞
  17. 二次元风格好看的视频解析官网html源码
  18. HTML5网页设计基础——用户注册界面
  19. 用光敏电阻实现光源跟踪
  20. 【C进阶】字符串函数及其复写

热门文章

  1. css 滤镜 filter 属性
  2. 第十四章 结构和其他数据形式
  3. 倒计时软件app排行榜前十名中敬业签超好用
  4. RWEQ模型土壤风蚀模数估算及其变化归因分析实践技术
  5. 【数据库】MySQL 加锁处理分析
  6. 数据库(MYSQL)之元数据
  7. jar完整性测试的Java代码
  8. c语言socket通讯和进行进行大文件分片传输
  9. python 入门书籍-入门python有什么好的书籍推荐?
  10. 成语——》寻找心中的巴拿马