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