Commit ef88324f8bfc76e0dd7fb2c458c9cfda6c8151a8

Authored by 刘淇
1 parent 0a26514e

黄石周边服务

src/assets/images/service/development.jpeg 0 → 100644

79.4 KB

src/assets/images/service/serviceDetailTop1.jpg 0 → 100644

323 KB

src/assets/images/service/serviceDetailTop2.jpg 0 → 100644

254 KB

src/assets/images/service/serviceDetailTop3.jpg 0 → 100644

82.2 KB

src/assets/images/service/serviceIphone.png

684 Bytes | W: | H:

1.49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/service/serviceNav.png

324 Bytes | W: | H:

742 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/router/index.js
... ... @@ -284,6 +284,15 @@ export default new Router({
284 284 }
285 285 },
286 286  
  287 + {
  288 + path: '/development',
  289 + name: 'development',
  290 + component: () => import("@/views/service/development.vue"),
  291 + meta:{
  292 + title:'产品开发中'
  293 + }
  294 + },
  295 +
287 296  
288 297  
289 298  
... ...
src/views/service/development.vue 0 → 100644
  1 +<template>
  2 +
  3 + <div class="developmentBg"></div>
  4 +
  5 +
  6 +
  7 +</template>
  8 +
  9 +<script>
  10 +export default {
  11 + name: "development"
  12 +};
  13 +</script>
  14 +
  15 +<style scoped>
  16 +.developmentBg{
  17 + width: 100%;
  18 + height: 100%;
  19 + background:#fff url("../../assets/images/service/development.jpeg") no-repeat center center;
  20 + background-size: 332px 338px ;
  21 +}
  22 +</style>
... ...
src/views/service/service.vue
... ... @@ -17,14 +17,14 @@
17 17 </flexbox-item>
18 18  
19 19 <flexbox-item class="nav-warp">
20   - <div>
  20 + <div @click="$router.push({path:'development'})">
21 21 <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
22 22 </div>
23 23 <p>保险服务</p>
24 24 </flexbox-item>
25 25  
26 26 <flexbox-item class="nav-warp">
27   - <div>
  27 + <div @click="$router.push({path:'development'})">
28 28 <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>
29 29 </div>
30 30 <p>出行服务</p>
... ...
src/views/service/serviceDetail.vue
... ... @@ -14,64 +14,124 @@
14 14 </group>
15 15 <ul class="serviceDetailWrap">
16 16 <li>
17   - <div class="serviceDetailTop">
  17 + <div class="serviceDetailTop serviceDetailTop1">
18 18 <p>
19   - <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
  19 + <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">黄石港区一川汽车服务运营中心</span>
20 20 </p>
21 21 <p>
22   - <span style="color: #ff4949">营业时间:早8店晚21点</span>
  22 + <span style="color: #ff4949">营业时间:8:00-18:00</span>
23 23 </p>
24 24 <p>
25   - <span>店长:梁浩</span>
  25 + <span>联系人:余红艳</span>
26 26 </p>
27 27 <p>
28 28  
29   - <span>联系电话:13333333333</span>
  29 + <span>联系电话:13971750760</span>
30 30  
31 31 </p>
32 32 </div>
33 33 <p style="display: flex;justify-content: space-between;">
34   - <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
35   - <span @click="toLinkApp()">
  34 + <span>地理位置: 黄石市黄石港区杭州路19号儿童公园加油站旁</span>
  35 + <span @click="toLinkApp('115.086987','30.217836','一川汽车服务运营中心')">
36 36 <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
37 37 </span>
38 38 </p>
  39 +
  40 + <p>
  41 + <span>服务范围:洗车,美容,音响改装</span>
  42 + </p>
  43 + <!--<p>-->
  44 + <!--<span></span>-->
  45 + <!--</p>-->
39 46 <p style="display: flex;justify-content: space-between;padding-top: 5px;">
40   - <span class="serviceStar">八公里内道路援助</span>
41   - <span @click="callPhone('13333333333')">
  47 + <span class="serviceStar">专业贴膜</span>
  48 + <span @click="callPhone('13971750760')">
42 49 <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
43 50 </span>
44 51 </p>
45 52 </li>
46 53  
47   - <!--<li>-->
48   - <!--<div class="serviceDetailTop">-->
49   - <!--<p>-->
50   - <!--<span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>-->
51   - <!--</p>-->
52   - <!--<p>-->
53   - <!--<span style="color: #ff4949">营业时间:早8店晚21点</span>-->
54   - <!--</p>-->
55   - <!--<p>-->
56   - <!--<span>店长:梁浩</span>-->
57   - <!--</p>-->
58   - <!--<p>-->
59   - <!--<span>联系电话:13333333333</span>-->
60   - <!--</p>-->
61   - <!--</div>-->
62   - <!--<p style="display: flex;justify-content: space-between;">-->
63   - <!--<span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>-->
64   - <!--<span>-->
65   - <!--<img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>-->
66   - <!--</span>-->
  54 +
  55 + <li>
  56 + <div class="serviceDetailTop serviceDetailTop2">
  57 + <p>
  58 + <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
  59 + </p>
  60 + <p>
  61 + <span style="color: #ff4949">营业时间:8:00-21:00</span>
  62 + </p>
  63 + <p>
  64 + <span>联系人:梁浩</span>
  65 + </p>
  66 + <p>
  67 +
  68 + <span>联系电话:13339906728</span>
  69 +
  70 + </p>
  71 + </div>
  72 + <p style="display: flex;justify-content: space-between;">
  73 + <span>地理位置: 黄石西塞山区磁湖东路26号途虎养车</span>
  74 + <span @click="toLinkApp('115.089421','30.211496','途虎养车磁湖东路店')">
  75 + <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
  76 + </span>
  77 + </p>
  78 +
  79 + <p>
  80 + <span>服务范围:轮胎更换,美容洗车,车品安装</span>
  81 + </p>
  82 + <!--<p>-->
  83 + <!--<span></span>-->
