BJ_web_developers / wxgzh

Commit cf4544fabe03a15262f85526db644cc90fd49fc1

Authored by 刘淇
1 parent 19a4329d

周边服务

Inline Side-by-side
Showing 10 changed files with 189 additions and 51 deletions
src/assets/images/service/service.jpg 0 → 100644
View file @cf4544f

23.2 KB
src/assets/images/service/service1.jpeg 0 → 100644
View file @cf4544f

157 KB
src/assets/images/service/service2.jpeg 0 → 100644
View file @cf4544f

81.8 KB
src/assets/images/service/service3.jpeg 0 → 100644
View file @cf4544f

100 KB
src/assets/images/service/serviceIphone.png 0 → 100644
View file @cf4544f

684 Bytes
src/assets/images/service/serviceNav.png 0 → 100644
View file @cf4544f

324 Bytes
src/assets/images/service/serviceSrar.png 0 → 100644
View file @cf4544f

421 Bytes
src/main.js
  View file @cf4544f
@@ -71,9 +71,11 @@ import { @@ -71,9 +71,11 @@ import {
71 Loading, 71 Loading,
72 XDialog, 72 XDialog,
73 Flexbox, 73 Flexbox,
74 - FlexboxItem 74 + FlexboxItem,
  75 + PopupPicker
75 }from 'vux' 76 }from 'vux'
76 77
  78 +Vue.component('popup-picker', PopupPicker)
77 Vue.component('flexbox', Flexbox) 79 Vue.component('flexbox', Flexbox)
78 Vue.component('flexbox-item', FlexboxItem) 80 Vue.component('flexbox-item', FlexboxItem)
79 Vue.component('x-dialog', XDialog) 81 Vue.component('x-dialog', XDialog)
src/views/service/service.vue
  View file @cf4544f
1 <template> 1 <template>
2 - <div>  
3 - <div style="height: 300px">  
4 - <mt-swipe :auto="4000">  
5 - <mt-swipe-item style="background-color: #f00">1</mt-swipe-item>  
6 - <mt-swipe-item style="background-color: #ff0">2</mt-swipe-item>  
7 - <mt-swipe-item style="background-color: #f0f">3</mt-swipe-item>  
8 - </mt-swipe>  
9 - </div>  
10 -  
11 - <flexbox :gutter="0">  
12 - <flexbox-item class="nav-warp">  
13 - <div>  
14 - <img src="../../assets/images/service/carservice.png" height="32" width="32"/>  
15 - </div>  
16 - <p>汽车服务</p>  
17 - </flexbox-item>  
18 -  
19 - <flexbox-item class="nav-warp">  
20 - <div>  
21 - <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>  
22 - </div>  
23 - <p>保险服务</p>  
24 - </flexbox-item>  
25 -  
26 - <flexbox-item class="nav-warp">  
27 - <div>  
28 - <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>  
29 - </div>  
30 - <p>出行服务</p>  
31 - </flexbox-item>  
32 -  
33 - </flexbox>  
34 - 2 + <div>
  3 + <div style="height: 200px">
  4 + <mt-swipe :auto="4000">
  5 + <mt-swipe-item class="service1"></mt-swipe-item>
  6 + <mt-swipe-item class="service2"></mt-swipe-item>
  7 + <mt-swipe-item class="service3"></mt-swipe-item>
  8 + </mt-swipe>
35 </div> 9 </div>
  10 +
  11 + <flexbox :gutter="0">
  12 + <flexbox-item class="nav-warp">
  13 + <div @click="$router.push({path:'serviceDetail'})">
  14 + <img src="../../assets/images/service/carservice.png" height="32" width="32"/>
  15 + </div>
  16 + <p>汽车服务</p>
  17 + </flexbox-item>
  18 +
  19 + <flexbox-item class="nav-warp">
  20 + <div>
  21 + <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
  22 + </div>
  23 + <p>保险服务</p>
  24 + </flexbox-item>
  25 +
  26 + <flexbox-item class="nav-warp">
  27 + <div>
  28 + <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>
  29 + </div>
  30 + <p>出行服务</p>
  31 + </flexbox-item>
  32 +
  33 + </flexbox>
  34 +
  35 + </div>
