在线电子书阅读微信小程序 毕业设计(1)首页
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;
}
在线电子书阅读微信小程序 毕业设计(1)首页相关推荐
- 在线电子书阅读微信小程序 毕业设计(3)图书列表
wxml代码 <!--pages/shu/index.wxml--> <view class="chaxun"><input class=" ...
- 在线电子书阅读微信小程序 毕业设计(2)分类
wxml代码 <!--pages/shu/index.wxml--> <view class="chaxun"><input class=" ...
- 在线电子书阅读微信小程序 毕业设计(4)图书详细页-图书目录
wxml代码 <!--pages/shu/mulu.wxml--> <view class="qukuai"><view class="qu ...
- 在线电子书阅读微信小程序 毕业设计(5)用户登录注册
wxml代码 <form ><view class='denlgu'><text class='shuoming'>请输入您的会员账号</text>&l ...
- 在线电子书阅读小程序,微信小程序电子书阅读,微信小程序小说阅读器毕业设计作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序在线电子书阅读系统,前台用户使用小程序,后台管理使用基Java+MySql技术:通过后台录入电子书信息.书目录信息,用户通过小程序 ...
- 推荐几个【2021年原创】微信小程序毕业设计的课题 小程序毕业设计题目 小程序毕设选题参考 基于微信小程序毕业设计
(1)电影院订票选座小程序 毕业设计 课程设计( 使用教程) https://ke.qq.com/course/3061789?taid=10201006892562461&tuin=2b10 ...
- 2022到2023基于PHP+微信小程序毕业设计课题参考
下面是收集整理的课题目录,这些课题都是已经做好的成品: 都配有了项目环境搭建视频,项目发布和操作视频,项目设计到的知识基础课 毕业设计答辩一般是10分钟:前面5分钟演示作品,后面5分钟答辩:做毕设也要 ...
- 推荐几个微信小程序毕业设计的课题
(01)微信小程序商城 https://ke.qq.com/course/3419421 (02)电影院订票选座小程序 https://ke.qq.com/course/3418657 (03)餐厅酒 ...
- 微信小程序毕业设计选题和毕业论文怎么写,答辩流程是怎样的?
1. 开始准备选题 大四上学期开学时开始准备论文的,首先是确定论文主题,看自己想做什么毕业设计,可以选取之前接触过的,做过的东西,这样快一些,如果选的是没接触过的方向,一定要早点开始.打算做一个小程序 ...
最新文章
- 5 个用 Python 编写 web 爬虫的方法
- Java模块化之路 —— OSGI介绍
- mysql左连接_MySQL left join 左连接的通俗理解
- 用Log Parser Studio分析IIS日志
- TeamViewer远程访问
- RuoYi-Cloud 部署篇_01(linux环境 Oracle +nginx版本)
- 【OpenCV 例程200篇】77. OpenCV 实现快速傅里叶变换
- 计算机科学速成课18:操作系统
- 读取 system serial number
- Ant Design vue 表格内换行
- Git 基础知识 - 查看提交历史记录
- excel冻结多行(固定表头)
- JavaScript基于qrcode.js带Logo彩色二维码(艺术二维码)
- 计算机按键音乐葫芦娃,Arduino学习笔记—超简单制作音乐(播放葫芦娃)
- 8.17 一个博客demo
- android蓝牙python,android – 使用SL4A(Python)和蓝牙
- 什么是BlockingQueue
- NumericUtil
- java并发原理实战(8)-- lock接口使用和认识
- 淘宝开源的代码质量检测工具,真强啊~
热门文章
- ei会议论文录用但不参加会议_科学网—推荐一个录用论文全部发表在EI期刊上的会议 - 徐庆征的博文...
- 计算机中英文字录入教案,文字录入教案.doc
- 设计模式(一):简介
- splice和sendfile
- Python 通过 Tushare Pro 获取财经数据接口
- 今日全国油价查询2022-03-08
- DELL服务器 ubuntu系统 全新硬盘识别不到问题解决及对硬盘做GPT分区
- 记录--Spyder打开时出现“An error occurred while starting the kernel“
- F# 图形数学基础。
- 计算机分盘的时候c盘留多少,电脑分盘c盘多大合适