From b41579fa76a49aa1b4f6874d797ae7d2b0990880 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Mon, 13 Jan 2020 16:11:21 +0800
Subject: [PATCH] 解决方案1

---
 src/assets/images/solution/iphone0.png            | Bin 0 -> 318563 bytes
 src/assets/images/solution/iphone1.png            | Bin 0 -> 136454 bytes
 src/assets/images/solution/iphone2.png            | Bin 0 -> 162800 bytes
 src/assets/images/solution/iphone3.png            | Bin 0 -> 146942 bytes
 src/assets/images/solution/nav.png                | Bin 0 -> 4033 bytes
 src/assets/images/solution/navactive.png          | Bin 0 -> 4505 bytes
 src/assets/images/solution/pay.png                | Bin 0 -> 4269 bytes
 src/assets/images/solution/payactive.png          | Bin 0 -> 4656 bytes
 src/assets/images/solution/service.png            | Bin 0 -> 5912 bytes
 src/assets/images/solution/serviceactive.png      | Bin 0 -> 8083 bytes
 src/assets/images/solution/share.png              | Bin 0 -> 4074 bytes
 src/assets/images/solution/shareactive.png        | Bin 0 -> 4437 bytes
 src/views/solution/components/solutionSelect0.vue | 207 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 13 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/solution/iphone0.png
 create mode 100644 src/assets/images/solution/iphone1.png
 create mode 100644 src/assets/images/solution/iphone2.png
 create mode 100644 src/assets/images/solution/iphone3.png
 create mode 100644 src/assets/images/solution/nav.png
 create mode 100644 src/assets/images/solution/navactive.png
 create mode 100644 src/assets/images/solution/pay.png
 create mode 100644 src/assets/images/solution/payactive.png
 create mode 100644 src/assets/images/solution/service.png
 create mode 100644 src/assets/images/solution/serviceactive.png
 create mode 100644 src/assets/images/solution/share.png
 create mode 100644 src/assets/images/solution/shareactive.png

diff --git a/src/assets/images/solution/iphone0.png b/src/assets/images/solution/iphone0.png
new file mode 100644
index 0000000..4e6ae0a
Binary files /dev/null and b/src/assets/images/solution/iphone0.png differ
diff --git a/src/assets/images/solution/iphone1.png b/src/assets/images/solution/iphone1.png
new file mode 100644
index 0000000..2a77425
Binary files /dev/null and b/src/assets/images/solution/iphone1.png differ
diff --git a/src/assets/images/solution/iphone2.png b/src/assets/images/solution/iphone2.png
new file mode 100644
index 0000000..e8d9b5f
Binary files /dev/null and b/src/assets/images/solution/iphone2.png differ
diff --git a/src/assets/images/solution/iphone3.png b/src/assets/images/solution/iphone3.png
new file mode 100644
index 0000000..0f39dfd
Binary files /dev/null and b/src/assets/images/solution/iphone3.png differ
diff --git a/src/assets/images/solution/nav.png b/src/assets/images/solution/nav.png
new file mode 100644
index 0000000..e247832
Binary files /dev/null and b/src/assets/images/solution/nav.png differ
diff --git a/src/assets/images/solution/navactive.png b/src/assets/images/solution/navactive.png
new file mode 100644
index 0000000..9698ca7
Binary files /dev/null and b/src/assets/images/solution/navactive.png differ
diff --git a/src/assets/images/solution/pay.png b/src/assets/images/solution/pay.png
new file mode 100644
index 0000000..243f708
Binary files /dev/null and b/src/assets/images/solution/pay.png differ
diff --git a/src/assets/images/solution/payactive.png b/src/assets/images/solution/payactive.png
new file mode 100644
index 0000000..83ce02d
Binary files /dev/null and b/src/assets/images/solution/payactive.png differ
diff --git a/src/assets/images/solution/service.png b/src/assets/images/solution/service.png
new file mode 100644
index 0000000..06cbaa3
Binary files /dev/null and b/src/assets/images/solution/service.png differ
diff --git a/src/assets/images/solution/serviceactive.png b/src/assets/images/solution/serviceactive.png
new file mode 100644
index 0000000..9758319
Binary files /dev/null and b/src/assets/images/solution/serviceactive.png differ
diff --git a/src/assets/images/solution/share.png b/src/assets/images/solution/share.png
new file mode 100644
index 0000000..a50c0c7
Binary files /dev/null and b/src/assets/images/solution/share.png differ
diff --git a/src/assets/images/solution/shareactive.png b/src/assets/images/solution/shareactive.png
new file mode 100644
index 0000000..ac5a2e8
Binary files /dev/null and b/src/assets/images/solution/shareactive.png differ
diff --git a/src/views/solution/components/solutionSelect0.vue b/src/views/solution/components/solutionSelect0.vue
index 7dd4a12..a619d2f 100644
--- a/src/views/solution/components/solutionSelect0.vue
+++ b/src/views/solution/components/solutionSelect0.vue
@@ -70,15 +70,220 @@
         </ul>
       </div>
 
