Add Brand Section

pages/index.vue

@@ -75,36 +75,35 @@
       </div>
     </div>
 
-    <div class="p-3" style="background-color: white">
+    <div v-if="brands.length > 0" class="p-3" style="background-color: white;  position: relative;
+    z-index: 999;">
       <div>
-        <el-carousel :interval="400000" type="card" height="350px">
-          <el-carousel-item style="display: flex; justify-content: center" v-for="item, i in brands" :key="i">
-            <el-card
-              style="display: flex; justify-content: center; align-items: center; width: fit-content"
-              :body-style="{ padding: '5px' }"
-            >
-            
-              <a :href="item.link">
-                <img height="175" 
+        <el-carousel :interval="5000" type="card" height="300px">
+          <el-carousel-item style="display: flex; justify-content: center; align-items: center;" v-for="item, i in brands" :key="i">
+           <a :href="item.link" class="m-2 p-2" style="  width: 100%;   height: 100%;">
+          
+            <div class="row box-shape">
+             
+              <div class=" col-lg-4 col-sm-12" style="display: flex; justify-content: center; align-items: center;">
+  <!-- <img :src="'https://www.asan-service.com/uploads/images/brands/' + item.image"> -->
+              <img width="188" 
                 :src="config.apiAsanMarket + item.logo"
-                class="image rounded"
+               
               />
-              <div
-                style="
-                  padding: 14px;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                <span>{{item.title}}</span>
-                <div class="bottom clearfix">
-                  <time class="time">{{ item.description }}</time>
-                </div>
               </div>
-              </a>
-            </el-card>
+            
+              <div class="col-lg-8 col-sm-12 desc-box p-3">
+                <h4 class="mb-4">
+                  {{ item.title }}
+                </h4>
+                <p>
+                  {{ item.description }}
+                </p>
+
+              </div>
+            </div>
+           
+           </a>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -226,4 +225,16 @@ export default {
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce600;
 }
+
+.box-shape{
+  background-color: #f1f1f1;
+  border: 1px solid #c4c4c4;
+  height: 100%;
+  border-radius: 5px;
+}
+.desc-box{
+  display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
 </style>