aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123123123123

Browse Source
This commit is contained in:
李志鹏
2025-10-16 11:55:04 +08:00
parent 6866d69d00
commit c10a0eb120
14 changed files with 186 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/assets/css/style.css
View File

@@ -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%;
}
}
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;
}

54
src/assets/css/style.less
View File

@@ -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;
}

22
src/assets/icons/home.svg
View File

@@ -1,22 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="160.000000pt" height="160.000000pt" viewBox="0 0 160.000000 160.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,160.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M752 1589 c-24 -5 -59 -18 -78 -30 -34 -21 -589 -597 -641 -666 -64
-84 -13 -196 97 -210 l40 -6 0 -256 c0 -142 5 -272 10 -293 13 -45 77 -105
122 -113 18 -3 114 -5 213 -3 l179 3 13 25 c9 18 13 93 13 273 l0 247 75 0 75
0 0 -258 c0 -241 1 -260 19 -276 17 -15 41 -17 218 -14 l200 3 37 29 c63 48
66 63 66 366 l0 270 34 0 c102 0 171 81 146 171 -14 51 -617 685 -680 715 -55
27 -101 33 -158 23z m116 -125 c49 -34 613 -638 610 -653 -3 -12 -19 -17 -73
-19 -110 -4 -105 12 -105 -340 0 -261 -2 -298 -17 -314 -14 -16 -33 -18 -160
-18 l-143 0 0 229 c0 126 -4 241 -10 255 -5 14 -24 35 -42 46 -29 18 -46 20
-145 18 -177 -5 -183 -16 -183 -335 l0 -213 -137 0 c-76 0 -143 4 -149 8 -31
20 -34 55 -34 345 0 228 -3 297 -13 305 -7 6 -42 12 -77 14 -51 2 -65 7 -68
19 -3 17 556 617 607 651 33 22 109 23 139 2z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

9
src/assets/icons/home_0.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

9
src/assets/icons/home_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

27
src/assets/icons/library.svg
View File

@@ -1,27 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M25 455 c-21 -20 -25 -34 -25 -85 0 -85 25 -110 110 -110 51 0 65 4
85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25 -85 25 -51 0 -65 -4
-85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100 -16 -116 0 -16 16 -16
100 0 116 7 7 33 12 58 12 25 0 51 -5 58 -12z"/>
<path d="M280 457 c-37 -39 -16 -103 53 -157 35 -28 48 -25 91 16 56 54 69
101 40 139 -12 16 -28 20 -90 21 -65 2 -78 -1 -94 -19z m73 -39 l16 -23 19 24
c13 15 25 22 36 18 26 -10 19 -41 -19 -83 l-35 -39 -35 37 c-19 21 -35 46 -35
56 0 38 30 43 53 10z"/>
<path d="M25 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
<path d="M285 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

9
src/assets/icons/library_0.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="53" height="53" fill="url(#pattern0_557_1170)" fill-opacity="0.8"/>
<defs>
<pattern id="pattern0_557_1170" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_557_1170" transform="scale(0.0208333)"/>
</pattern>
<image id="image0_557_1170" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOsSURBVHgB7VrNahRBEK5dBRE16GJWElEJQbyYkJziTRRBX0OfQRB8AQmaHLwYX8CD68Z4U/AlBK/JNepBIdElcbOz9me6dntqeqa7JzOTPewHlR5nquuv/6prJRqipqmh6LWibUWRon4K9TQPeJtG/ywwz5Sij4r2tCy0nxXNGjyXLTyfFF1RVJe6Tuq2pZmzDE+jdSErDcspOnq6XVX0IoXnQLfPjYAMPNk0GPJQV9GWKVjghKKn5A5O5MkDWXVW1hbG9wIMPxDPLYsD+PdESr/ICEDfwSMDfA7CL1ki2VE0R+45vaBo36J8UvStacciEaBr+vt1i4Esc0rz3BR90b7EhzUheF93qJMbzNMRgt9ZeHco7uSS0R/Ta5aSIzCjvzHPHfH9G+k/5ssFo5MPwDsnZOxY+KRxNvD8RxC6lu91m5zIQ7ALNXIbKPXULMbdouEozqfwyJ3LKzI+cMn5aTiB9jYlp2k95RmAMw8oHogtH8W+cMlZofg6+WUY5gLz7BkyeCutxAEYcIbse7nPesNo4ICT2+gpl+IQuOTAiTcWI25QthM42ZcoeT60tWOVOgBENHSC27NkT0HwrkHx/f/AkF/zUewLHzkwaIaGU8g8sE5TfCTwPCF4uA9GbbDIXdtbkQ6wYQ8F71/dNrWT4LkqjGcHHpEYrW0hbI78TmEGeBeFjF1HHwTpGcVzLjYUZ8Fdik8XNn6ZLAFeo/j21jEM8zEe2BfKNsgPKxTPPk2HzO0StKr7JBxoUDx6XW3QImUDgjBaHUomc9Pkv78/pvj8llst2ieUcWHiTNE0IuReIDPIdQpbRxjF+xZZ/HzPJc+80HQDDLc5silk+gKL8oKiLzRM5r4qOk+eiSUztSnccJ6rLcOYPLAZGrKZDC7KmL/vKZm/2wg8yP35ApN3Cy4UeYwYCcPHGBVUNYXyrJkEf90i8CIdLkyfRYyU4QMNDy7fw4v1tAL1TKXpqaoyV4qeIitzWQdZaRXAmvaqzMpcqXqaFg+RoM1TsZW56RQ9R6kAIhH9Xx6vojK3QfHIF6HnFV5WVZnbKUHPNoYO0ZfDHQqWI9+Z6Du+59HTT/zSkRN9qgaJIASlq6OIsQPHjbEDxw3+wcBEVberQnY/OPBdvMSPaaGVuQXx7reFb7cEPT/wp6rKXLsEPbD9yJW5P+SuzOF5sgQ9TWZ4S+VX5orW0ybLfzUoszJXqp6qKnOl6uHLMuYV8myk2Vl31kjzgLdB4Zf6UD1rNj3/ANvoQHJNUkmmAAAAAElFTkSuQmCC"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

13
src/assets/icons/library_1.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="53" height="57" viewBox="0 0 53 57" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect y="4" width="53" height="53" fill="url(#pattern0_557_1231)" fill-opacity="0.8"/>
<rect x="3" y="7" width="18" height="17" fill="#333333"/>
<rect x="3" y="36" width="18" height="17" fill="#333333"/>
<rect x="32" y="36" width="18" height="17" fill="#333333"/>
<path d="M32.0005 8.77619C34.0431 6.73381 37.355 6.73389 39.3975 8.77619L40.0701 9.44877L40.742 8.77688C42.7846 6.73429 46.0964 6.73429 48.139 8.77688C50.1814 10.8195 50.1815 14.1314 48.139 16.1739L47.4671 16.8458L47.5341 16.9127L40.1371 24.3097L40.0701 24.2428L40.0025 24.3104L32.6055 16.9134L32.6731 16.8458L32.0005 16.1732C29.9582 14.1306 29.958 10.8187 32.0005 8.77619Z" fill="#333333"/>
<defs>
<pattern id="pattern0_557_1231" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_557_1231" transform="scale(0.0208333)"/>
</pattern>
<image id="image0_557_1231" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOsSURBVHgB7VrNahRBEK5dBRE16GJWElEJQbyYkJziTRRBX0OfQRB8AQmaHLwYX8CD68Z4U/AlBK/JNepBIdElcbOz9me6dntqeqa7JzOTPewHlR5nquuv/6prJRqipqmh6LWibUWRon4K9TQPeJtG/ywwz5Sij4r2tCy0nxXNGjyXLTyfFF1RVJe6Tuq2pZmzDE+jdSErDcspOnq6XVX0IoXnQLfPjYAMPNk0GPJQV9GWKVjghKKn5A5O5MkDWXVW1hbG9wIMPxDPLYsD+PdESr/ICEDfwSMDfA7CL1ki2VE0R+45vaBo36J8UvStacciEaBr+vt1i4Esc0rz3BR90b7EhzUheF93qJMbzNMRgt9ZeHco7uSS0R/Ta5aSIzCjvzHPHfH9G+k/5ssFo5MPwDsnZOxY+KRxNvD8RxC6lu91m5zIQ7ALNXIbKPXULMbdouEozqfwyJ3LKzI+cMn5aTiB9jYlp2k95RmAMw8oHogtH8W+cMlZofg6+WUY5gLz7BkyeCutxAEYcIbse7nPesNo4ICT2+gpl+IQuOTAiTcWI25QthM42ZcoeT60tWOVOgBENHSC27NkT0HwrkHx/f/AkF/zUewLHzkwaIaGU8g8sE5TfCTwPCF4uA9GbbDIXdtbkQ6wYQ8F71/dNrWT4LkqjGcHHpEYrW0hbI78TmEGeBeFjF1HHwTpGcVzLjYUZ8Fdik8XNn6ZLAFeo/j21jEM8zEe2BfKNsgPKxTPPk2HzO0StKr7JBxoUDx6XW3QImUDgjBaHUomc9Pkv78/pvj8llst2ieUcWHiTNE0IuReIDPIdQpbRxjF+xZZ/HzPJc+80HQDDLc5silk+gKL8oKiLzRM5r4qOk+eiSUztSnccJ6rLcOYPLAZGrKZDC7KmL/vKZm/2wg8yP35ApN3Cy4UeYwYCcPHGBVUNYXyrJkEf90i8CIdLkyfRYyU4QMNDy7fw4v1tAL1TKXpqaoyV4qeIitzWQdZaRXAmvaqzMpcqXqaFg+RoM1TsZW56RQ9R6kAIhH9Xx6vojK3QfHIF6HnFV5WVZnbKUHPNoYO0ZfDHQqWI9+Z6Du+59HTT/zSkRN9qgaJIASlq6OIsQPHjbEDxw3+wcBEVberQnY/OPBdvMSPaaGVuQXx7reFb7cEPT/wp6rKXLsEPbD9yJW5P+SuzOF5sgQ9TWZ4S+VX5orW0ybLfzUoszJXqp6qKnOl6uHLMuYV8myk2Vl31kjzgLdB4Zf6UD1rNj3/ANvoQHJNUkmmAAAAAElFTkSuQmCC"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

