BJ_web_developers / wxgzh

Commit 7218aa6965bab5de4d1775c642b0c6c7ead3249c

Authored by 刘淇
1 parent 380913b6

黄石周边服务

Inline Side-by-side
Showing 7 changed files with 166 additions and 1 deletions
src/assets/images/service/carservice.png 0 → 100644
View file @7218aa6

4.66 KB
src/assets/images/service/safeservice.png 0 → 100644
View file @7218aa6

3.28 KB
src/assets/images/service/tripservice.png 0 → 100644
View file @7218aa6

4.11 KB
src/main.js
  View file @7218aa6
@@ -69,9 +69,13 @@ import { @@ -69,9 +69,13 @@ import {
69 Toast, 69 Toast,
70 dateFormat, 70 dateFormat,
71 Loading, 71 Loading,
72 - XDialog 72 + XDialog,
  73 + Flexbox,
  74 + FlexboxItem
73 }from 'vux' 75 }from 'vux'
74 76
  77 +Vue.component('flexbox', Flexbox)
  78 +Vue.component('flexbox-item', FlexboxItem)
75 Vue.component('x-dialog', XDialog) 79 Vue.component('x-dialog', XDialog)
76 Vue.component('loading', Loading) 80 Vue.component('loading', Loading)
77 Vue.component('Toast', Toast) 81 Vue.component('Toast', Toast)
@@ -94,6 +98,7 @@ Vue.component('tabbar-item', TabbarItem); @@ -94,6 +98,7 @@ Vue.component('tabbar-item', TabbarItem);
94 Vue.component('tab', Tab); 98 Vue.component('tab', Tab);
95 Vue.component('tab-item', TabItem); 99 Vue.component('tab-item', TabItem);
96 100
  101 +
97 import { LoadingPlugin } from 'vux' 102 import { LoadingPlugin } from 'vux'
98 Vue.use(LoadingPlugin) 103 Vue.use(LoadingPlugin)
99 104
src/router/index.js
  View file @7218aa6
@@ -257,6 +257,24 @@ export default new Router({ @@ -257,6 +257,24 @@ export default new Router({
257 } 257 }
258 }, 258 },
259 259
  260 + {
  261 + path: '/service',
  262 + name: 'service',
  263 + component: () => import("@/views/service/service.vue"),
  264 + meta:{
  265 + title:'周边服务'
  266 + }
  267 + },
  268 +
  269 + {
  270 + path: '/serviceList',
  271 + name: 'serviceList',
  272 + component: () => import("@/views/service/serviceList.vue"),
  273 + meta:{
  274 + title:'服务列表'
  275 + }
  276 + },
  277 +
260 278
261 279
262 ] 280 ]
src/views/service/service.vue 0 → 100644
  View file @7218aa6
  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 +
  35 + </div>
  36 +</template>
  37 +
  38 +<script>
  39 +export default {
  40 + name: "service"
  41 +};
  42 +</script>
  43 +
  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;
  51 + }
  52 +}
  53 +</style>
src/views/service/serviceList.vue 0 → 100644
  View file @7218aa6
  1 +<template>
  2 + <div>
  3 + <ul class="serviceList">
  4 + <li>
  5 + <div class="serviceListTitle">
  6 + <span class="serviceListName">阳光保险</span>
  7 + <span>95510</span>
  8 + </div>
  9 +
  10 + <div class="serviceListCon">
  11 + <div>1</div>
  12 + <div>
  13 + <p>阳光保险于2005年7月成立,阳光保险于2005年7月成立,阳光保险于2005年7月成立,阳光保险于2005年7月成立,</p>
  14 + <span class="consultBtn">
  15 + 咨询
  16 + </span>
  17 +
  18 + </div>
  19 + <div class="serviceListArrow">
  20 + >
  21 + </div>
  22 + </div>
  23 +
  24 + </li>
  25 + <li>
  26 + 1
  27 + </li>
  28 + </ul>
  29 + </div>
  30 +</template>
  31 +
  32 +<script>
  33 +export default {
  34 + name: "serviceList"
  35 +};
  36 +</script>
  37 +
  38 +<style scoped lang="scss">
  39 + .serviceList {
  40 + padding: 10px;
  41 + > li {
  42 + padding: 10px;
  43 + margin-bottom: 10px;
  44 + background-color: #fff;
  45 + border-radius: 4px;
  46 + }
  47 + }
  48 +
  49 + .serviceListTitle {
  50 + display: flex;
  51 + justify-content: space-between;
  52 + }
  53 +
  54 + .serviceListName {
  55 + font-size: 16px;
  56 + color: #000;
  57 + font-weight: 600;
  58 + }
  59 +
  60 + .serviceListCon{
  61 + display: flex;
  62 + margin-top: 10px;
  63 + >div:nth-of-type(2){
  64 + flex: 1;
  65 + padding: 0 10px;
  66 + overflow: hidden;
  67 + p{
  68 + width: 100%;
  69 + overflow: hidden;
  70 + white-space: nowrap;
  71 + text-overflow: ellipsis;
  72 + }
  73 + }
  74 + }
  75 + .consultBtn{
  76 + display: inline-block;
  77 + padding: 3px 30px;
  78 + margin: 5px 0;
  79 + background-color: #1AAD19;
  80 + border-radius: 4px;
  81 + color: #fff;
  82 + cursor: pointer;
  83 + }
  84 + .serviceListArrow{
  85 + font-size: 18px;
  86 + line-height: 56px;
  87 + font-weight: 600;
  88 + }
  89 +</style>