ปรับ css กรอกข้อมูล และปรับรูปแบบ step การชำระเงิน

This commit is contained in:
Tanyalak 2023-03-31 17:49:36 +07:00
parent 98738aa814
commit 6c7e57d9e3
11 changed files with 214 additions and 69 deletions

View file

@ -9,8 +9,8 @@
:editData="false"
/>
<!-- :changeBtn="changeBtn" -->
<q-form ref="myform" class="col-12 row q-col-gutter-x-sm">
<div class="row col-xs-12 col-sm-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
<div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
@ -294,33 +294,28 @@
</div>
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input
:class="getClass(false)"
:outlined="false"
:class="getClass(status == 'register' || status == 'rejectRegister')"
dense
lazy-rules
:readonly="true"
:borderless="true"
readonly
borderless
style="padding:0 12px;"
v-model="defaultInformation.email"
label="E-mail address"
/>
</div>
</div>
<div class="row col-xs-12 col-sm-2 justify-center">
<div class="containerimage row justify-center">
<q-file
borderless
v-model="fileData"
stack-label
:readonly="!(status == 'register' || status == 'rejectRegister')"
@update:model-value="pickFile"
>
<q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
<q-icon name="mdi-camera" />
<br />ปเดต
</div>
</q-img>
</q-file>
<div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
<div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
<label for="file-upload" class="col-12 row">
<q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
<q-icon name="mdi-camera" />
<br />ปเดต
</div>
</q-img>
</label>
<input id="file-upload" type="file" />
</div>
<div class="col-12 text-center" v-if="disabledPic">
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
@ -328,7 +323,7 @@
</q-btn>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="col-xs-12 col-sm-9 col-md-12">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
@ -489,8 +484,8 @@ const getClass = (val: boolean) => {
.q-img {
display: block;
width: 160px;
height: 170px;
width: 100%;
max-height: 170px;
padding: 1%;
border-radius: 8px;
border: solid 2px rgba(168, 168, 168, 0.055) !important;
@ -504,7 +499,7 @@ const getClass = (val: boolean) => {
background: rgba(0, 0, 0, 0.7);
color: #f1f1f1;
transition: 0.5s ease;
width: 160px;
width: 100%;
height: 70px;
opacity: 0;
color: white;
@ -520,4 +515,14 @@ const getClass = (val: boolean) => {
.q-field__bottom {
padding: 5px 10px 0px 0px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>