67 84 <!--</p>-->
68   - <!--<p style="display: flex;justify-content: space-between;padding-top: 5px;">-->
69   - <!--<span class="serviceStar">八公里内道路援助</span>-->
70   - <!--<span>-->
71   - <!--<img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>-->
72   - <!--</span>-->
  85 + <p style="display: flex;justify-content: space-between;padding-top: 5px;">
  86 + <span class="serviceStar">维修、保养、美容</span>
  87 + <span @click="callPhone('13339906728')">
  88 + <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
  89 + </span>
  90 + </p>
  91 + </li>
  92 +
  93 +
  94 + <li>
  95 + <div class="serviceDetailTop serviceDetailTop3">
  96 + <p>
  97 + <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">壹路美汽车服务中心</span>
  98 + </p>
  99 + <p>
  100 + <span style="color: #ff4949">营业时间:8:00-19:00</span>
  101 + </p>
  102 + <p>
  103 + <span>联系人:石先生</span>
  104 + </p>
  105 + <p>
  106 +
  107 + <span>联系电话:18162919877</span>
  108 +
  109 + </p>
  110 + </div>
  111 + <p style="display: flex;justify-content: space-between;">
  112 + <span>地理位置: 黄石市下陆区明盛·湖景花园(广州路5号) </span>
  113 + <span @click="toLinkApp('115.040454','30.189769','壹路美汽车服务中心')">
  114 + <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
  115 + </span>
  116 + </p>
  117 +
  118 + <p>
  119 + <span>服务范围:机电维修 改装升级 美容装饰轮毂改装</span>
  120 + </p>
  121 + <!--<p>-->
  122 + <!--<span></span>-->
73 123 <!--</p>-->
74   - <!--</li>-->
  124 + <p style="display: flex;justify-content: space-between;padding-top: 5px;">
  125 + <span class="serviceStar">8公里内免费救援</span>
  126 + <span @click="callPhone('18162919877')">
  127 + <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
  128 + </span>
  129 + </p>
  130 + </li>
  131 +
  132 +
  133 +
  134 +
75 135  
76 136 </ul>
77 137 </div>
... ... @@ -109,19 +169,18 @@ export default {
109 169 window.webkit.messageHandlers.callAppPhone.postMessage({ "phoneNumber": telNum})
110 170 }
111 171 },
112   - toLinkApp(){
113   -
  172 + toLinkApp(lon,lat,name){
114 173 var u = navigator.userAgent,
115 174 app = navigator.appVersion;
116 175 var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
117 176 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
118 177 if (isAndroid) {
119 178 // alert("我是安卓");
120   - window.JSInterface.toApp('116.301359','39.938395','北京');
  179 + window.JSInterface.toApp(lon,lat,name);
121 180 }
122 181 if (isIOS) {
123 182 // alert("我是苹果");
124   - window.webkit.messageHandlers.toApp.postMessage({ "lon": "116.301359", "lat": "39.938395", "name": "北京"})
  183 + window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
125 184 }
126 185  
127 186 },
... ... @@ -152,7 +211,7 @@ export default {
152 211 .serviceDetailWrap {
153 212 padding: 10px 10px;
154 213 > li {
155   - height: 140px;
  214 + height: 160px;
156 215 margin-bottom: 10px;
157 216 border-bottom: 1px solid #eee;
158 217 /*display: flex;*/
... ... @@ -161,12 +220,24 @@ export default {
161 220  
162 221 .serviceDetailTop {
163 222 padding-left: 130px;
164   - background-image: url("../../assets/images/service/service.jpg");
  223 +
  224 + margin-bottom: 5px;
  225 + }
  226 + .serviceDetailTop1{
  227 + background-image: url("../../assets/images/service/serviceDetailTop1.jpg");
  228 + background-repeat: no-repeat;
  229 + background-size: 120px 100px;
  230 + }
  231 + .serviceDetailTop2{
  232 + background-image: url("../../assets/images/service/serviceDetailTop2.jpg");
  233 + background-repeat: no-repeat;
  234 + background-size: 120px 100px;
  235 + }
  236 + .serviceDetailTop3{
  237 + background-image: url("../../assets/images/service/serviceDetailTop3.jpg");
165 238 background-repeat: no-repeat;
166 239 background-size: 120px 100px;
167   - margin-bottom: 5px;
168 240 }
169   -
170 241 .serviceStar{
171 242 padding-left: 20px;
172 243 background: url("../../assets/images/service/serviceSrar.png") no-repeat 0 center;
... ...