WIP Исправлены baseInputs на TheLogin

This commit is contained in:
Daria Golova
2022-12-29 16:31:49 +03:00
parent e138bedfac
commit 78fd2a4233
4 changed files with 21 additions and 25 deletions

View File

@@ -104,7 +104,7 @@ export default {
box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15) box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
border-radius: 4px border-radius: 4px
background-color: white background-color: white
max-height: 140px max-height: 142px
overflow-y: auto overflow-y: auto
.placeholder .placeholder
color: #090A15 color: #090A15

View File

@@ -2,13 +2,14 @@
.flex.flex-col.gap-y-2 .flex.flex-col.gap-y-2
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }} .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
.input-wrapper.flex.gap-x-2.px-4.box-border.py-10px( .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
:class="{'border-none': borderNone}" :class="{'border-none': borderNone, 'border-error': borderError }"
:style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}" :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
) )
input.input.w-full.outline-0.not-italic( input.input.w-full.outline-0.not-italic(
v-model="value", v-model="value",
:placeholder="placeholder", :placeholder="placeholder",
:disabled="disabled" :disabled="disabled",
:type="type"
) )
.slot(v-if="withIcon", :class="iconPosition") .slot(v-if="withIcon", :class="iconPosition")
slot.cursor-pointer slot.cursor-pointer
@@ -18,6 +19,9 @@
export default { export default {
name: "BaseInput", name: "BaseInput",
props: { props: {
type: {
derault: "text",
},
modelValue: String, modelValue: String,
withIcon: { withIcon: {
default: false, default: false,
@@ -27,6 +31,7 @@ export default {
}, },
placeholder: String, placeholder: String,
borderNone: Boolean, borderNone: Boolean,
borderError: Boolean,
disabled: Boolean, disabled: Boolean,
label: String, label: String,
}, },
@@ -58,6 +63,8 @@ export default {
height: 40px height: 40px
.border-none .border-none
border: none border: none
.border-error
border-color: var(--border-red-color)
.input .input
background-color: inherit background-color: inherit
&:disabled, &[disabled] &:disabled, &[disabled]

View File

@@ -9,18 +9,16 @@
.text-under.flex.not-italic.font-medium.text-base( .text-under.flex.not-italic.font-medium.text-base(
:style="{color: this.underTextColor}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра». :style="{color: this.underTextColor}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
.flex.flex-col.gap-y-5 .flex.flex-col.gap-y-5
.flex.flex-col.gap-y-6px base-input.font-medium(
.flex.non-italic.font-semibold.text-xss Логин :borderError="wrongData",
base-input.h-12.font-medium(
:style="{borderColor: wrongData ? this.redColor : ''}",
v-model="user.username", v-model="user.username",
type="text", placeholder="Введите ваш логин",
placeholder="Введите ваш логин" label=огин"
) )
.flex.flex-col.gap-y-6px.relative .flex.flex-col.gap-y-6px.relative
.flex.non-italic.font-semibold.text-xss Пароль .flex.non-italic.font-semibold.text-sm.opacity-40 Пароль
base-input.h-12( base-input(
:style="{borderColor: wrongData ? this.redColor : ''}", :borderError="wrongData",
v-model="user.password", v-model="user.password",
:type="changeType", :type="changeType",
placeholder="Введите ваш пароль" placeholder="Введите ваш пароль"

View File

@@ -2,12 +2,8 @@
.wrapper-bar.flex.flex-col.gap-y-4 .wrapper-bar.flex.flex-col.gap-y-4
.flex.px-5.py-5.w-full.justify-around.gap-x-4 .flex.px-5.py-5.w-full.justify-around.gap-x-4
.time-wrapper.flex.justify-between .time-wrapper.flex.justify-between
.flex.flex-col.items-center.py-14px.px-4.gap-y-14px base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
.text.text-smm Начало base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
base-input-time.select(v-model="times.start_time")
.flex.flex-col.items-center.py-14px.px-4.gap-y-14px
.text.span.text-smm Конец
base-input-time.select(v-model="times.end_time")
.status-wrapper.flex.flex-col .status-wrapper.flex.flex-col
.flex.justify-center.items-center.h-10 .flex.justify-center.items-center.h-10
span.font-semibold Статусы span.font-semibold Статусы
@@ -140,9 +136,4 @@ export default {
.graph-template .graph-template
width: 218px width: 218px
height: 40px height: 40px
.select
height: 40px
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
</style> </style>