add brands

pages/index.vue

@@ -75,11 +75,36 @@
       </div>
     </div>
 
-    <div class="p-3"  style="background-color: white">
-      <div >
-        <el-carousel :interval="400000" type="card" height="400px">
-          <el-carousel-item v-for="item in 6" :key="item">
-           
+    <div class="p-3" style="background-color: white">
+      <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" 
+                :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>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -93,6 +118,7 @@ export default {
   async asyncData({ $axios, error }) {
     try {
       const help = await $axios.get('/api/public/help?front=true')
+      
       return {
         help: help.data
       }
@@ -105,7 +131,8 @@ export default {
       serial: '',
       help: null,
       inquiryType: 'guaranteeSerial',
-      checkingSerial: false
+      checkingSerial: false,
+      brands:[],
     }
   },
   head() {
@@ -121,9 +148,19 @@ export default {
     inquiryBtnTxt() {
       if (this.inquiryType === 'guaranteeSerial') return 'بررسی گارانتی'
       else return 'بررسی اصالت'
+    },
+    config() {
+      return this.$config
     }
   },
+  mounted(){
+      this.$axios.get(`https://api-asanmarket.iran.liara.run/brands`).then((res)=>{
+        this.brands = res.data
+
+      })
+  },
   methods: {
+    
     checkSerial() {
       // validation
       if (this.checkingSerial) {
@@ -179,12 +216,14 @@ export default {
 </script>
 
 <style scoped>
-
+.rounded{
+  border-radius: 5px;
+}
 .el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #99a9bf00;
 }
 
 .el-carousel__item:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #d3dce600;
 }
 </style>