Skip to content

肖康 / H5_2.0

Go to a project
Commit c30010ca by LJM
Options

css

parent 5964ee37
Inline Side-by-side
Showing with 390 additions and 1 deletions
assets/css/mine/user.scss
......@@ -84,6 +84,94 @@
}
}
}
.user-order {
padding: 0 24rpx 30rpx 24rpx;
background: #ffffff;
border-radius: 10rpx;
margin: 16rpx 0;
.p1 {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
white-space: nowrap;
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 24rpx;
color: #1969f9;
margin-right: 24rpx;
}
.t3 {
font-size: 22rpx;
color: #919399;
}
.t4 {
font-size: 24rpx;
color: #f98119;
font-weight: bold;
}
}
.p2 {
padding: 15rpx 0 24rpx 0;
.t1 {
font-size: 22rpx;
color: #919399;
}
.t2 {
font-size: 22rpx;
color: #484b59;
}
.right-bar {
.bar-t1 {
font-size: 24rpx;
color: #919399;
}
.bar-t2 {
font-size: 24rpx;
color: #484b59;
font-weight: bold;
}
.iconfont {
margin-left: 8rpx;
font-size: 28rpx;
color: #484b59;
}
}
}
.p3 {
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 26rpx;
color: #f98119;
font-weight: bold;
}
.right-bar {
.btn1 {
width: 142rpx;
height: 48rpx;
background: #ffffff;
border-radius: 6rpx;
opacity: 0.54;
border: 1px solid #c6c7cc;
margin-right: 24rpx;
font-size: 22rpx;
color: #484b59;
}
.btn2 {
width: 142rpx;
height: 48rpx;
background: #f98119;
border-radius: 6rpx;
font-size: 22rpx;
color: #ffffff;
}
}
}
}
.list-tool {
margin-top: 16rpx;
margin-bottom: 25rpx;
......
assets/css/mine/userOrder.scss 0 → 100644
.page-user {
height: 100vh;
padding: 22rpx 24rpx 0 24rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
overflow-y: auto;
.user-head {
justify-content: flex-end;
.msg {
position: relative;
margin-right: 32rpx;
.num {
position: absolute;
right: -26rpx;
top: -12rpx;
width: 46rpx;
height: 32rpx;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
font-size: 24rpx;
color: #ffffff;
}
}
.iconfont {
font-size: 44rpx;
color: #484b59;
}
}
.info {
padding-left: 14rpx;
margin-bottom: 80rpx;
.t1 {
font-size: 32rpx;
color: #292b33;
font-weight: bold;
margin-right: 24rpx;
}
.t2 {
width: 76rpx;
height: 34rpx;
background: rgba(255, 255, 255, 0);
border-radius: 17rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
}
.company {
width: 100%;
height: 88rpx;
image {
width: 100%;
height: 88rpx;
}
}
.user-center {
padding: 32rpx 0 40rpx 0;
background: #ffffff;
display: grid;
grid-template-columns: repeat(3, 1fr);
.box {
position: relative;
grid-column-end: span 1;
image {
width: 52rpx;
height: 52rpx;
}
.tt {
margin-top: 10rpx;
font-size: 24rpx;
color: #919399;
}
.tip {
position: absolute;
top: 0;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #ff3700;
z-index: 99;
left: 0;
left: 50%;
margin-left: 10rpx;
}
}
}
.user-order {
padding: 0 24rpx 30rpx 24rpx;
background: #ffffff;
border-radius: 10rpx;
margin: 16rpx 0;
.p1 {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
white-space: nowrap;
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 24rpx;
color: #1969f9;
margin-right: 24rpx;
}
.t3 {
font-size: 22rpx;
color: #919399;
}
.t4 {
font-size: 24rpx;
color: #f98119;
font-weight: bold;
}
}
.p2 {
padding: 15rpx 0 24rpx 0;
.t1 {
font-size: 22rpx;
color: #919399;
}
.t2 {
font-size: 22rpx;
color: #484b59;
}
.right-bar {
.bar-t1 {
font-size: 24rpx;
color: #919399;
}
.bar-t2 {
font-size: 24rpx;
color: #484b59;
font-weight: bold;
}
.iconfont {
margin-left: 8rpx;
font-size: 28rpx;
color: #484b59;
}
}
}
.p3 {
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 26rpx;
color: #f98119;
font-weight: bold;
}
.right-bar {
.btn1 {
width: 142rpx;
height: 48rpx;
background: #ffffff;
border-radius: 6rpx;
opacity: 0.54;
border: 1px solid #c6c7cc;
margin-right: 24rpx;
font-size: 22rpx;
color: #484b59;
}
.btn2 {
width: 142rpx;
height: 48rpx;
background: #f98119;
border-radius: 6rpx;
font-size: 22rpx;
color: #ffffff;
}
}
}
}
.list-tool {
margin-top: 16rpx;
margin-bottom: 25rpx;
padding: 24rpx 0 0 24rpx;
background: #ffffff;
border-radius: 10px;
.title {
font-size: 26rpx;
color: #484b59;
font-weight: bold;
margin-bottom: 32rpx;
}
.list-tool-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
.box {
padding-bottom: 40rpx;
grid-column-end: span 1;
.iconfont {
font-size: 52rpx;
color: #484b59;
margin-bottom: 10rpx;
}
.tt {
font-size: 24rpx;
color: #919399;
}
}
}
}
.activity {
.title {
height: 80rpx;
.tt {
font-size: 24rpx;
color: #484b59;
}
.right-bar {
.bar-tt {
font-size: 24rpx;
color: #919399;
margin-right: 6px;
}
.iconfont {
font-size: 28rpx;
color: #919399;
}
}
}
.list {
.box {
width: 100%;
height: 144rpx;
image {
width: 100%;
height: 144rpx;
}
}
}
}
}
components/bottom_nav.vue
......@@ -27,7 +27,7 @@ export default {
name: 'bottom_nav',
props: {
actval: {
type: Number,
type: String,
default: 1
}
},
......
pages.json
......@@ -46,6 +46,12 @@
"style": {
"navigationBarTitleText": "会员中心"
}
},
{
"path": "pages/mine/userOrder",
"style": {
"navigationBarTitleText": "订单列表"
}
}
],
"globalStyle": {
......
pages/mine/user.vue
......@@ -28,6 +28,40 @@
<text class="tt">我的客服</text>
</view>
</view>
<view class="user-order">
<view class="p1 row bothSide verCenter">
<view class="row verCenter">
<text class="t1">订单号：</text>
<text class="t2">12022071810404SZ</text>
<text class="t3">2023.04.24 11:40</text>
</view>
<text class="t4">待付款</text>
</view>
<view class="p2 row bothSide verCenter">
<view class="row verCenter">
<text class="t1">附加费：</text>
<text class="t2" style="margin-right: 24rpx;">￥15.00</text>
<text class="t1">运费：</text>
<text class="t2">￥10.00</text>
</view>
<view class="right-bar">
<text class="bar-t1">共</text>
<text class="bar-t2">4</text>
<text class="bar-t1">件商品</text>
<text class="iconfont icon-jt"></text>
</view>
</view>
<view class="p3 row bothSide verCenter">
<view class="row verCenter">
<text class="t1">总金额：</text>
<text class="t2">￥3580.23</text>
</view>
<view class="right-bar row">
<view class="btn1 row rowCenter verCenter">下载合同</view>
<view class="btn2 row rowCenter verCenter">立即支付</view>
</view>
</view>
</view>
<view class="list-tool">
<view class="title">服务与工具</view>
<view class="list-tool-wrap">
......
pages/mine/userOrder.vue 0 → 100644
<template>
<view class="page-userOrder">1212</view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/userOrder.scss';
</style>
router/index.js
......@@ -67,6 +67,13 @@ const router = new Router({
meta: {
title: '会员中心'
}
},
{
path: '/pages/mine/userOrder',
aliasPath: '/userOrder',
meta: {
title: '订单列表'
}
}
]
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment