|
|
@ -26,14 +26,14 @@
|
|
|
|
<div style="display: inline-block;width: 560px;height:auto">
|
|
|
|
<div style="display: inline-block;width: 560px;height:auto">
|
|
|
|
<div class="bg" style="margin-right: 40px;">
|
|
|
|
<div class="bg" style="margin-right: 40px;">
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-1-1',((index+1)+t('web.rowLeftOuterTire')))">
|
|
|
|
<div class="item1" @click="tyreClick((index+1)+'-1-1',((index+1)+t('web.rowLeftOuterTire')))">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
:style="`background-color:${backgroundColorState((index+1)+'-1-1')};border-color:${borderColorState((index+1)+'-1-1')}`"
|
|
|
|
:style="`background-color:${backgroundColorState((index+1)+'-1-1')};border-color:${borderColorState((index+1)+'-1-1')}`"
|
|
|
|
class="circle">
|
|
|
|
class="circle">
|
|
|
|
<span style="white-space: nowrap">{{ index + 1 }}{{ t('web.rowLeftOuterTire') }}</span>
|
|
|
|
<span style="white-space: nowrap">{{ index + 1 }}{{ t('web.rowLeftOuterTire') }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-1-2',((index+1)+t('web.rowLeftInnerTube')))">
|
|
|
|
<div class="item1" @click="tyreClick((index+1)+'-1-2',((index+1)+t('web.rowLeftInnerTube')))">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
:style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-1-2')};border-color:${borderColorState((index+1)+'-1-2')}`"
|
|
|
|
:style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-1-2')};border-color:${borderColorState((index+1)+'-1-2')}`"
|
|
|
|
class="circle">
|
|
|
|
class="circle">
|
|
|
@ -44,14 +44,14 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg">
|
|
|
|
<div class="bg">
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-2-2',((index+1)+t('web.rowRightInnerTube')))">
|
|
|
|
<div class="item1" @click="tyreClick((index+1)+'-2-2',((index+1)+t('web.rowRightInnerTube')))">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
:style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-2-2')};border-color:${borderColorState((index+1)+'-2-2')}`"
|
|
|
|
:style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-2-2')};border-color:${borderColorState((index+1)+'-2-2')}`"
|
|
|
|
class="circle">
|
|
|
|
class="circle">
|
|
|
|
<span style="white-space: nowrap">{{ index + 1 }}{{ t('web.rowRightInnerTube') }}</span>
|
|
|
|
<span style="white-space: nowrap">{{ index + 1 }}{{ t('web.rowRightInnerTube') }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-2-1',((index+1)+ t('web.rowRightOuterTire') ))">
|
|
|
|
<div class="item1" @click="tyreClick((index+1)+'-2-1',((index+1)+ t('web.rowRightOuterTire') ))">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
:style="`background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
|
|
|
|
:style="`background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
|
|
|
|
class="circle">
|
|
|
|
class="circle">
|
|
|
@ -382,7 +382,7 @@ getList()
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
.item1 {
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
width: 100px;
|
|
|
|
width: 100px;
|
|
|
|
height: 100px;
|
|
|
|
height: 100px;
|
|
|
|