Skip to content

肖康 / H5_2.0

Go to a project
Commit 821b29c7 by LJM
Options

css

parent eceb8747
Inline Side-by-side
Showing with 145 additions and 129 deletions
assets/css/mine/userOrder.scss
.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;
}
}
.page-userOrder {
padding-top: 10rpx;
min-height: 100vh;
background: #f5f5f7;
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 176rpx;
.head {
padding: 0 32rpx;
height: 88rpx;
background: #ffffff;
.left {
.iconfont {
font-size: 44rpx;
color: #484b59;
color: #919399;
}
.search-box {
margin-left: 22rpx;
width: 538rpx;
height: 66rpx;
background: #f5f5f7;
border-radius: 33rpx;
.iconfont {
margin-left: 16rpx;
font-size: 34rpx;
color: #919399;
}
.info {
padding-left: 14rpx;
margin-bottom: 80rpx;
.t1 {
font-size: 32rpx;
color: #292b33;
font-weight: bold;
margin-right: 24rpx;
.uni-input {
min-width: 300rpx;
height: 66rpx;
font-size: 24rpx;
margin-left: 11rpx;
}
.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;
.filter {
font-size: 28rpx;
color: #1969f9;
}
}
.user-center {
padding: 32rpx 0 40rpx 0;
.tab {
background: #ffffff;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 88rpx;
.box {
position: relative;
grid-column-end: span 1;
image {
width: 52rpx;
height: 52rpx;
height: 100%;
transition: all 0.4s ease;
.t1 {
font-size: 28rpx;
color: #484b59;
}
.tt {
margin-top: 10rpx;
.t2 {
font-size: 28rpx;
color: #292b33;
font-weight: bold;
}
.t3 {
font-size: 24rpx;
color: #919399;
}
.tip {
&.curr {
&::after {
position: absolute;
top: 0;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #ff3700;
z-index: 99;
bottom: 0;
left: 0;
left: 50%;
margin-left: 10rpx;
right: 0;
width: 53rpx;
height: 7rpx;
margin: 0 auto;
background: #1969f9;
border-radius: 4rpx;
content: '';
}
}
}
}
.user-order {
}
.list {
padding: 0 24rpx;
margin-top: 186rpx;
.box {
padding: 0 24rpx 30rpx 24rpx;
background: #ffffff;
border-radius: 10rpx;
margin: 16rpx 0;
margin-bottom: 16rpx;
.p1 {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
......@@ -106,17 +104,23 @@
font-size: 22rpx;
color: #919399;
}
.t4 {
.color1 {
font-size: 24rpx;
color: #f98119;
font-weight: bold;
}
.color2 {
font-size: 24rpx;
color: #1969f9;
font-weight: bold;
}
}
.p2 {
padding: 15rpx 0 24rpx 0;
.t1 {
font-size: 22rpx;
color: #919399;
line-height: 40rpx;
}
.t2 {
font-size: 22rpx;
......@@ -143,13 +147,23 @@
.t1 {
font-size: 24rpx;
color: #484b59;
line-height: 40rpx;
}
.t2 {
.price {
font-size: 26rpx;
color: #f98119;
font-weight: bold;
}
.right-bar {
.btn0 {
width: 142rpx;
height: 48rpx;
background: #ffffff;
border-radius: 6rpx;
border: 1px solid #c6c7cc;
font-size: 22rpx;
color: #484b59;
}
.btn1 {
width: 142rpx;
height: 48rpx;
......@@ -172,64 +186,5 @@
}
}
}
.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;
}
}
}
}
}
pages/mine/userOrder.vue
<template>
<view class="page-userOrder">1212</view>
<view class="page-userOrder">
<view class="top">
<view class="head row bothSide verCenter">
<view class="left row verCenter">
<text class="iconfont icon-arrleft"></text>
<view class="search-box row verCenter">
<text class="iconfont icon-search"></text>
<input type="text" placeholder="请输入订单号/型号" placeholder-style="color:#F5F5F7" class="uni-input" />
</view>
</view>
<text class="filter">筛选</text>
</view>
<view class="tab row avarage verCenter">
<view class="box row rowCenter verCenter"><text class="t1">全部</text></view>
<view class="box row rowCenter verCenter curr">
<text class="t2">待付款</text>
<text class="t3">（0）</text>
</view>
<view class="box row rowCenter verCenter">
<text class="t2">待收货</text>
<text class="t3">（80）</text>
</view>
<view class="box row rowCenter verCenter">
<text class="t2">已完结订单</text>
<text class="t3">（0）</text>
</view>
</view>
</view>
<view class="list">
<view class="box" v-for="(item, index) in 100" :key="index">
<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="color2">待审核</text>
</view>
<view class="p2 row bothSide verCenter">
<view class="row verCenter">
<text class="t1">附加费：</text>
<text class="t2" style="margin-right: 24rpx;">¥3580.23</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="price">¥3580.23</text>
</view>
<view class="right-bar row"><view class="btn0 row rowCenter verCenter">取消订单</view></view>
</view>
</view>
</view>
</view>
</template>
<script>
......
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