diff --git a/ant-design-vue-jeecg/src/config/router.config.js b/ant-design-vue-jeecg/src/config/router.config.js
index 932ab936..eba4194f 100644
--- a/ant-design-vue-jeecg/src/config/router.config.js
+++ b/ant-design-vue-jeecg/src/config/router.config.js
@@ -621,7 +621,15 @@ export const constantRouterMap = [
     component: () => import(/* webpackChunkName: "fail" */ '@/views/seknowgroup/SeKnowAtlasList')
   },
   {
-    path: '/shopping/shopHome',//这里是你需要设置新窗口打开的页面的路径
-    component: () => import('@/views/shopping/shopHome')
+    path: '/shopping/shopHome',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/shopHome'),
+  },
+  {
+    path: '/shopping/views/clothType',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/pages/clothType'),
+  },
+  {
+    path: '/shopping/views/sirendingzhi',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/pages/sirendingzhi'),
   },
 ]
diff --git a/ant-design-vue-jeecg/src/main.js b/ant-design-vue-jeecg/src/main.js
index 8271b441..d539d2a6 100644
--- a/ant-design-vue-jeecg/src/main.js
+++ b/ant-design-vue-jeecg/src/main.js
@@ -10,7 +10,7 @@ import axios from 'axios'
 import { VueAxios } from "@/utils/request"
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-
+import './views/shopping/assets/iconfont/iconfont.css'//引入商城所需图标
 // YU-优化
  require('@jeecg/antd-online-mini')
  require('@jeecg/antd-online-mini/dist/OnlineForm.css')
diff --git a/ant-design-vue-jeecg/src/views/shopping/assets/bg04.png b/ant-design-vue-jeecg/src/views/shopping/assets/bg04.png
new file mode 100644
index 00000000..72bcb2d6
Binary files /dev/null and b/ant-design-vue-jeecg/src/views/shopping/assets/bg04.png differ
diff --git a/ant-design-vue-jeecg/src/views/shopping/assets/cloth.png b/ant-design-vue-jeecg/src/views/shopping/assets/cloth.png
new file mode 100644
index 00000000..f79b3896
Binary files /dev/null and b/ant-design-vue-jeecg/src/views/shopping/assets/cloth.png differ
diff --git a/ant-design-vue-jeecg/src/views/shopping/assets/common.css b/ant-design-vue-jeecg/src/views/shopping/assets/common.css
index f7dbad78..8e571cd7 100644
--- a/ant-design-vue-jeecg/src/views/shopping/assets/common.css
+++ b/ant-design-vue-jeecg/src/views/shopping/assets/common.css
@@ -37,19 +37,17 @@ a {
 .f_18 {
   font-size: 18px;
 }
-
 .f_20 {
   font-size: 20px;
 }
-
 .f_22 {
   font-size: 22px;
 }
-
 .f_24 {
   font-size: 24px;
 }
 
+
 .f_30 {
   font-size: 30px;
 }
diff --git a/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue b/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
index d4125af1..c362e53a 100644
--- a/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
+++ b/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
@@ -5,11 +5,11 @@
       <span class="title">黄淮服装定制商城</span>
     </div>
     <div class="middle d-flex">
-      <router-link to="/" :style="{ color: fontColor }">首页</router-link>
-      <router-link to="fzlx" :style="{ color: fontColor }"
+      <router-link to="/shopping/shopHome" :style="{ color: fontColor }">首页</router-link>
+      <router-link to="/shopping/views/clothType" :style="{ color: fontColor }"
         >服装类型</router-link
       >
-      <router-link to="srdz" :style="{ color: fontColor }"
+      <router-link to="/shopping/views/sirendingzhi" :style="{ color: fontColor }"
         >私人定制</router-link
       >
       <router-link to="cytj" :style="{ color: fontColor }"
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue b/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
new file mode 100644
index 00000000..5ee3bade
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
@@ -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>
\ No newline at end of file
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue b/ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue
new file mode 100644
index 00000000..c1544522
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue
@@ -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>
diff --git a/ant-design-vue-jeecg/src/views/shopping/shopHome.vue b/ant-design-vue-jeecg/src/views/shopping/shopHome.vue
index 682d4582..fa8082ec 100644
--- a/ant-design-vue-jeecg/src/views/shopping/shopHome.vue
+++ b/ant-design-vue-jeecg/src/views/shopping/shopHome.vue
@@ -257,6 +257,7 @@
       return {
         vh: 0,
         activeName: "first",
+        // 轮播图数据
         imgList: [
           require("./assets/bg.png"),
           require("./assets/bg02.png"),
@@ -288,6 +289,7 @@
             desc: "丰富款式 多样呈现",
           },
         ],
+        // 最新定制数据
         clothList: [
           {
             id: 1,
@@ -319,6 +321,7 @@
           //   price: "1xx0.00",
           // }
         ],
+        // 推荐商品数据
         clothList2: [
           {
             id: 1,
@@ -683,21 +686,6 @@
     position: absolute;
     bottom: 5%;
   }
-  .f_12 {
-    font-size: 12px;
-  }
-  .f_18 {
-    font-size: 18px;
-  }
-  .f_20 {
-    font-size: 20px;
-  }
-  .f_22 {
-    font-size: 22px;
-  }
-  .f_24 {
-    font-size: 24px;
-  }
   .more {
     align-items: center;
     justify-content: right;
@@ -743,6 +731,9 @@
     font-size: 100px;
     z-index: 99;
   }
+  .lunbotu .title p{
+    margin-bottom: 0;
+  }
   .el-carousel__item > div {
     width: 100%;
     height: 100%;