经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » PHP » 查看文章
微信小程序开发实战(云开发)--资产管理工具
来源：cnblogs　　作者：阿泽blog　　时间：2020/11/16 10:29:34　　对本文有异议

添加首页 menu页面

截图展示

file

  1. 						// pages/menu/menu.js
  2. 						Page({
  4. 							/**
  5. 							 * 页面的初始数据
  6. 							 */
  7. 							data: {
  9. 							},
  11. 							/**
  12. 							 * 生命周期函数--监听页面加载
  13. 							 */
  14. 							onLoad: function (options) {
  16. 							},
  18. 							/**
  19. 							 * 生命周期函数--监听页面初次渲染完成
  20. 							 */
  21. 							onReady: function () {
  23. 							},
  25. 							/**
  26. 							 * 生命周期函数--监听页面显示
  27. 							 */
  28. 							onShow: function () {
  30. 							},
  32. 							/**
  33. 							 * 生命周期函数--监听页面隐藏
  34. 							 */
  35. 							onHide: function () {
  37. 							},
  39. 							/**
  40. 							 * 生命周期函数--监听页面卸载
  41. 							 */
  42. 							onUnload: function () {
  44. 							},
  46. 							/**
  47. 							 * 页面相关事件处理函数--监听用户下拉动作
  48. 							 */
  49. 							onPullDownRefresh: function () {
  51. 							},
  53. 							/**
  54. 							 * 页面上拉触底事件的处理函数
  55. 							 */
  56. 							onReachBottom: function () {
  58. 							},
  60. 							/**
  61. 							 * 用户点击右上角分享
  62. 							 */
  63. 							onShareAppMessage: function () {
  65. 							}
  66. 						})
  1. 		{
  2. 			"usingComponents": {},
  3. 			"navigationStyle": "custom",
  4. 			"backgroundColor": "#fff",
  5. 			"backgroundTextStyle": "light",
  6. 			"navigationBarBackgroundColor": "#fff",
  7. 			"navigationBarTitleText": "理财小助手",
  8. 			"navigationBarTextStyle": "black"
  9. 		}
  1. 								<view class='cu-tabbar-height' style="min-height:180rpx">
  2. 								<view class="userinfo-avatar">
  3. 									<open-data  type="userAvatarUrl"></open-data>
  4. 								</view>
  5. 							</view>
  7. 							<view class="cu-card" style="margin-bottom:35rpx">
  8. 									<view class="cu-item bg-img shadow-blur" style="background-image:url('images/qpct2148.jpg')">
  9. 										<view class="cardTitle" style="font-weight:bolder">
  10. 										 你好 <open-data type="userNickName"></open-data> 
  11. 										</view>
  12. 									</view>
  13. 								</view>
  15. 								<view class='nav-list'>
  16. 									<navigator  open-type="navigate" hover-class='none' url="" class="nav-li bg-cyan" >
  17. 										<view style="font-weight:bolder" class="nav-title">资产管理</view>
  18. 										<view style="font-weight:bolder" class="nav-name">management</view>
  19. 										<text class='cuIcon-rechargefill'></text>
  20. 									</navigator>
  22. 									<navigator open-type="navigate" hover-class='none' url="" class="nav-li bg-blue" >
  23. 										<view style="font-weight:bolder" class="nav-title">购买判断</view>
  24. 										<view style="font-weight:bolder" class="nav-name">judge</view>
  25. 										<text class='cuIcon-squarecheckfill'></text>
  26. 									</navigator>
  28. 									<navigator open-type="navigate" hover-class='none' url="" class="nav-li bg-olive" >
  29. 										<view style="font-weight:bolder" class="nav-title">使用说明</view>
  30. 										<view style="font-weight:bolder" class="nav-name">instructions</view>
  31. 										<text class='cuIcon-formfill'></text>
  32. 									</navigator>
  34. 									<button open-type="contact" hover-class='none' style="width: 45%;margin: 0 0 40rpx;" class="nav-li bg-green" > 
  35. 										<view style="font-weight:bolder" class="nav-title" style="text-align:left">联系我们</view>
  36. 										<view style="font-weight:bolder" class="nav-name" style="text-align:left">Contact</view>
  37. 										<text class='cuIcon-friendaddfill' style=""></text>
  38. 									</button>
  40. 								</view>
  42. 								<view class='cu-tabbar-height'></view>
  1. 						/* pages/menu/menu.wxss */
  2. 					@import "../../colorui/main.wxss";
  3. 					@import "../../colorui/icon.wxss";
  5. 					page{
  6. 						background-color: white;
  7. 					}
  9. 					.cardTitle{
  10. 						color: #fff;
  11. 						padding: 90rpx 60rpx;
  12. 						font-size: 40rpx;
  13. 						font-weight: 300;
  14. 						transform: skew(-10deg, 0deg);
  15. 						position: relative;
  16. 						text-shadow: 0px 0px 6rpx rgba(0,0,0,0.3)
  17. 					}
  19. 					.cardTitle::before{
  20. 						content: "";
  21. 						position: absolute;
  22. 						width: 60rpx;
  23. 						height: 6rpx;
  24. 						border-radius: 20rpx;
  25. 						background-color: #fff;
  26. 						display: block;
  27. 						top: 60rpx;
  28. 						left: 50rpx;  
  29. 						transform: skew(10deg, 0deg);
  30. 					}
  31. 					.cardTitle::after{
  32. 						content: "";
  33. 						position: absolute;
  34. 						width: 140rpx;
  35. 						border-radius: 6rpx;
  36. 						height: 24rpx;
  37. 						background-color: #fff;
  38. 						display: block;
  39. 						bottom: 76rpx;
  40. 						left: 90rpx;  
  41. 						transform: skew(10deg, 0deg);
  42. 						opacity: 0.1;
  43. 					}
  46. 					.scrollPage {
  47. 						height: 100vh;
  48. 					}
  50. 					.nav-list {
  51. 						display: flex;
  52. 						flex-wrap: wrap;
  53. 						padding: 0px 40rpx 0px;
  54. 						justify-content: space-between;
  55. 					}
  57. 					.nav-li {
  58. 						padding: 30rpx;
  59. 						border-radius: 12rpx;
  60. 						width: 45%;
  61. 						margin: 0 0 40rpx;
  62. 						background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
  63. 						background-size: cover;
  64. 						background-position: center;
  65. 						position: relative;
  66. 						z-index: 1;
  67. 					}
  69. 					.nav-li::after {
  70. 						content: "";
  71. 						position: absolute;
  72. 						z-index: -1;
  73. 						background-color: inherit;
  74. 						width: 100%;
  75. 						height: 100%;
  76. 						left: 0;
  77. 						bottom: -10%;
  78. 						border-radius: 10rpx;
  79. 						opacity: 0.2;
  80. 						transform: scale(0.9, 0.9);
  81. 					}
  83. 					.nav-li.cur {
  84. 						color: #fff;
  85. 						background: rgb(94, 185, 94);
  86. 						box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
  87. 					}
  89. 					.nav-title {
  90. 						font-size: 32rpx;
  91. 						font-weight: 300;
  92. 					}
  94. 					.nav-title::first-letter {
  95. 						font-size: 40rpx;
  96. 						margin-right: 4rpx;
  97. 					}
  99. 					.nav-name {
  100. 						font-size: 28rpx;
  101. 						text-transform: Capitalize;
  102. 						margin-top: 20rpx;
  103. 						position: relative;
  104. 					}
  106. 					.nav-name::before {
  107. 						content: "";
  108. 						position: absolute;
  109. 						display: block;
  110. 						width: 40rpx;
  111. 						height: 6rpx;
  112. 						background: #fff;
  113. 						bottom: 0;
  114. 						right: 0;
  115. 						opacity: 0.5;
  116. 					}
  118. 					.nav-name::after {
  119. 						content: "";
  120. 						position: absolute;
  121. 						display: block;
  122. 						width: 100rpx;
  123. 						height: 1px;
  124. 						background: #fff;
  125. 						bottom: 0;
  126. 						right: 40rpx;
  127. 						opacity: 0.3;
  128. 					}
  130. 					.nav-name::first-letter {
  131. 						font-weight: bold;
  132. 						font-size: 36rpx;
  133. 						margin-right: 1px;
  134. 					}
  136. 					.nav-li text {
  137. 						position: absolute;
  138. 						right: 30rpx;
  139. 						top: 30rpx;
  140. 						font-size: 52rpx;
  141. 						width: 60rpx;
  142. 						height: 60rpx;
  143. 						text-align: center;
  144. 						line-height: 60rpx;
  145. 					}
  147. 					.text-light {
  148. 						font-weight: 300;
  149. 					}
  153. 					.userinfo-avatar {  
  154. 						overflow:hidden;  
  155. 						display: block;  
  156. 						width: 80rpx;  
  157. 						height: 80rpx;  
  158. 						margin-left: 50rpx;  
  159. 						margin-top: 70rpx;  
  160. 						border-radius: 50%;  
  161. 						border: 2px solid #fff;  
  162. 						box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
  163. 					}  
  165. 					.userinfo{  
  166. 						/* color: #fff; */  
  167. 						font-size: 14px;  
  168. 						background-color: #c0c0c0;  
  169. 						border-radius:40%;  
  170. 					}

