wip
This commit is contained in:
parent
76a4713960
commit
6f27f76f80
|
|
@ -118,6 +118,86 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.account-sides-info .head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.account-sides-info .head .portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
|
||||
border: 2px solid #FFFFFF;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.account-sides-info .head .account-name {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.account-sides-info .head .account-email {
|
||||
color: #666666;
|
||||
}
|
||||
.account-sides-info .account-links > a {
|
||||
color: #4B566B;
|
||||
border: none;
|
||||
padding: 0.8rem 1rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.account-sides-info .account-links > a:hover {
|
||||
background-color: #E9ECEF;
|
||||
}
|
||||
.account-sides-info .account-links > a.active {
|
||||
background-color: #E9ECEF;
|
||||
color: #4B566B;
|
||||
}
|
||||
.account-sides-info .account-links > a .badge {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.account-card {
|
||||
border: none;
|
||||
}
|
||||
.account-card .card-header {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.account-card .card-header h6 {
|
||||
border-left: 3px solid #fd560f;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.account-card .card-items > a {
|
||||
width: 25%;
|
||||
color: #444444;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.account-card .card-items > a i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.account-card .card-items > a span {
|
||||
display: flex;
|
||||
}
|
||||
.account-card .order-wrap {
|
||||
background-color: #f6f8f9;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.account-card .order-wrap .icon i {
|
||||
font-size: 4.5rem;
|
||||
color: #777;
|
||||
}
|
||||
.account-card .order-wrap .text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -294,85 +374,6 @@ body.page-login .card {
|
|||
body.page-account {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
body.page-account .account-info .head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
body.page-account .account-info .head .portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
|
||||
border: 2px solid #FFFFFF;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
body.page-account .account-info .head .account-name {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
body.page-account .account-info .head .account-email {
|
||||
color: #666666;
|
||||
}
|
||||
body.page-account .account-info .account-links > a {
|
||||
color: #4B566B;
|
||||
border: none;
|
||||
padding: 0.8rem 1rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
body.page-account .account-info .account-links > a:hover {
|
||||
background-color: #E9ECEF;
|
||||
}
|
||||
body.page-account .account-info .account-links > a.active {
|
||||
background-color: #E9ECEF;
|
||||
color: #4B566B;
|
||||
}
|
||||
body.page-account .account-info .account-links > a .badge {
|
||||
color: #fff;
|
||||
}
|
||||
body.page-account .account-card {
|
||||
border: none;
|
||||
}
|
||||
body.page-account .account-card .card-header {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
body.page-account .account-card .card-header h6 {
|
||||
border-left: 3px solid #fd560f;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
body.page-account .account-card .card-items > a {
|
||||
width: 25%;
|
||||
color: #444444;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
body.page-account .account-card .card-items > a i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
body.page-account .account-card .card-items > a span {
|
||||
display: flex;
|
||||
}
|
||||
body.page-account .account-card .order-wrap {
|
||||
background-color: #f6f8f9;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
body.page-account .account-card .order-wrap .icon i {
|
||||
font-size: 4.5rem;
|
||||
color: #777;
|
||||
}
|
||||
body.page-account .account-card .order-wrap .text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body.page-product .product-image .left {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -710,3 +711,7 @@ body.page-order-success .order-wrap .card-body .order-bottom {
|
|||
margin-left: calc(2rem + 80px);
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
body.page-account-order-list {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,10 +83,6 @@
|
|||
<el-input class="mb-0" type="number" v-model="dialog.form.use_point_factor" placeholder="使用积分系数"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="dialog.form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addCustomersFormSubmit('form')">保存</el-button>
|
||||
<el-button @click="closeCustomersDialog('form')">取消</el-button>
|
||||
|
|
@ -121,7 +117,6 @@
|
|||
discount_factor: '', // 折扣率
|
||||
reward_point_factor: '', // 奖励积分系数使用积分系数
|
||||
use_point_factor: '', // 使用积分系数
|
||||
status: 1,
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -150,6 +145,7 @@
|
|||
name: {},
|
||||
description: {},
|
||||
total: group.total, //消费额度
|
||||
level: group.level, //消费额度
|
||||
discount_factor: group.discount_factor, // 折扣率
|
||||
reward_point_factor: group.reward_point_factor, // 奖励积分系数使用积分系数
|
||||
use_point_factor: group.use_point_factor, // 使用积分系数
|
||||
|
|
|
|||
|
|
@ -6,105 +6,4 @@ body.page-account {
|
|||
footer {
|
||||
// background-color: #fff;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
background-color: #fff;
|
||||
|
||||
.portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
|
||||
border: 2px solid #FFFFFF;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.account-links {
|
||||
> a {
|
||||
color: #4B566B;
|
||||
border: none;
|
||||
padding: 0.8rem 1rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
transition: all .2s ease-in-out;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #E9ECEF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #E9ECEF;
|
||||
color: #4B566B;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-card {
|
||||
border: none;
|
||||
|
||||
.card-header {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
padding-top: 1rem;
|
||||
|
||||
h6 {
|
||||
border-left: 3px solid $primary;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-items {
|
||||
> a {
|
||||
width: 25%;
|
||||
color: #444444;
|
||||
text-decoration: none !important;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-wrap {
|
||||
background-color: #f6f8f9;
|
||||
padding: 2rem 1rem;
|
||||
.icon {
|
||||
i {
|
||||
font-size: 4.5rem;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,3 +18,4 @@ $primary: #fd560f;
|
|||
@import './page-checkout';
|
||||
@import './element-ui';
|
||||
@import './order-success';
|
||||
@import './page-account-order-list';
|
||||
|
|
|
|||
|
|
@ -116,4 +116,105 @@
|
|||
.fixed-top-line-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.account-sides-info {
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
background-color: #fff;
|
||||
|
||||
.portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
|
||||
border: 2px solid #FFFFFF;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.account-links {
|
||||
> a {
|
||||
color: #4B566B;
|
||||
border: none;
|
||||
padding: 0.8rem 1rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
transition: all .2s ease-in-out;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #E9ECEF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #E9ECEF;
|
||||
color: #4B566B;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-card {
|
||||
border: none;
|
||||
|
||||
.card-header {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
padding-top: 1rem;
|
||||
|
||||
h6 {
|
||||
border-left: 3px solid $primary;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-items {
|
||||
> a {
|
||||
width: 25%;
|
||||
color: #444444;
|
||||
text-decoration: none !important;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-wrap {
|
||||
background-color: #f6f8f9;
|
||||
padding: 2rem 1rem;
|
||||
.icon {
|
||||
i {
|
||||
font-size: 4.5rem;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
body.page-account-order-list {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="account-info">
|
||||
<div class="account-sides-info">
|
||||
<div class="head">
|
||||
<div class="portrait"><img src="{{ $avatar }}" class="img-fluid"></div>
|
||||
<div class="account-name">{{ $name }}</div>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<nav class="list-group account-links">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
|
||||
<span>个人中心</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
|
||||
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,57 @@
|
|||
@extends('layout.master')
|
||||
|
||||
@section('body-class', 'page-account-order-list')
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<h1>我的订单</h1>
|
||||
@foreach ($orders as $order)
|
||||
<div class="col-6 col-md-3">{{ $order->number }}</div>
|
||||
@endforeach
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{{-- @foreach ($orders as $order)
|
||||
<div class="col-6 col-md-3">{{ $order->number }}</div>
|
||||
@endforeach --}}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="account-sides-info">
|
||||
<div class="head">
|
||||
<div class="portrait"><img src="" class="img-fluid"></div>
|
||||
<div class="account-name"></div>
|
||||
<div class="account-email"></div>
|
||||
</div>
|
||||
<nav class="list-group account-links">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
|
||||
<span>个人中心</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
|
||||
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
|
||||
<span>退出登录</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="card mb-4 account-card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0">我的订单</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
<li class="dropdown-item"><h6 class="mb-0">Pu Shuo</h6></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-person me-1"></i> 个人中心</a></li>
|
||||
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-clipboard-check me-1"></i> 我的订单</a></li>
|
||||
<li><a href="{{ shop_route('account.order.index') }}" class="dropdown-item"><i class="bi bi-clipboard-check me-1"></i> 我的订单</a></li>
|
||||
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-heart me-1"></i> 我的收藏</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a href="{{ shop_route('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-left me-1"></i> 退出登录</a></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue