huangshijie/hios-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改我的页面的样式，添加关于我们，更换logo

Browse Source
This commit is contained in:
shengliang 2019-11-30 11:06:14 +08:00
parent 289330d143
commit cc0785a2c5
9 changed files with 146 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.json
View File

@ -7,6 +7,7 @@
"pages/search/search",
"pages/order-check/index",
"pages/goods/goods",
"pages/ucenter/about/index",
"pages/ucenter/address/index",
"pages/ucenter/address-detail/index",
"pages/ucenter/index/index",

2
pages/app-auth/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class='logo'>
<image class='logo-img' src='http://lucky-icon.meiweiyuxian.com/hio/logo.png'></image>
<image class='logo-img' src='http://lucky-icon.meiweiyuxian.com/hio/pinwheel.jpg'></image>
</view>
<view class='logo-name'>海风小店</view>
<view class='intro'>开源微信小程序商城</view>

9
pages/ucenter/about/index.js Normal file
View File

@ -0,0 +1,9 @@
const app = getApp()
Page({
data: {
},
onLoad: function () {
},
})

3
pages/ucenter/about/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"navigationBarTitleText": "关于我们"
}

15
pages/ucenter/about/index.wxml Normal file
View File

@ -0,0 +1,15 @@
<view class="container">
<view class='about-wrap'>
<view class='title'>海风小店</view>
<view class='content'>
开源微信小程序商城
</view>
<view class="line"></view>
<view class="content">开发者：盛良</view>
<view class="content">微信：lookgxl</view>
<view class="line"></view>
<view class='content'>
更多信息访问：hiolabs.com
</view>
</view>
</view>

42
pages/ucenter/about/index.wxss Normal file
View File

@ -0,0 +1,42 @@
page {
height: 100%;
background: #f8f8f8;
}
.container {
background-color: #f8f8f8;
height: 100%;
display: flex;
align-items: stretch;
overflow-x: hidden;
justify-content: unset;
}
.about-wrap {
background: #fff;
padding: 50rpx 40rpx;
}
.title {
width: 100%;
font-size: 30rpx;
font-weight: bold;
text-indent: 56rpx;
margin: 24rpx 0;
box-sizing: border-box;
}
.content {
width: 100%;
font-size: 28rpx;
text-indent: 56rpx;
line-height: 50rpx;
box-sizing: border-box;
}
.line {
height: 1rpx;
border-top: 1rpx solid #f1f1f1;
padding-bottom: 14rpx;
margin-top: 14rpx;
}

7
pages/ucenter/index/index.js
View File

@ -14,7 +14,7 @@ Page({
avatar: 'http://lucky-icon.meiweiyuxian.com/hio/default_avatar_big.png',
status: {},
},
toSettings: function(e) {
goProfile: function (e) {
let res = util.loginNow();
if (res == true) {
wx.navigateTo({
@ -40,6 +40,11 @@ Page({
});
}
},
toAbout: function () {
wx.navigateTo({
url: '/pages/ucenter/about/index',
});
},
toFootprint: function(e) {
let res = util.loginNow();
if (res == true) {

39
pages/ucenter/index/index.wxml
View File

@ -1,19 +1,26 @@
<view class="container">
<view class="userinfo">
<view class='head-wrap' wx:if="{{hasUserInfo == 0}}">
<view class='l'>
<image class='avatar' src="{{avatar}}"></image>
</view>
<view class='btn-login' bindtap='goAuth'>点我登录</view>
</view>
<view class='head-wrap' wx:else>
<view class='l' bindtap='goProfile'>
<image class='avatar' src="{{userInfo.avatar}}"></image>
</view>
<view class='r'>
<view class='t'>
<view class='name'>{{userInfo.nickname}}</view>
<view class='head-wrap' wx:if="{{hasUserInfo == 0}}" bindtap='goAuth'>
<view class="no-login-avatar">
<view class='no-avatar'>
<image class='avatar' src="{{avatar}}"></image>
</view>
<view class='btn-login'>点我登录</view>
</view>
</view>
<view class='head-wrap' wx:else bindtap='goProfile'>
<view class="head-l">
<view class='l'>
<image class='avatar' src="{{userInfo.avatar}}"></image>
</view>
<view class='r'>
<view class='t'>
<view class='name'>{{userInfo.nickname}}</view>
</view>
</view>
</view>
<view class="head-r">
<view class="arrow"></view>
</view>
</view>
</view>
@ -82,12 +89,12 @@
</view>
<view class="arrow"></view>
</button>
<view class="list" bindtap="toSettings">
<view class="list" bindtap="toAbout">
<view class="list-l">
<view class="icon">
<image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/settings.png"></image>
<image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/icon-about-r.png"></image>
</view>
<view class="text">设置</view>
<view class="text">关于我们</view>
</view>
<view class="arrow"></view>
</view>

73
pages/ucenter/index/index.wxss
View File

@ -59,31 +59,57 @@ page {
.head-wrap {
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 1rpx solid #f1f1f1;
}
.head-wrap .l {
.head-wrap .no-login-avatar {
display: flex;
justify-content: flex-start;
align-items: center;
}
.head-wrap .no-login-avatar .no-avatar {
width: 128rpx;
height: 128rpx;
position: relative;
margin-right: 20rpx;
}
.head-wrap .l .avatar-wrap {
width: 128rpx;
height: 128rpx;
}
.head-wrap .l .avatar {
.head-wrap .no-login-avatar .no-avatar .avatar {
width: 128rpx;
height: 128rpx;
border-radius: 90rpx;
}
.head-wrap .l .crown {
.head-wrap .head-l {
display: flex;
justify-content: flex-start;
align-items: center;
}
.head-wrap .head-l .l {
width: 110rpx;
height: 110rpx;
position: relative;
margin-right: 20rpx;
}
.head-wrap .head-l .l .avatar-wrap {
width: 110rpx;
height: 110rpx;
}
.head-wrap .head-l .l .avatar {
width: 110rpx;
height: 110rpx;
border-radius: 90rpx;
}
.head-wrap .head-l .l .crown {
position: absolute;
right: -10rpx;
top: -10rpx;
@ -92,37 +118,30 @@ page {
transform: rotate(45deg);
}
.head-wrap .l .crown .icon {
.head-wrap .head-l .l .crown .icon {
width: 30rpx;
height: 30rpx;
}
.head-wrap .r {
display: flex;
flex-direction: column;
}
.head-wrap .r .t {
.head-wrap .head-l .r {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 8rpx;
}
.head-wrap .r .t .name {
.head-wrap .head-l .r .name {
font-size: 34rpx;
color: #192841;
font-weight: 500;
margin-right: 10rpx;
}
.head-wrap .r .t .tag {
font-size: 20rpx;
color: #ff3456;
border-radius: 100rpx;
border: 1rpx solid #ff3456;
padding: 4rpx 16rpx;
background: #fff;
.head-wrap .head-r .arrow {
width: 10rpx;
height: 10rpx;
border-top: 4rpx solid #ccc;
border-right: 4rpx solid #ccc;
transform: rotate(45deg);
}
.order-container {
@ -135,7 +154,7 @@ page {
.order-container .header {
width: 100%;
background: url(http://lucky-icon.meiweiyuxian.com/hio/arrow-right.png) no-repeat 690rpx center;
background-size: 16rpx auto, 750rpx auto;
background-size: 14rpx auto, 750rpx auto;
height: 90rpx;
margin: 0 0 0 24rpx;
font-size: 30rpx;
@ -256,7 +275,7 @@ page {
}
.li-wrap .list .list-l .text {
font-size: 30rpx;
font-size: 28rpx;
color: #333;
}