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

Merge branch 'master' of https://gitee.com/lvYeJu/lane-crawford-3

Browse Source
This commit is contained in:
李志鹏
2025-10-16 14:49:09 +08:00
parent 3c1baa843e 4bfe662028
commit b56f8bd03e
9 changed files with 199 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/workshop/selectStyle/selectStyle1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/images/workshop/selectStyle/selectStyle1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/images/workshop/selectStyle/selectStyle1-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/workshop/selectStyle/selectStyle1-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

96
src/components/selectStyle/selectItem.vue
View File

@@ -5,9 +5,14 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
} as any, } as any,
select: {
type: Array,
default: () => {},
} as any,
}) })
//const emit = defineEmits([ const emit = defineEmits([
//]) 'update:select'
])
let data = reactive({ let data = reactive({
}) })
@@ -19,12 +24,8 @@ const setLike = (item,str)=>{
} }
} }
const addLibrary = (item,str)=>{ const setSelectList = (item)=>{
if(str === 'add'){ emit('update:select', {...item})
item.isAdd = true
}else{
item.isAdd = false
}
} }
const deleteStyle = (index)=>{ const deleteStyle = (index)=>{
@@ -55,23 +56,27 @@ const {} = toRefs(data);
<template> <template>
<div class="list"> <div class="list">
<div class="item" v-for="(item,index) in selectList" :key="item.id"> <div class="item" v-for="(item,index) in selectList" :key="item.id">
<div class="imgBox"> <div class="title">look {{ index + 1 }}</div>
<div class="imgBox" @click="setSelectList(item)">
<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt=""> <img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
<div class="icon" v-if="item.id == select?.id">
<SvgIcon name="modelSelected" size="60" />
</div>
</div> </div>
<div class="btn"> <div class="btn">
<div> <div>
<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="40" /> <SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="40" /> <SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
</div> </div>
<div> <div>
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="40" /> <SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
</div> </div>
<!-- <div>
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
</div> -->
<div> <div>
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="40" /> <SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="40" />
</div>
<div>
<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="40" />
</div> </div>
</div> </div>
</div> </div>
@@ -80,36 +85,63 @@ const {} = toRefs(data);
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.list{ .list{
> .item{
width: 100%;
position: relative;
margin-bottom: 5.8rem;
height: 29rem;
display: flex; display: flex;
align-items: center; width: 100%;
&:last-child{ flex-wrap: wrap;
margin-bottom: 0; justify-content: space-between;
> .item{
width: calc(50% - 3.1rem / 2);
position: relative;
margin-bottom: 3.3rem;
display: flex;
flex-direction: column;
> .title{
font-size: 3.6rem;
font-weight: 700;
color: #000;
font-family: 'satoshiMedium';
} }
> .imgBox{ > .imgBox{
flex: 1;
display: flex; display: flex;
height: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
height: 47.2rem;
margin: 2.4rem 0;
background-color: #fff;
justify-content: center;
border: .6px solid #acacac;
border-radius: 1.3px;
position: relative;
> .icon{
position: absolute;
width: 6rem;
height: 6rem;
bottom: -1.8rem;
right: -2.1rem;
}
> img{ > img{
height: 26rem; height: 26rem;
object-fit: cover; object-fit: cover;
// object-fit: contain; // object-fit: contain;
width: calc((100% - 1.4rem * 3) / 4); max-width: 50%;
max-height: 50%;
} }
} }
> .btn{ > .btn{
margin-left: 7rem; display: flex;
align-items: center;
justify-content: flex-end;
> div{ > div{
color: #989898; color: #000;
margin-bottom: 2.6rem; margin-right: 1.2rem;
border-radius: 50%;
width: 6.6rem;
height: 6.6rem;
padding: 1rem;
background-color: #fff;
&:last-child{ &:last-child{
margin-bottom: 0; margin-right: 0rem;
} }
&:hover{ &:hover{
color: #000; color: #000;

2
src/router/index.ts
View File

@@ -5,7 +5,7 @@ const router = createRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
redirect: '/workshop' redirect: '/welcome'
}, },
{ {
path: '/login', path: '/login',

33
src/views/Workshop/selectModel.vue
View File

@@ -6,8 +6,9 @@ import imgReturn from '@/assets/images/workshop/posture/posture_1.png'
const router = useRouter() const router = useRouter()
//const props = defineProps({ //const props = defineProps({
//}) //})
//const emit = defineEmits([ const emit = defineEmits([
//]) 'view-type'
])
let data = reactive({ let data = reactive({
modelList: modelList:
[ [
@@ -43,6 +44,9 @@ let data = reactive({
const setSelectedModelId = (item)=>{ const setSelectedModelId = (item)=>{
data.selectedModelId = item.id; data.selectedModelId = item.id;
} }
onMounted(()=>{
emit('view-type', 1)
})
const toSelectModelContinue = ()=>{ const toSelectModelContinue = ()=>{
router.push({ path: 'selectModelContinue' }) router.push({ path: 'selectModelContinue' })
} }
@@ -54,7 +58,7 @@ defineExpose({})
const { modelList, selectedModelId } = toRefs(data); const { modelList, selectedModelId } = toRefs(data);
</script> </script>
<template> <template>
<header-title /> <header-title style-type="2" />
<div class="selectModel"> <div class="selectModel">
<div class="text"> <div class="text">
<div class="title"> <div class="title">
@@ -75,6 +79,7 @@ const { modelList, selectedModelId } = toRefs(data);
</div> </div>
</div> </div>
</div> </div>
<div class="footer placeholder"></div>
<div class="footer"> <div class="footer">
<button @click.stop="toSelectModelContinue">Continue</button> <button @click.stop="toSelectModelContinue">Continue</button>
</div> </div>
@@ -86,11 +91,13 @@ const { modelList, selectedModelId } = toRefs(data);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
overflow: hidden;
> .text{ > .text{
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-top: 7rem; margin-top: 3.4rem;
margin-bottom: 4rem; margin-bottom: 6rem;
> .title{ > .title{
font-family: satoshiBold; font-family: satoshiBold;
font-weight: 700; font-weight: 700;
@@ -142,20 +149,24 @@ const { modelList, selectedModelId } = toRefs(data);
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 11.2rem; height: 11.2rem;
background-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
background-color: #fff;
box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
&.placeholder{
position: relative;
}
> button { > button {
width: 24.6rem; width: 24.6rem;
height: 5.9rem; height: 5.9rem;
border-radius: 0.7rem; border-radius: 0.7rem;
box-sizing: content-box; box-sizing: content-box;
border: 0.3rem solid #fff; border: 0.3rem solid #000;
background: transparent; background-color: #000;
font-family: satoshiRegular; font-family: satoshiBold;
font-weight: 400; font-weight: 700;
font-size: 4rem; font-size: 3.6rem;
color: #fff; color: #fff;
margin-right: 5rem; margin-right: 5rem;
&:active { &:active {

134
src/views/Workshop/selectModelContinue.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue"; import { onMounted, onUnmounted, reactive, toRefs } from "vue";
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
//const props = defineProps({ //const props = defineProps({
//}) //})
//const emit = defineEmits([ const emit = defineEmits(['view-type'])
//])
// let data = reactive({ // let data = reactive({
// modelList: // modelList:
// [ // [
@@ -24,7 +24,8 @@ const onContinue = ()=>{
} }
onMounted(()=>{ onMounted(() => {
emit('view-type', 1)
}) })
onUnmounted(()=>{ onUnmounted(()=>{
}) })
@@ -32,44 +33,37 @@ defineExpose({})
// const { modelList, selectedModelId } = toRefs(data); // const { modelList, selectedModelId } = toRefs(data);
</script> </script>
<template> <template>
<header-title /> <header-title style-type="2" />
<div class="selectModelContinue"> <div class="selectModelContinue">
<div class="router">
<div>Home</div>
<div>Liberay</div>
</div>
<div class="text"> <div class="text">
<div class="title"> <div class="title">
Go with this Look? Go with this Look?
</div> </div>
</div> </div>
<div class="selectContent"> <div class="selectContent">
<div class="history"></div> <div class="history">
<div class="icon"><SvgIcon name="history" size="35" /></div>
<div class="label">History</div>
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div>
<div class="modelBox"> <div class="modelBox">
<div></div> <div></div>
<div class="model"> <div class="model">
<img src="@/assets/images/workshop/posture/posture_1.png" /> <img src="@/assets/images/workshop/posture/posture_1.png" />
<div class="operation"> <div class="operation">
<div class="iconItem"> <div><SvgIcon name="love_0" size="35" /></div>
<SvgIcon name="noLike" size="30" /> <div><SvgIcon name="reload" size="35" /></div>
</div> <div><SvgIcon name="download" size="35" /></div>
<div class="iconItem">
<SvgIcon name="noLike" size="30" />
</div>
<div class="iconItem">
<SvgIcon name="noLike" size="30" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="again"> <div class="again">
Re-try with a new model? <div>Re-try?</div>
<div @click="onContinue">Continue</div>
</div> </div>
</div> </div>
</div> </div>
<div class="footer"> <footer-navigation is-placeholder />
<button @click="onContinue">Continue</button>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.selectModelContinue{ .selectModelContinue{
@@ -78,24 +72,10 @@ defineExpose({})
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .router{
margin-top: 3rem;
margin-left: 5.4rem;
display: flex;
> div{
margin-right: 4.4rem;
font-size: 3rem;
font-family: satoshiRegular;
font-weight: 400;
&:last-child{
margin-right: 0;
}
}
}
> .text{ > .text{
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-top: 6rem; margin-top: 4.3rem;
> .title{ > .title{
font-family: satoshiBold; font-family: satoshiBold;
font-weight: 700; font-weight: 700;
@@ -107,15 +87,29 @@ defineExpose({})
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 14.1rem; padding: 0 14.1rem;
margin-top: 1.5rem; margin-top: 4.8rem;
> .history{ > .history{
width: 30.2rem;
height: 6.52rem;
border-radius: 0.91rem;
border: 0.24rem solid #000;
display: flex;
align-items: center;
> .icon {
margin: 0 1.8rem;
}
> .label {
flex: 1;
font-family: satoshiRegular;
font-size: 2.97rem;
color: #000;
}
} }
> .modelBox{ > .modelBox{
margin-top: 2.5rem; margin-top: 2.5rem;
> .model{ > .model{
border: 2px solid #D9D9D9; border: 2px solid #D9D9D9;
height: 79.8rem; height: 110rem;
position: relative; position: relative;
width: 100%; width: 100%;
> img{ > img{
@@ -128,52 +122,38 @@ defineExpose({})
display: flex; display: flex;
bottom: 2rem; bottom: 2rem;
right: 0rem; right: 0rem;
> .iconItem{ > div {
border-radius: .96rem; margin-right: 1.5rem;
font-weight: 600; width: 6.2rem;
padding: 1.2rem; height: 6.2rem;
border: 2px solid #000; border-radius: 1rem;
margin-right: 1.4rem; border: 0.2rem solid #000;
display: flex;
align-items: center;
justify-content: center;
} }
} }
} }
} }
> .again{ > .again{
margin-top: 5.6rem; margin-top: 4.4rem;
font-family: satoshiMedium; font-family: satoshiMedium;
padding: 0 10.5rem;
line-height: 10.4rem; line-height: 10.4rem;
background-color: #000;
color: #fff; color: #fff;
border-radius: 10rem; font-size: 4.2rem;
font-size: 4.8rem;
}
}
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 11.2rem;
background-color: #000;
display: flex; display: flex;
align-items: center; justify-content: center;
justify-content: flex-end; > div{
> button { width: 36rem;
width: 24.6rem; border-radius: 15px;
height: 5.9rem; background-color: #000;
border-radius: 0.7rem; text-align: center;
box-sizing: content-box; margin-right: 3.9rem;
border: 0.3rem solid #fff; justify-content: center;
background: transparent; &:last-child{
font-family: satoshiRegular; margin-right: 0;
font-weight: 400; }
font-size: 4rem; }
color: #fff;
margin-right: 5rem;
&:active {
opacity: 0.7;
} }
} }
} }

90
src/views/Workshop/selectStyle.vue
View File

@@ -3,23 +3,27 @@ import { onMounted, onUnmounted, reactive, toRefs } from "vue";
import SelectItem from "@/components/selectStyle/selectItem.vue"; import SelectItem from "@/components/selectStyle/selectItem.vue";
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import editProfile1 from '@/assets/images/editProfile1.jpg' import editProfile1_1 from '@/assets/images/workshop/selectStyle/selectStyle1-1.png'
import editProfile1_2 from '@/assets/images/workshop/selectStyle/selectStyle1-2.png'
import editProfile1_3 from '@/assets/images/workshop/selectStyle/selectStyle1-3.png'
import editProfile1_4 from '@/assets/images/workshop/selectStyle/selectStyle1-4.png'
const router = useRouter() const router = useRouter()
//const props = defineProps({ //const props = defineProps({
//}) //})
//const emit = defineEmits([ const emit = defineEmits([
//]) 'view-type'
])
let data = reactive({ let data = reactive({
selectList: selectList:
[ [
{ {
id:1, id:1,
imgList:[ imgList:[
editProfile1, editProfile1_1,
editProfile1, editProfile1_2,
editProfile1, editProfile1_3,
editProfile1, editProfile1_4,
], ],
isLike: false, isLike: false,
isAdd: false, isAdd: false,
@@ -27,50 +31,54 @@ let data = reactive({
{ {
id:2, id:2,
imgList:[ imgList:[
editProfile1, editProfile1_1,
editProfile1, editProfile1_2,
editProfile1, editProfile1_3,
editProfile1, editProfile1_4,
], ],
isLike: false, isLike: false,
isAdd: false, isAdd: false,
}, },
{ {
id:2, id:3,
imgList:[ imgList:[
editProfile1, editProfile1_1,
editProfile1, editProfile1_2,
editProfile1, editProfile1_3,
editProfile1, editProfile1_4,
], ],
isLike: false, isLike: false,
isAdd: false, isAdd: false,
}, },
{ {
id:2, id:4,
imgList:[ imgList:[
editProfile1, editProfile1_1,
editProfile1, editProfile1_2,
editProfile1, editProfile1_3,
editProfile1, editProfile1_4,
], ],
isLike: false, isLike: false,
isAdd: false, isAdd: false,
}, },
] ],
select:{
}
}) })
const toSelectModel = ()=>{ const toSelectModel = ()=>{
router.push({ path: 'selectModel' }) router.push({ path: 'selectModel' })
} }
onMounted(()=>{ onMounted(()=>{
emit('view-type', 1)
}) })
onUnmounted(()=>{ onUnmounted(()=>{
}) })
defineExpose({}) defineExpose({})
const { selectList } = toRefs(data); const { selectList, select } = toRefs(data);
</script> </script>
<template> <template>
<header-title /> <header-title style-type="2" />
<div class="selectStyle"> <div class="selectStyle">
<div class="text"> <div class="text">
<div class="title"> <div class="title">
@@ -81,23 +89,32 @@ const { selectList } = toRefs(data);
</div> </div>
</div> </div>
<div class="selectContent"> <div class="selectContent">
<SelectItem :selectList="selectList" /> <SelectItem :selectList="selectList" v-model:select="select" />
</div> </div>
</div> </div>
<div class="footer placeholder"></div>
<div class="footer"> <div class="footer">
<button @click.stop="toSelectModel">Continue</button> <button @click.stop="toSelectModel">Continue</button>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.header-title {
--header-title-background: #f6f6f6;
}
.selectStyle{ .selectStyle{
width: 100%; width: 100%;
flex: 1;
// height: 100%; // height: 100%;
position: relative; position: relative;
display: flex;
flex-direction: column;
background-color: #f6f6f6;
overflow: hidden;
> .text{ > .text{
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-top: 7rem; margin-top: 3.4rem;
margin-bottom: 4.8rem; margin-bottom: 7.2rem;
> .title{ > .title{
font-family: satoshiBold; font-family: satoshiBold;
font-weight: 700; font-weight: 700;
@@ -112,7 +129,9 @@ const { selectList } = toRefs(data);
} }
} }
.selectContent{ .selectContent{
padding: 0 4rem; padding: 0 3.5rem;
flex: 1;
overflow: auto;
} }
} }
.footer { .footer {
@@ -121,20 +140,23 @@ const { selectList } = toRefs(data);
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 11.2rem; height: 11.2rem;
background-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
background-color: #f6f6f6;
&.placeholder{
position: relative;
}
> button { > button {
width: 24.6rem; width: 24.6rem;
height: 5.9rem; height: 5.9rem;
border-radius: 0.7rem; border-radius: 0.7rem;
box-sizing: content-box; box-sizing: content-box;
border: 0.3rem solid #fff; border: 0.3rem solid #000;
background: transparent; background-color: #000;
font-family: satoshiRegular; font-family: satoshiBold;
font-weight: 400; font-weight: 700;
font-size: 4rem; font-size: 3.6rem;
color: #fff; color: #fff;
margin-right: 5rem; margin-right: 5rem;
&:active { &:active {