danak/asan-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Swift
2024-02-09 22:41:32 +03:30
parent 7438a95166
commit d5ec24a468
2 changed files with 159 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index.vue
+157 -41
View File
@@ -5,8 +5,38 @@
<div class="container-fluid">
<div class="row align-items-stretch">
<div class="col-12 col-lg-5 order-1 order-lg-0">
<div class="boxBg inquiry">
<div v-if="!open" class="boxBg inquiry">
<h2>نوع محصول را انتخاب کنید:</h2>
<div class="brandsList">
<CRow>
<CCol col="12">
<p>
ضمن خوش آمدگویی شما به مجموعه آسان سرویس چنانچه محصول خریداری شده شما دارای سریال گارانتی میباشد
میتوانید با وارد کردن سریال گارانتی در کادر زیر از وضعیت گارانتی محصول و یا با انتخاب گزینه اصالت
کالا و وارد کردن شماره سریال خود دستگاه از اصالت دستگاه مطلع شوید.
</p>
</CCol>
<div class="brand" :class="g === 1 && 'selected'">
<button @click="openModal(1)">
<i class="fas fa-phone-laptop"></i>
<span>لوازم جانبی کامپیوتر ، موبایل و محصولات حافظه</span>
</button>
</div>
<div class="brand" :class="g === 2 && 'selected'">
<button @click="openModal(1)">
<i class="fas fa-photo-video"></i>
<span>لوازم صوتی و تصویری خودرو</span>
</button>
</div>
</CRow>
</div>
</div>
<div v-if="open" class="boxBg inquiry">
<h2>استعلام گارانتی و اصالت کالا</h2>
<span v-if="g === 1">لوازم جانبی کامپیوتر ، موبایل و محصولات حافظه</span>
<span v-else>لوازم صوتی و تصویری خودرو</span>
<p>
ضمن خوش آمدگویی شما به مجموعه آسان سرویس چنانچه محصول خریداری شده شما دارای سریال گارانتی میباشد
میتوانید با وارد کردن سریال گارانتی در کادر زیر از وضعیت گارانتی محصول و یا با انتخاب گزینه اصالت کالا و
@@ -75,35 +105,30 @@
</div>
</div>
<div v-if="$route.query?.brand == 2 " class="p-3" style="background-color: white; position: relative;
z-index: 999;">
<div v-if="$route.query?.brand == 2" class="p-3" style="background-color: white; position: relative; z-index: 999">
<div>
<el-carousel :interval="5000" type="card" height="250px">
<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 width="188"
:src="'/uploads/images/brands/' + item.logo"
/>
</div>
<div class="col-lg-8 col-sm-12 desc-box p-3">
<h4 class="mb-4">
{{ item.title }}
</h4>
<p>
{{ item.description }}
</p>
<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 width="188" :src="'/uploads/images/brands/' + item.logo" />
</div>
<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>
</div>
</a>
</a>
</el-carousel-item>
</el-carousel>
</div>
@@ -117,7 +142,7 @@ export default {
async asyncData({ $axios, error }) {
try {
const help = await $axios.get('/api/public/help?front=true')
return {
help: help.data
}
@@ -131,8 +156,9 @@ export default {
help: null,
inquiryType: 'guaranteeSerial',
checkingSerial: false,
brands:[],
g: 1
brands: [],
g: 1,
open: false
}
},
head() {
@@ -153,14 +179,19 @@ export default {
return this.$config
}
},
mounted(){
this.$axios.get(`/api/public/brand`).then((res)=>{
this.brands = res.data
})
mounted() {
this.$axios.get(`/api/public/brand`).then(res => {
this.brands = res.data
})
},
methods: {
openModal(g) {
this.g = g
this.open = true
},
closeModal() {
this.open = false
},
checkSerial() {
// validation
if (this.checkingSerial) {
@@ -216,8 +247,93 @@ export default {
}
</script>
<style scoped>
.rounded{
<style lang="scss" scoped>
.brandsList {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
.brand {
flex-basis: 50%;
max-width: 200px;
padding: 10px;
text-align: center;
&.selected {
button {
background: #065495;
img {
opacity: 0;
&.alt {
opacity: 1;
}
}
i,
span {
color: #fff;
}
}
}
button {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
border: 1px solid #065495;
cursor: pointer;
border-radius: 10px;
background: transparent;
position: relative;
padding: 5px;
&:hover {
background: #065495;
img {
opacity: 0;
&.alt {
opacity: 1;
}
}
i,
span {
color: #fff;
}
}
img {
display: block;
width: 100%;
&.alt {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
}
}
i {
display: block;
font-size: 50px;
margin: 10px 0;
color: #065495;
}
span {
color: #065495;
font-family: 'iranYekanB';
}
}
}
}
.rounded {
border-radius: 5px;
}
.el-carousel__item:nth-child(2n) {
@@ -228,15 +344,15 @@ export default {
background-color: #d3dce600;
}
.box-shape{
.box-shape {
background-color: #f1f1f1;
border: 1px solid #c4c4c4;
height: 100%;
border-radius: 5px;
}
.desc-box{
.desc-box {
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: column;
justify-content: center;
}
</style>