+
+      <div class="bgCommon" style="padding: 50px 0">
+        <div class="widthCommon">
+          <ul class="overHidden">
+            <li class="fl" style="width: 392px;">
+              <div style="font-size: 24px;margin-bottom: 34px;"> 面向车主</div>
+              <ul class="tab-swiper">
+                <li v-for="(i, index) in tabData" :key="index"
+                  :class="{active: currentIndex==index}"
+                >
+                  {{i}}
+                </li>
+              </ul>
+
+              <transition-group tag="ul" name="slide-left" class="tabCon" mode="out-in">
+                  <li v-for="(item, index) in tabCon" :key="item.mainTitle" v-show="currentIndex==index">
+                    <div>
+                      {{item.mainTitle}}
+                    </div>
+                    <div>
+                      {{item.subTitle}}
+                    </div>
+                  </li>
+              </transition-group>
+
+            </li>
+
+            <li class="fl" style="margin-left: 166px;">
+
+              <transition-group tag="ul" mode="out-in" class="img-wrapper" name="slide-left">
+                <li  v-for="(item, index) in imgCon" :key="item.id" v-if="currentIndex==index">
+                  <img :src="item.name" alt="">
+                </li>
+              </transition-group>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+
+
+
+
     </div>
 </template>
 
 <script>
+import iphone0 from '../../../assets/images/solution/iphone0.png'
+import iphone1 from '../../../assets/images/solution/iphone1.png'
+import iphone2 from '../../../assets/images/solution/iphone2.png'
+import iphone3 from '../../../assets/images/solution/iphone3.png'
+
 export default {
-  name: 'solutionSelect0'
+  name: 'solutionSelect0',
+  data(){
+    return{
+      tabData:[
+        '一键导航','在线缴费','车位共享','周边服务'
+      ],
+      tabCon:[
+        {
+          mainTitle:'停车一键导航',
+          subTitle:'目的地附近停车场推荐，快速一键导航停车场，最佳停车路径规划。'
+        },
+        {
+          mainTitle:'在线缴费快速出场',
+          subTitle:'支持微信、支付宝等多种在线支付方式，提前支付，快速离场，减少通道排队时间。'
+        },
+        {
+          mainTitle:'个人车位共享',
+          subTitle:'个人车位出租与共享，提高车位利用率，增加车主个人收入，盘活泊位存量。'
+        },
+        {
+          mainTitle:'周边服务',
+          subTitle:'为用户直接提供周边第三方服务入口，方便用户出行以及获得更多相关服务。'
+        },
+      ],
+      imgCon:[
+        {
+          name:iphone0,
+          id:0
+        },
+        {
+          name:iphone1,
+          id:1
+        },
+        {
+          name:iphone2,
+          id:2
+        },
+        {
+          name:iphone3,
+          id:3
+        },
+      ],
+      currentIndex: 0,
+      timer:''
+    }
+  },
+  mounted() {
+    this.timer = setInterval(this.get, 3000)
+  },
+  methods:{
+    get() {
+      this.currentIndex ++
+      if(this.currentIndex == 4){
+        this.currentIndex = 0
+      }
+    }
+  }
+
+
 }
 </script>
 
 <style scoped lang="scss">
+.tab-swiper{
+  width: 318px;
+  display: flex;
+  border-bottom: 1px solid rgba(190,190,190,1);
+  justify-content: space-between;
+}
+.tab-swiper>li{
+  width: 64px;
+  height: 100px;
+  padding-top: 76px;
+  cursor: pointer;
+
+  &:nth-of-type(1){
+    background: url("../../../assets/images/solution/nav.png") no-repeat;
+    background-size: 64px 64px;
+    &.active{
+      background: url("../../../assets/images/solution/navactive.png") no-repeat;
+      background-size: 64px 64px;
+      color: #1251B8;
+    }
+  }
+  &:nth-of-type(2){
+    background: url("../../../assets/images/solution/pay.png") no-repeat;
+    background-size: 64px 64px;
+    &.active{
+      background: url("../../../assets/images/solution/payactive.png") no-repeat;
+      background-size: 64px 64px;
+      color: #1251B8;
+    }
+  }
+  &:nth-of-type(3){
+    background: url("../../../assets/images/solution/share.png") no-repeat;
+    background-size: 64px 64px;
+    &.active{
+      background: url("../../../assets/images/solution/shareactive.png") no-repeat;
+      background-size: 64px 64px;
+      color: #1251B8;
+    }
+  }
+  &:nth-of-type(4){
+    background: url("../../../assets/images/solution/service.png") no-repeat;
+    background-size: 64px 64px;
+    &.active{
+      background: url("../../../assets/images/solution/serviceactive.png") no-repeat;
+      background-size: 64px 64px;
+      color: #1251B8;
+    }
+  }
+}
+.tab-swiper>li:nth-of-type(1).active{
+
+}
+.tab-swiper>li:nth-of-type(2).active{
+  color: #1251B8;
+}
+.tab-swiper>li:nth-of-type(3).active{
+  color: #1251B8;
+}
+.tab-swiper>li:nth-of-type(4).active{
+  color: #1251B8;
+}
+  .tabCon{
+    width:318px ;
+    height: 140px;
+    overflow: hidden;
+  }
+  .tabCon li{
+    float: left;
+    div:nth-of-type(1){
+      font-size: 18px;
+      padding: 45px 0 16px;
+    }
+  }
+
+  .slide-left-enter-active{
+    transition: all .3s ease-in-out;
+  }
+  .slide-left-leave-active{
+    transition: all .3s ease-in-out;
+  }
+  .slide-left-enter {
+    transform: translateX(500px);
+    opacity: 0;
+  }
+.slide-left-leave-to{
+  transform: translateX(-500px);
+  opacity: 0;
+}
+  .img-wrapper{
+    width: 208px;
+    height: 391px;
+    overflow: hidden;
+  }
+.img-wrapper li{
+  img{
+    width: 100%;
+    height: 100%;
+  }
+}
 
 </style>
--
libgit2 0.21.4