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 71 Loading,
72 72 XDialog,
73 73 Flexbox,
74   - FlexboxItem
  74 + FlexboxItem,
  75 + PopupPicker
75 76 }from 'vux'
76 77  
  78 +Vue.component('popup-picker', PopupPicker)
77 79 Vue.component('flexbox', Flexbox)
78 80 Vue.component('flexbox-item', FlexboxItem)
79 81 Vue.component('x-dialog', XDialog)
... ...
src/views/service/service.vue
  View file @cf4544f
1 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 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 36 </template>
37 37  
38 38 <script>
... ... @@ -42,12 +42,27 @@ export default {
42 42 </script>
43 43  
44 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 68 </style>
... ...
src/views/service/serviceDetail.vue
  View file @cf4544f
1 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 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 76 </template>
8 77  
9 78 <script>
10 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 140 </style>
... ...