用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

15

主题

35

帖子

704

积分

特邀嘉宾

积分
704
2017-7-10 19:37:41 黄秀杰 特邀嘉宾 楼主 105329

个人中心.png



附带2个技能:
  • 经典列表页样式
  • grid网络
WXML文件:

[HTML] 纯文本查看 复制代码
[color=rgb(117, 113, 94)]<!-- 个人信息 -->[/color]
<view class="summary">
        [color=rgb(117, 113, 94)]<!-- <view class="avatar-container"> -->[/color]
                <image src="/images/default-avatar.png" class="avatar" />
        [color=rgb(117, 113, 94)]<!-- </view> -->[/color]
                <view class="nickname">黄秀杰</view>
</view>
[color=rgb(117, 113, 94)]<!-- 账户 -->[/color]
<view class="account">
        <view class="item">
                <view class="value balance">0.00</view>
                <view class="caption">余额</view>
        </view>
        <view class="item">
                <view class="value coupon">0</view>
                <view class="caption">优惠</view>
        </view>
        <view class="item">
                <view class="value credit">0</view>
                <view class="caption">积分</view>
        </view>
</view>
[color=rgb(117, 113, 94)]<!-- 列表 -->[/color]
<view class="listview">
        <view class="item">
                <image class="hd" src="/images/address.png" />
                <view class="bd">收货地址</view>
                <view class="ft"></view>
        </view>
</view>

[color=rgb(117, 113, 94)]<!-- 退出登录 -->[/color]
<view class="logout">
        退出登录
</view>

WXSS文件:

[CSS] 纯文本查看 复制代码
[color=rgb(117, 113, 94)]/*会员中心*/[/color]

page {
        [color=rgb(102, 217, 239)]background[/color]: [color=rgb(174, 129, 255)]#eee[/color];
}

[color=rgb(117, 113, 94)]/*个人信息*/[/color]
.summary {
        [color=rgb(102, 217, 239)]background[/color]: [color=rgb(174, 129, 255)]#0097ff[/color];
        [color=rgb(102, 217, 239)]display[/color]: flex;
        [color=rgb(102, 217, 239)]flex-direction[/color]: row;
        [color=rgb(102, 217, 239)]align-items[/color]: center;
}

[color=rgb(117, 113, 94)]/*头像*/[/color]
.summary .avatar {
        [color=rgb(102, 217, 239)]width[/color]: [color=rgb(174, 129, 255)]80px[/color];
        [color=rgb(102, 217, 239)]height[/color]: [color=rgb(174, 129, 255)]80px[/color];
        [color=rgb(102, 217, 239)]margin[/color]: [color=rgb(174, 129, 255)]20px[/color];
}

[color=rgb(117, 113, 94)]/*昵称*/[/color]
.summary .nickname {
        [color=rgb(102, 217, 239)]color[/color]: white;
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]22px[/color];
}

[color=rgb(117, 113, 94)]/*.个人信息*/[/color]

[color=rgb(117, 113, 94)]/*账户信息*/[/color]
.account {
        [color=rgb(102, 217, 239)]display[/color]: flex;
        [color=rgb(102, 217, 239)]flex-direction[/color]: row;
        [color=rgb(102, 217, 239)]justify-content[/color]: space-around;
        [color=rgb(102, 217, 239)]margin-top[/color]: [color=rgb(174, 129, 255)]10px[/color];
        [color=rgb(102, 217, 239)]background[/color]: white;
}

[color=rgb(117, 113, 94)]/*每一项*/[/color]
.account .item {
        [color=rgb(102, 217, 239)]display[/color]: flex;
        [color=rgb(102, 217, 239)]flex-direction[/color]: column;
        [color=rgb(102, 217, 239)]text-align[/color]: center;
        [color=rgb(102, 217, 239)]margin-left[/color]: [color=rgb(174, 129, 255)]0[/color];
        [color=rgb(102, 217, 239)]flex[/color]: [color=rgb(174, 129, 255)]1[/color];
        [color=rgb(102, 217, 239)]border-right[/color]: [color=rgb(174, 129, 255)]1px[/color] solid [color=rgb(174, 129, 255)]#eee[/color];
}

.account .item:last-child {
        [color=rgb(102, 217, 239)]border-right[/color]: [color=rgb(174, 129, 255)]0[/color];
}

[color=rgb(117, 113, 94)]/*数值*/[/color]
.account .item .value {
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]18px[/color];
        [color=rgb(102, 217, 239)]padding-top[/color]: [color=rgb(174, 129, 255)]10px[/color];
}

[color=rgb(117, 113, 94)]/*after通用样式*/[/color]
.account .item .value:after {
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]12px[/color];
        [color=rgb(102, 217, 239)]margin-left[/color]: [color=rgb(174, 129, 255)]5px[/color];
}

[color=rgb(117, 113, 94)]/*余额*/[/color]
.account .item .balance {
        [color=rgb(102, 217, 239)]color[/color]: [color=rgb(174, 129, 255)]#fd9900[/color];
}

[color=rgb(117, 113, 94)]/*单位*/[/color]
.account .item .balance:after {
        [color=rgb(102, 217, 239)]content[/color]: [color=rgb(230, 219, 116)]'元'[/color];
}

[color=rgb(117, 113, 94)]/*优惠*/[/color]
.account .item .coupon {
        [color=rgb(102, 217, 239)]color[/color]: [color=rgb(174, 129, 255)]#ff5f3e[/color];
}

[color=rgb(117, 113, 94)]/*单位*/[/color]
.account .item .coupon:after {
        [color=rgb(102, 217, 239)]content[/color]: [color=rgb(230, 219, 116)]'个'[/color];
}

