1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

样式完成

feature/feature-compatible
wangkesi 7 years ago
parent
cd5c8dc0d8
commit
59946ce0ac
5 changed files with 951 additions and 294 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      src/components/order-item.vue
  2. 10
      src/router/index.js
  3. 321
      src/view/order-check.vue
  4. 404
      src/view/order-detail.vue
  5. 327
      src/view/order-list.vue

183
src/components/order-item.vue
View File

@ -0,0 +1,183 @@
<template>
<div class="item">
<div class="item-top">
<div class="item-top-address">广州站</div>
<div class="item-top-state">已取消</div>
</div>
<div class="item-main">
<img src="">
<div class="item-main-text">
<div class="name">5A至臻家·体验卡</div>
<div class="tips">104次×4小时全屋高端保洁</div>
<div class="tag-box">
<i class="tag">新人优惠</i>
<i class="tag">新人优惠</i>
</div>
<div class="price-box">
<div class="box-left">¥18999</div>
<div class="box-right">
<div class="box-right-text">
实付：
</div>
¥18999
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {}
};
</script>
<style lang="scss" scoped>
.item {
background-color: white;
width: 100%;
color: #333;
margin-bottom: 0.2rem;
.item-top {
height: 0.65rem;
border-bottom: 0.01rem solid #e5e5e5;
box-sizing: border-box;
font-size: 0.3rem;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 0.36rem 0 0.3rem;
line-height: 1;
align-items: center;
.item-top-address {
}
.item-top-state {
color: #999;
font-size: 0.28rem;
}
}
.item-main {
display: flex;
height: 2.1rem;
width: 100%;
padding-top: 0.26rem;
box-sizing: border-box;
padding-right: 0.38rem;
padding-left: 0.29rem;
img {
width: 1.58rem;
height: 1.58rem;
margin-right: 0.16rem;
}
.item-main-text {
flex-grow: 1;
display: flex;
flex-direction: column;
padding-top: 0.03rem;
.name {
font-size: 0.3rem;
overflow: hidden;
line-height: 1.1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
margin-bottom: 0.1rem;
}
.tips {
font-size: 0.24rem;
color: #999;
overflow: hidden;
line-height: 1.1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
margin-bottom: 0.1rem;
word-break: break-all;
}
.tag-box {
font-size: 0.2rem;
display: flex;
height: 0.3rem;
overflow: hidden;
margin-bottom: 0.12rem;
.tag {
flex-shrink: 1;
height: 100%;
font-style: normal;
background: #ffe2c7;
padding: 0rem 0.1rem;
line-height: 0.28rem;
color: #ff8a1d;
border-radius: 0.15rem;
// margin-bottom: 0.1rem;
flex-shrink: 1;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-height: 0.3rem;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
}
.price-box {
width: 100%;
display: flex;
align-items: flex-end;
line-height: 1;
justify-content: space-between;
.box-left {
font-size: 0.3rem;
color: #999;
}
.box-right {
font-size: 0.34rem;
display: flex;
justify-content: flex-end;
.box-right-text {
color: #999;
}
}
}
}
}
.gift-box {
width: 100%;
border-top: 0.01rem solid #f9f9f9;
padding: 0.2rem;
display: flex;
box-sizing: border-box;
flex-direction: column;
.gift-item {
display: flex;
width: 100%;
align-items: center;
font-size: 0.24rem;
line-height: 1.2;
color: #666;
.item-text {
flex-shrink: 0;
flex-grow: 0;
}
.gift-item-main {
flex-shrink: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
}
}
}
</style>

10
src/router/index.js
View File

@ -70,6 +70,16 @@ let router = new Router({
path: "/", path: "/",
redirect: "/home" redirect: "/home"
}, },
{
path: "/order-check",
name: "orderCheck",
component: resolve => require(["@/view/order-check.vue"], resolve)
},
{
path: "/order-detail",
name: "orderCheck",
component: resolve => require(["@/view/order-detail.vue"], resolve)
},
{ {
path: "/order-list", path: "/order-list",
name: "orderList", name: "orderList",

321
src/view/order-check.vue
View File

@ -0,0 +1,321 @@
<template>
<div class="order-check-whole">
<back-header>
订单确认
</back-header>
<div class="top">
<div class="goods-container">
<img src="">
<div class="goods-main-container">
<div class="name">高端保洁铂金月卡</div>
<div class="box">
<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
<div class="box-price">¥39911111</div>
</div>
</div>
</div>
<div class="gift-container">
<div class="gift-item">
<div class="text">【赠品】</div>
<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
<div class="num">X1</div>
</div>
</div>
</div>
<div class="service-area">
<div class="title">
<img src="../assets/images/order-list/location.png">
服务区域：
</div>
<div class="area-text">
广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
</div>
</div>
<div class="coupon-container">
<div class="coupon-left">
<div class="left-box">
<img src="../assets/images/order-list/location.png">
<div class="text">
优惠券：
</div>
<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
</div>
<div class="price">-￥400</div>
</div>
<img class="icon" src="../assets/images/order-list/arrow.png">
</div>
<div class="message-container">
<div class="title">
<img src="../assets/images/order-list/location.png">
留言备注：
</div>
<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
</div>
<div class="pay-container">
<div class="text">支付方式</div>
<div class="pay">
<img src="">
微信支付
</div>
</div>
<div class="clause"></div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
export default {
data() {
return {};
},
components: {
"back-header": backHeader
},
methods: {
getData() {}
}
};
</script>
<style lang="scss" scoped>
.top {
margin-bottom: 0.18rem;
}
.goods-container {
width: 100%;
color: #333;
height: 1.6rem;
margin-top: 0.1rem;
background-color: white;
display: flex;
box-sizing: border-box;
padding: 0.16rem 0.37rem 0rem 0.22rem;
img {
width: 1.28rem;
height: 1.28rem;
margin-right: 0.33rem;
}
.goods-main-container {
flex-grow: 1;
display: flex;
flex-direction: column;
padding-top: 0.06rem;
.name {
line-height: 1.1;
font-size: 0.3rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
// margin-top: 0.1rem;
white-space: normal;
word-break: break-all;
margin-bottom: 0.15rem;
}
.box {
display: flex;
justify-content: space-between;
align-items: flex-end;
.box-text {
font-size: 0.24rem;
line-height: 1.1;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
color: #999;
height: 0.24rem;
margin-right: 0.2rem;
}
.box-price {
line-height: 1;
font-weight: 400;
font-size: 0.38rem;
color: #333;
}
}
}
}
.gift-container {
width: 100%;
box-sizing: border-box;
padding: 0.2rem;
background-color: #fff;
border-top: 0.01rem solid rgba(243, 243, 243, 1);
display: flex;
flex-direction: column;
color: #666;
font-size: 0.24rem;
.gift-item {
display: flex;
line-height: 1.2;
align-items: center;
.text {
flex-shrink: 0;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
margin-right: 0.1rem;
word-break: break-all;
}
.num {
flex-shrink: 0;
}
}
}
.service-area {
padding: 0.36rem 0.2rem;
background-color: #fff;
display: flex;
flex-direction: column;
color: #666;
margin-bottom: 0.1rem;
.title {
display: flex;
font-size: 0.3rem;
align-items: center;
line-height: 1;
margin-bottom: 0.2rem;
font-weight: normal;
img {
width: 0.32rem;
height: 0.3rem;
margin-right: 0.08rem;
}
}
.area-text {
padding-left: 0.4rem;
font-size: 0.26rem;
}
}
.coupon-container {
width: 100%;
height: 1rem;
display: flex;
align-items: center;
padding-left: 0.2rem;
font-size: 0.3rem;
line-height: 1.1;
background-color: #fff;
box-sizing: border-box;
justify-content: space-between;
margin-bottom: 0.1rem;
.coupon-left {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 0.43rem;
img {
flex-grow: 0;
width: 0.32rem;
flex-shrink: 0;
height: 0.3rem;
margin-right: 0.08rem;
}
.text {
flex-grow: 0;
flex-shrink: 0;
margin-right: 0.5rem;
}
.name {
flex-grow: 1;
// flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.28rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
// max-width: 3rem;
word-break: break-all;
}
.price {
color: #f42525;
flex-shrink: 0;
font-size: 0.34rem;
}
}
.left-box {
display: flex;
align-items: center;
flex-grow: 1;
margin-right: 0.2rem;
}
.icon {
width: 0.16rem;
margin-right: 0.37rem;
height: 0.27rem;
}
}
.message-container {
width: 100%;
background-color: #fff;
height: 2.48rem;
margin-bottom: 0.1rem;
padding: 0.36rem 0.3rem 0 0.2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
color: #666;
.title {
display: flex;
font-size: 0.3rem;
align-items: center;
line-height: 1;
margin-bottom: 0.17rem;
font-weight: normal;
img {
width: 0.32rem;
height: 0.3rem;
margin-right: 0.08rem;
}
}
textarea {
border-style: none;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
font-family: "AvantGardGothEF-Book";
padding-left: 0.4rem;
height: 1.5rem;
box-shadow: none;
outline: none;
outline-style: none;
border: none;
background-color: white;
}
}
.pay-container {
width: 100%;
height: 1rem;
box-sizing: border-box;
padding: 0 0.3rem 0 0.2rem;
background-color: white;
font-size: 0.3rem;
line-height: 1;
justify-content: space-between;
margin-bottom: 0.3rem;
display: flex;
align-items: center;
.pay{
display: flex;
}
}
.clause{
}
</style>

404
src/view/order-detail.vue
View File

@ -0,0 +1,404 @@
<template>
<div class="order-detail-whole">
<back-header style="margin-bottom:0.15rem">
订单详情
</back-header>
<div class="goods-box">
<div class="item-top">
<div class="item-top-address">广州站</div>
<div class="item-top-state">已取消</div>
</div>
<div class="item-main">
<img src="">
<div class="item-main-text">
<div class="name">5A至臻家·体验卡</div>
<div class="tips-box">
<div class="tips">
104次×4小时全屋高端保洁
</div>
<div class="price">¥399</div>
</div>
<div class="tag-box">
<i class="tag">新人优惠</i>
<i class="tag">新人优惠</i>
</div>
</div>
</div>
<div class="gift-box">
<div class="gift-item">
<div class="text">【赠品】</div>
<div class="name">高端保洁铂金月卡</div>
<div class="num">x1</div>
</div>
</div>
</div>
<div class="message">
<div class="message-title">留言备注：</div>
<div class="box" role="text">
这里是留言内容，下面的的内容是展示超出换行样式的辅导费费大幅度发
</div>
</div>
<div class="time-box">
<div class="time-item">下单时间：
<div class="time">2018-09-25 17:00:00</div>
</div>
<div class="time-item">付款时间：
<div class="time">2018-09-25 17:00:00</div>
</div>
</div>
<div class="money-box">
<div class="money-box-top">
<div class="order">
<div class="text">订单金额：</div>
<div class="num">¥399</div>
</div>
<div class="discount">
<div class="text">
<div class="string">
优惠减免：
</div>
<span class="discount-name">(新人专享优惠券)</span>
</div>
<div class="num">¥20</div>
</div>
</div>
<div class="money-box-bottom">
<div class="button-box" role="button">
取消订单
</div>
<!-- <div class="button-box" role="button">
申请退款
</div> -->
<div class="money">
实际支付：
<div class="money-count">¥379</div>
</div>
</div>
</div>
<div class="fill"></div>
<div class="button" role="button">
{{buttonText}}
</div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
export default {
data() {
return {
state: "",
buttonText: "重新下单"
};
},
watch: {
state(val) {}
},
components: {
"back-header": backHeader
}
};
</script>
<style lang="scss" scoped>
.order-detail-whole {
// min-height: 100vh;
}
.goods-box {
background-color: white;
width: 100%;
color: #333;
margin-bottom: 0.2rem;
// height: 2.25rem;
width: 100%;
.item-top {
height: 0.65rem;
border-bottom: 0.01rem solid #e5e5e5;
box-sizing: border-box;
font-size: 0.3rem;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 0.36rem 0 0.3rem;
line-height: 1;
align-items: center;
.item-top-address {
}
.item-top-state {
color: #999;
font-size: 0.28rem;
}
}
.item-main {
display: flex;
height: 1.6rem;
width: 100%;
padding-top: 0.16rem;
box-sizing: border-box;
padding-right: 0.38rem;
padding-left: 0.22rem;
img {
width: 1.28rem;
height: 1.28rem;
margin-right: 0.16rem;
}
.item-main-text {
flex-grow: 1;
display: flex;
flex-direction: column;
padding-top: 0.03rem;
.name {
font-size: 0.3rem;
overflow: hidden;
line-height: 1.1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
margin-bottom: 0.05rem;
}
.tips-box {
display: flex;
margin-bottom: 0.14rem;
align-items: flex-end;
justify-content: space-between;
.tips {
flex-shrink: 1;
font-size: 0.24rem;
color: #999;
overflow: hidden;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
.price {
flex-shrink: 0;
font-size: 0.38rem;
color: #333;
line-height: 1;
}
}
.tag-box {
font-size: 0.2rem;
display: flex;
height: 0.3rem;
overflow: hidden;
margin-bottom: 0.12rem;
.tag {
flex-shrink: 1;
height: 100%;
font-style: normal;
background: #ffe2c7;
padding: 0rem 0.1rem;
line-height: 0.28rem;
color: #ff8a1d;
border-radius: 0.15rem;
// margin-bottom: 0.1rem;
flex-shrink: 1;
overflow: hidden;
display: -webkit-box;
margin-right: 0.1rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-height: 0.3rem;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
}
}
}
.gift-box {
width: 100%;
box-sizing: border-box;
padding: 0.2rem;
border-top: 0.01rem solid #f9f9f9;
.gift-item {
display: flex;
margin-bottom: 0.18rem;
font-size: 0.24rem;
align-items: center;
color: #666;
line-height: 1.1;
.text {
flex-shrink: 0;
}
.name {
flex-shrink: 1;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
.num {
flex-shrink: 1;
}
}
}
}
.message {
width: 100%;
height: 2.5rem;
background-color: white;
box-sizing: border-box;
padding: 0.3rem 0.2rem;
margin-bottom: 0.2rem;
.message-title {
font-size: 0.28rem;
color: #999;
line-height: 1;
margin-bottom: 0.12rem;
}
.box {
width: 100%;
height: 1.47rem;
font-size: 0.28rem;
font-family: PingFangSC-Regular;
color: rgba(51, 51, 51, 1);
background: rgba(247, 247, 247, 1);
padding: 0.13rem 0.1rem;
box-sizing: border-box;
line-height: 0.36rem;
overflow-y: scroll;
}
}
.time-box {
width: 100%;
height: 1.5rem;
padding: 0.4rem 0.2rem;
background-color: #fff;
box-sizing: border-box;
margin-bottom: 0.2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.time-item {
display: flex;
font-size: 0.28rem;
align-items: center;
line-height: 1;
color: #666;
.time {
font-size: 0.3rem;
color: #333;
}
}
}
.money-box {
width: 100%;
box-sizing: border-box;
padding: 0.33rem 0.22rem;
background-color: white;
margin-bottom: 0.43rem;
.money-box-top {
border-bottom: 0.01rem solid #dcdcdc;
margin-bottom: 0.23rem;
width: 100%;
.order {
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
margin-bottom: 0.3rem;
.text {
font-size: 0.28rem;
color: #666;
}
.num {
color: #333;
font-size: 0.32rem;
}
}
.discount {
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
margin-bottom: 0.2rem;
.text {
flex-shrink: 1;
display: flex;
font-size: 0.28rem;
color: #666;
.string {
flex-shrink: 0;
}
.discount-name {
flex-shrink: 1;
color: #333;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
font-size: 0.26rem;
}
}
.num {
color: #333;
font-size: 0.32rem;
flex-shrink: 0;
}
}
}
.money-box-bottom {
display: flex;
width: 100%;
line-height: 1;
justify-content: space-between;
.button-box {
width: 1.4rem;
height: 0.44rem;
color: #666;
font-size: 0.26rem;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
border: 0.01rem solid rgba(220, 220, 220, 1);
border-radius:4px;
}
.button {
}
.money {
display: flex;
color: #666;
font-size: 0.26rem;
align-items: center;
.money-count {
color: #333;
font-size: 0.32rem;
}
}
}
}
.fill {
width: 100%;
height: 1rem;
background-color: rgba(247, 247, 247, 0);
}
.button {
width: 100%;
position: fixed;
height: 1rem;
bottom: 0;
background-color: #fff;
text-align: center;
line-height: 1rem;
color: #00ba85;
font-size: 0.36rem;
}
.green {
background: #00ba86;
color: #fff;
}
</style>

327
src/view/order-list.vue
View File

@ -1,321 +1,60 @@
<template> <template>
<div class="order-list-whole"> <div class="order-list-whole">
<back-header> <back-header>
订单确认
我的订单
</back-header> </back-header>
<div class="top">
<div class="goods-container">
<img src="">
<div class="goods-main-container">
<div class="name">高端保洁铂金月卡</div>
<div class="box">
<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
<div class="box-price">¥39911111</div>
</div>
</div>
</div>
<div class="gift-container">
<div class="gift-item">
<div class="text">【赠品】</div>
<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
<div class="num">X1</div>
</div>
</div>
<div class="state-bar">
<div class="state-item" @click="active=''" :class="{active:!active}">全部</div>
<div class="state-item" @click="active=1" :class="{active:active==1}">待支付</div>
<div class="state-item" @click="active=2" :class="{active:active==2}">已支付</div>
<div class="state-item" @click="active=3" :class="{active:active==3}">退款中</div>
<div class="state-item" @click="active=4" :class="{active:active==4}">已退款</div>
</div> </div>
<div class="service-area">
<div class="title">
<img src="../assets/images/order-list/location.png">
服务区域：
</div>
<div class="area-text">
广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
</div>
</div>
<div class="coupon-container">
<div class="coupon-left">
<div class="left-box">
<img src="../assets/images/order-list/location.png">
<div class="text">
优惠券：
</div>
<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
</div>
<div class="price">-￥400</div>
</div>
<img class="icon" src="../assets/images/order-list/arrow.png">
</div>
<div class="message-container">
<div class="title">
<img src="../assets/images/order-list/location.png">
留言备注：
</div>
<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
</div>
<div class="pay-container">
<div class="text">支付方式</div>
<div class="pay">
<img src="">
微信支付
</div>
</div>
<div class="clause"></div>
<order-item></order-item>
</div> </div>
</template> </template>
<script> <script>
import orderItem from "../components/order-item.vue";
import backHeader from "../components/back-header.vue"; import backHeader from "../components/back-header.vue";
export default { export default {
data() { data() {
return {};
return {
active: ""
};
}, },
components: { components: {
"back-header": backHeader
},
methods: {
getData() {}
"back-header": backHeader,
"order-item": orderItem
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top {
margin-bottom: 0.18rem;
.order-list-whole {
} }
.goods-container {
.state-bar {
width: 100%; width: 100%;
color: #333;
height: 1.6rem;
margin-top: 0.1rem;
height: 0.8rem;
// box-sizing: border-box;
border-top: 0.01rem solid rgba(238, 238, 238, 1);
background-color: white; background-color: white;
display: flex; display: flex;
box-sizing: border-box;
padding: 0.16rem 0.37rem 0rem 0.22rem;
img {
width: 1.28rem;
height: 1.28rem;
margin-right: 0.33rem;
}
.goods-main-container {
flex-grow: 1;
display: flex;
flex-direction: column;
padding-top: 0.06rem;
.name {
line-height: 1.1;
font-size: 0.3rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
// margin-top: 0.1rem;
white-space: normal;
word-break: break-all;
margin-bottom: 0.15rem;
}
.box {
display: flex;
justify-content: space-between;
align-items: flex-end;
.box-text {
font-size: 0.24rem;
line-height: 1.1;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
color: #999;
height: 0.24rem;
margin-right: 0.2rem;
}
.box-price {
line-height: 1;
font-weight: 400;
font-size: 0.38rem;
color: #333;
}
}
}
}
.gift-container {
width: 100%;
box-sizing: border-box;
padding: 0.2rem;
background-color: #fff;
border-top: 0.01rem solid rgba(243, 243, 243, 1);
display: flex;
flex-direction: column;
color: #666;
font-size: 0.24rem;
.gift-item {
display: flex;
line-height: 1.2;
align-items: center;
.text {
flex-shrink: 0;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
margin-right: 0.1rem;
word-break: break-all;
}
.num {
flex-shrink: 0;
}
}
}
.service-area {
padding: 0.36rem 0.2rem;
background-color: #fff;
display: flex;
flex-direction: column;
color: #666;
margin-bottom: 0.1rem;
.title {
display: flex;
font-size: 0.3rem;
align-items: center;
line-height: 1;
margin-bottom: 0.2rem;
font-weight: normal;
img {
width: 0.32rem;
height: 0.3rem;
margin-right: 0.08rem;
}
}
.area-text {
padding-left: 0.4rem;
font-size: 0.26rem;
}
}
.coupon-container {
width: 100%;
height: 1rem;
display: flex;
align-items: center; align-items: center;
padding-left: 0.2rem;
font-size: 0.3rem;
line-height: 1.1;
background-color: #fff;
padding: 0rem 0.46rem 0 0.46rem;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.1rem;
.coupon-left {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 0.43rem;
img {
flex-grow: 0;
width: 0.32rem;
flex-shrink: 0;
height: 0.3rem;
margin-right: 0.08rem;
}
.text {
flex-grow: 0;
flex-shrink: 0;
margin-right: 0.5rem;
}
.name {
flex-grow: 1;
// flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.28rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
// max-width: 3rem;
word-break: break-all;
}
.price {
color: #f42525;
flex-shrink: 0;
font-size: 0.34rem;
}
}
.left-box {
display: flex;
align-items: center;
flex-grow: 1;
margin-right: 0.2rem;
}
.icon {
width: 0.16rem;
margin-right: 0.37rem;
height: 0.27rem;
margin-bottom: 0.2rem;
.state-item {
line-height: 0.8rem;
font-size: 0.32rem;
font-family: PingFang-SC-Medium;
height: 100%;
font-weight: 500;
padding: 0 0.07rem;
}
.active {
padding-top: 0.03rem;
border-bottom: 0.03rem solid #00ba86;
color: rgba(0, 186, 134, 1);
} }
}
.message-container {
width: 100%;
background-color: #fff;
height: 2.48rem;
margin-bottom: 0.1rem;
padding: 0.36rem 0.3rem 0 0.2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
color: #666;
.title {
display: flex;
font-size: 0.3rem;
align-items: center;
line-height: 1;
margin-bottom: 0.17rem;
font-weight: normal;
img {
width: 0.32rem;
height: 0.3rem;
margin-right: 0.08rem;
}
}
textarea {
border-style: none;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
font-family: "AvantGardGothEF-Book";
padding-left: 0.4rem;
height: 1.5rem;
box-shadow: none;
outline: none;
outline-style: none;
border: none;
background-color: white;
}
}
.pay-container {
width: 100%;
height: 1rem;
box-sizing: border-box;
padding: 0 0.3rem 0 0.2rem;
background-color: white;
font-size: 0.3rem;
line-height: 1;
justify-content: space-between;
margin-bottom: 0.3rem;
display: flex;
align-items: center;
.pay{
display: flex;
}
}
.clause{
} }
</style> </style>
Write Preview
Loading…
Cancel
Save