|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<loading v-if="loading"></loading>
|
|
|
|
|
|
- <view v-else class="carVideo">
|
|
|
+ <view v-else class="carVideo iPhoneX">
|
|
|
<m-privacy-popup></m-privacy-popup>
|
|
|
<!-- <topbar>
|
|
|
<van-search shape="round" placeholder="搜索学车视频" @search="search" />
|
|
@@ -42,10 +42,7 @@
|
|
|
<view>
|
|
|
<swiper indicator-color="#fff" autoplay circular style="height: 200rpx">
|
|
|
<swiper-item class="swiperBanner">
|
|
|
- <image
|
|
|
- class="banner"
|
|
|
- src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/banner.png"
|
|
|
- ></image>
|
|
|
+ <image class="banner" src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/banner.png"></image>
|
|
|
</swiper-item>
|
|
|
<swiper-item class="swiperBanner">
|
|
|
<view class="banner-ad">
|
|
@@ -55,22 +52,13 @@
|
|
|
</swiper>
|
|
|
</view>
|
|
|
<view class="carType">
|
|
|
- <view
|
|
|
- v-for="(item, index) in carType"
|
|
|
- @click="changeVehicle(item)"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <view
|
|
|
- @click="
|
|
|
- () => {
|
|
|
- carTypeIndex = index;
|
|
|
- }
|
|
|
- "
|
|
|
- class="col"
|
|
|
- :class="{
|
|
|
- col_selected: carTypeIndex == index,
|
|
|
- }"
|
|
|
- >
|
|
|
+ <view v-for="(item, index) in carType" @click="changeVehicle(item)" :key="index">
|
|
|
+ <view @click="() => {
|
|
|
+ carTypeIndex = index;
|
|
|
+ }
|
|
|
+ " class="col" :class="{
|
|
|
+ col_selected: carTypeIndex == index,
|
|
|
+ }">
|
|
|
<image :class="['carType-img' + index]" :src="item.img"></image>
|
|
|
<view class="h6"></view>
|
|
|
<text class="carType-title">{{ item.title }}</text>
|
|
@@ -79,16 +67,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="point">
|
|
|
- <view
|
|
|
- :style="{
|
|
|
- left: carTypeIndex * 172 + 'rpx',
|
|
|
- }"
|
|
|
- class="point-area"
|
|
|
- >
|
|
|
- <image
|
|
|
- class=""
|
|
|
- src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/triangle1@2x.png"
|
|
|
- ></image>
|
|
|
+ <view :style="{
|
|
|
+ left: carTypeIndex * 172 + 'rpx',
|
|
|
+ }" class="point-area">
|
|
|
+ <image class="" src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/triangle1@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- #ifdef MP-WEIXIN-->
|
|
@@ -118,115 +100,60 @@
|
|
|
</view> -->
|
|
|
<view class="subject">
|
|
|
<view class="subject-tab">
|
|
|
- <view
|
|
|
- class="subject-slider"
|
|
|
- :class="{
|
|
|
- left0: active == 0,
|
|
|
- right0: active == 1,
|
|
|
- }"
|
|
|
- ></view>
|
|
|
- <view
|
|
|
- @click="
|
|
|
- () => {
|
|
|
- active = 0;
|
|
|
- tabQuery.subject = 1;
|
|
|
- }
|
|
|
- "
|
|
|
- class="subject-tabs"
|
|
|
- >
|
|
|
+ <view class="subject-slider" :class="{
|
|
|
+ left0: active == 0,
|
|
|
+ right0: active == 1,
|
|
|
+ }"></view>
|
|
|
+ <view @click="() => {
|
|
|
+ active = 0;
|
|
|
+ tabQuery.subject = 1;
|
|
|
+ }
|
|
|
+ " class="subject-tabs">
|
|
|
<span v-if="active == 0">科目一</span>
|
|
|
<span style="color: #498ef5" v-else>科目一</span>
|
|
|
</view>
|
|
|
- <view
|
|
|
- @click="
|
|
|
- () => {
|
|
|
- active = 1;
|
|
|
- tabQuery.subject = 4;
|
|
|
- }
|
|
|
- "
|
|
|
- class="subject-tabs"
|
|
|
- >
|
|
|
+ <view @click="() => {
|
|
|
+ active = 1;
|
|
|
+ tabQuery.subject = 4;
|
|
|
+ }
|
|
|
+ " class="subject-tabs">
|
|
|
<span v-if="active == 1">科目四</span>
|
|
|
<span style="color: #498ef5" v-else>科目四</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tab">
|
|
|
- <scroll-view
|
|
|
- @scrolltoupper="
|
|
|
- () => {
|
|
|
- active = 0;
|
|
|
- tabQuery.subject = 1;
|
|
|
- }
|
|
|
- "
|
|
|
- @scrolltolower="
|
|
|
- () => {
|
|
|
- active = 1;
|
|
|
- tabQuery.subject = 4;
|
|
|
- }
|
|
|
- "
|
|
|
- scroll-with-animation
|
|
|
- :scroll-into-view="'tab-container' + active"
|
|
|
- enhanced
|
|
|
- style="width: 100%; white-space: nowrap"
|
|
|
- enable-flex
|
|
|
- :scroll-x="true"
|
|
|
- >
|
|
|
- <view
|
|
|
- id="tab-container0"
|
|
|
- style="display: inline-block; white-space: nowrap"
|
|
|
- >
|
|
|
+ <scroll-view @scrolltoupper="() => {
|
|
|
+ active = 0;
|
|
|
+ tabQuery.subject = 1;
|
|
|
+ }
|
|
|
+ " @scrolltolower="() => {
|
|
|
+ active = 1;
|
|
|
+ tabQuery.subject = 4;
|
|
|
+ }
|
|
|
+ " scroll-with-animation :scroll-into-view="'tab-container' + active" enhanced
|
|
|
+ style="width: 100%; white-space: nowrap" enable-flex :scroll-x="true">
|
|
|
+ <view id="tab-container0" style="display: inline-block; white-space: nowrap">
|
|
|
<view class="tab-container">
|
|
|
- <tab-left
|
|
|
- :subject="1"
|
|
|
- :query="tabQuery"
|
|
|
- :leftList="leftList1"
|
|
|
- ></tab-left>
|
|
|
- <tab-center
|
|
|
- :subject="1"
|
|
|
- :query="tabQuery"
|
|
|
- :centerList="centerList1"
|
|
|
- ></tab-center>
|
|
|
- <tab-right
|
|
|
- :subject="1"
|
|
|
- :query="tabQuery"
|
|
|
- :rightList="rightList1"
|
|
|
- ></tab-right>
|
|
|
+ <tab-left :subject="1" :query="tabQuery" :leftList="leftList1"></tab-left>
|
|
|
+ <tab-center :subject="1" :query="tabQuery" :centerList="centerList1"></tab-center>
|
|
|
+ <tab-right :subject="1" :query="tabQuery" :rightList="rightList1"></tab-right>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view
|
|
|
- id="tab-container1"
|
|
|
- style="display: inline-block; white-space: nowrap"
|
|
|
- >
|
|
|
+ <view id="tab-container1" style="display: inline-block; white-space: nowrap">
|
|
|
<view class="tab-container">
|
|
|
- <tab-left
|
|
|
- :query="tabQuery"
|
|
|
- :subject="4"
|
|
|
- :leftList="leftList4"
|
|
|
- ></tab-left>
|
|
|
- <tab-center
|
|
|
- :query="tabQuery"
|
|
|
- :subject="4"
|
|
|
- :centerList="centerList4"
|
|
|
- ></tab-center>
|
|
|
- <tab-right
|
|
|
- :query="tabQuery"
|
|
|
- :subject="4"
|
|
|
- :rightList="rightList4"
|
|
|
- ></tab-right>
|
|
|
+ <tab-left :query="tabQuery" :subject="4" :leftList="leftList4"></tab-left>
|
|
|
+ <tab-center :query="tabQuery" :subject="4" :centerList="centerList4"></tab-center>
|
|
|
+ <tab-right :query="tabQuery" :subject="4" :rightList="rightList4"></tab-right>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="wxad">
|
|
|
- <ad
|
|
|
- ad-type="video"
|
|
|
- :ad-intervals="100"
|
|
|
- unit-id="adunit-8eb44bbd7e3147d4"
|
|
|
- ></ad>
|
|
|
+ <ad ad-type="video" :ad-intervals="100" unit-id="adunit-8eb44bbd7e3147d4"></ad>
|
|
|
</view>
|
|
|
-
|
|
|
+ <view style="width: 100%;height: 48px;"></view>
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- <view class="splitLine"> </view>
|
|
@@ -801,6 +728,8 @@ swiper-item {
|
|
|
background: #fff;
|
|
|
min-height: 100vh;
|
|
|
width: 100%;
|
|
|
+ // padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
|
|
|
+ //padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
|
|
|
}
|
|
|
|
|
|
.swiperBanner {
|
|
@@ -810,6 +739,7 @@ swiper-item {
|
|
|
justify-content: center;
|
|
|
align-content: center;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.banner-ad {
|
|
|
padding: 30rpx;
|
|
|
}
|