diff --git a/public/img/desktop/people2.svg b/public/img/desktop/people2.svg index 084a76df..015eb312 100644 --- a/public/img/desktop/people2.svg +++ b/public/img/desktop/people2.svg @@ -1,5 +1,5 @@ - + Layer 1 @@ -73,81 +73,81 @@ - + - - + + - + - - + + - + - - - - - - - + + + + + + + - - + + - - - - - - + + + + + + - + - + - - - + + + - - + + - - + + - + - - - + + + - - + + - + - - + + diff --git a/src/components/desktop/ItemIcon.vue b/src/components/desktop/ItemIcon.vue new file mode 100644 index 00000000..aa1dfdfc --- /dev/null +++ b/src/components/desktop/ItemIcon.vue @@ -0,0 +1,137 @@ + + + + + + + + diff --git a/src/components/desktop/StepsBar.vue b/src/components/desktop/StepsBar.vue new file mode 100644 index 00000000..cc0249ac --- /dev/null +++ b/src/components/desktop/StepsBar.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/desktop-main.js b/src/desktop-main.js index 6af91c15..3683fd99 100644 --- a/src/desktop-main.js +++ b/src/desktop-main.js @@ -12,6 +12,7 @@ import { VCard, VCardActions, VCardItem, VCardSubtitle, VCardText, VCardTitle } import { VChip } from 'vuetify/components/VChip'; import { VDialog } from 'vuetify/components/VDialog'; import { VDivider } from 'vuetify/components/VDivider'; +import { VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels } from 'vuetify/components/VExpansionPanel'; import { VForm } from 'vuetify/components/VForm'; import { VContainer, VCol, VRow, VSpacer } from 'vuetify/components/VGrid'; import { VIcon } from 'vuetify/components/VIcon'; @@ -26,6 +27,7 @@ import { VProgressCircular } from 'vuetify/components/VProgressCircular'; import { VProgressLinear } from 'vuetify/components/VProgressLinear'; import { VSelect } from 'vuetify/components/VSelect'; import { VSheet } from 'vuetify/components/VSheet'; +import { VSlideGroup, VSlideGroupItem } from 'vuetify/components/VSlideGroup'; import { VSnackbar } from 'vuetify/components/VSnackbar'; import { VSwitch } from 'vuetify/components/VSwitch'; import { VTabs, VTab } from 'vuetify/components/VTabs'; @@ -58,7 +60,9 @@ import { import PinCodeInput from '@/components/common/PinCodeInput.vue'; +import ItemIcon from '@/components/desktop/ItemIcon.vue'; import AmountInput from '@/components/desktop/AmountInput.vue'; +import StepsBar from '@/components/desktop/StepsBar.vue'; import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue'; import SnackBar from '@/components/desktop/SnackBar.vue'; @@ -68,6 +72,7 @@ import '@/styles/desktop/template/layout/index.scss'; import '@/styles/desktop/template/layout/component/index.scss'; import '@/styles/desktop/template/layout/_default-layout.scss'; import '@/styles/desktop/global.scss'; +import '@/styles/desktop/font-size.scss'; import App from './DesktopApp.vue'; @@ -90,6 +95,10 @@ const vuetify = createVuetify({ VChip, VDialog, VDivider, + VExpansionPanel, + VExpansionPanelText, + VExpansionPanelTitle, + VExpansionPanels, VForm, VContainer, VCol, @@ -115,6 +124,8 @@ const vuetify = createVuetify({ VProgressLinear, VSelect, VSheet, + VSlideGroup, + VSlideGroupItem, VSnackbar, VSwitch, VTabs, @@ -334,7 +345,9 @@ app.component('VueDatePicker', VueDatePicker); app.component('PinCodeInput', PinCodeInput); +app.component('ItemIcon', ItemIcon); app.component('AmountInput', AmountInput); +app.component('StepsBar', StepsBar); app.component('ConfirmDialog', ConfirmDialog); app.component('SnackBar', SnackBar); diff --git a/src/locales/en.js b/src/locales/en.js index 543ad716..bd777c8f 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -711,6 +711,8 @@ export default { 'Default': 'Default', 'Done': 'Done', 'Continue': 'Continue', + 'Previous': 'Previous', + 'Next': 'Next', 'Status': 'Status', 'Enable': 'Enable', 'Enabled': 'Enabled', @@ -996,8 +998,13 @@ export default { 'Transaction Edit Page': 'Transaction Edit Page', 'Automatically Add Geolocation': 'Automatically Add Geolocation', 'Enable Animation': 'Enable Animation', + 'Basic Information': 'Basic Information', + 'User Information': 'User Information', + 'Enter Your Basic Information': 'Enter Your Basic Information', 'Use preset transaction categories': 'Use preset transaction categories', + 'Use Preset Transaction Categories': 'Use Preset Transaction Categories', 'Preset Categories': 'Preset Categories', + 'Set Whether You Use The Preset Transaction Categories': 'Set Whether You Use The Preset Transaction Categories', 'You have been successfully registered': 'You have been successfully registered', 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.', 'Unable to sign up': 'Unable to sign up', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index d36779e9..f6732863 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -711,6 +711,8 @@ export default { 'Default': '默认', 'Done': '完成', 'Continue': '继续', + 'Previous': '上一步', + 'Next': '下一步', 'Status': '状态', 'Enable': '启用', 'Enabled': '启用', @@ -996,8 +998,13 @@ export default { 'Transaction Edit Page': '交易编辑页面', 'Automatically Add Geolocation': '自动添加地理位置', 'Enable Animation': '启用动画', + 'Basic Information': '基本信息', + 'User Information': '用户信息', + 'Enter Your Basic Information': '输入您的基本信息', 'Use preset transaction categories': '使用预设交易分类', + 'Use Preset Transaction Categories': '使用预设交易分类', 'Preset Categories': '预设分类', + 'Set Whether You Use The Preset Transaction Categories': '设置是否使用预设交易分类', 'You have been successfully registered': '注册成功', 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': '注册成功，但是添加预设分类时出错。您可以随时在设置页面中重新添加预设分类。', 'Unable to sign up': '无法注册', diff --git a/src/styles/desktop/font-size.scss b/src/styles/desktop/font-size.scss new file mode 100644 index 00000000..e8be360d --- /dev/null +++ b/src/styles/desktop/font-size.scss @@ -0,0 +1,3 @@ +:root { + --ebk-icon-font-size: 28px; +} diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss index b9284b0b..d8a2968e 100644 --- a/src/styles/desktop/global.scss +++ b/src/styles/desktop/global.scss @@ -11,6 +11,12 @@ pointer-events: none !important; } +@media (min-width: 600px) { + .text-right-sm { + text-align: right !important; + } +} + /** custom class **/ .pin-codes-input { --ebk-pin-code-input-height: 56px; diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue index 21fb2dfa..82aa4432 100644 --- a/src/views/desktop/SignupPage.vue +++ b/src/views/desktop/SignupPage.vue @@ -1,13 +1,525 @@ + +