36 </template> 36 </template>
37 37
38 <script> 38 <script>
@@ -42,12 +42,27 @@ export default { @@ -42,12 +42,27 @@ export default {
42 </script> 42 </script>
43 43
44 <style scoped lang="scss"> 44 <style scoped lang="scss">
45 -.nav-warp{  
46 - padding-top: 20px;  
47 - text-align: center;  
48 - font-size: 16px;  
49 - img{  
50 - display: inline-block; 45 + .nav-warp {
  46 + padding-top: 20px;
  47 + text-align: center;
  48 + font-size: 16px;
  49 + img {
  50 + display: inline-block;
  51 + }
  52 + }
  53 +
  54 + .service1 {
  55 + background: url("../../assets/images/service/service1.jpeg") no-repeat;
  56 + background-size: 100% 100%;
  57 + }
  58 +
  59 + .service2 {
  60 + background: url("../../assets/images/service/service2.jpeg") no-repeat;
  61 + background-size: 100% 100%;
  62 + }
  63 +
  64 + .service3 {
  65 + background: url("../../assets/images/service/service3.jpeg") no-repeat;
  66 + background-size: 100% 100%;
51 } 67 }
52 -}  
53 </style> 68 </style>
src/views/service/serviceDetail.vue
  View file @cf4544f
1 <template> 1 <template>
2 - <div>  
3 - <ul class="serviceDetailWrap">  
4 - <li>1</li>  
5 - </ul> 2 + <div>
  3 + <div style="height: 44px;">
  4 + <mt-search
  5 + v-model="value"
  6 + cancel-text="取消"
  7 + placeholder="搜索">
  8 + </mt-search>
6 </div> 9 </div>
  10 +
  11 + <group title="" label-width="5em">
  12 + <popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
  13 + <popup-picker :title="title2" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
  14 + </group>
  15 + <ul class="serviceDetailWrap">
  16 + <li>
  17 + <div class="serviceDetailTop">
  18 + <p>
  19 + <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
  20 + </p>
  21 + <p>
  22 + <span style="color: #ff4949">营业时间：早8店晚21点</span>
  23 + </p>
  24 + <p>
  25 + <span>店长：梁浩</span>
  26 + </p>
  27 + <p>
  28 + <span>联系电话：13333333333</span>
  29 + </p>
  30 + </div>
  31 + <p style="display: flex;justify-content: space-between;">
  32 + <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
  33 + <span>
  34 + <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
  35 + </span>
  36 + </p>
  37 + <p style="display: flex;justify-content: space-between;padding-top: 5px;">
  38 + <span class="serviceStar">八公里内道路援助</span>
  39 + <span>
  40 + <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
  41 + </span>
  42 + </p>
  43 + </li>
  44 +
  45 + <li>
  46 + <div class="serviceDetailTop">
  47 + <p>
  48 + <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
  49 + </p>
  50 + <p>
  51 + <span style="color: #ff4949">营业时间：早8店晚21点</span>
  52 + </p>
  53 + <p>
  54 + <span>店长：梁浩</span>
  55 + </p>
  56 + <p>
  57 + <span>联系电话：13333333333</span>
  58 + </p>
  59 + </div>
  60 + <p style="display: flex;justify-content: space-between;">
  61 + <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
  62 + <span>
  63 + <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
  64 + </span>
  65 + </p>
  66 + <p style="display: flex;justify-content: space-between;padding-top: 5px;">
  67 + <span class="serviceStar">八公里内道路援助</span>
  68 + <span>
  69 + <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
  70 + </span>
  71 + </p>
  72 + </li>
  73 +
  74 + </ul>
  75 + </div>
7 </template> 76 </template>
8 77
9 <script> 78 <script>
10 export default { 79 export default {
11 - name: "serviceDetail"  
12 -};  
13 -</script> 80 + name: "serviceDetail",
  81 + data () {
  82 + return {
  83 + value:'',
  84 + title1: '全部服务',
  85 + value1: ['全部'],
  86 + list1: [['全部', '汽车', '美容']],
  87 + title2: '附近',
  88 + value2: ['3KM'],
  89 + list2: [['3KM', '10KM', '20KM']],
  90 + }
  91 + },
  92 + methods: {
  93 + onChange (val) {
  94 + console.log('val change', val)
  95 + },
  96 + changeList10 () {
  97 + this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
  98 + },
  99 + changeList11 () {
  100 + this.list1[0].push('我是push条目')
  101 + },
  102 + changeList20 () {
  103 +
  104 + },
14 105
15 -<style scoped>  
16 -.serviceDetailWrap{  
17 - padding: 10px 10px; 106 + onShow () {
  107 + console.log('on show')
  108 + },
  109 + onHide (type) {
  110 + console.log('on hide', type)
  111 + }
  112 + },
18 } 113 }
  114 +</script>
  115 +
  116 +<style scoped lang="scss">
  117 + .serviceDetailWrap {
  118 + padding: 10px 10px;
  119 + > li {
  120 + height: 140px;
  121 + margin-bottom: 10px;
  122 + border-bottom: 1px solid #eee;
  123 + /*display: flex;*/
  124 + }
  125 + }
  126 +
  127 + .serviceDetailTop {
  128 + padding-left: 130px;
  129 + background-image: url("../../assets/images/service/service.jpg");
  130 + background-repeat: no-repeat;
  131 + background-size: 120px 100px;
  132 + margin-bottom: 5px;
  133 + }
  134 +
  135 + .serviceStar{
  136 + padding-left: 20px;
  137 + background: url("../../assets/images/service/serviceSrar.png") no-repeat 0 center;
  138 + color: #ff4949;
  139 + }
19 </style> 140 </style>