首页改版1

src/pages/carVideo/index.vue

@@ -3,6 +3,52 @@
 
   <view v-else class="carVideo">
     <m-privacy-popup></m-privacy-popup>
+    <view class="topBg">
+      <!-- #ifdef MP-WEIXIN -->
+      <topbar>
+        <userInfoHead :userData="userData"></userInfoHead>
+      </topbar>
+      <!-- #endif -->
+      <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>
+          </swiper-item>
+          <swiper-item class="swiperBanner">
+            <view class="banner-ad">
+              <ad unit-id="adunit-f9ac1a546be5b3f0"></ad>
+            </view>
+          </swiper-item>
+        </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,
+            }"
+          >
+            <image :class="['carType-img' + index]" :src="item.img"></image>
+            <view class="h6"></view>
+            <text class="carType-title">{{ item.title }}</text>
+            <text class="carType-typeName">{{ item.typeName }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
     <!-- <topbar>
       <van-search shape="round" placeholder="搜索学车视频" @search="search" />
     </topbar>
@@ -33,51 +79,7 @@
         <branch-two v-else :carVideoList="item.children"></branch-two>
       </van-tab>
     </van-tabs> -->
-    <!-- #ifdef MP-WEIXIN -->
-    <topbar>
-      <userInfoHead :userData="userData"></userInfoHead>
-    </topbar>
-    <!-- #endif -->
 
-    <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>
-        </swiper-item>
-        <swiper-item class="swiperBanner">
-          <view class="banner-ad">
-            <ad unit-id="adunit-f9ac1a546be5b3f0"></ad>
-          </view>
-        </swiper-item>
-      </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,
-          }"
-        >
-          <image :class="['carType-img' + index]" :src="item.img"></image>
-          <view class="h6"></view>
-          <text class="carType-title">{{ item.title }}</text>
-          <text class="carType-typeName">{{ item.typeName }}</text>
-        </view>
-      </view>
-    </view>
     <view class="point">
       <view
         :style="{
@@ -460,7 +462,7 @@ export default {
     carTypeIndex: 0,
     carType: [
       {
-        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/xc.png",
+        img: "https://ndata.zzxcx.net/jklsj/xcx/xc_white@2x.png",
         typeName: "小车",
         title: "C1/C2/C3",
       },
@@ -815,22 +817,26 @@ swiper-item {
   width: 690rpx;
   height: 200rpx;
 }
-
+.topBg {
+  background: #3ac770;
+  border-radius: 0px 0px 40rpx 40rpx;
+}
 .carType {
-  width: 690rpx;
+  width: 706rpx;
   height: 152rpx;
-  background: #f0f3f7;
+
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   margin-top: 32rpx;
+  justify-content: space-between;
 
   .col_selected {
-    background: #bfd8ff;
+   opacity: 0.75;
   }
 
   .col {
-    width: 172rpx;
+    width: 144rpx;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -839,8 +845,8 @@ swiper-item {
     justify-content: center;
 
     .carType-img0 {
-      width: 133rpx;
-      height: 45rpx;
+      width: 72rpx;
+      height: 72rpx;
     }
 
     .carType-img1 {
@@ -859,13 +865,13 @@ swiper-item {
     }
 
     .carType-typeName {
-      color: #333;
-      font-size: $uni-app-fontsize-paragraph;
+         color: #fff;
+      font-size: 26rpx;
     }
 
     .carType-title {
-      color: #333;
-      font-size: $uni-app-fontsize-paragraph;
+      color: #fff;
+      font-size: 26rpx;
     }
   }
 }