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 { .page-userOrder {
height: 100vh; padding-top: 10rpx;
padding: 22rpx 24rpx 0 24rpx; min-height: 100vh;
background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px); background: #f5f5f7;
overflow-y: auto; .top {
.user-head { position: fixed;
justify-content: flex-end; top: 0;
.msg { left: 0;
position: relative; right: 0;
margin-right: 32rpx; width: 100%;
.num { height: 176rpx;
position: absolute; .head {
right: -26rpx; padding: 0 32rpx;
top: -12rpx; height: 88rpx;
width: 46rpx; background: #ffffff;
height: 32rpx; .left {
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
font-size: 24rpx;
color: #ffffff;
}
}
.iconfont { .iconfont {
font-size: 44rpx; 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 { .uni-input {
padding-left: 14rpx; min-width: 300rpx;
margin-bottom: 80rpx; height: 66rpx;
.t1 { font-size: 24rpx;
font-size: 32rpx; margin-left: 11rpx;
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 { .filter {
width: 100%; font-size: 28rpx;
height: 88rpx; color: #1969f9;
image {
width: 100%;
height: 88rpx;
} }
} }
.user-center { .tab {
padding: 32rpx 0 40rpx 0;
background: #ffffff; background: #ffffff;
display: grid; height: 88rpx;
grid-template-columns: repeat(3, 1fr);
.box { .box {
position: relative; position: relative;
grid-column-end: span 1; height: 100%;
image { transition: all 0.4s ease;
width: 52rpx; .t1 {
height: 52rpx; font-size: 28rpx;
color: #484b59;
} }
.tt { .t2 {
margin-top: 10rpx; font-size: 28rpx;
color: #292b33;
font-weight: bold;
}
.t3 {
font-size: 24rpx; font-size: 24rpx;
color: #919399; color: #919399;
} }
.tip { &.curr {
&::after {
position: absolute; position: absolute;
top: 0; bottom: 0;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #ff3700;
z-index: 99;
left: 0; left: 0;
left: 50%; right: 0;
margin-left: 10rpx; 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; padding: 0 24rpx 30rpx 24rpx;
background: #ffffff; background: #ffffff;
border-radius: 10rpx; border-radius: 10rpx;
margin: 16rpx 0; margin-bottom: 16rpx;
.p1 { .p1 {
height: 73rpx; height: 73rpx;
border-bottom: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2;
...@@ -106,17 +104,23 @@ ...@@ -106,17 +104,23 @@
font-size: 22rpx; font-size: 22rpx;
color: #919399; color: #919399;
} }
.t4 { .color1 {
font-size: 24rpx; font-size: 24rpx;
color: #f98119; color: #f98119;
font-weight: bold; font-weight: bold;
} }
.color2 {
font-size: 24rpx;
color: #1969f9;
font-weight: bold;
}
} }
.p2 { .p2 {
padding: 15rpx 0 24rpx 0; padding: 15rpx 0 24rpx 0;
.t1 { .t1 {
font-size: 22rpx; font-size: 22rpx;
color: #919399; color: #919399;
line-height: 40rpx;
} }
.t2 { .t2 {
font-size: 22rpx; font-size: 22rpx;
...@@ -143,13 +147,23 @@ ...@@ -143,13 +147,23 @@
.t1 { .t1 {
font-size: 24rpx; font-size: 24rpx;
color: #484b59; color: #484b59;
line-height: 40rpx;
} }
.t2 { .price {
font-size: 26rpx; font-size: 26rpx;
color: #f98119; color: #f98119;
font-weight: bold; font-weight: bold;
} }
.right-bar { .right-bar {
.btn0 {
width: 142rpx;
height: 48rpx;
background: #ffffff;
border-radius: 6rpx;
border: 1px solid #c6c7cc;
font-size: 22rpx;
color: #484b59;
}
.btn1 { .btn1 {
width: 142rpx; width: 142rpx;
height: 48rpx; height: 48rpx;
...@@ -172,64 +186,5 @@ ...@@ -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> <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> </template>
<script> <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