黄石周边服务

刘淇
1 parent 0a26514e
Showing 10 changed files with 147 additions and 45 deletions
src/assets/images/service/development.jpeg
src/assets/images/service/serviceDetailTop1.jpg
src/assets/images/service/serviceDetailTop2.jpg
src/assets/images/service/serviceDetailTop3.jpg
src/assets/images/service/serviceIphone.png
src/assets/images/service/serviceNav.png
src/router/index.js
src/views/service/development.vue
src/views/service/service.vue
src/views/service/serviceDetail.vue
@@ -284,6 +284,15 @@ export default new Router({
       }
     },
+    {
+      path: '/development',
+      name: 'development',
+      component: () => import("@/views/service/development.vue"),
+      meta:{
+        title:'产品开发中'
+      }
+    },
+
+<template>
+
+    <div class="developmentBg"></div>
+
+
+
+</template>
+
+<script>
+export default {
+  name: "development"
+};
+</script>
+
+<style scoped>
+.developmentBg{
+  width: 100%;
+  height: 100%;
+  background:#fff url("../../assets/images/service/development.jpeg") no-repeat center center;
+  background-size: 332px  338px ;
+}
+</style>
@@ -17,14 +17,14 @@
       </flexbox-item>
       <flexbox-item class="nav-warp">
-        <div>
+        <div  @click="$router.push({path:'development'})">
           <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
         </div>
         <p>保险服务</p>
       </flexbox-item>
       <flexbox-item class="nav-warp">
-        <div>
+        <div @click="$router.push({path:'development'})">
           <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>
         </div>
         <p>出行服务</p>
@@ -14,64 +14,124 @@
     </group>
     <ul class="serviceDetailWrap">
       <li>
-        <div class="serviceDetailTop">
+        <div class="serviceDetailTop serviceDetailTop1">
           <p>
-            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">黄石港区一川汽车服务运营中心</span>
           </p>
           <p>
-            <span style="color: #ff4949">营业时间：早8店晚21点</span>
+            <span style="color: #ff4949">营业时间：8:00-18:00</span>
           </p>
           <p>
-            <span>店长：梁浩</span>
+            <span>联系人：余红艳</span>
           </p>
           <p>
-            <span>联系电话：13333333333</span>
+            <span>联系电话：13971750760</span>
           </p>
         </div>
         <p style="display: flex;justify-content: space-between;">
-          <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
-          <span @click="toLinkApp()">
+          <span>地理位置: 黄石市黄石港区杭州路19号儿童公园加油站旁</span>
+          <span @click="toLinkApp('115.086987','30.217836','一川汽车服务运营中心')">
              <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
           </span>
         </p>
+
+        <p>
+          <span>服务范围：洗车，美容，音响改装</span>
+        </p>
+        <!--<p>-->
+          <!--<span></span>-->
+        <!--</p>-->
         <p style="display: flex;justify-content: space-between;padding-top: 5px;">
-          <span class="serviceStar">八公里内道路援助</span>
-          <span @click="callPhone('13333333333')">
+          <span class="serviceStar">专业贴膜</span>
+          <span @click="callPhone('13971750760')">
             <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
           </span>
         </p>
       </li>
-      <!--<li>-->
-        <!--<div class="serviceDetailTop">-->
-          <!--<p>-->
-            <!--<span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="color: #ff4949">营业时间：早8店晚21点</span>-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span>店长：梁浩</span>-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span>联系电话：13333333333</span>-->
-          <!--</p>-->
-        <!--</div>-->
-        <!--<p style="display: flex;justify-content: space-between;">-->
-          <!--<span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>-->
-          <!--<span>-->
-             <!--<img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>-->
-          <!--</span>-->
+
+      <li>
+        <div class="serviceDetailTop serviceDetailTop2">
+          <p>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
+          </p>
+          <p>
+            <span style="color: #ff4949">营业时间：8:00-21:00</span>
+          </p>
+          <p>
+            <span>联系人：梁浩</span>
+          </p>
+          <p>
+
+            <span>联系电话：13339906728</span>
+
+          </p>
+        </div>
+        <p style="display: flex;justify-content: space-between;">
+          <span>地理位置: 黄石西塞山区磁湖东路26号途虎养车</span>
+          <span @click="toLinkApp('115.089421','30.211496','途虎养车磁湖东路店')">
+             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
+          </span>
+        </p>
+
+        <p>
+          <span>服务范围：轮胎更换，美容洗车，车品安装</span>
+        </p>
+        <!--<p>-->
+        <!--<span></span>-->
         <!--</p>-->
