ปรับ css กรอกข้อมูล และปรับรูปแบบ step การชำระเงิน
This commit is contained in:
parent
98738aa814
commit
6c7e57d9e3
11 changed files with 214 additions and 69 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue