lfs3
6 years ago
12 changed files with 1752 additions and 4 deletions
Split View
Diff Options
-
115src/assets/styles/common/border.scss
-
1093src/assets/styles/common/common.scss
-
165src/assets/styles/common/icon.scss
-
86src/assets/styles/common/mixin.scss
-
46src/assets/styles/common/transition.scss
-
19src/assets/styles/common/variables.scss
-
203src/assets/styles/index.scss
-
4src/components/nav-bottom.vue
-
1src/main.js
-
19src/view/choose-community.vue
-
3src/view/home.vue
-
2src/view/order-list.vue
@ -0,0 +1,115 @@ |
|||
.border-1px { |
|||
position: relative; |
|||
&::before { |
|||
@include border-1px(); |
|||
} |
|||
} |
|||
|
|||
.border-1px-t { |
|||
position: relative; |
|||
&::before { |
|||
@include border-1px-top(); |
|||
} |
|||
} |
|||
|
|||
.border-1px-l { |
|||
position: relative; |
|||
&::before { |
|||
@include border-1px-left(); |
|||
} |
|||
} |
|||
|
|||
.border-1px-r { |
|||
position: relative; |
|||
&::after { |
|||
@include border-1px-right(); |
|||
} |
|||
} |
|||
|
|||
.border-1px-b { |
|||
position: relative; |
|||
&::after { |
|||
@include border-1px-bottom(); |
|||
} |
|||
} |
|||
|
|||
@media (-webkit-min-device-pixel-ratio: 2) { |
|||
.f-bb-gray { |
|||
position: relative; |
|||
&::after { |
|||
@include border-1px-bottom(#E8E8E8); |
|||
} |
|||
} |
|||
.f-bt-gray { |
|||
position: relative; |
|||
&::before { |
|||
@include border-1px-top(#E8E8E8); |
|||
} |
|||
} |
|||
.f-br-gray { |
|||
&::after { |
|||
@include border-1px-right(#E8E8E8); |
|||
} |
|||
} |
|||
.f-bl-gray { |
|||
&::before { |
|||
@include border-1px-left(#E8E8E8); |
|||
} |
|||
} |
|||
.f-bb-gray-dashed { |
|||
position: relative; |
|||
&:after { |
|||
height: 1px; |
|||
content: ''; |
|||
width: 100%; |
|||
border-bottom: 1px dashed #dcdcdc; |
|||
position: absolute; |
|||
bottom: -1px; |
|||
right: 0; |
|||
transform: scaleY(0.5); |
|||
-webkit-transform: scaleY(0.5); |
|||
} |
|||
} |
|||
.f-bb-blue { |
|||
position: relative; |
|||
&:after { |
|||
@include border-1px-bottom(#33a7e6); |
|||
} |
|||
} |
|||
.f-bt-1px { |
|||
position: relative; |
|||
&:after { |
|||
@include border-1px-bottom(#D6D6D6); |
|||
} |
|||
} |
|||
.f-border-grey { |
|||
/* content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
border: 1px solid #e8e8e8; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
width: 200%; |
|||
height: 200%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
-webkit-transform-origin: left top; |
|||
transform-origin: left top; |
|||
z-index: 0; |
|||
border-radius: 3px; */ |
|||
|
|||
position: relative; |
|||
&::before { |
|||
@include border-1px(#e8e8e8, 3px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.f-border-r4{ |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.f-border-b-E5{ |
|||
border-bottom: 1px solid #f3f3f3; |
|||
} |
|||
1093
src/assets/styles/common/common.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,165 @@ |
|||
.icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
display: inline-block; |
|||
font-size: inherit; |
|||
text-rendering: auto; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-11 { |
|||
width: 11px; |
|||
height: 11px; |
|||
} |
|||
|
|||
.icon-13 { |
|||
width: 13px; |
|||
height: 13px; |
|||
} |
|||
|
|||
.icon-14 { |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
|
|||
.icon-15 { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
|
|||
.icon-16 { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
|
|||
.icon-17 { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
|
|||
.icon-18 { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
|
|||
.icon-20 { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.icon-22 { |
|||
width: 22px; |
|||
height: 22px; |
|||
} |
|||
|
|||
.icon-25 { |
|||
width: 25px; |
|||
height: 25px; |
|||
} |
|||
|
|||
.icon-28 { |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
|
|||
.icon-30 { |
|||
width: 30px; |
|||
height: 30px; |
|||
} |
|||
|
|||
.icon-33 { |
|||
width: 33px; |
|||
height: 33px; |
|||
} |
|||
|
|||
.icon-35 { |
|||
width: 35px; |
|||
height: 35px; |
|||
} |
|||
|
|||
.icon-44 { |
|||
width: 44px; |
|||
height: 44px; |
|||
} |
|||
|
|||
.icon-65 { |
|||
width: 65px; |
|||
height: 65px; |
|||
} |
|||
|
|||
.icon-arrow { |
|||
width: 6px; |
|||
height: 11px; |
|||
} |
|||
|
|||
.icon-width-3 { |
|||
width: 3px; |
|||
} |
|||
|
|||
.icon-width-14 { |
|||
width: 14px; |
|||
} |
|||
|
|||
.icon-width-6 { |
|||
width: 6px; |
|||
} |
|||
|
|||
.icon-width-10 { |
|||
width: 10px; |
|||
} |
|||
|
|||
.icon-width-19 { |
|||
width: 19px; |
|||
} |
|||
|
|||
.arrow-back { |
|||
width: 10px; |
|||
height: 18px; |
|||
margin-top: -4px; |
|||
} |
|||
|
|||
// .icon-close { |
|||
// background: url(../assets/images/delete.png) no-repeat; |
|||
// background-size: contain; |
|||
// } |
|||
|
|||
.arrow-left { |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ' '; |
|||
display: inline-block; |
|||
height: 10px; |
|||
width: 10px; |
|||
border-width: 2px 2px 0 0; |
|||
border-color: #000; |
|||
border-style: solid; |
|||
-webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); |
|||
transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 0; |
|||
margin-top: -5px; |
|||
} |
|||
} |
|||
|
|||
.arrow-right { |
|||
position: relative; |
|||
|
|||
&:after { |
|||
content: ' '; |
|||
display: inline-block; |
|||
height: 10px; |
|||
width: 10px; |
|||
border-width: 2px 2px 0 0; |
|||
border-color: #c8c8cd; |
|||
border-style: solid; |
|||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
|||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 0px; |
|||
margin-top: -6px; |
|||
} |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ''; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin border-1px($color: #464353, $radius: 0px) { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 200%; |
|||
height: 200%; |
|||
border: 1px solid $color; |
|||
color: $color; |
|||
border-radius: $radius; |
|||
transform-origin: left top; |
|||
transform: scale(0.5); |
|||
} |
|||
|
|||
@mixin border-1px-top($color: #464353) { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-top: 1px solid $color; |
|||
color: $color; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
@mixin border-1px-bottom($color: #464353) { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid $color; |
|||
color: $color; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
@mixin border-1px-left($color: #464353) { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 1px; |
|||
bottom: 0; |
|||
border-left: 1px solid $color; |
|||
color: $color; |
|||
transform-origin: 0 0; |
|||
transform: scaleX(0.5); |
|||
} |
|||
|
|||
@mixin border-1px-right($color: #464353) { |
|||
content: ' '; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 1px; |
|||
bottom: 0; |
|||
border-right: 1px solid $color; |
|||
color: $color; |
|||
transform-origin: 100% 0; |
|||
transform: scaleX(0.5); |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
//globl transition css |
|||
|
|||
/*fade*/ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/*fade-transform*/ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/*fade*/ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
//sidebar |
|||
$menuBg: #304156; |
|||
$subMenuBg: #1f2d3d; |
|||
$menuHover: #001528; |
|||
|
|||
// public |
|||
$appWidth: 750px; |
|||
$appBg: #ededed; |
|||
|
|||
$colorWhite: #fff; |
|||
$errorColor: #f45438; |
|||
|
|||
// login |
|||
$versionColor: #aaa; |
|||
$borderBottomColor: #ccc; |
|||
$inputColor: #323232; |
|||
$placeholderColor: #c2c2c2; |
|||
$vertifyColor: #009ee0; |
|||
$loginButtonColor: #0099e0; |
|||
@ -0,0 +1,203 @@ |
|||
@import './common/icon.scss'; |
|||
@import './common/mixin.scss'; |
|||
// @import './common/transition.scss'; |
|||
@import './common/variables.scss'; |
|||
@import './common/border.scss'; |
|||
@import './common/common.scss'; |
|||
|
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
html, |
|||
body { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@media screen and (min-width: 640px) { |
|||
body body, |
|||
body html, |
|||
html body, |
|||
html html { |
|||
width: 50%; |
|||
margin: 0 auto; |
|||
left: 25%; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
min-height: 100%; |
|||
line-height: 1.6; |
|||
background-color: #ededed; |
|||
font-family: PingFang-SC-Regular, Arial, sans-serif; |
|||
font-size: 14px; |
|||
color: #323232; |
|||
} |
|||
|
|||
button { |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
outline: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
input::-webkit-input-placeholder, |
|||
textarea::-webkit-input-placeholder { |
|||
color: #cecece; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: ' '; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.vertical-middle:after { |
|||
content: ''; |
|||
width: 0; |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
#app { |
|||
width: 100%; |
|||
max-width: 750px; |
|||
height: 100%; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@media screen and (min-width: 640px) { |
|||
.footer-toolbar { |
|||
width: 50% !important; |
|||
margin: 0 auto; |
|||
left: 25% !important; |
|||
} |
|||
} |
|||
|
|||
select, |
|||
textarea, |
|||
input { |
|||
vertical-align: middle; |
|||
border: 0; |
|||
background: none; |
|||
-webkit-border-radius: 0; |
|||
border-radius: 0; |
|||
outline: none; |
|||
-webkit-appearance: none; |
|||
-webkit-tap-highlight-color: transparent; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
ul, |
|||
ul li { |
|||
list-style: none; |
|||
} |
|||
|
|||
p { |
|||
word-break: break-word; |
|||
} |
|||
.el-input { |
|||
width: auto!important; |
|||
} |
|||
.el-input--suffix .el-input__inner { |
|||
height: 28px; |
|||
line-height: 28px; |
|||
background: #EDEDED; |
|||
border: none; |
|||
border-radius: 16px; |
|||
} |
|||
.el-input__icon { |
|||
line-height: 28px; |
|||
} |
|||
.el-dropdown-menu { |
|||
padding: 5px 0!important; |
|||
} |
|||
.el-dropdown-menu__item { |
|||
border-bottom: 1px solid #E3E3E3; |
|||
text-align: center; |
|||
font-size: 14px!important; |
|||
color: #333333!important; |
|||
margin: 0 10px!important; |
|||
padding: 0 10px!important; |
|||
} |
|||
.el-dropdown-menu__item:nth-last-child(2) { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.md-example-child-steps-5 { |
|||
height: 40px!important; |
|||
} |
|||
.md-steps.md-steps-horizontal { |
|||
padding: 5px 16px 0px!important; |
|||
} |
|||
.md-steps.md-steps-horizontal .bar.horizontal-bar .bar-inner { |
|||
width: 100%; |
|||
height: 1px; |
|||
background-color: #00A0E8; |
|||
} |
|||
.md-steps .step-wrapper .text-wrapper { |
|||
padding-top: 0px!important; |
|||
|
|||
.name { |
|||
line-height: 15px!important; |
|||
font-size: 11px!important; |
|||
color: #C4C4C4!important; |
|||
} |
|||
} |
|||
.md-steps.md-steps-horizontal .step-wrapper.reached .text-wrapper .name { |
|||
color: #333333!important; |
|||
} |
|||
.md-steps.md-steps-horizontal .step-wrapper.current .text-wrapper .name { |
|||
color: #00A0E8!important; |
|||
} |
|||
.md-steps .icon-wrapper .step-node-default-icon { |
|||
width: 10px!important; |
|||
height: 10px!important; |
|||
} |
|||
.md-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon { |
|||
background: #00A0E8!important; |
|||
width: 12px!important; |
|||
height: 12px!important; |
|||
} |
|||
.md-steps .step-wrapper.current .icon-wrapper .step-node-default-icon { |
|||
background: #00A0E8!important; |
|||
width: 12px!important; |
|||
height: 12px!important; |
|||
} |
|||
.md-steps .step-wrapper, .md-steps .step-wrapper .icon-wrapper { |
|||
min-width: 16px!important; |
|||
min-height: 16px!important; |
|||
} |
|||
.md-steps.md-steps-horizontal .step-wrapper { |
|||
margin: 0 5px!important; |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<div class="container goods"> |
|||
<div class="top f-bb-gray"> |
|||
<img src="../assets/images/icon/arrow-left.png" v-on:click="goBack" />选择小区 |
|||
</div> |
|||
<!--搜索和筛选--> |
|||
<div class="f-flex f-flex-justify f-mr16 f-ml15 f-h40"> |
|||
|
|||
<el-input placeholder="请输入小区名称" type="search" v-model="form.customerName" @keyup.enter.native="searchByName" @clear="clear" clearable> |
|||
<i slot="prefix" class="el-input__icon el-icon-search"></i> |
|||
</el-input> |
|||
</div> |
|||
<div class="content"> |
|||
|
|||
</div> |
|||
<!-- Loading --> |
|||
<loading :show="showLoading" text="loading"></loading> |
|||
</div> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save