-        <!--<p style="display: flex;justify-content: space-between;padding-top: 5px;">-->
-          <!--<span class="serviceStar">八公里内道路援助</span>-->
-          <!--<span>-->
-            <!--<img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>-->
-          <!--</span>-->
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
+          <span class="serviceStar">维修、保养、美容</span>
+          <span @click="callPhone('13339906728')">
+            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
+          </span>
+        </p>
+      </li>
+
+
+      <li>
+        <div class="serviceDetailTop serviceDetailTop3">
+          <p>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">壹路美汽车服务中心</span>
+          </p>
+          <p>
+            <span style="color: #ff4949">营业时间：8:00-19:00</span>
+          </p>
+          <p>
+            <span>联系人：石先生</span>
+          </p>
+          <p>
+
+            <span>联系电话：18162919877</span>
+
+          </p>
+        </div>
+        <p style="display: flex;justify-content: space-between;">
+          <span>地理位置: 黄石市下陆区明盛·湖景花园(广州路5号) </span>
+          <span @click="toLinkApp('115.040454','30.189769','壹路美汽车服务中心')">
+             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
+          </span>
+        </p>
+
+        <p>
+          <span>服务范围：机电维修  改装升级  美容装饰轮毂改装</span>
+        </p>
+        <!--<p>-->
+        <!--<span></span>-->
         <!--</p>-->
-      <!--</li>-->
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
+          <span class="serviceStar">8公里内免费救援</span>
+          <span @click="callPhone('18162919877')">
+            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
+          </span>
+        </p>
+      </li>
+
+
+
+
     </ul>
   </div>
@@ -109,19 +169,18 @@ export default {
         window.webkit.messageHandlers.callAppPhone.postMessage({ "phoneNumber": telNum})
       }
     },
-    toLinkApp(){
-
+    toLinkApp(lon,lat,name){
       var u = navigator.userAgent,
         app = navigator.appVersion;
       var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
       var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
       if (isAndroid) {
         // alert("我是安卓");
-        window.JSInterface.toApp('116.301359','39.938395','北京');
+        window.JSInterface.toApp(lon,lat,name);
       }
       if (isIOS) {
         // alert("我是苹果");
-        window.webkit.messageHandlers.toApp.postMessage({ "lon": "116.301359", "lat": "39.938395", "name": "北京"})
+        window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
       }
     },
@@ -152,7 +211,7 @@ export default {
   .serviceDetailWrap {
     padding: 10px 10px;
     > li {
-      height: 140px;
+      height: 160px;
       margin-bottom: 10px;
       border-bottom: 1px solid #eee;
       /*display: flex;*/
@@ -161,12 +220,24 @@ export default {
   .serviceDetailTop {
     padding-left: 130px;
-    background-image: url("../../assets/images/service/service.jpg");
+
+    margin-bottom: 5px;
+  }
+  .serviceDetailTop1{
+    background-image: url("../../assets/images/service/serviceDetailTop1.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop2{
+    background-image: url("../../assets/images/service/serviceDetailTop2.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop3{
+    background-image: url("../../assets/images/service/serviceDetailTop3.jpg");
     background-repeat: no-repeat;
     background-size: 120px 100px;
-    margin-bottom: 5px;
   }
-
   .serviceStar{
     padding-left: 20px;
     background: url("../../assets/images/service/serviceSrar.png") no-repeat 0 center;