微信小程序開發實戰(雲開發)--資產管理工具
添加首頁 menu頁面
截圖展現
menu.js源碼
// pages/menu/menu.js
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動做
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
menu.json 源碼
{
"usingComponents": {},
"navigationStyle": "custom",
"backgroundColor": "#fff",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "理財小助手",
"navigationBarTextStyle": "black"
}
menu.wxml 源碼
<view class='cu-tabbar-height' style="min-height:180rpx">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
</view>
<view class="cu-card" style="margin-bottom:35rpx">
<view class="cu-item bg-img shadow-blur" style="background-image:url('images/qpct2148.jpg')">
<view class="cardTitle" style="font-weight:bolder">
你好 <open-data type="userNickName"></open-data>
</view>
</view>
</view>
<view class='nav-list'>
<navigator open-type="navigate" hover-class='none' url="" class="nav-li bg-cyan" >
<view style="font-weight:bolder" class="nav-title">資產管理</view>
<view style="font-weight:bolder" class="nav-name">management</view>
<text class='cuIcon-rechargefill'></text>
</navigator>
<navigator open-type="navigate" hover-class='none' url="" class="nav-li bg-blue" >
<view style="font-weight:bolder" class="nav-title">購買判斷</view>
<view style="font-weight:bolder" class="nav-name">judge</view>
<text class='cuIcon-squarecheckfill'></text>
</navigator>
<navigator open-type="navigate" hover-class='none' url="" class="nav-li bg-olive" >
<view style="font-weight:bolder" class="nav-title">使用說明</view>
<view style="font-weight:bolder" class="nav-name">instructions</view>
<text class='cuIcon-formfill'></text>
</navigator>
<button open-type="contact" hover-class='none' style="width: 45%;margin: 0 0 40rpx;" class="nav-li bg-green" >
<view style="font-weight:bolder" class="nav-title" style="text-align:left">聯繫咱們</view>
<view style="font-weight:bolder" class="nav-name" style="text-align:left">Contact</view>
<text class='cuIcon-friendaddfill' style=""></text>
</button>
</view>
<view class='cu-tabbar-height'></view>
menu.wxss 源碼
/* pages/menu/menu.wxss */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";
page{
background-color: white;
}
.cardTitle{
color: #fff;
padding: 90rpx 60rpx;
font-size: 40rpx;
font-weight: 300;
transform: skew(-10deg, 0deg);
position: relative;
text-shadow: 0px 0px 6rpx rgba(0,0,0,0.3)
}
.cardTitle::before{
content: "";
position: absolute;
width: 60rpx;
height: 6rpx;
border-radius: 20rpx;
background-color: #fff;
display: block;
top: 60rpx;
left: 50rpx;
transform: skew(10deg, 0deg);
}
.cardTitle::after{
content: "";
position: absolute;
width: 140rpx;
border-radius: 6rpx;
height: 24rpx;
background-color: #fff;
display: block;
bottom: 76rpx;
left: 90rpx;
transform: skew(10deg, 0deg);
opacity: 0.1;
}
.scrollPage {
height: 100vh;
}
.nav-list {
display: flex;
flex-wrap: wrap;
padding: 0px 40rpx 0px;
justify-content: space-between;
}
.nav-li {
padding: 30rpx;
border-radius: 12rpx;
width: 45%;
margin: 0 0 40rpx;
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.nav-li::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -10%;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
.nav-li.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title {
font-size: 32rpx;
font-weight: 300;
}
.nav-title::first-letter {
font-size: 40rpx;
margin-right: 4rpx;
}
.nav-name {
font-size: 28rpx;
text-transform: Capitalize;
margin-top: 20rpx;
position: relative;
}
.nav-name::before {
content: "";
position: absolute;
display: block;
width: 40rpx;
height: 6rpx;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: "";
position: absolute;
display: block;
width: 100rpx;
height: 1px;
background: #fff;
bottom: 0;
right: 40rpx;
opacity: 0.3;
}
.nav-name::first-letter {
font-weight: bold;
font-size: 36rpx;
margin-right: 1px;
}
.nav-li text {
position: absolute;
right: 30rpx;
top: 30rpx;
font-size: 52rpx;
width: 60rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.text-light {
font-weight: 300;
}
.userinfo-avatar {
overflow:hidden;
display: block;
width: 80rpx;
height: 80rpx;
margin-left: 50rpx;
margin-top: 70rpx;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo{
/* color: #fff; */
font-size: 14px;
background-color: #c0c0c0;
border-radius:40%;
}
合做項目/交朋友/問題諮詢 請打開https://blog.iffmd.cn (https://blog.iffmd.cn)json
相關文章
- 1. 微信小程序開發實戰——微信小程序開發者工具0.10.101100
- 2. 微信開發者工具開發微信小程序
- 3. 微信小程序開發(二) -工具
- 4. 微信小程序開發 （1）微信小程序開發工具
- 5. Weapp微信小程序開發實戰
- 6. 微信小程序開發實戰
- 7. 微信小程序開發實戰（一）
- 8. 微信小程序項目實戰 —— 1.2 開發工具下載
- 9. 「小程序JAVA實戰」微信開發者工具helloworld（三）
- 10. 微信小程序:雲開發開通
- 更多相關文章...
- • Rust 併發編程 - RUST 教程
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • PHP開發工具
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
