热销排行

components/indexCom/portraitChild/index.wxss

@@ -1,6 +1,6 @@
 /* 品牌传播声量 */
 .brand{
-    width: 100%;
+    width: 686;
     height: 484rpx;
     background-color: #fff;
     margin: 32rpx;

components/indexCom/rankingChild/index.wxml

@@ -1,27 +1,31 @@
 <view>
     <!-- 时间组件 -->
     <time-component></time-component>
-    
-    <view class="brand">
-        <view class="total">
+    <!-- 汽车销量排行 -->
+    <view class="total">
         <view class="content_left">
-            <view class="total_img">
-                        <image style="width: 28rpx;height: 28rpx;" src="/images/car_sales.png"></image>
-                    </view>
+            <view class="img">
+                <image style="width: 48rpx;height: 48rpx;" src="/images/car_sales.png"></image>
+            </view>
             <view class="title">汽车销量排行</view>
         </view>
         <view class="content_left">
-            <view class="text1">查看详情</view>
+            <view class="details_text">查看详情</view>
             <van-icon size="22px" name="arrow" style="color:#0084FF ;margin-left: 10rpx;" />
         </view>
     </view>
+    <view class="first_brand">
         <view class="text">品牌销量排行</view>
-
+        <view class="brand_tu">
+            <c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption}}" height="100%"></c-echars>
+        </view>
     </view>
     <view class="brand">
-    
-        <view class="text">车型销量排行</view>
 
+        <view class="text">车型销量排行</view>
+        <view class="brand_tu">
+            <c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{modelOption}}" height="100%"></c-echars>
+        </view>
 
     </view>
 </view>

components/indexCom/rankingChild/index.wxss

@@ -1,11 +1,13 @@
 /* 热销排行 */
+
+/* 点击详情 */
 .total{
     height: 80rpx;
     line-height: 80rpx;
     display: flex;
     text-align: center;
     justify-content: space-between;
-    /* margin: 0 32rpx; */
+    margin: 0 32rpx;
     padding: 0 32rpx 0 32rpx;
     background-color:  #ebf5ff;
 
@@ -14,15 +16,32 @@
     display: flex;
 
 }
-.total_img{
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: 12rpx;
-    margin: 20rpx 20rpx 0 0rpx;
+.title{
+    font-size: 28rpx;
+    color: #0084FF;
+}
+.details_text{
+    font-size: 24rpx;
+    color: #0084FF;
+}
+.img{
+    /* width: 64rpx;
+    height: 64rpx; */
+    /* border-radius: 12rpx; */
+    padding-bottom: 16rpx;
+    padding-top: 16rpx;
+  }
+/* 图标排行 */
+  .first_brand{
+    width: 686;
+    height: 488rpx;
+    background-color: #fff;
+    margin: 0 32rpx 32rpx 32rpx;
+    border-radius: 4rpx; 
   }
 .brand{
     width: 686;
-    height: 484rpx;
+    height: 488rpx;
     background-color: #fff;
     margin: 32rpx;
     border-radius: 4rpx; 
@@ -35,11 +54,3 @@
     font-size: 36rpx;
     padding: 32rpx;
 }
-.title{
-    font-size: 28rpx;
-    color: #0084FF;
-}
-.text1{
-    font-size: 24rpx;
-    color: #0084FF;
-}