22
src/assets/icons/profile.svg
View File

@@ -1,22 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2435 5114 c-16 -2 -65 -9 -109 -15 -246 -33 -541 -172 -741 -349
-253 -223 -432 -545 -486 -875 -20 -120 -17 -390 5 -500 71 -361 275 -695 550
-903 l68 -52 -28 -10 c-121 -46 -173 -69 -276 -120 -444 -223 -805 -560 -1062
-990 -210 -352 -328 -745 -352 -1180 l-7 -120 201 0 202 0 0 49 c0 339 141
807 330 1095 291 445 681 750 1156 905 452 148 896 148 1348 0 475 -155 865
-460 1156 -905 189 -288 330 -756 330 -1095 l0 -49 202 0 201 0 -7 120 c-24
435 -142 828 -352 1180 -257 430 -618 767 -1062 990 -103 51 -155 74 -276 120
l-28 10 68 52 c275 208 479 542 550 903 22 110 25 380 5 500 -43 263 -176 542
-352 742 -219 247 -527 421 -848 479 -77 14 -332 26 -386 18z m294 -409 c588
-96 990 -650 896 -1234 -96 -588 -650 -990 -1234 -896 -588 96 -990 650 -896
1234 96 588 650 990 1234 896z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

9
src/assets/icons/profile_0.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

11
src/assets/icons/profile_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

25
src/components/FooterNavigation.vue
View File

@@ -1,6 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { Dialog } from 'vant'
import { showConfirmDialog } from 'vant'
const router = useRouter()
const currentRoute = computed(() => router.currentRoute.value.path)
@@ -13,13 +16,23 @@
router.back()
// emit('clickReturn')
}
const onHome = (nav) => {
showConfirmDialog({
title: 'Tip',
message: 'The current page has not been saved. Do you want to return to the home page?'
})
.then(() => {
router.push(nav.path)
})
.catch(() => {})
}
const navs = [
{ label: 'Home', icon: 'home', size: 73, path: '/home' },
{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
]
const onNavClick = (nav) => {
if (currentRoute.value !== nav.path) router.push(nav.path)
if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : router.push(nav.path)
}
</script>
@@ -31,7 +44,7 @@
:class="{ active: currentRoute === nav.path }"
@click="onNavClick(nav)"
>
<SvgIcon :name="nav.icon" size="55" />
<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
<span class="label">{{ nav.label }}</span>
</div>
</div>
@@ -56,9 +69,9 @@
display: flex;
flex-direction: column;
align-items: center;
&.active > * {
color: #0d99ff;
}
// &.active > * {
// color: #0d99ff;
// }
> .label {
margin-top: 1.6rem;
font-family: satoshiRegular;

5
src/main.ts
View File

@@ -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";

25
src/views/Workshop/uploadFace.vue
View File

@@ -51,8 +51,8 @@
</p>
</div>
<div class="btns">
<button @click="handleUploadFace"><span>Upload Face</span></button>
<button @click="handleFinish"><span>Finish</span></button>
<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
</div>
</div>
@@ -69,8 +69,8 @@
<img :src="faceUrl" />
</div>
<div class="btns">
<button @click="handleUploadFace">Re-try</button>
<button @click="handleGenerate">Generate</button>
<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
</div>
</div>
</div>
@@ -98,7 +98,6 @@
justify-content: center;
> button {
box-sizing: content-box;
width: 40rem;
height: 8.3rem;
border-radius: 0.7rem;
@@ -108,22 +107,6 @@
font-size: 5.5rem;
margin: 0 1.8rem;
color: #fff;
background-color: transparent;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// opacity: 0.1;
backdrop-filter: blur(9.5rem);
background: url('@/assets/images/customer_form_bg.png');
}
&:active {
opacity: 0.7;
}
}
}
}