[color=rgb(117, 113, 94)]/*积分*/[/color]
.account .item .credit {
        [color=rgb(102, 217, 239)]color[/color]: [color=rgb(174, 129, 255)]#6ac20b[/color];
}

[color=rgb(117, 113, 94)]/*单位*/[/color]
.account .item .credit:after {
        [color=rgb(102, 217, 239)]content[/color]: [color=rgb(230, 219, 116)]'分'[/color];
}

[color=rgb(117, 113, 94)]/*标签*/[/color]
.account .item .caption {
        [color=rgb(102, 217, 239)]margin-top[/color]: -[color=rgb(174, 129, 255)]10px[/color];
        [color=rgb(102, 217, 239)]color[/color]: [color=rgb(174, 129, 255)]#666[/color];
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]14px[/color];
}
[color=rgb(117, 113, 94)]/*.账户信息*/[/color]

[color=rgb(117, 113, 94)]/*通用列表*/[/color]
.listview {
        [color=rgb(102, 217, 239)]margin-top[/color]: [color=rgb(174, 129, 255)]10px[/color];
}

[color=rgb(117, 113, 94)]/*列表项*/[/color]
.listview .item {
        [color=rgb(102, 217, 239)]background[/color]: white;
        [color=rgb(102, 217, 239)]display[/color]: flex;
        [color=rgb(102, 217, 239)]flex-direction[/color]: row;
        [color=rgb(102, 217, 239)]align-items[/color]: center;
        [color=rgb(102, 217, 239)]position[/color]: relative;
        [color=rgb(102, 217, 239)]margin-left[/color]: [color=rgb(174, 129, 255)]0[/color];
        [color=rgb(102, 217, 239)]height[/color]: [color=rgb(174, 129, 255)]50px[/color];
}

[color=rgb(117, 113, 94)]/*箭头*/[/color]
.listview .item:after {
        [color=rgb(102, 217, 239)]content[/color]: [color=rgb(230, 219, 116)]" "[/color];
        [color=rgb(102, 217, 239)]height[/color]: [color=rgb(174, 129, 255)]8px[/color];
        [color=rgb(102, 217, 239)]width[/color]: [color=rgb(174, 129, 255)]8px[/color];
        [color=rgb(102, 217, 239)]border-width[/color]: [color=rgb(174, 129, 255)]2px[/color] [color=rgb(174, 129, 255)]2px[/color] [color=rgb(174, 129, 255)]0[/color] [color=rgb(174, 129, 255)]0[/color];
        [color=rgb(102, 217, 239)]border-color[/color]: [color=rgb(174, 129, 255)]#ccc[/color];
        [color=rgb(102, 217, 239)]border-style[/color]: solid;
        [color=rgb(102, 217, 239)]transform[/color]:[color=rgb(230, 219, 116)]rotate[/color](45deg);
        [color=rgb(102, 217, 239)]position[/color]: absolute;
        [color=rgb(102, 217, 239)]margin-top[/color]: -[color=rgb(174, 129, 255)]4px[/color];
        [color=rgb(102, 217, 239)]top[/color]: [color=rgb(174, 129, 255)]50%[/color];
        [color=rgb(102, 217, 239)]right[/color]: [color=rgb(174, 129, 255)]22px[/color];
}

.listview .item .hd {
        [color=rgb(102, 217, 239)]width[/color]: [color=rgb(174, 129, 255)]25px[/color];
        [color=rgb(102, 217, 239)]height[/color]: [color=rgb(174, 129, 255)]25px[/color];
        [color=rgb(102, 217, 239)]margin[/color]: [color=rgb(174, 129, 255)]5px[/color] [color=rgb(174, 129, 255)]0[/color];
        [color=rgb(102, 217, 239)]padding-left[/color]: [color=rgb(174, 129, 255)]20px[/color];
}

.listview .item .bd {
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]16px[/color];
        [color=rgb(102, 217, 239)]margin-left[/color]: [color=rgb(174, 129, 255)]10px[/color];
}
[color=rgb(117, 113, 94)]/*.通用列表*/[/color]

[color=rgb(117, 113, 94)]/*退出登录*/[/color]
.logout {
        [color=rgb(102, 217, 239)]background[/color]: white;
        [color=rgb(102, 217, 239)]padding[/color]: [color=rgb(174, 129, 255)]2px[/color] [color=rgb(174, 129, 255)]0[/color];
        [color=rgb(102, 217, 239)]margin-top[/color]: [color=rgb(174, 129, 255)]20px[/color];
        [color=rgb(102, 217, 239)]margin-bottom[/color]: [color=rgb(174, 129, 255)]20px[/color];
        [color=rgb(102, 217, 239)]color[/color]: [color=rgb(174, 129, 255)]#f23030[/color];
        [color=rgb(102, 217, 239)]text-align[/color]: center;
        [color=rgb(102, 217, 239)]font-size[/color]: [color=rgb(174, 129, 255)]18px[/color];
        [color=rgb(102, 217, 239)]line-height[/color]: [color=rgb(174, 129, 255)]220%[/color];
}


源码下载:关注公众号【黄秀杰】,回复112。


评分

参与人数 1浮云 +10 收起 理由
Rolan + 10 很给力!

查看全部评分

适合学习
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。

半夜不睡觉啊
支持下大神,小白们有福利了。
xzy619 发表于 2017-7-11 10:41
支持下大神,小白们有福利了。

感谢支持!
2017-7-12 07:00:00 赤龙优秀会员纪念 管理员
6#
吧错!

哇!大牛好
每个人的一生都会遇到一个人,她(他)打破你的原则,改变你的习惯,成为你的例外!
6666666666666666666666
66666666666666666
学习学习
真的很有用,谢谢啦!
发新帖
    您需要登录后才可以回帖 登录 | 立即注册