|
|
|
|
<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 v-if="current == 3">
|
|
|
|
|
<PlaceOrder></PlaceOrder>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import Header from "../components/Header/HeaderView";
|
|
|
|
|
import PlaceOrder from "../components/Order/placeOrder"
|
|
|
|
|
export default {
|
|
|
|
|
name: "sirendingzhi",
|
|
|
|
|
components: { Header ,PlaceOrder},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
current: 3,
|
|
|
|
|
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>
|