合作项目/交朋友/问题咨询 请打开https://blog.iffmd.cn (https://blog.iffmd.cn)

原文链接：http://www.cnblogs.com/wzfblog/p/13954358.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

PHP热门文章

  • 收藏了8年的PHP优秀资源，都给你整理好了
  • php对微信支付回调处理的方法（合集）
  • 聊聊TCP连接耗时的那些事儿
  • php如何比较两个浮点数是否相等详解
  • PHP实现PDO操作mysql存储过程示例
  • 富文本编辑器新增导入word功能，自动转为html，可直接显示图片
  • curl put方式上传文件
  • thinkphp3.2模块名如何不区分大小写?
  • php去掉字符串的最后一个字符
  • WebSocket 长连接 及超时问题解决

    • PHP推荐文章

  • 【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
  • PHP转Go系列 | ThinkPHP与Gin框架之API接口签名设计实践
  • MagicArray:像php一样，让Go业务代码不再卷！
  • 2023年的PHP项目部署笔记。什么？还有人用PHP？
  • [CTF/Web] PHP 反序列化学习笔记
  • PHP的序列化和反序列化入门
  • 详解PHP实现HTTP服务器过程
  • 高效率开发Web安全扫描器之路（一）
  • PHP实现微信扫码登录功能的两种方式总结
  • PHP内存溢出的解决方法详解

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号