修复用户指引bug

This commit is contained in:
X1627315083
2023-12-20 17:03:42 +08:00
parent 6297b75d68
commit 5674df060f
18 changed files with 144 additions and 48 deletions

View File

@@ -92,7 +92,7 @@
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="Guide_1_20" :class="[driver__.driver?'showEvents':'']">
<div class="centent_div" v-if="current?.printObject?.prints[0]?.path" @click="openCurrent(2)">
<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
<img :src="current?.printObject?.prints[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
@@ -188,6 +188,8 @@ export default defineComponent({
let currentIndex:any = ref(0)
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
provide('designItemDetail',designItemDetail)
provide('currentIndex',currentIndex)
let frontBack:any = ref({})
let body = ref(false)
let designItemId = ref()
@@ -202,6 +204,7 @@ export default defineComponent({
return store.state.Guide.guide
})
provide('driver__',driver__)
provide('body',body)
let moible:any = isMoible()
provide('moible',moible)
let {t} = useI18n()
@@ -1064,6 +1067,7 @@ export default defineComponent({
}
&.active{
width: 100%;
max-height: 100%;
}
.detail_modal_item_front,.detail_modal_item_back{
cursor: pointer;
@@ -1071,15 +1075,20 @@ export default defineComponent({
img{
// width: 100%;
max-height: 100%;
width: auto;
}
&.active{
top: 50%;
left: 50%;
width: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%,-50%);
img{
width: 100%;
max-width: 100%;
width: auto;
margin: 0 auto;
display: flex;
}
}
}

View File

@@ -55,6 +55,7 @@
>
{{ file.level2Type }}
<div
v-if="!body"
:class="[
'icon',
'iconfont',
@@ -67,6 +68,7 @@
</div>
</div>
<div
v-if="!body"
class="category_list"
v-show="file.categoryShow"
>
@@ -140,6 +142,7 @@
>
{{ file.level2Type }}
<div
v-if="!body"
:class="[
'icon',
'iconfont',
@@ -151,6 +154,7 @@
></div>
</div>
<div
v-if="!body"
class="category_list"
v-show="file.categoryShow"
>
@@ -311,6 +315,7 @@ export default defineComponent({
let select = ref(false);
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')//父组件传过来的数据
let body = inject('body')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
@@ -358,6 +363,7 @@ export default defineComponent({
selectColorList,
workspace,
driver__,
body,
t,
}
},
@@ -575,7 +581,8 @@ export default defineComponent({
file.url = res.data.url;
file.resData = res.data;
file.designType = res.data.designType
file.level2Type = res.data.level2Type;
let type = this.body?this.current.type:res.data.level2Type
file.level2Type = type;
file.minIOPath = file.resData.minIOPath
let fileList = this.uploadList.filter(
(v) => v.status === "done"
@@ -633,7 +640,8 @@ export default defineComponent({
this.uploadList = []
this.apparelList = []
this.printList = []
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{},{}]
// DesignDetailEnd.colorList = [{}]
DesignDetailEnd.sketchImg={}
this.terminate()
},
@@ -698,10 +706,11 @@ export default defineComponent({
},
//请求我的印花&&模型
getLibraryList(){
let type = this.body?this.current.type:''
let workspace = this.store.state.Workspace.workspace
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
level2Type:this.selectCode == 'Sketchboard'?type:'',
modelSex:workspace?.sex,
page:this.currentPage,
pictureName:this.searchPictureName,
@@ -841,7 +850,7 @@ export default defineComponent({
},
//查询颜色的潘通值和txc
getPantongName(v) {
if(!v.r){
if(v?.r == undefined){
return
}
let color = [v.r, v.g, v.b];

View File

@@ -73,7 +73,6 @@
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
</div>
<div class="color_content_body">
@@ -86,8 +85,7 @@
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
<div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
</div>
@@ -121,13 +119,16 @@ export default defineComponent({
let sketchImg = ref({})
let driver__ = inject('driver__')//父组件传过来的数据
let moible = inject('moible')//父组件传过来的数据
let designItemDetail = inject('designItemDetail')//父组件传过来的数据
let currentIndex = inject('currentIndex')//父组件传过来的数据
let previewShow = ref(false)
//印花
let overallSingle = ref(false)
let systemDesignerPercentage = ref(30)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
// let colorList = ref([{}])
let colorList = ref([{},{},{},{},{},{},{},{},{}])
//加载中
let loadingShow = ref(false)
@@ -140,6 +141,9 @@ export default defineComponent({
sketchImg,
driver__,
moible,
designItemDetail,
currentIndex,
previewShow,
type_,
overallSingle,
systemDesignerPercentage,
@@ -208,21 +212,24 @@ export default defineComponent({
let parent = this.$parent
this.selectIndex = index
this.$parent.selectIndex = index
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
}else{
this.$parent.selectColor = {}
return
}
if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
}else{
hex = '#FFFFFF'
//判断是否对一个颜色重复点击
if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
return
}
this.$parent.selectColor = color?.rgba?.r ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{r:255,g:255,b:255,a:1},hex:hex}
this.$parent.selectColor = {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex}
this.$parent.tcxColor = ''
this.$parent.pantongName = ''
},
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b}`
this.current.color = string
designItemDetail.clothes.forEach((element,index) => {
if(element.id == this.current.id){
@@ -265,6 +272,10 @@ export default defineComponent({
data.designSingleItemDTOList[index].printObject.ifSingle = false
data.designSingleItemDTOList[index].printObject.prints = []
}else if(this.type_ == 3){
if(this.$parent.selectColor?.rgba?.r == undefined){
message.info(this.t('DesignDetailEnd.jsContent2'))
return
}
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
data.designSingleItemDTOList[index].color = color
}
@@ -474,10 +485,13 @@ export default defineComponent({
.modal_img_item{
margin: 0 1rem 1rem 0;
position: relative;
cursor: pointer;
// cursor: pointer;
border: 0.1rem solid #DCDCEC;
//放8个
height: 8.5rem;
width: 7rem;
// height: 32rem;
// width: 25rem;
overflow: hidden;
@media screen and (max-width: 1440px) {
&.modal_img_item {
@@ -487,11 +501,13 @@ export default defineComponent({
box-sizing: border-box;
.color_content{
width: 100%;
//放8个
height: 4rem;
// height: 25rem;
}
.color_content_body{
.color_des{
font-size: 1.2rem;
// font-size: 1.8rem;
font-weight: 600;
white-space: nowrap;
width: 100%;

View File

@@ -61,7 +61,7 @@
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25_1" @click.stop="setOK">OK</div>
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
</div>
</div>
@@ -662,16 +662,13 @@ export default defineComponent({
designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.ifSubmit = true
console.log(rv,index);
designItemDetail.clothes.forEach((item,i)=>{
let a
console.log(1);
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
console.log(2);
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0].id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
})
@@ -693,6 +690,9 @@ export default defineComponent({
},
setOK(){
this.designOpenrtion = false
if(this.driver__.driver){
driverObj__.moveNext();
}
},
clearModal(){
this.printAmount = 1//显示数量
@@ -795,10 +795,13 @@ export default defineComponent({
.designOpenrtion_entirety_img{
height: 100%;
img{
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}

View File

@@ -784,10 +784,13 @@ export default defineComponent({
.designOpenrtion_entirety_img{
height: 100%;
img{
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}

View File

@@ -270,8 +270,14 @@ export default defineComponent({
this.store.commit("addGenerateMaterialFils", imgData);
},
//选择所有的图片
getLibraryList(str:any){
let workspace = this.store.state.Workspace.workspace
async getLibraryList(str:any){
let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
if(this.searchPictureName != this.isOldSearchPictureName || this.workspace?.sex != workspace.sex){
this.imgList = []
this.currentPage = 1
}else{
}
if(str == 'di'){
this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
}
@@ -287,7 +293,7 @@ export default defineComponent({
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
await Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv: any) => {
this.total = rv.total
let aa:any = []
@@ -318,15 +324,13 @@ export default defineComponent({
}
aa.push(item)
});
if(this.searchPictureName != this.isOldSearchPictureName){
this.imgList = []
}else{
}
this.isOldSearchPictureName = this.searchPictureName
if((aa[aa.length-1].id == this.imgList[this.imgList.length-1]?.id) && aa?.[aa.length-1]?.id){
}else{
this.imgList.push(...aa)
}
this.workspace = workspace
// this.imgList = aa
this.isShowLoading = false
}

View File

@@ -662,6 +662,7 @@ export default defineComponent({
}
.modal_img_max{
// flex: 1;
width: 57rem;
height: 35rem;
position: relative;
.mark_loading{
@@ -681,6 +682,8 @@ export default defineComponent({
>img{
// height: 100%;
width: 100%;
max-height: 100%;
object-fit: contain;
}
&.active{
flex-direction: row;

View File

@@ -725,7 +725,6 @@ export default defineComponent({
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
width: 50%;
margin: 3rem auto;
overflow: hidden;
// padding: 3rem 0;

View File

@@ -64,6 +64,7 @@ export default {
Point:'点',
inputContent1:'输入名字进行搜索',
intersection:'交集',
Tag:'标签:',
Select:'选择',
NoLabel:'空标签',
unionSet:'并集',
@@ -76,6 +77,7 @@ export default {
Model1:'模型1',
Model2:'模型2',
Model3:'模型3',
Name:'名字:',
inputContent3:'输入生成图片的标题',
Cancel:'取消',
Sure:'确定',
@@ -311,6 +313,7 @@ export default {
preview:'预览',
Layout:'布局',
jsContent1:'请选择印个印花',
jsContent2:'请选择颜色',
},
DesignPrintOperation:{
Placement:'调整位置',

View File

@@ -62,21 +62,23 @@ export default {
Delete:'Delete',
Rename:'Edit',
Point:'Point',
inputContent1:'Search by your style code',
inputContent1:'Search by name',
intersection:'intersection',
Select:'Select',
Tag:'Tag:',
Select:'Search by tag',
NoLabel:'No Label',
unionSet:'union set',
all:'all',
ImageOnly:'Image Only',
TextOnly:'Text Only',
TextImage:'Text-Image',
inputContent2:'Input name',
inputContent2:'Input prompt',
maximumLength:'The entered content exceeds the maximum length.',
Model1:'Model1',
Model2:'Model2',
Model3:'Model3',
inputContent3:'Input name',
Name:'Name:',
inputContent3:'Enter a new name',
Cancel:'Cancel',
Sure:'Sure',
Moodboard:'Moodboard',
@@ -165,7 +167,7 @@ export default {
PIN:'PIN',
Maximum:'Maximum {maxImg} images can be uploaded, Maximum 2M per image',
Thumbnail:'Thumbnail preview of selected sketchboard',
inputContent1:'Caption generation',
inputContent1:'Input prompt',
maximumLength:'The entered content exceeds the maximum length.',
jsContent1:"upload failed",
jsContent2:"You can only upload Image file!",
@@ -182,7 +184,7 @@ export default {
PIN:'PIN',
Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
Thumbnail:'Thumbnail preview of selected printboard',
inputContent1:'Caption generation',
inputContent1:'Input prompt',
maximumLength:'The entered content exceeds the maximum length.',
jsContent1:"You can only upload Image file!",
jsContent2:'Image must smaller than 2MB!',
@@ -251,7 +253,7 @@ export default {
Model1:'Model1',
Model2:'Model2',
Model3:'Model3',
inputContent1:'Prompt input',
inputContent1:'Input prompt',
Generate:'Generate',
maximumLength:'The entered content exceeds the maximum length.',
Model:'Model',
@@ -312,6 +314,7 @@ export default {
preview:'Preview',
Layout:'Layout',
jsContent1:'Please select print',
jsContent2:'Please choose a color',
},
DesignPrintOperation:{
Placement:'Placement',

View File

@@ -65,6 +65,7 @@ export default {
Point:'point',
inputContent1:'Recherchez par votre code de style',
intersection:'intersection',
Tag:'Balise:',
Select:'Sélectionner',
NoLabel:'Aucune étiquette',
unionSet:"ensemble d'unions",
@@ -77,6 +78,7 @@ export default {
Model1:'Modèle1',
Model2:'Modèle2',
Model3:'Modèle3',
Name:'Nom:',
inputContent3:'Saisie rapide',
Cancel:'Annuler',
Sure:'Bien sûr',
@@ -312,6 +314,7 @@ export default {
preview:'Aperçu',
Layout:'Mise en page',
jsContent1:'Veuillez sélectionner imprimer',
jsContent2:'Choisissez un couleur',
},
DesignPrintOperation:{
Placement:'Placement',

View File

@@ -64,6 +64,7 @@ export default {
Point:'Punto',
inputContent1:'Search by your style code',
intersection:'intersezione',
Tag:'Etichetta:',
Select:'Seleziona',
NoLabel:'Nessuna etichetta',
unionSet:'insieme di unione',
@@ -76,6 +77,7 @@ export default {
Model1:'Modello1',
Model2:'Modello2',
Model3:'Modello3',
Name:'Nome:',
inputContent3:'Immissione rapida',
Cancel:'Annulla',
Sure:'Sicuro',
@@ -311,6 +313,7 @@ export default {
preview:'anteprima',
Layout:'Disposizione',
jsContent1:'Seleziona stampa',
jsContent2:'Vuoi scegliere una tonalità di colore',
},
DesignPrintOperation:{
Placement:'Posizionamento',

View File

@@ -64,6 +64,7 @@ export default {
Point:'ポイント',
inputContent1:'スタイルコードで検索',
intersection:'交差点',
Tag:'タグ:',
Select:'選択',
NoLabel:'ラベルなし',
unionSet:'ユニオンセット',
@@ -76,6 +77,7 @@ export default {
Model1:'モデル1',
Model2:'モデル2',
Model3:'モデル3',
Name:'名前:',
inputContent3:'プロンプト入力',
Cancel:'キャンセル',
Sure:'もちろん',
@@ -311,6 +313,7 @@ export default {
preview:'プレビュー',
Layout:'レイアウト',
jsContent1:'印刷を選択してください',
jsContent2:'色をお選びください',
},
DesignPrintOperation:{
Placement:'配置',

View File

@@ -64,6 +64,7 @@ export default {
Point:'점',
inputContent1:'스타일 코드로 검색',
intersection:'교차로',
Tag:'태그:',
Select:'선택',
NoLabel:'라벨 없음',
unionSet:'결합 세트',
@@ -76,6 +77,7 @@ export default {
Model1:'모델1',
Model2:'모델2',
Model3:'모델3',
Name:'이름:',
inputContent3:'프롬프트 입력',
Cancel:'취소',
Sure:'확신하는',
@@ -311,6 +313,7 @@ export default {
preview:'시사',
Layout:'정렬하려면',
jsContent1:'인쇄를 선택해주세요',
jsContent2:'색감을 선택해주세요',
},
DesignPrintOperation:{
Placement:'놓기',

View File

@@ -64,6 +64,7 @@ export default {
Point:'точка',
inputContent1:'Поиск по коду вашего стиля',
intersection:'пересечение',
Tag:'Тег:',
Select:'Выбрать',
NoLabel:'Нет метки',
unionSet:'набор объединений',
@@ -76,6 +77,7 @@ export default {
Model1:'Модель1',
Model2:'Модель2',
Model3:'Модель3',
Name:'Имя:',
inputContent3:'Быстрый ввод',
Cancel:'Отмена',
Sure:'Конечно',
@@ -311,6 +313,7 @@ export default {
preview:'просмотр',
Layout:'Макет',
jsContent1:'Пожалуйста, выберите печать',
jsContent2:'Пожалуйста выбирай цвет',
},
DesignPrintOperation:{
Placement:'Размещение',

View File

@@ -64,6 +64,7 @@ export default {
Point:'จุด',
inputContent1:'ค้นหาตามรหัสสไตล์ของคุณ',
intersection:'แยก',
Tag:'แท็ก:',
Select:'เลือก',
NoLabel:'ไม่มีป้ายกำกับ',
unionSet:'ชุดยูเนี่ยน',
@@ -76,6 +77,7 @@ export default {
Model1:'แบบอย่าง1',
Model2:'แบบอย่าง2',
Model3:'แบบอย่าง3',
Name:'ชื่อ:',
inputContent3:'ป้อนข้อมูลทันที',
Cancel:'ยกเลิก',
Sure:'ได้เลย',
@@ -311,6 +313,7 @@ export default {
preview:'ดูตัวอย่าง',
Layout:'เลย์เอาต์',
jsContent1:'กรุณาเลือกพิมพ์',
jsContent2:'คุณชอบเลือกสีไหนคะ',
},
DesignPrintOperation:{
Placement:'ตำแหน่ง',

View File

@@ -64,6 +64,7 @@ export default {
Point:'điểm',
inputContent1:'Tìm kiếm theo mã kiểu của bạn',
intersection:'ngã tư',
Tag:'Thẻ:',
Select:'Chọn',
NoLabel:'Không có nhãn',
unionSet:'bộ đoàn',
@@ -76,6 +77,7 @@ export default {
Model1:'Người mẫu1',
Model2:'Người mẫu2',
Model3:'Người mẫu3',
Name:'Tên:',
inputContent3:'Nhập liệu nhanh chóng',
Cancel:'Hủy bỏ',
Sure:'Chắc chắn',
@@ -311,6 +313,7 @@ export default {
preview:'xem trước',
Layout:'Cách trình bày',
jsContent1:'Vui lòng chọn in',
jsContent2:'Choose a color',
},
DesignPrintOperation:{
Placement:'Vị trí',

View File

@@ -324,9 +324,11 @@
@onCancel="closeRenameModal"
>
<div class="collection_rename_content">
<div class="collection_rename_title">{{$t('LibraryPage.Name')}}</div>
<div class="rename_form_content">
<input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
</div>
<div class="collection_rename_title">{{$t('LibraryPage.Tag')}}</div>
<el-cascader
:options="options"
:filterable="true"
@@ -1817,21 +1819,24 @@ export default defineComponent({
.collection_rename_content{
padding:0 6.8rem 1.8rem;
.collection_rename_title{
margin: 2rem 0rem 1rem 0;
font-size: var(--aida-fsize1-8);
}
.rename_form_content{
.rename_form_input{
width: 100%;
height: 4.6rem;
margin-top: 1rem;
border: 0.1rem solid #B4BED7;
border: 0.1rem solid #d9d9d9;
padding-left: 2.1rem;
line-height: 4.6rem;
font-size: 1.8rem;
box-sizing: border-box;
border-radius: 4px;
&::placeholder {
color:#A5B0C2,
color:#adabb9
}
}
}
@@ -1863,10 +1868,28 @@ export default defineComponent({
}
}
.el-cascader{
.el-input--suffix{
--el-input-hover-border-color: #d9d9d9;
// border: .1rem solid #d9d9d9;
}
height: 4.6rem;
margin-top: 2rem;
.el-tag__content{
line-height: 2.5;
.el-cascader__tags{
}
}
.el-input__wrapper{
padding-left: 0;
}
.el-cascader__search-input,.el-input__inner{
margin: 0;
width: 100%;
height: 4.6rem;
padding-left: 2.1rem;
line-height: 4.6rem;
font-size: 1.8rem;
box-sizing: border-box;
}
}