解决方案1

liuqimichale
1 parent edfa20f9
Showing 13 changed files with 206 additions and 1 deletions
src/assets/images/solution/iphone0.png
src/assets/images/solution/iphone1.png
src/assets/images/solution/iphone2.png
src/assets/images/solution/iphone3.png
src/assets/images/solution/nav.png
src/assets/images/solution/navactive.png
src/assets/images/solution/pay.png
src/assets/images/solution/payactive.png
src/assets/images/solution/service.png
src/assets/images/solution/serviceactive.png
src/assets/images/solution/share.png
src/assets/images/solution/shareactive.png
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>