user index

This commit is contained in:
gongfuxiang 2018-10-13 02:07:46 +08:00
parent 8b86f0f4d4
commit 41165e4326
8 changed files with 117 additions and 19 deletions

View File

@ -62,7 +62,7 @@ return array(
'action' => 'Index', 'action' => 'Index',
'name' => '我的地址', 'name' => '我的地址',
'is_show' => 1, 'is_show' => 1,
'icon' => 'am-icon-map-marker', 'icon' => 'am-icon-street-view',
), ),
array( array(
'control' => 'Safety', 'control' => 'Safety',

View File

@ -36,26 +36,26 @@
<div class="items"> <div class="items">
<a href="{{:U('Home/Personal/Avatar')}}" class="am-icon-camera-retro"> 修改头像</a> <a href="{{:U('Home/Personal/Avatar')}}" class="am-icon-camera-retro"> 修改头像</a>
<a href="{{:U('Home/Personal/SaveInfo')}}" class="am-icon-edit"> 修改资料</a> <a href="{{:U('Home/Personal/SaveInfo')}}" class="am-icon-edit"> 修改资料</a>
<a href="{{:U('Home/UserAddress/Index')}}" class="am-icon-map-marker"> 我的地址</a> <a href="{{:U('Home/UserAddress/Index')}}" class="am-icon-street-view"> 我的地址</a>
</div> </div>
</div> </div>
<div class="user-base-right"> <div class="user-base-right">
<a href="{{:U('Home/Message/Index')}}" class="am-icon-bell-o message"> 消息</a> <a href="{{:U('Home/Message/Index')}}" class="am-icon-bell-o message"> 消息</a>
</div> </div>
<ul class="user-base-icon"> <ul class="user-base-icon">
<li class="icon-items"> <li>
<a href="{{:U('Home/Order/Index')}}"> <a href="{{:U('Home/Order/Index')}}">
<p>0</p> <p>0</p>
<p>订单总数</p> <p>订单总数</p>
</a> </a>
</li> </li>
<li class="icon-items"> <li>
<a href="{{:U('Home/UserFavor/Goods')}}"> <a href="{{:U('Home/UserFavor/Goods')}}">
<p>0</p> <p>0</p>
<p>商品收藏</p> <p>商品收藏</p>
</a> </a>
</li> </li>
<li class="icon-items"> <li>
<a href="{{:U('Home/History/Index')}}"> <a href="{{:U('Home/History/Index')}}">
<p>0</p> <p>0</p>
<p>我的足迹</p> <p>我的足迹</p>
@ -65,9 +65,45 @@
</div> </div>
<!-- 订单信息 --> <!-- 订单信息 -->
<div class="order-base"> <div class="order-nav">
order <a href="{{:U('Home/Order/Index')}}">
<span class="nav-name">
<i class="order-icon"></i>
我的订单
</span>
<span class="am-fr icon-tips">
查看全部订单
<i class="am-icon-angle-right"></i>
</span>
</a>
</div> </div>
<ul class="order-base">
<li>
<a href="{{:U('Home/Order/Index')}}">
<i class="icon-1"></i>
<p>待付款</p>
<span class="am-badge am-badge-danger am-round">6</span>
</a>
</li>
<li>
<a href="{{:U('Home/Order/Index')}}">
<i class="icon-2"></i>
<p>待发货</p>
</a>
</li>
<li>
<a href="{{:U('Home/Order/Index')}}">
<i class="icon-3"></i>
<p>待收货</p>
</a>
</li>
<li>
<a href="{{:U('Home/Order/Index')}}">
<i class="icon-100"></i>
<p>待付款</p>
</a>
</li>
</ul>
</div> </div>
</div> </div>
<!-- content end --> <!-- content end -->

View File

@ -1,6 +1,9 @@
/** /**
* 用户中心 * 用户中心
*/ */
.user-base, ul.order-base {
overflow: hidden;
}
.user-base { .user-base {
-webkit-animation: changeBg 20s infinite; -webkit-animation: changeBg 20s infinite;
-moz-animation: changeBg 20s infinite; -moz-animation: changeBg 20s infinite;
@ -11,16 +14,12 @@
width: 100%; width: 100%;
position: relative; position: relative;
padding: 20px 10px; padding: 20px 10px;
overflow: hidden;
} }
.user-base p, .user-base span, .user-base a { .user-base p, .user-base span, .user-base a {
color: #fff; color: #fff;
} }
.user-base a { .user-base a, .order-base a, .order-nav a {
text-decoration: none; text-decoration: none;
}
.user-base-left, .user-base-right {
} }
.user-avatar { .user-avatar {
text-align: center; text-align: center;
@ -33,7 +32,7 @@
height: 80px; height: 80px;
border-radius: 100%; border-radius: 100%;
} }
.user-avatar .user-name, .order-base { .user-avatar .user-name {
margin-top: 5px; margin-top: 5px;
} }
@ -44,12 +43,75 @@
.user-base-right a:not(:last-child) { .user-base-right a:not(:last-child) {
margin-right: 15px; margin-right: 15px;
} }
.user-base-icon { ul.user-base-icon {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
position: absolute; position: absolute;
} }
.order-nav {
padding: 10px 5px;
border-bottom: 1px solid #f1f1f1;
}
.order-nav i {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 70%;
display: inline-block;
vertical-align: bottom;
}
.order-nav .nav-name i.order-icon {
background-image: url(../images/user-index-nav-order-icon.png);
}
.order-nav .icon-tips, .order-base a {
color: #888;
}
.order-nav .icon-tips i {
padding-left: 5px;
}
ul.order-base {
margin-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
padding: 13px 0 5px 0;
}
ul.order-base li {
float: left;
width: 25%;
text-align: center;
position: relative;
}
ul.order-base li i {
width: 20px;
height: 20px;
background-repeat: no-repeat;
display: inline-block;
vertical-align: bottom;
opacity: 0.5;
background-size: cover;
margin-bottom: 2px;
}
ul.order-base i.icon-1 {
background-image: url(../Images/user-index-nav-order-icon-1.png);
}
ul.order-base i.icon-2 {
background-image: url(../Images/user-index-nav-order-icon-2.png);
}
ul.order-base i.icon-3 {
background-image: url(../Images/user-index-nav-order-icon-3.png);
}
ul.order-base i.icon-100 {
background-image: url(../Images/user-index-nav-order-icon-100.png);
}
ul.order-base li span.am-badge {
position: absolute;
top: -7px;
left: 55%;
}
/** /**
* PC * PC
*/ */
@ -67,16 +129,16 @@
display: block; display: block;
line-height: 28px; line-height: 28px;
} }
.user-base-icon { ul.user-base-icon {
bottom: 20px; bottom: 20px;
right: 10px; right: 10px;
} }
.user-base-icon li { ul.user-base-icon li {
float: left; float: left;
padding: 5px 20px; padding: 5px 20px;
text-align: center; text-align: center;
} }
.user-base-icon li p { ul.user-base-icon li p {
font-weight: 500; font-weight: 500;
} }
} }
@ -113,13 +175,13 @@
right: 10px; right: 10px;
top: 10px; top: 10px;
} }
.user-base-icon { ul.user-base-icon {
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 5px 0; padding: 5px 0;
} }
.user-base-icon li { ul.user-base-icon li {
float: left; float: left;
width: 33.33%; width: 33.33%;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 666 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 781 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 669 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 579 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 B