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

增加了样式

feature/feature-compatible
wangkesi 7 years ago
parent
b3159a1e4f
commit
cd5c8dc0d8
6 changed files with 380 additions and 15 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/App.vue
  2. BIN
      src/assets/images/order-list/arrow.png
  3. BIN
      src/assets/images/order-list/location.png
  4. 39
      src/components/back-header.vue
  5. 5
      src/router/index.js
  6. 321
      src/view/order-list.vue

30
src/App.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<div id="app">
<router-view></router-view>
</div>
<div id="app">
<router-view></router-view>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'app'
}
name: "app"
};
</script> </script>
<style> <style>
body{
padding:0px;
margin:0px auto;
body {
padding: 0px;
margin: 0px auto;
} }
a{
text-decoration:none;
a {
text-decoration: none;
} }
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
font-family: PingFangSC-Light, helvetica, "Heiti SC";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
} }
</style> </style>

BIN
src/assets/images/order-list/arrow.png
View File

Before After
Width: 74  |  Height: 128  |  Size: 1.0 KiB

BIN
src/assets/images/order-list/location.png
View File

Before After
Width: 48  |  Height: 45  |  Size: 2.4 KiB

39
src/components/back-header.vue
View File

@ -0,0 +1,39 @@
<template>
<div class="header">
<img src="../assets/images/icon/arrow-left.png" />
<div class="title">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
path: {
type: String,
default: ""
}
}
};
</script>
<style lang="scss" scoped>
.header {
width: 100%;
height: 0.9rem;
position: relative;
background: rgba(255, 255, 255, 1);
img {
position: absolute;
left: 0.4rem;
top: 50%;
transform: translateY(-50%);
}
.title {
text-align: center;
font-size: 0.36rem;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 0.9rem;
}
}
</style>

5
src/router/index.js
View File

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

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

@ -0,0 +1,321 @@
<template>
<div class="order-list-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>
Write Preview
Loading…
Cancel
Save