parent
be9e5b5c8c
commit
ff255bc15c
9 changed files with 1072 additions and 24 deletions
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,482 @@ |
|||||||
|
<template> |
||||||
|
<div class="clothType"> |
||||||
|
|
||||||
|
<Header fontColor="#000"></Header> |
||||||
|
<div class="main"> |
||||||
|
<div class="jz d-flex"> |
||||||
|
<el-menu |
||||||
|
default-active="2" |
||||||
|
class="el-menu-vertical-demo" |
||||||
|
@open="handleOpen" |
||||||
|
@close="handleClose" |
||||||
|
style="width: 10%; min-width: 140px" |
||||||
|
:unique-opened="true" |
||||||
|
> |
||||||
|
<el-submenu v-for="(item, i) in typeData" :key="i" index="i+1"> |
||||||
|
<template slot="title"> |
||||||
|
<i class="el-icon-male"></i> |
||||||
|
<span>{{ item.name }}</span> |
||||||
|
</template> |
||||||
|
<el-menu-item-group v-for="(j, i2) in item.childrens" :key="i2"> |
||||||
|
<template slot="title">{{ j.name }}</template> |
||||||
|
<el-menu-item |
||||||
|
index="1-1" |
||||||
|
v-for="(k, i3) in j.childrens" |
||||||
|
:key="i3" |
||||||
|
>{{ k.name }}</el-menu-item |
||||||
|
> |
||||||
|
</el-menu-item-group> |
||||||
|
</el-submenu> |
||||||
|
<!-- <el-menu-item index="2"> |
||||||
|
<i class="el-icon-female"></i> |
||||||
|
<span slot="title">女装</span> |
||||||
|
</el-menu-item> |
||||||
|
<el-menu-item index="3"> |
||||||
|
<i class="el-icon-lollipop"></i> |
||||||
|
<span slot="title">童装</span> |
||||||
|
</el-menu-item> --> |
||||||
|
</el-menu> |
||||||
|
<div class="right"> |
||||||
|
<div class="name d-flex"> |
||||||
|
<span>Polo衫</span> |
||||||
|
<div class="d-flex"> |
||||||
|
<el-dropdown> |
||||||
|
<span class="el-dropdown-link"> |
||||||
|
综合<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</span> |
||||||
|
<el-dropdown-menu slot="dropdown"> |
||||||
|
<el-dropdown-item>按销量排序</el-dropdown-item> |
||||||
|
<el-dropdown-item>按评分排序</el-dropdown-item> |
||||||
|
<el-dropdown-item>按价格排序</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
<div class="iconDiv d-flex"> |
||||||
|
<span>价格</span> |
||||||
|
<div class="icon d-flex"> |
||||||
|
<i class="el-icon-arrow-up"></i> |
||||||
|
<i class="el-icon-arrow-down"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="clothDiv d-flex"> |
||||||
|
<div |
||||||
|
class="item" |
||||||
|
v-for="(item, index) in clothsList" |
||||||
|
:key="index" |
||||||
|
@click="clothDetails(item)" |
||||||
|
> |
||||||
|
<div class="imgDiv"> |
||||||
|
<img :src="item.imgUrl" alt="" /> |
||||||
|
<!-- <div class="button c_000 f_16" @click="clothChoice(item)"> |
||||||
|
点击选择 |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
<div class="clothTitle"> |
||||||
|
<p class="price d-flex"> |
||||||
|
<span class="f_16 c_333">￥{{ item.currentPrice }}</span> |
||||||
|
<span class="f_12 c_999">￥{{ item.historicalPrice }}</span> |
||||||
|
</p> |
||||||
|
<p class="f_12 c_333">{{ item.title }}</p> |
||||||
|
<p class="f_12 c_9a9b9b">热度{{ item.heat }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Header from '../components/Header/HeaderView' |
||||||
|
export default { |
||||||
|
name:"clothType", |
||||||
|
components: {Header}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 右侧展示衣服数据 |
||||||
|
clothsList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 7, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 8, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 10, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
], |
||||||
|
// 菜单数据 |
||||||
|
typeData: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "男装", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 1 - 1, |
||||||
|
name: "上衣", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 1 - 1 - 1, |
||||||
|
name: "衬衫", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 1 - 2, |
||||||
|
name: "卫衣", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 1 - 3, |
||||||
|
name: "Polo衫", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 1 - 4, |
||||||
|
name: "针织衫", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 2, |
||||||
|
name: "外套", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 1 - 2 - 1, |
||||||
|
name: "夹克", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 2 - 2, |
||||||
|
name: "羽绒服", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 2 - 3, |
||||||
|
name: "风衣", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3, |
||||||
|
name: "裤子", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 1 - 3 - 1, |
||||||
|
name: "休闲裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 2, |
||||||
|
name: "西裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 3, |
||||||
|
name: "工装裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 4, |
||||||
|
name: "运动裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 5, |
||||||
|
name: "卫裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 6, |
||||||
|
name: "九分裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 7, |
||||||
|
name: "短裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1 - 3 - 8, |
||||||
|
name: "哈伦裤", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: "女装", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 2 - 1, |
||||||
|
name: "上衣", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 2 - 1 - 1, |
||||||
|
name: "衬衫", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 1 - 2, |
||||||
|
name: "卫衣", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 1 - 3, |
||||||
|
name: "Polo衫", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 1 - 4, |
||||||
|
name: "针织衫", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 2, |
||||||
|
name: "外套", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 2 - 2 - 1, |
||||||
|
name: "夹克", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 2 - 2, |
||||||
|
name: "羽绒服", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 2 - 3, |
||||||
|
name: "风衣", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3, |
||||||
|
name: "裤子", |
||||||
|
childrens: [ |
||||||
|
{ |
||||||
|
id: 2 - 3 - 1, |
||||||
|
name: "休闲裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 2, |
||||||
|
name: "西裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 3, |
||||||
|
name: "工装裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 4, |
||||||
|
name: "运动裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 5, |
||||||
|
name: "卫裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 6, |
||||||
|
name: "九分裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 7, |
||||||
|
name: "短裤", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2 - 3 - 8, |
||||||
|
name: "哈伦裤", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleOpen(key, keyPath) { |
||||||
|
console.log(key, keyPath); |
||||||
|
}, |
||||||
|
handleClose(key, keyPath) { |
||||||
|
console.log(key, keyPath); |
||||||
|
}, |
||||||
|
clothChoice(item) { |
||||||
|
this.dialogModel.imgUrl = item.imgUrl; |
||||||
|
this.dialogModel.name = item.title; |
||||||
|
this.dialogModel.price = item.currentPrice; |
||||||
|
this.dialogVisible = true; |
||||||
|
}, |
||||||
|
dialogSure() { |
||||||
|
this.dialogVisible = false; |
||||||
|
this.current = 1; |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '../assets/common.css'; |
||||||
|
</style> |
||||||
|
<style> |
||||||
|
.clothType .top .middle .router-link-exact-active.router-link-active { |
||||||
|
border-bottom: 2px solid #000; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="less" scoped> |
||||||
|
.clothType { |
||||||
|
.main { |
||||||
|
padding-top: 100px; |
||||||
|
|
||||||
|
.right { |
||||||
|
width: 90%; |
||||||
|
padding-left: 20px; |
||||||
|
min-width: 1290px; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.name { |
||||||
|
height: 22px; |
||||||
|
font-size: 22px; |
||||||
|
line-height: 22px; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
color: #000; |
||||||
|
margin-bottom: 20px; |
||||||
|
.d-flex { |
||||||
|
align-items: center; |
||||||
|
.el-dropdown { |
||||||
|
margin-right: 20px; |
||||||
|
.el-dropdown-link { |
||||||
|
color: #000; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.iconDiv { |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 14px; |
||||||
|
span { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
i { |
||||||
|
font-size: 7px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.clothDiv { |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
.item { |
||||||
|
width: 308px; |
||||||
|
height: 562px; |
||||||
|
margin-bottom: 30px; |
||||||
|
margin-right: 10px; |
||||||
|
.imgDiv { |
||||||
|
position: relative; |
||||||
|
img { |
||||||
|
width: 308px; |
||||||
|
height: 462px; |
||||||
|
} |
||||||
|
&:hover .button { |
||||||
|
opacity: 1; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.button { |
||||||
|
position: absolute; |
||||||
|
opacity: 0; |
||||||
|
transition: all 0.3s linear; |
||||||
|
width: 152px; |
||||||
|
height: 51px; |
||||||
|
line-height: 51px; |
||||||
|
background: #000000; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.clothTitle { |
||||||
|
width: 100%; |
||||||
|
height: 100px; |
||||||
|
.price { |
||||||
|
align-items: center; |
||||||
|
padding-left: 6px; |
||||||
|
.f_16 { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.f_12 { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
} |
||||||
|
& > .f_12 { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,569 @@ |
|||||||
|
<template> |
||||||
|
<div class="sirendingzhi"> |
||||||
|
<div class="stepsDiv"> |
||||||
|
<Header fontColor="#fff"></Header> |
||||||
|
|
||||||
|
<!-- <el-steps :active="2"> |
||||||
|
<el-step title="服装类型" description="选择定制的服装类型"></el-step> |
||||||
|
<el-step title="款式模块" description="更改各款式模块"></el-step> |
||||||
|
<el-step title="量体数据" description="一人一版量体定制"></el-step> |
||||||
|
<el-step title="购买下单" description="工期视具体情况而定"></el-step> |
||||||
|
</el-steps> --> |
||||||
|
<a-steps :current="current"> |
||||||
|
<a-step> |
||||||
|
<template #title>服装类型</template> |
||||||
|
<template #description> |
||||||
|
<span>选择定制的服装类型</span> |
||||||
|
</template> |
||||||
|
</a-step> |
||||||
|
<a-step title="款式模块" description="更改各款式模块" /> |
||||||
|
<a-step title="量体数据" description="一人一版量体定制" /><a-step |
||||||
|
title="购买下单" |
||||||
|
description="工期视具体情况而定" |
||||||
|
/> |
||||||
|
</a-steps> |
||||||
|
</div> |
||||||
|
<div class="steps__wrapper" v-if="current == 0"> |
||||||
|
<div class="title"> |
||||||
|
<div class="jz"> |
||||||
|
<p>服装类型</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="main"> |
||||||
|
<div class="jz d-flex"> |
||||||
|
<el-menu |
||||||
|
default-active="2" |
||||||
|
class="el-menu-vertical-demo" |
||||||
|
@open="handleOpen" |
||||||
|
@close="handleClose" |
||||||
|
style="width: 10%; min-width: 140px" |
||||||
|
> |
||||||
|
<el-submenu index="1"> |
||||||
|
<template slot="title"> |
||||||
|
<i class="el-icon-male"></i> |
||||||
|
<span>男装</span> |
||||||
|
</template> |
||||||
|
<el-menu-item index="1-1">衬衫</el-menu-item> |
||||||
|
<el-menu-item index="1-2">卫衣</el-menu-item> |
||||||
|
<el-menu-item index="1-3">夹克</el-menu-item> |
||||||
|
<el-menu-item index="1-4">T恤</el-menu-item> |
||||||
|
<el-menu-item index="1-5">Polo衫</el-menu-item> |
||||||
|
<el-menu-item index="1-6">针织衫</el-menu-item> |
||||||
|
<el-menu-item index="1-7">羽绒服</el-menu-item> |
||||||
|
<el-menu-item index="1-8">风衣</el-menu-item> |
||||||
|
<el-menu-item index="1-9">西服</el-menu-item> |
||||||
|
<el-menu-item index="1-10">休闲裤</el-menu-item> |
||||||
|
<el-menu-item index="1-11">西裤</el-menu-item> |
||||||
|
<el-menu-item index="1-12">工装裤</el-menu-item> |
||||||
|
<el-menu-item index="1-13">运动裤</el-menu-item> |
||||||
|
<el-menu-item index="1-14">卫裤</el-menu-item> |
||||||
|
<el-menu-item index="1-15">九分裤</el-menu-item> |
||||||
|
<el-menu-item index="1-16">短裤</el-menu-item> |
||||||
|
<el-menu-item index="1-17">哈伦裤</el-menu-item> |
||||||
|
</el-submenu> |
||||||
|
<el-menu-item index="2"> |
||||||
|
<i class="el-icon-female"></i> |
||||||
|
<span slot="title">女装</span> |
||||||
|
</el-menu-item> |
||||||
|
<el-menu-item index="3"> |
||||||
|
<i class="el-icon-lollipop"></i> |
||||||
|
<span slot="title">童装</span> |
||||||
|
</el-menu-item> |
||||||
|
</el-menu> |
||||||
|
<div class="right"> |
||||||
|
<div class="name d-flex"> |
||||||
|
<span>Polo衫</span> |
||||||
|
<div class="d-flex"> |
||||||
|
<el-dropdown> |
||||||
|
<span class="el-dropdown-link"> |
||||||
|
综合<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</span> |
||||||
|
<el-dropdown-menu slot="dropdown"> |
||||||
|
<el-dropdown-item>按销量排序</el-dropdown-item> |
||||||
|
<el-dropdown-item>按评分排序</el-dropdown-item> |
||||||
|
<el-dropdown-item>按价格排序</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
<div class="iconDiv d-flex"> |
||||||
|
<span>价格</span> |
||||||
|
<div class="icon d-flex"> |
||||||
|
<i class="el-icon-arrow-up"></i> |
||||||
|
<i class="el-icon-arrow-down"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="clothDiv d-flex"> |
||||||
|
<div |
||||||
|
class="item" |
||||||
|
v-for="(item, index) in clothsList" |
||||||
|
:key="index" |
||||||
|
> |
||||||
|
<div class="imgDiv"> |
||||||
|
<img :src="item.imgUrl" alt="" /> |
||||||
|
<div class="button c_000 f_16" @click="clothChoice(item)"> |
||||||
|
点击选择 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="clothTitle"> |
||||||
|
<p class="price d-flex"> |
||||||
|
<span class="f_16 c_333">￥{{ item.currentPrice }}</span> |
||||||
|
<span class="f_12 c_999">￥{{ item.historicalPrice }}</span> |
||||||
|
</p> |
||||||
|
<p class="f_12 c_333">{{ item.title }}</p> |
||||||
|
<p class="f_12 c_9a9b9b">热度{{ item.heat }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-dialog |
||||||
|
:visible.sync="dialogVisible" |
||||||
|
width="30%" |
||||||
|
:close-on-click-modal="true" |
||||||
|
:lock-scroll="true" |
||||||
|
> |
||||||
|
<div class="dialogTitle f_24">您确定要选择此款式吗？</div> |
||||||
|
<div class="dialogDiv d-flex"> |
||||||
|
<!-- <img src="" alt="" /> --> |
||||||
|
<div class="img"></div> |
||||||
|
<div class="dialogName c_000 f_16">款式#{{ dialogModel.name }}</div> |
||||||
|
<div class="dialogPrice c_999 f_14"> |
||||||
|
基础价：¥ {{ dialogModel.price }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer d-flex"> |
||||||
|
<div |
||||||
|
@click="dialogVisible = false" |
||||||
|
class="dialogButton default f_14" |
||||||
|
> |
||||||
|
重新选择 |
||||||
|
</div> |
||||||
|
<div |
||||||
|
type="primary" |
||||||
|
@click="dialogSure" |
||||||
|
class="dialogButton primary f_14" |
||||||
|
> |
||||||
|
确定，下一步 |
||||||
|
</div> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="steps__wrapper" v-if="current == 1"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Header from "../components/Header/HeaderView"; |
||||||
|
export default { |
||||||
|
name: "sirendingzhi", |
||||||
|
components: { Header }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
current: 0, |
||||||
|
dialogVisible: false, |
||||||
|
dialogModel: { |
||||||
|
imgUrl: "", |
||||||
|
name: "", |
||||||
|
price: 0, |
||||||
|
}, |
||||||
|
clothsList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 7, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 8, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 10, |
||||||
|
imgUrl: require("../assets/cloth.png"), |
||||||
|
currentPrice: 599, |
||||||
|
historicalPrice: 799, |
||||||
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
||||||
|
heat: 3200, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleOpen(key, keyPath) { |
||||||
|
console.log(key, keyPath); |
||||||
|
}, |
||||||
|
handleClose(key, keyPath) { |
||||||
|
console.log(key, keyPath); |
||||||
|
}, |
||||||
|
// onChange(current) { |
||||||
|
// console.log("onChange:", current); |
||||||
|
// this.current = current; |
||||||
|
// }, |
||||||
|
clothChoice(item) { |
||||||
|
this.dialogModel.imgUrl = item.imgUrl; |
||||||
|
this.dialogModel.name = item.title; |
||||||
|
this.dialogModel.price = item.currentPrice; |
||||||
|
this.dialogVisible = true; |
||||||
|
}, |
||||||
|
dialogSure() { |
||||||
|
this.dialogVisible = false; |
||||||
|
this.current = 1; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<!-- <style> |
||||||
|
.TypeView .top .middle .router-link-exact-active.router-link-active { |
||||||
|
border-bottom: 2px solid #000; |
||||||
|
} |
||||||
|
</style> --> |
||||||
|
<style scoped> |
||||||
|
@import '../assets/common.css'; |
||||||
|
</style> |
||||||
|
<style lang="less" scoped> |
||||||
|
.stepsDiv { |
||||||
|
background: url("../assets/bg04.png"); |
||||||
|
padding-bottom: 50px; |
||||||
|
.ant-steps { |
||||||
|
padding-top: 120px; |
||||||
|
width: 60%; |
||||||
|
margin: 0 auto; |
||||||
|
min-width: 1000px; |
||||||
|
.ant-steps-item-finish { |
||||||
|
&/deep/ .ant-steps-item-icon { |
||||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||||
|
border-color: #c8a985; |
||||||
|
i { |
||||||
|
color: #c8a985; |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-title { |
||||||
|
color: #fff; |
||||||
|
&::after { |
||||||
|
background-color: #c8a985; |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-description { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
.ant-steps-item-process { |
||||||
|
&/deep/ .ant-steps-item-icon { |
||||||
|
background-color: #c8a985; |
||||||
|
border-color: #c8a985; |
||||||
|
i { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-title { |
||||||
|
color: #c8a985; |
||||||
|
&::after { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-description { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
.ant-steps-item-wait { |
||||||
|
&/deep/ .ant-steps-item-icon { |
||||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||||
|
border-color: rgba(255, 255, 255, 0.6); |
||||||
|
& .ant-steps-icon { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-title { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
&::after { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
&/deep/ .ant-steps-item-description { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
.ant-steps-item-container:hover { |
||||||
|
& /deep/ .ant-steps-item-icon { |
||||||
|
background-color: #c8a985; |
||||||
|
border-color: #c8a985; |
||||||
|
i { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
& /deep/ .ant-steps-item-title { |
||||||
|
color: #c8a985; |
||||||
|
&::after { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
& /deep/ .ant-steps-item-description { |
||||||
|
color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.el-steps { |
||||||
|
padding-top: 100px; |
||||||
|
width: 60%; |
||||||
|
margin: 0 auto; |
||||||
|
min-width: 1000px; |
||||||
|
& /deep/ .is-process { |
||||||
|
color: #c8a985; |
||||||
|
.is-text { |
||||||
|
border-color: #c8a985; |
||||||
|
} |
||||||
|
.el-step__icon { |
||||||
|
background-color: #c8a985; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
& /deep/ .is-wait { |
||||||
|
color: rgba(255, 255, 255, 0.4); |
||||||
|
.is-text { |
||||||
|
border-color: rgba(255, 255, 255, 0.4); |
||||||
|
} |
||||||
|
.el-step__icon { |
||||||
|
background-color: rgba(255, 255, 255, 0.4); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
& /deep/ .is-finish { |
||||||
|
color: #ffffff; |
||||||
|
.is-text { |
||||||
|
border-color: #c8a985; |
||||||
|
} |
||||||
|
& /deep/ .el-step__line { |
||||||
|
border-color: #c8a985; |
||||||
|
} |
||||||
|
.el-step__icon { |
||||||
|
background-color: #ffffff; |
||||||
|
color: #c8a985; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.steps__wrapper { |
||||||
|
.title { |
||||||
|
font-size: 26px; |
||||||
|
font-weight: 600; |
||||||
|
color: #000000; |
||||||
|
line-height: 22px; |
||||||
|
margin-bottom: 20px; |
||||||
|
margin-top: 60px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 90%; |
||||||
|
padding-left: 20px; |
||||||
|
min-width: 1290px; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.name { |
||||||
|
height: 22px; |
||||||
|
font-size: 22px; |
||||||
|
line-height: 22px; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
color: #000; |
||||||
|
margin-bottom: 20px; |
||||||
|
.d-flex { |
||||||
|
align-items: center; |
||||||
|
.el-dropdown { |
||||||
|
margin-right: 20px; |
||||||
|
.el-dropdown-link { |
||||||
|
color: #000; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.iconDiv { |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 14px; |
||||||
|
span { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
i { |
||||||
|
font-size: 7px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.clothDiv { |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
.item { |
||||||
|
width: 308px; |
||||||
|
height: 562px; |
||||||
|
margin-bottom: 30px; |
||||||
|
margin-right: 10px; |
||||||
|
.imgDiv { |
||||||
|
position: relative; |
||||||
|
img { |
||||||
|
width: 308px; |
||||||
|
height: 462px; |
||||||
|
} |
||||||
|
&:hover .button { |
||||||
|
opacity: 1; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.button { |
||||||
|
position: absolute; |
||||||
|
opacity: 0; |
||||||
|
transition: all 0.3s linear; |
||||||
|
width: 152px; |
||||||
|
height: 51px; |
||||||
|
line-height: 51px; |
||||||
|
background: #000000; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.clothTitle { |
||||||
|
width: 100%; |
||||||
|
height: 100px; |
||||||
|
.price { |
||||||
|
align-items: center; |
||||||
|
padding-left: 6px; |
||||||
|
.f_16 { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.f_12 { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
} |
||||||
|
& > .f_12 { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__wrapper { |
||||||
|
&/deep/ .el-dialog { |
||||||
|
width: 816px !important; |
||||||
|
.dialogTitle { |
||||||
|
text-align: center; |
||||||
|
color: #1b1b1b; |
||||||
|
line-height: 36px; |
||||||
|
} |
||||||
|
.dialogDiv { |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
padding: 30px 50px 10px 50px; |
||||||
|
.img { |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
background: #d9d9d9; |
||||||
|
} |
||||||
|
.dialogName { |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.dialog-footer { |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.dialogButton { |
||||||
|
width: 128px; |
||||||
|
height: 40px; |
||||||
|
text-align: center; |
||||||
|
line-height: 38px; |
||||||
|
transition: all 0.2s; |
||||||
|
} |
||||||
|
.default { |
||||||
|
border: 1px solid #1b1b1b; |
||||||
|
color: #1b1b1b; |
||||||
|
margin-right: 20px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #fff; |
||||||
|
color: #fff; |
||||||
|
background-color: #1b1b1b; |
||||||
|
} |
||||||
|
} |
||||||
|
.primary { |
||||||
|
background: #1b1b1b; |
||||||
|
border: 2px solid #1b1b1b; |
||||||
|
color: #e5dfd9; |
||||||
|
&:hover { |
||||||
|
// border-color: #1b1b1b; |
||||||
|
// color: #1b1b1b; |
||||||
|
// background-color: #fff; |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue