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

Merge branch 'feature/3.0.0-推广员' of http://gogs.1hhd.com/1hjz-3N/1hjz-h5 into feature/3.1.0-小区合伙人 

* 'feature/3.0.0-推广员' of http://gogs.1hhd.com/1hjz-3N/1hjz-h5:
  小区选择界面

# Conflicts:
#	src/view/home.vue
develop
lfs3 6 years ago
parent
8d980415cb bdc795300a
commit
95534cda57
12 changed files with 1751 additions and 3 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      src/assets/styles/common/border.scss
  2. 1093
      src/assets/styles/common/common.scss
  3. 165
      src/assets/styles/common/icon.scss
  4. 86
      src/assets/styles/common/mixin.scss
  5. 46
      src/assets/styles/common/transition.scss
  6. 19
      src/assets/styles/common/variables.scss
  7. 203
      src/assets/styles/index.scss
  8. 4
      src/components/nav-bottom.vue
  9. 1
      src/main.js
  10. 19
      src/view/choose-community.vue
  11. 1
      src/view/home.vue
  12. 2
      src/view/order-list.vue

115
src/assets/styles/common/border.scss
View File

@ -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

165
src/assets/styles/common/icon.scss
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;
}
}

86
src/assets/styles/common/mixin.scss
View File

@ -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);
}

46
src/assets/styles/common/transition.scss
View File

@ -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;
}

19
src/assets/styles/common/variables.scss
View File

@ -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;

203
src/assets/styles/index.scss
View File

@ -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;
}

4
src/components/nav-bottom.vue
View File

@ -5,11 +5,11 @@
<img v-else src="../assets/images/icon/home-s.png"> <img v-else src="../assets/images/icon/home-s.png">
<span>首页</span> <span>首页</span>
</router-link> </router-link>
<a class="service" href="/mall/web/appoint_index">
<a class="service" href="http://192.168.31.52:8080/mall/web/appoint_index">
<img src="../assets/images/icon/server.png" /> <img src="../assets/images/icon/server.png" />
<span>服务</span> <span>服务</span>
</a> </a>
<a class="user-center" href="/mall/web/owner">
<a class="user-center" href="http://192.168.31.52:8080/mall/web/owner">
<img src="../assets/images/icon/my.png" /> <img src="../assets/images/icon/my.png" />
<span>我的</span> <span>我的</span>
</a> </a>

1
src/main.js
View File

@ -15,6 +15,7 @@ import router from "./router";
import "@/assets/iconfont.css"; import "@/assets/iconfont.css";
import "@/assets/styles/main.scss"; import "@/assets/styles/main.scss";
import "@/assets/styles/style.css"; import "@/assets/styles/style.css";
import '@/assets/styles/index.scss' // global css
import "@/common/rem.js"; import "@/common/rem.js";
import ElementUI from "element-ui"; import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; import "element-ui/lib/theme-chalk/index.css";

19
src/view/choose-community.vue
View File

@ -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>

1
src/view/home.vue
View File

@ -191,6 +191,7 @@ export default {
location:{}, location:{},
uniqueId:'', uniqueId:'',
defaultCity: "天河区", //区名 默认值 不需要去掉 defaultCity: "天河区", //区名 默认值 不需要去掉
defaultCommunity:"",
merchantNo: 2, //商户编号 默认值 不需要去掉 merchantNo: 2, //商户编号 默认值 不需要去掉
districtId: "440106000", //区id 默认值 不需要去掉 districtId: "440106000", //区id 默认值 不需要去掉
addressData: [], addressData: [],

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

@ -10,7 +10,7 @@
<div class="state-item" @click="active=20" :class="{active:active==20}">退款中</div> <div class="state-item" @click="active=20" :class="{active:active==20}">退款中</div>
<div class="state-item" @click="active=21" :class="{active:active==21}">已退款</div> <div class="state-item" @click="active=21" :class="{active:active==21}">已退款</div>
</div> </div>
<order-item v-for="item in list" :id="item.orderNo" :pay="item.payPrice/100" :totalPrice="item.totalPrice/100" :name="item.goodsName" :desc="item.shortDesc" :address="item.merchantName" :status="item.status" :img="imghost+item.goodsImgUrl" :label="item.smallLabel"></order-item>
<order-item v-for="item in list" :key="item.orderNo" :id="item.orderNo" :pay="item.payPrice/100" :totalPrice="item.totalPrice/100" :name="item.goodsName" :desc="item.shortDesc" :address="item.merchantName" :status="item.status" :img="imghost+item.goodsImgUrl" :label="item.smallLabel"></order-item>
</div> </div>
</template> </template>
<script> <script>

Write Preview
Loading…
Cancel
Save