diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 7af1682..c360643 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1,10 +1,46 @@ -* { - padding: 0; - margin: 0; - list-style: none; - box-sizing: border-box; +button.sandblasted-blurred { + box-sizing: content-box; + border: 0.4rem solid #fff; + font-family: satoshiMedium; + font-weight: 500; + font-size: 5.5rem; + color: #fff; + background-color: transparent; + position: relative; + overflow: hidden; } -html, -body { +button.sandblasted-blurred::before, +button.sandblasted-blurred::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; height: 100%; -} \ No newline at end of file +} +button.sandblasted-blurred::after { + z-index: 0; + backdrop-filter: blur(9.5rem); +} +button.sandblasted-blurred::before { + z-index: 1; + opacity: 0.1; + background: url('@/assets/images/customer_form_bg.png'); +} +button.sandblasted-blurred > span { + z-index: 2; +} +button.sandblasted-blurred:active { + opacity: 0.7; +} +html:root { + --van-dialog-width: 90rem; + --van-dialog-font-size: 5rem; + --van-dialog-header-line-height: 150%; + --van-dialog-message-font-size: 3.5rem; + --van-dialog-message-line-height: 150%; + --van-button-default-font-size: 4rem; + --van-dialog-button-height: 9rem; + --van-dialog-message-padding: 3rem 2.5rem; + --van-dialog-has-title-message-padding-top: 2.5rem; +} diff --git a/src/assets/css/style.less b/src/assets/css/style.less index e69de29..2ba1b6b 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -0,0 +1,54 @@ +button.sandblasted-blurred { + box-sizing: content-box; + border: 0.4rem solid #fff; + font-family: satoshiMedium; + font-weight: 500; + font-size: 5.5rem; + color: #fff; + background-color: transparent; + position: relative; + overflow: hidden; + + &::before, + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + &::after { + z-index: 0; + backdrop-filter: blur(9.5rem); + } + + &::before { + z-index: 1; + opacity: 0.1; + background: url('@/assets/images/customer_form_bg.png'); + } + + >span { + z-index: 2; + } + + &:active { + opacity: 0.7; + } +} + + +// vant dialog +html:root { + --van-dialog-width: 90rem; + --van-dialog-font-size: 5rem; + --van-dialog-header-line-height: 150%; + --van-dialog-message-font-size: 3.5rem; + --van-dialog-message-line-height: 150%; + --van-button-default-font-size: 4rem; + --van-dialog-button-height: 9rem; + --van-dialog-message-padding: 3rem 2.5rem; + --van-dialog-has-title-message-padding-top: 2.5rem; +} \ No newline at end of file diff --git a/src/assets/icons/home_0.svg b/src/assets/icons/home_0.svg new file mode 100644 index 0000000..61430f3 --- /dev/null +++ b/src/assets/icons/home_0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/home_1.svg b/src/assets/icons/home_1.svg new file mode 100644 index 0000000..f9db240 --- /dev/null +++ b/src/assets/icons/home_1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/library_0.svg b/src/assets/icons/library_0.svg new file mode 100644 index 0000000..2cc58aa --- /dev/null +++ b/src/assets/icons/library_0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/library_1.svg b/src/assets/icons/library_1.svg new file mode 100644 index 0000000..3255020 --- /dev/null +++ b/src/assets/icons/library_1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icons/profile_0.svg b/src/assets/icons/profile_0.svg new file mode 100644 index 0000000..0979b27 --- /dev/null +++ b/src/assets/icons/profile_0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/profile_1.svg b/src/assets/icons/profile_1.svg new file mode 100644 index 0000000..002433b --- /dev/null +++ b/src/assets/icons/profile_1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/FooterNavigation.vue b/src/components/FooterNavigation.vue new file mode 100644 index 0000000..0ccd824 --- /dev/null +++ b/src/components/FooterNavigation.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue index b5cc528..4ae827b 100644 --- a/src/components/HeaderTitle.vue +++ b/src/components/HeaderTitle.vue @@ -4,8 +4,8 @@ defineProps({ title: { type: String, default: 'AI STYLING ASSISTANT' }, - light: { type: Boolean,default:false }, - hasSetting: { type: Boolean,default:false } + hasSetting: { type: Boolean, default: false }, + styleType: { type: String, default: '1' },//1低 2高 }) defineEmits(['clickReturn']) @@ -17,49 +17,57 @@ diff --git a/src/main.ts b/src/main.ts index ed8dfe2..d212212 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,7 +7,12 @@ import 'normalize.css/normalize.css' import './assets/css/style.css' import SvgIcon from "@/components/SvgIcon/index.vue"; import "virtual:svg-icons-register"; + +// vant组件库 import 'vant/lib/index.css' +import { Locale } from 'vant'; +import enUS from 'vant/es/locale/lang/en-US'; +Locale.use('en-US', enUS); import flexible from "./utils/flexible.js"; diff --git a/src/router/index.ts b/src/router/index.ts index e36fdbb..0dd4f6a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -85,36 +85,31 @@ const router = createRouter({ // 上传照片 path: '/workshop/uploadFace', name: 'uploadFace', - component: () => import('../views/Workshop/uploadFace/index.vue') + component: () => import('../views/Workshop/uploadFace.vue') }, { // 自定义创作 path: '/workshop/customize', name: 'customize', - component: () => import('../views/Workshop/customize/index.vue'), - children: [ - { - path: '/workshop/customize', - name: 'customizeHome', - component: () => import('../views/Workshop/customize/home.vue') - }, - { - path: '/workshop/customize/library', - name: 'customizeLibrary', - component: () => import('../views/Workshop/customize/library.vue') - }, - { - path: '/workshop/customize/creation', - name: 'customizeCreation', - component: () => import('../views/Workshop/customize/creation.vue') - } - ] + component: () => import('../views/Workshop/customize.vue'), }, + { + // library + path: '/workshop/library', + name: 'library', + component: () => import('../views/Workshop/library.vue'), + }, + { + // creation + path: '/workshop/creation', + name: 'creation', + component: () => import('../views/Workshop/creation.vue'), + }, { // 完成创建 path: '/workshop/end', name: 'end', - component: () => import('../views/Workshop/end/index.vue') + component: () => import('../views/Workshop/end.vue') } ] } diff --git a/src/views/Workshop/customize/creation.vue b/src/views/Workshop/creation.vue similarity index 59% rename from src/views/Workshop/customize/creation.vue rename to src/views/Workshop/creation.vue index 6bdd2d0..95713fb 100644 --- a/src/views/Workshop/customize/creation.vue +++ b/src/views/Workshop/creation.vue @@ -1,7 +1,15 @@ diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize.vue similarity index 88% rename from src/views/Workshop/customize/home.vue rename to src/views/Workshop/customize.vue index 08bce05..72cf8f0 100644 --- a/src/views/Workshop/customize/home.vue +++ b/src/views/Workshop/customize.vue @@ -1,8 +1,11 @@ diff --git a/src/views/Workshop/end/index.vue b/src/views/Workshop/end.vue similarity index 53% rename from src/views/Workshop/end/index.vue rename to src/views/Workshop/end.vue index 3cee985..43df86b 100644 --- a/src/views/Workshop/end/index.vue +++ b/src/views/Workshop/end.vue @@ -1,9 +1,13 @@ \ No newline at end of file diff --git a/src/views/Workshop/customize/library.vue b/src/views/Workshop/library.vue similarity index 67% rename from src/views/Workshop/customize/library.vue rename to src/views/Workshop/library.vue index 470cab5..002099e 100644 --- a/src/views/Workshop/customize/library.vue +++ b/src/views/Workshop/library.vue @@ -1,16 +1,24 @@