Merge branch 'UC-206' into 'master'

WIP Частично исправлены найденные baseInputs

See merge request andrusyakka/urban-couscous!234
This commit is contained in:
Daria Golova
2022-12-29 14:21:12 +00:00
37 changed files with 350 additions and 371 deletions

View File

@@ -2,7 +2,7 @@
.flex.w-full(class="gap-x-1.5") .flex.w-full(class="gap-x-1.5")
.flex(:id="value.id" @click="(e) => saveNetworkId(e)") .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42") base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
base-input.w-full(v-model:value="value.username" placeholder="Ссылкa") base-input.w-full(v-model="value.username", placeholder="Ссылкa")
</template> </template>
<script> <script>

View File

@@ -38,7 +38,7 @@
img.avatar.object-cover(for="image-upload", :src="img", v-if="img") img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
base-button(:rounded="true", :size="48", @click="closeAddImage") base-button(:rounded="true", :size="48", @click="closeAddImage")
.icon-ok .icon-ok
base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*") base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
.flex.flex-col.flex-auto.l.gap-y-8 .flex.flex-col.flex-auto.l.gap-y-8
.flex.px-4 .flex.px-4
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm( button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(

View File

@@ -1,10 +1,13 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col.gap-y-2
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
.base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative( .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
ref="select",
@click="open = !open", @click="open = !open",
:class="{'open': open, 'border-none': borderNone}", :class="{'open': open, 'border-none': borderNone}",
) )
.placeholder.text-base.flex.items-center( .placeholder.text-base.flex.items-center(
:class="{'value-color': value.label || placeholderOpacity}" :class="{'value-color': value.label || placeholderOpacity}",
) {{ value.label || placeholder }} ) {{ value.label || placeholder }}
.flex.items-center .flex.items-center
.select-form-separator.cursor-pointer.mr-4(v-if="separator") .select-form-separator.cursor-pointer.mr-4(v-if="separator")
@@ -14,7 +17,8 @@
) )
.items-container.mt-1( .items-container.mt-1(
@click="closeOptions", @click="closeOptions",
v-click-outside="leaveSelect" v-click-outside="leaveSelect",
:class="textClass"
) )
.item.py-2.px-4.cursor-pointer( .item.py-2.px-4.cursor-pointer(
v-for="item in items", v-for="item in items",
@@ -40,6 +44,8 @@ export default {
separator: Boolean, separator: Boolean,
placeholderOpacity: Boolean, placeholderOpacity: Boolean,
center: Boolean, center: Boolean,
label: String,
textStyle: String,
}, },
emits: ["update:modelValue"], emits: ["update:modelValue"],
data() { data() {
@@ -56,6 +62,15 @@ export default {
this.$emit("update:modelValue", value); this.$emit("update:modelValue", value);
}, },
}, },
textClass() {
return this.textStyle
? {
[this.textStyle]: true,
}
: {
"text-base": true,
};
},
}, },
methods: { methods: {
clickItem(id, label) { clickItem(id, label) {
@@ -82,13 +97,14 @@ export default {
border-radius: 4px border-radius: 4px
background-color: white background-color: white
user-select: none user-select: none
height: 40px
&.open &.open
border: 1.5px solid #4772F2 border: 1.5px solid #4772F2
.items-container .items-container
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

@@ -1,32 +1,28 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col.gap-y-2
.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, 'date-input': dateInput}", :class="{'border-none': borderNone, 'border-error': borderError }"
:style="{ minWidth: widthInput + 'px' }" :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(
:class="{date:type === 'date'}", v-model="value",
:value="value",
:type="type",
@input="$emit('update:value', $event.target.value)",
:placeholder="placeholder", :placeholder="placeholder",
:maxLength="maxLength", :disabled="disabled",
:max="maxDate", :type="type"
:disabled="disabled"
) )
.slot(v-if="withIcon", :class="iconPosition") .slot(v-if="withIcon", :class="iconPosition")
slot.cursor-pointer slot.cursor-pointer
</template> </template>
<script> <script>
//TODO: Переписать v-model:value, убрать лишнии пропсы, добавить label или вынести в отдельную компоненту
export default { export default {
name: "BaseInput", name: "BaseInput",
props: { props: {
type: { type: {
default: "text", default: "text",
}, },
maxLength: Number, modelValue: String,
value: String,
withIcon: { withIcon: {
default: false, default: false,
}, },
@@ -34,11 +30,21 @@ export default {
default: "right", default: "right",
}, },
placeholder: String, placeholder: String,
widthInput: Number,
borderNone: Boolean, borderNone: Boolean,
borderError: Boolean,
disabled: Boolean, disabled: Boolean,
maxDate: String, label: String,
dateInput: Boolean, },
emits: ["update:modelValue"],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
}, },
}; };
</script> </script>
@@ -55,12 +61,14 @@ export default {
background-color: var(--default-white) background-color: var(--default-white)
color: var(--font-black-color) color: var(--font-black-color)
height: 40px height: 40px
.date
background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
&::-webkit-calendar-picker-indicator
opacity: 0
.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]
background-color: var(--bg-disable-grey-color)
.label
color: var(--font-black-color)
</style> </style>

View File

@@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col .flex.flex-col.gap-y-2
.label(v-if="!!label") {{label}} .label(v-if="!!label") {{label}}
.field .field
input( input(
@@ -37,7 +37,7 @@ export default {
<style lang="sass" scoped> <style lang="sass" scoped>
.field .field
height: 100% height: 40px
display: flex display: flex
align-items: center align-items: center
border: 1.5px solid var(--border-light-grey-color) border: 1.5px solid var(--border-light-grey-color)
@@ -56,5 +56,6 @@ export default {
.label .label
font-weight: 600 font-weight: 600
font-size: 14px font-size: 14px
line-height: 135% line-height: 16px
opacity: 0.4
</style> </style>

View File

@@ -1,14 +1,11 @@
<template lang="pug"> <template lang="pug">
.input-wrapper.flex.gap-x-2.px-4.box-border( .flex.flex-col.gap-y-2
class="py-2.5" .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
:style="{ minWidth: widthInput + 'px' }" .input-wrapper.flex.gap-x-2.px-4.box-border.py-2.h-10
)
input.input.w-full.outline-0.not-italic.cursor-text( input.input.w-full.outline-0.not-italic.cursor-text(
:value="value" v-model="value"
type="time" type="time"
@input="$emit('update:value', $event.target.value)"
:placeholder="placeholder" :placeholder="placeholder"
:maxlength="maxLength"
) )
.slot(v-if="withIcon" :class="iconPosition") .slot(v-if="withIcon" :class="iconPosition")
slot.cursor-pointer slot.cursor-pointer
@@ -18,8 +15,7 @@
export default { export default {
name: "BaseInputTime", name: "BaseInputTime",
props: { props: {
maxLength: Number, modelValue: String,
value: String,
withIcon: { withIcon: {
default: false, default: false,
}, },
@@ -27,7 +23,18 @@ export default {
default: "right", default: "right",
}, },
placeholder: String, placeholder: String,
widthInput: Number, label: String,
},
emits: ["update:modelValue"],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
}, },
}; };
</script> </script>
@@ -41,6 +48,7 @@ export default {
border-radius: 4px border-radius: 4px
background-color: var(--default-white) background-color: var(--default-white)
color: var(--font-black-color) color: var(--font-black-color)
border: 1.5px solid var(--border-light-grey-color)
input::-webkit-calendar-picker-indicator input::-webkit-calendar-picker-indicator
cursor: pointer cursor: pointer
</style> </style>

View File

@@ -8,7 +8,7 @@ export default {
name: "BaseOptions", name: "BaseOptions",
computed: { computed: {
parent() { parent() {
return this.$parent.$el; return this.$parent.$refs.select;
}, },
parentSize() { parentSize() {
return this.parent?.getBoundingClientRect(); return this.parent?.getBoundingClientRect();

View File

@@ -1,5 +1,9 @@
<template lang="pug"> <template lang="pug">
.base-select(@click="invertOpen", :class="{'open': open && !disable, 'border-none': borderNone}") .base-select(
@click="invertOpen",
:class="{'open': open && !disable, 'border-none': borderNone}",
ref="select"
)
.placeholder( .placeholder(
:class="{'value-color': value || placeholderOpacity, ...textClass}", :class="{'value-color': value || placeholderOpacity, ...textClass}",
:style="{'color': !disable || '#9ca3af', 'opacity': 1}" :style="{'color': !disable || '#9ca3af', 'opacity': 1}"

View File

@@ -7,53 +7,44 @@
.flex.pt-2 .flex.pt-2
.icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm") .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
.flex.flex-col.gap-y-8 .flex.flex-col.gap-y-8
.flex.flex-col.gap-y-2 base-custom-select(
span.text-xxs.opacity-40.font-bold.leading-3 Статус приема
base-custom-select.select(
v-if="selectedEventData.id" v-if="selectedEventData.id"
v-model="status", v-model="status",
:items="eventStatuses", :items="eventStatuses",
placeholder="Статус приема" label="Статус приема"
) )
base-input( base-input(
v-else, v-else,
disabled, disabled,
v-model:value="status.label" v-model="status.label",
label="Статус приема"
) )
.flex.flex-col(class="gap-y-1.5") base-custom-select(
span.text-xxs.opacity-40.font-bold Сотрудник
base-custom-select.select(
:items="ownersList", :items="ownersList",
v-model="employees.employee", v-model="employees.employee",
placeholder="Выберите сотрудника" placeholder="Выберите сотрудника"
label="Сотрудник"
) )
base-custom-select(
.flex.flex-col(class="gap-y-1.5")
span.text-xxs.opacity-40.font-bold Клиент
base-custom-select.select(
:items="membersList", :items="membersList",
v-model="members.person", v-model="members.person",
placeholder="Выберите клиента", placeholder="Выберите клиента",
label="Клиент"
) )
.flex.flex-col.gap-y-8
.flex.gap-x-4 .flex.gap-x-4
.flex.gap-x-2 base-input-date(
.flex.flex-col(class="gap-y-1.5") v-model="eventDate",
span.text-xxs.opacity-40.font-bold.leading-3.font-bold Дата label="Дата"
base-input-date.h-10(v-model="eventDate") )
.flex.gap-x-2.items-center .flex.gap-x-2.items-center
.flex.flex-col(class="gap-y-1.5") base-input-time.item-input.text-base(
span.text-xxs.opacity-40.font-bold.leading-3.font-bold Начало v-model="startTime",
base-input-time.item-input.text-base.select( label="Начало"
v-model:value="startTime",
:width-input="72"
) )
span.mt-4 span.mt-4
.flex.flex-col(class="gap-y-1.5") base-input-time.item-input.text-base(
span.text-xxs.opacity-40.font-bold.leading-3.font-bold Конец v-model="endTime",
base-input-time.item-input.text-base.select( label="Конец"
v-model:value="endTime",
:width-input="72"
) )
base-button.create-button.text-base.font-semibold( base-button.create-button.text-base.font-semibold(
v-if="!selectedEventData.id", v-if="!selectedEventData.id",
@@ -597,7 +588,6 @@ export default {
<style lang="sass" scoped> <style lang="sass" scoped>
.event-form .event-form
height: fit-content
width: 634px width: 634px
background-color: var(--default-white) background-color: var(--default-white)
box-shadow: var(--default-shadow) box-shadow: var(--default-shadow)
@@ -613,18 +603,12 @@ export default {
appearance: none appearance: none
border: none border: none
outline: none outline: none
height: 40px
&::-webkit-calendar-picker-indicator &::-webkit-calendar-picker-indicator
display: none display: none
-webkit-appearance: none -webkit-appearance: none
&::placeholder &::placeholder
color: var(--font-black-color-1) color: var(--font-black-color-1)
.time-input
width: 72px
border-radius: 4px
background-color: var(--default-white)
.date-input .date-input
width: 174px width: 174px
border-radius: 4px border-radius: 4px
@@ -644,7 +628,6 @@ export default {
width: 183px width: 183px
.select .select
height: 40px
border: 1.5px solid var(--border-light-grey-color) border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px border-radius: 4px

View File

@@ -106,7 +106,7 @@
client-detail-input.text-sm.w-max-fit( client-detail-input.text-sm.w-max-fit(
v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'", v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
:style="{fontWeight:key === 'number'&&600}", :style="{fontWeight:key === 'number'&&600}",
v-model:value="sectionInfo[key]", v-model="sectionInfo[key]",
:rows="section ==='pass' ? 2 : 1", :rows="section ==='pass' ? 2 : 1",
:placeholder="settings[section].placeholder[key] || settings[section].placeholder" :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
:sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''" :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
@@ -138,7 +138,7 @@
client-detail-input.text-sm.w-max-fit.pr-12.relative( client-detail-input.text-sm.w-max-fit.pr-12.relative(
:maxLength="40", :maxLength="40",
:style="{fontWeight:key === 'number'&&600}", :style="{fontWeight:key === 'number'&&600}",
v-model:value="sectionInfo[key].title", v-model="sectionInfo[key].title",
placeholder="Заголовок" placeholder="Заголовок"
) )
.text.flex.absolute.text-xsx.top-18px( .text.flex.absolute.text-xsx.top-18px(
@@ -149,7 +149,7 @@
client-detail-input.text-sm.w-max-fit( client-detail-input.text-sm.w-max-fit(
:maxLength="40", :maxLength="40",
:style="{fontWeight:key === 'number'&&600}", :style="{fontWeight:key === 'number'&&600}",
v-model:value="sectionInfo[key].description", v-model="sectionInfo[key].description",
placeholder="Описание" placeholder="Описание"
) )
.flex.items-center(v-if="item?.title && section !== 'additional'") .flex.items-center(v-if="item?.title && section !== 'additional'")
@@ -250,7 +250,7 @@ export default {
pdf: pdfIcon, pdf: pdfIcon,
xls: exelIcon, xls: exelIcon,
}, },
isOpenPackage: true, isOpenPackage: false,
isOpenAddDoc: false, isOpenAddDoc: false,
showModal: false, showModal: false,
}; };

View File

@@ -3,16 +3,14 @@
textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium( textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
v-if="!sharp" v-if="!sharp"
:rows="textareaRows", :rows="textareaRows",
:value="value", v-model="value",
:cols="24", :cols="24",
@input="$emit('update:value', $event.target.value)",
:placeholder="placeholder", :placeholder="placeholder",
:maxLength="maxLength" :maxLength="maxLength"
) )
input.w-full.outline-0.not-italic.font-medium( input.w-full.outline-0.not-italic.font-medium(
v-else, v-else,
:value="value", v-model="value",
@input="$emit('update:value', $event.target.value)",
:placeholder="placeholder", :placeholder="placeholder",
v-mask="sharp" v-mask="sharp"
) )
@@ -23,15 +21,14 @@
import { mask } from "vue-the-mask"; import { mask } from "vue-the-mask";
export default { export default {
name: "ClientDetailInput", name: "ClientDetailInput",
emits: ["update:modelValue"],
props: { props: {
value: String, modelValue: String,
width: Number, width: Number,
sharp: String, sharp: String,
placeholder: {
default: "Поиск",
},
rows: Number, rows: Number,
maxLength: Number, maxLength: Number,
placeholder: String,
}, },
directives: { mask }, directives: { mask },
computed: { computed: {
@@ -42,6 +39,14 @@ export default {
if (this.value.length <= 22) return this.rows; if (this.value.length <= 22) return this.rows;
return Math.ceil(this.value.length / 22); return Math.ceil(this.value.length / 22);
}, },
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
}, },
}; };
</script> </script>

View File

@@ -14,7 +14,7 @@
base-input.text-sm.input-info( base-input.text-sm.input-info(
disabled, disabled,
placeholder="Введите область", placeholder="Введите область",
v-model:value="dopeAddress.region", v-model="dopeAddress.region",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5") .flex.flex-col(class="gap-y-1.5")
@@ -22,7 +22,7 @@
base-input.text-sm.input-info( base-input.text-sm.input-info(
disabled, disabled,
placeholder="Введите улицу", placeholder="Введите улицу",
v-model:value="dopeAddress.street", v-model="dopeAddress.street",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.gap-x-4 .flex.gap-x-4
@@ -31,7 +31,7 @@
base-input.text-sm.input-info( base-input.text-sm.input-info(
disabled, disabled,
placeholder="Дом", placeholder="Дом",
v-model:value="dopeAddress.house", v-model="dopeAddress.house",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5") .flex.flex-col(class="gap-y-1.5")
@@ -39,7 +39,7 @@
base-input.text-sm.input-info( base-input.text-sm.input-info(
disabled, disabled,
placeholder="Квартира", placeholder="Квартира",
v-model:value="dopeAddress.flat", v-model="dopeAddress.flat",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5") .flex.flex-col(class="gap-y-1.5")
@@ -48,7 +48,7 @@
disabled, disabled,
v-mask="'######'", v-mask="'######'",
placeholder="000000", placeholder="000000",
v-model:value="dopeAddress.index", v-model="dopeAddress.index",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
</template> </template>

View File

@@ -8,7 +8,7 @@
.button.keep-redaction.flex.gap-x-3 .button.keep-redaction.flex.gap-x-3
.icon-star-off.icon .icon-star-off.icon
span На ведение span На ведение
.button.keep-redaction.flex.gap-x-3(@click="createMedicalCard(clientId)") .button.keep-redaction.flex.gap-x-3(@click="createMedicalCard")
.icon-star-off.icon .icon-star-off.icon
span Мед. карта span Мед. карта
.button.delete.flex.gap-x-3( .button.delete.flex.gap-x-3(

View File

@@ -5,7 +5,7 @@
base-input( base-input(
:with-icon="true", :with-icon="true",
icon-position="left", icon-position="left",
v-model:value="searchClient", v-model="searchClient",
placeholder="Введите фамилию", placeholder="Введите фамилию",
@keyup.enter="searchLastName" @keyup.enter="searchLastName"
) )

View File

@@ -21,7 +21,6 @@
clients-action-popup( clients-action-popup(
v-if="isOpenPopup", v-if="isOpenPopup",
:open-change-data="openChangeData", :open-change-data="openChangeData",
:client-id="client.id",
:disabled-delete="!!deletedClientId && !rowOverlay", :disabled-delete="!!deletedClientId && !rowOverlay",
@delete-client="transmitDeleteClient", @delete-client="transmitDeleteClient",
:create-medical-card="transmitMedicalCard" :create-medical-card="transmitMedicalCard"

View File

@@ -3,7 +3,7 @@
.flex.flex-col.gap-y-6.w-full.px-4 .flex.flex-col.gap-y-6.w-full.px-4
.flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id") .flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
.flex.flex-col.gap-y-1 .flex.flex-col.gap-y-1
base-input(v-model:value="info.header" placeholder="Заголовок") base-input(v-model="info.header" placeholder="Заголовок")
.flex.px-4.py-3.description .flex.px-4.py-3.description
textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10") textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10")
.upload-wrapper.flex.flex-col.justify-center.items-center .upload-wrapper.flex.flex-col.justify-center.items-center

View File

@@ -1,66 +1,51 @@
<template lang="pug"> <template lang="pug">
.wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.flex.flex-col.gap-y-6.px-4 .flex.flex-col.gap-y-6.px-4
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm.font-semibold Полный адрес
base-input.input-info( base-input.input-info(
v-model:value="addresses.full_address", v-model="addresses.full_address",
placeholder="Введите адрес целиком" placeholder="Введите адрес целиком",
label="Полный адрес"
) )
.flex.items-center.justify-center.relative .flex.items-center.justify-center.relative
.line.absolute .line.absolute
span.text-sm.separator.px-2 или span.text-sm.separator.px-2 или
.grid.grid-cols-2.gap-y-6.gap-x-4 .grid.grid-cols-2.gap-y-6.gap-x-4
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Город
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="Введите город", placeholder="Введите город",
v-model:value="addresses.city", v-model="addresses.city",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" label="Город"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Область
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="Введите область", placeholder="Введите область",
v-model:value="addresses.region", v-model="addresses.region",
label="Область"
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Улица
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="Введите улицу", placeholder="Введите улицу",
v-model:value="addresses.street", v-model="addresses.street",
label="Введите улицу"
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Дом
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="Номер дома", placeholder="Номер дома",
v-model:value="addresses.house_number", v-model="addresses.house_number",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" label="Дом"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Квартира
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="Номер квартиры", placeholder="Номер квартиры",
v-model:value="addresses.apartment_number", v-model="addresses.apartment_number",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" label="Квартира"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Индекс
base-input.input-info( base-input.input-info(
disabled, disabled,
placeholder="000000", placeholder="000000",
v-mask="'######'", v-mask="'######'",
v-model:value="addresses.zip_code", v-model="addresses.zip_code",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}" label="Индекс"
) )
.px-4 .px-4
base-button(@click="saveClient" :size="40") base-button(@click="saveClient" :size="40")

View File

@@ -1,35 +1,29 @@
<template lang="pug"> <template lang="pug">
.wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4 .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
.flex.flex-col(class="gap-y-1.5") base-custom-select.input-info(
span.text-sm Приоритет
base-custom-select(
:items="priorityList", :items="priorityList",
placeholder="Приоритет клиента", placeholder="Приоритет клиента",
v-model="basicInfo.priority" v-model="basicInfo.priority",
label="Приоритет"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
base-input-date.input-info( base-input-date.input-info(
v-model="basicInfo.birth_date", v-model="basicInfo.birth_date",
label="Дата рождения"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер телефона
base-input.input-info( base-input.input-info(
v-model:value="phone.username", v-model="phone.username",
placeholder="+7 (915) 6449223", placeholder="+7 (915) 6449223",
v-mask="'+7 (###) ###-##-##'", v-mask="'+7 (###) ###-##-##'",
:width-input="277" label="Номер телефона"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Email
base-input.input-info( base-input.input-info(
v-model:value="email.username", v-model="email.username",
placeholder="user@yandex.ru", placeholder="user@yandex.ru",
:width-input="277" label="Email"
) )
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5") .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm Ссылки на соцсети span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id") .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
base-adding-network( base-adding-network(
:list-adding-networks="networks.settings", :list-adding-networks="networks.settings",
@@ -100,7 +94,6 @@ export default {
background-color: var(--btn-blue-color) background-color: var(--btn-blue-color)
.input-info .input-info
color: var(--font-dark-blue-color) color: var(--font-dark-blue-color)
height: 40px
.obligatory .obligatory
color: var(--font-obligatory-color) color: var(--font-obligatory-color)
.add-network .add-network

View File

@@ -3,58 +3,44 @@
.flex.flex-col.gap-y-6.px-4 .flex.flex-col.gap-y-6.px-4
span.title-info.text-base.font-bold Паспортные данные span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6 .grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Серия и номер
base-input.input-info( base-input.input-info(
v-mask="'#### ######'", v-mask="'#### ######'",
v-model:value="identityDocument.pass.series_number", v-model="identityDocument.pass.series_number",
placeholder="0000 000000", placeholder="0000 000000",
:width-input="277" label="Серия и номер"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем выдан
base-input.input-info( base-input.input-info(
v-model:value="identityDocument.pass.issued_by_org", v-model="identityDocument.pass.issued_by_org",
placeholder="Точно как в паспорте", placeholder="Точно как в паспорте",
:width-input="277" label="Кем выдан"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Код подразделения
base-input.input-info( base-input.input-info(
v-mask="'###-###'", v-mask="'###-###'",
v-model:value="identityDocument.pass.issued_by_org_code", v-model="identityDocument.pass.issued_by_org_code",
placeholder="000000", placeholder="000000",
:width-input="277" label="Код подразделения"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата выдачи
base-input-date.input-info.h-10( base-input-date.input-info.h-10(
v-model="identityDocument.pass.issued_by_date", v-model="identityDocument.pass.issued_by_date",
placeholder="Дата", placeholder="Дата",
:width-input="277" label="Дата выдачи"
) )
.flex.flex-col.gap-y-6.px-4 .flex.flex-col.gap-y-6.px-4
span.title-info.text-base.font-bold СНИЛС и ИНН span.title-info.text-base.font-bold СНИЛС и ИНН
.grid.grid-cols-2.gap-x-4.gap-y-6 .grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер СНИЛС
base-input.input-info( base-input.input-info(
disabled, disabled,
v-mask="'###-###-### ##'", v-mask="'###-###-### ##'",
v-model:value="identityDocument.snils.number", v-model="identityDocument.snils.number",
placeholder="000000000 00", placeholder="000000000 00",
:width-input="277", label="Номер СНИЛС"
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер ИНН
base-input.input-info( base-input.input-info(
disabled, disabled,
v-mask="'############'", v-mask="'############'",
v-model:value="identityDocument.inn.number", v-model="identityDocument.inn.number",
placeholder="000000000000", placeholder="000000000000",
:width-input="277", label="Номер ИНН"
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
) )
.px-4 .px-4
base-button(@click="saveClient" :size="40") base-button(@click="saveClient" :size="40")

View File

@@ -51,9 +51,6 @@ export default {
MedicalPolicyDocuments, MedicalPolicyDocuments,
BaseStepper, BaseStepper,
}, },
props: {
selectedClientId: String,
},
data() { data() {
return { return {
isBaseData: true, isBaseData: true,

View File

@@ -4,7 +4,7 @@
.font-semibold.text-smm ФИО пациента .font-semibold.text-smm ФИО пациента
base-input( base-input(
:width-input="200", :width-input="200",
v-model:value="patient.full_name" v-model="patient.full_name"
) )
.flex .flex
.flex-col .flex-col
@@ -17,7 +17,7 @@
.flex-col .flex-col
.font-semibold.text-smm Серия и номер .font-semibold.text-smm Серия и номер
base-input( base-input(
v-model:value="patient.seriesAndNumber", v-model="patient.seriesAndNumber",
disabled, disabled,
) )
.flex .flex
@@ -37,7 +37,7 @@
.font-semibold.text-smm ФИО Заказчика .font-semibold.text-smm ФИО Заказчика
base-input( base-input(
:width-input="200", :width-input="200",
v-model:value="patient.full_name" v-model="patient.full_name"
) )
.flex .flex
.flex-col .flex-col
@@ -50,7 +50,7 @@
.flex-col .flex-col
.font-semibold.text-smm Серия и номер .font-semibold.text-smm Серия и номер
base-input( base-input(
v-model:value="patient.seriesAndNumber", v-model="patient.seriesAndNumber",
disabled, disabled,
) )
.flex .flex
@@ -80,9 +80,15 @@ export default {
return { return {
patient: { patient: {
full_name: "", full_name: "",
doc_type: "", doc_type: {
id: null,
label: "",
},
seriesAndNumber: "2354 125423", seriesAndNumber: "2354 125423",
phone: {}, phone: {
id: null,
label: "",
},
}, },
}; };
}, },

View File

@@ -15,21 +15,21 @@
.input-date.flex.h-10.justify-center .input-date.flex.h-10.justify-center
base-input-date( base-input-date(
:width-input="200", :width-input="200",
v-model:value="signedDate" v-model="signedDate"
) )
.flex-col .flex-col
.font-semibold.text-smm Начало оказания услуг .font-semibold.text-smm Начало оказания услуг
.input-date.flex.h-10.justify-center .input-date.flex.h-10.justify-center
base-input-date( base-input-date(
:width-input="200", :width-input="200",
v-model:value="startDate" v-model="startDate"
) )
.flex-col .flex-col
.font-semibold.text-smm Окончание оказания услуг .font-semibold.text-smm Окончание оказания услуг
.input-date.flex.h-10.justify-center .input-date.flex.h-10.justify-center
base-input-date( base-input-date(
:width-input="200", :width-input="200",
v-model:value="endDate" v-model="endDate"
) )
.flex-col.w-full.my-6 .flex-col.w-full.my-6

View File

@@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col.gap-y-6.justify-between(style="height: 500px") .flex.flex-col.gap-y-6.justify-between
.flex.flex-col.gap-y-6 .flex.flex-col.gap-y-6
span.font-bold.text-xl Договор span.font-bold.text-xl Договор
.flex.self-center .flex.self-center

View File

@@ -3,7 +3,7 @@
.corner .corner
.wrap.flex.flex-col.p-4.gap-y-4 .wrap.flex.flex-col.p-4.gap-y-4
.flex.flex-col.gap-y-1 .flex.flex-col.gap-y-1
base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок") base-input(:with-icon="true" v-model="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
span.counter {{`${newAdditionalData.header.length}/140`}} span.counter {{`${newAdditionalData.header.length}/140`}}
.description.flex.px-4.py-3 .description.flex.px-4.py-3
textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10") textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")

View File

@@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col.gap-y-3 .flex.flex-col.gap-y-3
.flex.flex-col.gap-y-3.relative .flex.flex-col.gap-y-3.relative
base-input.text-smm(placeholder="Заголовок", v-model:value="title", :maxLength="40") base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40")
.text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}} .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
.input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5") .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
textarea.place-input.w-full.outline-0.not-italic.resize-none( textarea.place-input.w-full.outline-0.not-italic.resize-none(

View File

@@ -16,7 +16,7 @@
.flex.flex-col(class="gap-y-1.5") .flex.flex-col(class="gap-y-1.5")
.counter.font-semibold.text-smm ФИО .counter.font-semibold.text-smm ФИО
base-input( base-input(
v-model:value="patient", v-model="patient",
placeholder="Введите название для пакета документов" placeholder="Введите название для пакета документов"
) )
span.counter span.counter

View File

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.flex.box-border.justify-between.items-center( .flex.box-border.justify-between.items-center(
:style="{ minWidth : width + 'px', maxWidth: width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }", :style="{ width : width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
:class="{width:generateWidth}" :class="{width:generateWidth}"
) )
span.text-sm(v-if="title") {{title}} span.text-sm(v-if="title") {{title}}

View File

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.flex.box-border.px-4.items-center.w-full.text-sm( .flex.box-border.px-4.items-center.w-full.text-sm(
:style="{ minWidth : width + 'px', maxWidth : width + 'px' }" :style="{ width : width + 'px'}"
) )
span(v-if="!isOpenChange") {{ birthday }} span(v-if="!isOpenChange") {{ birthday }}
base-input-date.input.h-10( base-input-date.input.h-10(

View File

@@ -7,11 +7,11 @@
@mouseover="changeHover", @mouseover="changeHover",
@mouseleave="changeHover" @mouseleave="changeHover"
) {{maxValue}} ) {{maxValue}}
.email
base-input( base-input(
v-if="isOpenChange", v-if="isOpenChange",
:width-input="234",
@click.stop, @click.stop,
v-model:value="value.email.username", v-model="value.email.username",
:placeholder="value.email.username" :placeholder="value.email.username"
) )
</template> </template>
@@ -45,3 +45,8 @@ export default {
}, },
}; };
</script> </script>
<style lang="sass" scoped>
.email
width: 234px
</style>

View File

@@ -1,17 +1,15 @@
<template lang="pug"> <template lang="pug">
.flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm( .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
:style="{ minWidth : width + 'px', maxWidth : width + 'px' }", :style="{ width : width + 'px'}",
) )
base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}} base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
base-avatar(:size="36", v-else) base-avatar(:size="36", v-else)
img.h-full.object-cover(:src="url + photo") img.h-full.object-cover(:src="url + photo")
span.font-semibold(v-if="!isOpenChange") {{value.fullName}} span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
.name(v-if="isOpenChange")
base-input( base-input(
v-if="isOpenChange",
@click.stop, @click.stop,
type="text", v-model="value.fullName",
v-model:value="value.fullName",
:width-input="300",
placeholder="Фамилия Имя Отчество" placeholder="Фамилия Имя Отчество"
) )
</template> </template>
@@ -41,4 +39,6 @@ export default {
border-radius: 50% border-radius: 50%
background-color: var(--font-grey-color) background-color: var(--font-grey-color)
color: var(--font-dark-blue-color) color: var(--font-dark-blue-color)
.name
width: 300px
</style> </style>

View File

@@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
.network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth: width + 'px', maxWidth: width + 'px' }") .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
.flex.gap-x-1 .flex.gap-x-1
.text-xl.icon.relative( .text-xl.icon.relative(
v-for="network in getNetworks", v-for="network in getNetworks",

View File

@@ -1,13 +1,12 @@
<template lang="pug"> <template lang="pug">
.flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }") .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ width : width + 'px' }")
span.text-sm( span.text-sm(
v-if="!isOpenChange" v-if="!isOpenChange"
) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}} ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
.phone(v-if="isOpenChange")
base-input( base-input(
v-if="isOpenChange",
@click.stop, @click.stop,
:width-input="154", v-model="value.phone.username",
v-model:value="value.phone.username",
:placeholder="value.phone.username", :placeholder="value.phone.username",
v-mask="'+7 (###) ###-##-##'" v-mask="'+7 (###) ###-##-##'"
) )
@@ -27,3 +26,8 @@ export default {
directives: { mask }, directives: { mask },
}; };
</script> </script>
<style lang="sass" scoped>
.phone
width: 158px
</style>

View File

@@ -1,10 +1,15 @@
<template lang="pug"> <template lang="pug">
.flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }") .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ width : width + 'px'}")
.flex.gap-x-2.items-center(v-if="!isOpenChange") .flex.gap-x-2.items-center(v-if="!isOpenChange")
.dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }") .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}} span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}
.flex.gap-x-2.text-sm(class="w-[164px]") .flex.gap-x-2.text-sm(class="w-[164px]")
base-select(v-if="isOpenChange", @click.stop :items="getPriorityList", v-model="value.priority") base-select(
v-if="isOpenChange",
@click.stop :items="getPriorityList",
v-model="value.priority",
textStyle="text-sm"
)
</template> </template>
<script> <script>

View File

@@ -53,7 +53,7 @@ export const column = [
name: "phone", name: "phone",
title: "Телефон", title: "Телефон",
iconHead: false, iconHead: false,
width: 170, width: 200,
}, },
{ {
name: "email", name: "email",

View File

@@ -9,19 +9,17 @@
.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( v-model="user.username",
:style="{borderColor: wrongData ? this.redColor : ''}", placeholder="Введите ваш логин",
v-model:value="user.username", label="Логин"
type="text",
placeholder="Введите ваш логин"
) )
.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:value="user.password", v-model="user.password",
:type="changeType", :type="changeType",
placeholder="Введите ваш пароль" placeholder="Введите ваш пароль"
) )

View File

@@ -7,22 +7,12 @@
.flex.pt-2 .flex.pt-2
.icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm") .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
.flex.flex-col.gap-y-6 .flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2 base-input-date(label="Дата")
span.text-smm.font-semibold Дата base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
base-input-date base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
.flex.flex-col(class="gap-y-1.5")
span.text-smm.font-semibold Текущий сотрудник
base-custom-select.h-10(v-model="currentEmployee")
.flex.flex-col(class="gap-y-1.5")
span.text-smm.font-semibold Замена сотрудника
base-custom-select.h-10(v-model="currentEmployee")
.time-wrapper.flex.justify-center .time-wrapper.flex.justify-center
.flex.flex-col.py-14px.px-4.gap-y-14px.items-center base-input-time.px-4.item-input.text-base(label="Начало")
.text-xxs.opacity-40.font-bold Начало base-input-time.px-4.item-input.text-base(label="Конец")
base-input-time.item-input.text-base.select(:width-input="40")
.flex.flex-col.py-14px.px-4.gap-y-14px.items-center
.text-xxs.opacity-40.font-bold Конец
base-input-time.item-input.text-base.select(:width-input="40")
.flex.justify-center .flex.justify-center
base-button.font-semibold(:size="40") Сохранить base-button.font-semibold(:size="40") Сохранить
</template> </template>
@@ -53,9 +43,4 @@ export default {
box-shadow: var(--default-shadow) box-shadow: var(--default-shadow)
border-radius: 4px border-radius: 4px
z-index: 5 z-index: 5
.select
height: 40px
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
</style> </style>

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:value="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:value="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>