1

pages/car/car.js

@@ -4,7 +4,25 @@ const app = getApp()
 
 Page({
   data: {
-
+    bannerList: [
+      { pic: '/pages/images/car/car1.jpg' },
+      { pic: '/pages/images/car/car2.jpg' },
+      { pic: '/pages/images/car/car3.jpg' },
+      { pic: '/pages/images/car/car4.jpg' },
+      { pic: '/pages/images/car/car5.jpg' },
+      { pic: '/pages/images/car/car6.jpg' },
+      { pic: '/pages/images/car/car7.jpg' },
+      { pic: '/pages/images/car/car8.jpg' },
+      { pic: '/pages/images/car/car9.jpg' },
+      { pic: '/pages/images/car/car10.jpg' },
+    ],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    duration: 500,
+    // tab
+    active: 0
   },
   //事件处理函数
   bindViewTap: function () {

pages/car/car.wxml

@@ -3,6 +3,63 @@
     车奖明细
   </view>
   <view class="two">
-    内容
+    <view class="twoImg">
+      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
+        duration="{{duration}}">
+        <block wx:key="unique" wx:for="{{bannerList}}" wx:for-item="item">
+          <swiper-item>
+            <image src="{{item.pic}}"></image>
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <view class="twoTxt">
+      <van-tabs active="{{ active }}">
+        <van-tab title="车辆简介">
+          <view class="carBrief">
+            <view>
+              <text>官方报价:</text>
+              <text>30.98-53.98万</text>
+            </view>
+            <view>
+              <text>排量:</text>
+              <text>2.0T 3.0T</text>
+            </view>
+            <view>
+              <text>级别:</text>
+              <text>中大型车</text>
+            </view>
+            <view>
+              <text>变速箱:</text>
+              <text>双离合</text>
+            </view>
+            <view>
+              <text>车身类型:</text>
+              <text>三厢车</text>
+            </view>
+            <view>
+              <text>车辆具体信息:</text>
+              <text>车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介车辆简介</text>
+            </view>
+          </view>
+        </van-tab>
+        <van-tab title="达成条件">
+          <view class="carGrade">
+            <view>
+              <text>本身等级:</text>
+              <text>二星经理</text>
+            </view>
+            <view>
+              <text>团队条件:</text>
+              <text>团队中有五人与自身等级平等</text>
+            </view>
+            <view>
+              <text>奖励积分：</text>
+              <text>131400</text>
+            </view>
+          </view>
+        </van-tab>
+      </van-tabs>
+    </view>
   </view>
 </view>

pages/car/car.wxss

@@ -1,11 +1,13 @@
 .main {
   float: left;
   width: 100%;
+  height: 100%;
+  background-color: #f6f6f6;
 }
 
 .main .one {
   position: fixed;
-  z-index: 9999;
+  z-index: 999;
   width: 100%;
   height: 80rpx;
   line-height: 80rpx;
@@ -18,5 +20,88 @@
   position: absolute;
   top: 80rpx;
   width: 100%;
-  height: 15000px;
+}
+
+.main .two .twoImg {
+  float: left;
+  width: 100%;
+}
+
+.main .two .twoImg swiper {
+  height: 200px;
+}
+
+.main .two .twoImg image {
+  float: left;
+  width: 100%;
+  height: 400rpx;
+}
+
+.main .two .twoTxt {
+  float: left;
+  width: 100%;
+}
+
+.main .two .twoTxt .carBrief {
+  float: left;
+  width: 94%;
+  padding: 0 20rpx;
+}
+
+.main .two .twoTxt .carBrief view {
+  float: left;
+  width: 100%;
+  min-height: 80rpx;
+  line-height: 80rpx;
+  border-bottom: 1px solid #ccc;
+}
+
+.main .two .twoTxt .carBrief view text {
+  font-size: 30rpx;
+}
+
+.main .two .twoTxt .carBrief view text:nth-child(1) {
+  float: left;
+  color: #666;
+  margin: 0 10rpx 0 0;
+}
+
+.main .two .twoTxt .carBrief view text:nth-child(2) {
+  font-weight: bold;
+}
+
+.main .two .twoTxt .carBrief view:nth-child(1) text:nth-child(2) {
+  color: #ff0000;
+}
+
+.main .two .twoTxt .carGrade {
+  float: left;
+  width: 94%;
+  padding: 0 20rpx;
+}
+
+.main .two .twoTxt .carGrade view {
+  float: left;
+  width: 100%;
+  min-height: 80rpx;
+  line-height: 80rpx;
+  border-bottom: 1px solid #ccc;
+}
+
+.main .two .twoTxt .carGrade view text {
+  font-size: 30rpx;
+}
+
+.main .two .twoTxt .carGrade view text:nth-child(1) {
+  float: left;
+  color: #666;
+  margin: 0 10rpx 0 0;
+}
+
+.main .two .twoTxt .carGrade view text:nth-child(2) {
+  font-weight: bold;
+}
+
+.main .two .twoTxt .carGrade view:nth-child(3) text:nth-child(2) {
+  color: #ff0000;
 }