商城首页

ant-design-vue-jeecg/src/components/menu/Contextmenu.vue

@@ -43,9 +43,15 @@ export default {
   },
   methods: {
     closeMenu (e) {
+      if(e.target.href && e.target.href.indexOf('shopping/shopHome')>0) {
+        window.open(e.target.href, '_blank')
+      }
       if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
         this.$emit('update:visible', false)
       }
+
+
+
     },
     setPosition (e) {
       this.left = e.clientX

ant-design-vue-jeecg/src/config/router.config.js

@@ -620,4 +620,8 @@ export const constantRouterMap = [
     path: '/atlas',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/seknowgroup/SeKnowAtlasList')
   },
+  {
+    path: '/shopping/shopHome',//这里是你需要设置新窗口打开的页面的路径
+    component: () => import('@/views/shopping/shopHome')
+  },
 ]

ant-design-vue-jeecg/src/views/shopping/assets/common.css

@@ -0,0 +1,95 @@
+html,
+body,
+#app {
+  height: 100%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.jz {
+  width: 1440px;
+  margin: 0 auto;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.f_12 {
+  font-size: 12px;
+}
+
+.f_13 {
+  font-size: 13px;
+}
+
+.f_16 {
+  font-size: 16px;
+}
+
+.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;
+}
+
+.f_36 {
+  font-size: 36px;
+}
+
+.f_48 {
+  font-size: 48px;
+}
+
+.mb_30 {
+  margin-bottom: 30px;
+}
+
+.mb_100 {
+  margin-bottom: 100px;
+}
+
+.fw_600 {
+  font-weight: 600;
+}
+
+.c_333 {
+  color: #333;
+}
+
+.c_999 {
+  color: #999;
+}
+
+.c_fff {
+  color: #fff;
+}
+
+.c_000 {
+  color: #000;
+}
+
+.c_9a9b9b {
+  color: #9A9B9B;
+}

ant-design-vue-jeecg/src/views/shopping/assets/iconfont/iconfont.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3854415 */
+  src: url('iconfont.woff2?t=1673012900302') format('woff2'),
+       url('iconfont.woff?t=1673012900302') format('woff'),
+       url('iconfont.ttf?t=1673012900302') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sousuo:before {
+  content: "\e622";
+}
+
+.icon-gerenzhongxin:before {
+  content: "\e71d";
+}
+
+.icon-gouwudai:before {
+  content: "\e6b2";
+}
+

ant-design-vue-jeecg/src/views/shopping/assets/iconfont/iconfont.js

@@ -0,0 +1 @@
+window._iconfont_svg_string_3854415='<svg><symbol id="icon-sousuo" viewBox="0 0 1024 1024"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" fill="" ></path></symbol><symbol id="icon-gerenzhongxin" viewBox="0 0 1024 1024"><path d="M509.3 511.3c-117.1 0-212.4-95.3-212.4-212.4S392.2 86.5 509.3 86.5c117.1 0 212.4 95.3 212.4 212.4s-95.3 212.4-212.4 212.4z m0-374.8c-89.5 0-162.4 72.9-162.4 162.4s72.9 162.4 162.4 162.4 162.4-72.9 162.4-162.4-72.9-162.4-162.4-162.4z"  ></path><path d="M812.5 903.5H219.1c-29.3 0-56.7-13.1-75.1-35.9-18.4-22.8-25.4-52.4-19.1-81.1 19.6-90.5 68.9-172.6 138.7-231.4 34.9-29.4 74-52.3 116.1-68.1 43.6-16.4 89.4-24.6 136.2-24.6s92.6 8.3 136.2 24.6c42.1 15.8 81.1 38.7 116 68.1 69.8 58.7 119 140.9 138.7 231.4 6.2 28.7-0.7 58.3-19.1 81.1-18.5 22.8-45.9 35.9-75.2 35.9zM515.8 512.4c-40.8 0-80.7 7.2-118.6 21.5-36.8 13.8-70.9 33.8-101.4 59.5-61.4 51.7-104.7 124-122 203.7-3 13.9 0.3 28.1 9.2 39.1 8.9 11 22 17.3 36.2 17.3h593.4c14.1 0 27.3-6.3 36.2-17.3 8.9-11 12.2-25.3 9.2-39.1-17.3-79.7-60.7-152.1-122-203.7-30.5-25.7-64.7-45.7-101.4-59.5-38.1-14.3-78.1-21.5-118.8-21.5z"  ></path></symbol><symbol id="icon-gouwudai" viewBox="0 0 1024 1024"><path d="M615.8 263H408.3c-11.4 0-20.8 9.3-20.8 20.8s9.3 20.8 20.8 20.8h207.5c11.4 0 20.8-9.3 20.8-20.8s-9.4-20.8-20.8-20.8z"  ></path><path d="M927 761h-4.2l-53.2-425.3c-5.2-41.5-57-72.7-98.9-72.7h-52.5c-10.4-93.2-89.6-166-185.5-166h-41.5c-96 0-175.2 72.8-185.5 166h-69c-41.9 0-77.2 31.2-82.4 72.7L101.2 761H97v41.5h0.1C97 870.2 151.9 927 221.5 927h581c69.6 0 124.6-56.8 124.4-124.5h0.1V761zM195.6 340.9c2.6-20.7 20.3-36.4 41.2-36.4h67.7v88.8c-12.4 7.2-20.8 20.4-20.8 35.7 0 22.9 18.6 41.5 41.5 41.5s41.5-18.6 41.5-41.5c0-15.3-8.4-28.6-20.8-35.7V283.8c0-80.1 65.2-145.3 145.3-145.3h41.5c80.1 0 145.3 65.2 145.3 145.3v109.5c-12.4 7.2-20.8 20.4-20.8 35.7 0 22.9 18.6 41.5 41.5 41.5s41.5-18.6 41.5-41.5c0-15.3-8.4-28.6-20.8-35.7v-88.8h51.2c24.3 0 55.6 19.7 57.7 36.4L881 761H143l52.6-420.1z m669.1 516.5c-16 18.1-38.1 28.1-62.2 28.1h-581c-24.2 0-46.2-10-62.2-28.1-13.7-15.5-20.4-34.7-20.3-54.9h746.1c0 20.2-6.7 39.5-20.4 54.9z"  ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,s,d,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3854415,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,s=n.document,d=!1,h(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,l())})}function l(){d||(d=!0,i())}function h(){try{s.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}l()}}(window);

ant-design-vue-jeecg/src/views/shopping/assets/iconfont/iconfont.json

@@ -0,0 +1,30 @@
+{
+  "id": "3854415",
+  "name": "易创商城项目",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1304890",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "7093672",
+      "name": "个人中心",
+      "font_class": "gerenzhongxin",
+      "unicode": "e71d",
+      "unicode_decimal": 59165
+    },
+    {
+      "icon_id": "7629049",
+      "name": "购物袋",
+      "font_class": "gouwudai",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    }
+  ]
+}

ant-design-vue-jeecg/src/views/shopping/components/Footer/FooterView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="footer d-flex">
+    <div class="d-flex">
+      <p class="f_24 mb_100">黄淮服装定制商城©版权所有️</p>
+      <p class="f_22">xxxx备xxxxxxx号</p>
+    </div>
+    <div class="f_22 d-flex">
+      <p class="mb_30 fw_600">定制指南</p>
+      <a href="#" class="mb_30">定制流程</a>
+      <a href="#" class="mb_30">常见问题</a>
+      <a href="#" class="mb_30">联系客服</a>
+    </div>
+    <div class="f_22 d-flex">
+      <p class="mb_30 fw_600">配送方式</p>
+      <a href="#" class="mb_30">配送服务查询</a>
+      <a href="#" class="mb_30">配送费收取标准</a>
+    </div>
+    <div class="f_22 d-flex">
+      <p class="mb_30 fw_600">关于我们</p>
+      <a href="#" class="mb_30">条款及细则</a>
+      <a href="#" class="mb_30">隐私政策</a>
+      <a href="#" class="mb_30">Cookie政策</a>
+    </div>
+    <div style="align-items: left">
+      <p class="f_22 mb_30 fw_600">通讯</p>
+      <p class="f_20 mb_30">订阅有关产品推出，特别优惠和公司新闻的通知</p>
+      <el-input v-model="value" placeholder="请输入您的电子邮件地址"></el-input>
+      <div class="button">订阅</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FooterView",
+  data() {
+    return {
+      value: "",
+    };
+  },
+};
+</script>
+
+
+<style scoped>
+.footer {
+  padding: 140px 0;
+  background-color: rgba(213, 210, 205, 1);
+  justify-content: space-around;
+  color: #675b48;
+}
+.footer a {
+  color: #675b48;
+}
+.footer > div {
+  height: 200px;
+  flex-direction: column;
+  align-items: center;
+}
+.footer >>> .el-input__inner {
+  border-color: #675b48;
+  background-color: rgba(213, 210, 205, 1);
+  border-radius: 0;
+  margin-bottom: 20px;
+}
+.footer >>> .el-input__inner::placeholder {
+  color: #675b48;
+}
+.footer .button {
+  width: 114px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 83px;
+  border: 1px solid #675b48;
+  text-align: center;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+.footer .button:hover {
+  color: rgba(213, 210, 205, 1);
+  background-color: #675b48;
+}
+</style>

ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="top d-flex" :style="{ color: fontColor }">
+    <div class="left d-flex">
+      <span class="logo">LOGO</span>
+      <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
+      >
+      <router-link to="srdz" :style="{ color: fontColor }"
+        >私人定制</router-link
+      >
+      <router-link to="cytj" :style="{ color: fontColor }"
+        >成衣推荐</router-link
+      >
+      <router-link to="about" :style="{ color: fontColor }"
+        >关于我们</router-link
+      >
+    </div>
+    <div class="right d-flex">
+      <router-link to="find">
+        <!-- <img src="@/assets/sousuo.png" alt="" /> -->
+        <span class="iconfont icon-sousuo" :style="{ color: fontColor }"></span>
+      </router-link>
+      <router-link to="person">
+        <!-- <img src="@/assets/gerenzhongxin.png" alt=""/> -->
+        <span
+          class="iconfont icon-gerenzhongxin"
+          :style="{ color: fontColor }"
+        ></span>
+      </router-link>
+      <router-link to="shop">
+        <!-- <img src="@/assets/gouwudai.png" alt=""/> -->
+        <span
+          class="iconfont icon-gouwudai"
+          :style="{ color: fontColor }"
+        ></span>
+      </router-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HeaderView",
+  props: {
+    fontColor: { type: String, default: "#fff" },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    ToLogin() {},
+  },
+};
+</script>
+
+
+<style lang='less' scoped>
+.top {
+  width: 100%;
+  height: 88px;
+  justify-content: space-between;
+  position: absolute;
+  z-index: 99;
+  .left {
+    width: 30%;
+    height: 88px;
+    align-items: center;
+    justify-content: center;
+    .logo {
+      font-size: 46px;
+      margin-right: 10px;
+    }
+    .title {
+      font-size: 22px;
+      line-height: 88px;
+    }
+  }
+  .middle {
+    width: 40%;
+    height: 88px;
+    align-items: center;
+    a {
+      // color: @fontcolor;
+      font-size: 16px;
+      margin-right: 30px;
+    }
+    .router-link-exact-active {
+      border-bottom: 2px solid #fff;
+    }
+  }
+  .right {
+    width: 30%;
+    height: 88px;
+    align-items: center;
+    justify-content: center;
+    span {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 30px;
+      font-size: 22px;
+    }
+  }
+}
+</style>

ant-design-vue-jeecg/src/views/shopping/components/HelloWorld.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

ant-design-vue-jeecg/src/views/shopping/components/InitialHeader/InitialHeader.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="top d-flex">
+    <div class="left d-flex">
+      <span class="logo">LOGO</span>
+      <span class="title">黄淮服装定制商城</span>
+    </div>
+    <div class="middle d-flex">
+      <router-link to="/">首页</router-link>
+      <router-link to="fzlx">服装类型</router-link>
+      <router-link to="srdz">私人定制</router-link>
+      <router-link to="cytj">成衣推荐</router-link>
+      <router-link to="about">关于我们</router-link>
+    </div>
+    <div class="right d-flex">
+      <router-link to="signIn"
+        ><a class="login" @click="ToLogin"
+          >登录<span>/</span>注册</a
+        ></router-link
+      >
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "InitialHeader",
+  methods: {
+    ToLogin() {},
+  },
+};
+</script>
+
+
+<style scoped>
+.login {
+  width: 116px;
+  height: 38px;
+  line-height: 23px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 5px 13px;
+  color: #ffffff;
+  font-family: PingFang SC-Regular, PingFang SC;
+  background: #746957;
+}
+.login span {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.top {
+  width: 100%;
+  height: 88px;
+  justify-content: space-between;
+  color: #fff;
+  position: absolute;
+  z-index: 99;
+}
+.top .left {
+  width: 30%;
+  height: 88px;
+  align-items: center;
+  justify-content: center;
+}
+.top .left .logo {
+  font-size: 46px;
+  margin-right: 10px;
+}
+.top .left .title {
+  font-size: 22px;
+  line-height: 88px;
+}
+.top .middle {
+  width: 40%;
+  height: 88px;
+  align-items: center;
+}
+.top .middle a {
+  color: #fff;
+  /* width: 100px; */
+  font-size: 16px;
+  margin-right: 30px;
+}
+.top .middle .router-link-exact-active {
+  border-bottom: 1px solid #fff;
+}
+.top .right {
+  width: 30%;
+  height: 88px;
+  align-items: center;
+  justify-content: center;
+  /* padding-right: 50px; */
+}
+.top .right img {
+  width: 20px;
+  height: 20px;
+  margin-right: 30px;
+}
+</style>

ant-design-vue-jeecg/src/views/shopping/shopHome.vue

@@ -0,0 +1,920 @@
+<template>
+  <div>
+    <Header/>
+    <div class="lunbotu">
+      <el-carousel :height="vh + 'px'" arrow="always">
+        <el-carousel-item v-for="(item, index) in imgList" :key="index">
+          <div>
+            <img :src="item" alt="" />
+            <p class="total">
+              0{{ index + 1 }}<span>/0{{ imgList.length }}</span>
+            </p>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+      <div class="title">
+        <p>工艺用料</p>
+        <p>品质甄选</p>
+      </div>
+    </div>
+    <div class="section2">
+      <div class="jz">
+        <div class="title">
+          <p class="title_1">一人一版 量体定制</p>
+          <p class="title_2">made-to-measure</p>
+        </div>
+        <div class="itemDiv d-flex">
+          <div
+            class="item d-flex"
+            v-for="(item, index) in orderList"
+            :key="index"
+          >
+            <img :src="item.imgUrl" alt="" />
+            <span class="title_3">{{ item.title }}</span>
+            <span class="title_4">{{ item.desc }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section3">
+      <div class="jz">
+        <div class="titleCont">
+          <p class="title">最新定制</p>
+          <div class="orange"></div>
+          <p class="desc">Latest customization</p>
+        </div>
+        <div class="itemDiv d-flex">
+          <div class="item" v-for="(item, index) in clothList" :key="index">
+            <img :src="item.imgUrl" alt="" />
+            <p class="titleDiv">
+              {{ item.title1 }}<span>|</span>{{ item.title2 }}
+            </p>
+            <p class="price">
+              价格：¥<span>{{ item.price }}</span
+            >元
+            </p>
+          </div>
+        </div>
+        <div class="more d-flex">
+          <a href="#">了解更多</a>
+          <img src="./assets/youjiantou.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="section4">
+      <div class="jz">
+        <div class="titleCont d-flex">
+          <p class="title">推荐商品</p>
+          <div class="orange"></div>
+          <p class="desc">Recommending Commodities</p>
+        </div>
+        <el-carousel type="card" arrow="always">
+          <el-carousel-item v-for="(item, index) in clothList2" :key="index">
+            <div class="box">
+              <img :src="item.imgUrl" alt="" />
+              <p class="box1">CLOTHING NAM</p>
+              <p class="box2">15分钟前定制</p>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+    <div class="section5">
+      <div class="jz">
+        <div class="titleCont d-flex">
+          <p class="title">服装类型</p>
+          <div class="orange"></div>
+          <p class="desc">Clothing type</p>
+        </div>
+        <el-tabs v-model="activeName" class="tabs">
+          <el-tab-pane label="男装" name="first">
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in nanzhuang1"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多衬衫</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in nanzhuang2"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多西装</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="女装" name="second">
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in nvzhuang1"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多衬衫</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in nvzhuang1"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多西装</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="童装" name="third">
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in tongzhuang1"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多衬衫</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+            <div class="jz d-flex">
+              <div
+                class="item d-flex"
+                v-for="(item, index) in tongzhuang2"
+                :key="index"
+              >
+                <img :src="item.imgUrl" alt="" />
+                <p>
+                  {{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
+                </p>
+                <div>
+                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
+                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
+                </div>
+                <p class="priceDiv d-flex">
+                  <span class="f_18"
+                  >￥<span class="f_24">{{ item.price }}</span></span
+                  ><span class="f_12">已售{{ item.sold }}件</span>
+                </p>
+              </div>
+            </div>
+            <div class="more d-flex">
+              <a href="#">更多西装</a>
+              <img src="./assets/youjiantou.png" alt="" />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import Header from './components/Header/HeaderView'
+  export default {
+    name: "shopHome",
+    components: { Header },
+    data() {
+      return {
+        vh: 0,
+        activeName: "first",
+        imgList: [
+          require("./assets/bg.png"),
+          require("./assets/bg02.png"),
+          require("./assets/bg03.png"),
+        ],
+        orderList: [
+          {
+            id: 1,
+            imgUrl: require("./assets/order01.png"),
+            title: "服装类型",
+            desc: "丰富款式 多样呈现",
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/order02.png"),
+            title: "私人订制",
+            desc: "丰富款式 多样呈现",
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/order03.png"),
+            title: "成衣推荐",
+            desc: "丰富款式 多样呈现",
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/order04.png"),
+            title: "关于我们",
+            desc: "丰富款式 多样呈现",
+          },
+        ],
+        clothList: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth01.png"),
+            title1: "西装定制",
+            title2: "立领高端西装",
+            price: "1xx0.00",
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth02.png"),
+            title1: "西装定制",
+            title2: "立领高端西装",
+            price: "1xx0.00",
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth01.png"),
+            title1: "西装定制",
+            title2: "立领高端西装",
+            price: "1xx0.00",
+          },
+          // },
+          // {
+          //   id: 4,
+          //   imgUrl: require("./assets/cloth02.png"),
+          //   title1: "西装定制",
+          //   title2: "立领高端西装",
+          //   price: "1xx0.00",
+          // }
+        ],
+        clothList2: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title: "CLOTHING NAM",
+            time: 15,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth003.png"),
+            title: "CLOTHING NAM",
+            time: 15,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth004.png"),
+            title: "CLOTHING NAM",
+            time: 15,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth005.png"),
+            title: "CLOTHING NAM",
+            time: 15,
+          },
+        ],
+        nanzhuang1: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+        nanzhuang2: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "男装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+        nvzhuang1: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+        nvzhuang2: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "女装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+        tongzhuang1: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+        tongzhuang2: [
+          {
+            id: 1,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 2,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 3,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 4,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+          {
+            id: 5,
+            imgUrl: require("./assets/cloth002.png"),
+            title1: "童装",
+            title2: "衬衫",
+            tag1: "标签一",
+            tag2: "标签二",
+            price: "1xx0.00",
+            sold: 200,
+          },
+        ],
+      };
+    },
+    mounted() {
+      this.vh = window.screen.availHeight - 100;
+    },
+  }
+</script>
+<style scoped>
+  @import './assets/common.css'
+</style>
+<style scoped>
+  .box {
+    position: relative;
+  }
+  .img {
+    position: absolute;
+    top: 0;
+  }
+  .box1 {
+    position: absolute;
+    bottom: 20%;
+  }
+  .box2 {
+    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;
+  }
+  .more a {
+    color: #333;
+  }
+  .more img {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+  }
+
+  /* -------------------第一部分开始------------------------------------------------------------------------------------------------ */
+  .home {
+    width: 100%;
+    /* height: 2000px; */
+  }
+  .titleCont {
+    padding-top: 200px;
+    padding-bottom: 100px;
+  }
+  .titleCont .title {
+    font-size: 48px;
+  }
+  .titleCont .orange {
+    background-color: rgba(255, 206, 149, 1);
+    width: 40px;
+    height: 6px;
+    margin: 24px 0;
+  }
+  .titleCont .desc {
+    font-size: 32px;
+  }
+  .lunbotu {
+    position: relative;
+  }
+  .lunbotu .title {
+    position: absolute;
+    top: 30%;
+    left: 20%;
+    color: #fff;
+    font-size: 100px;
+    z-index: 99;
+  }
+  .el-carousel__item > div {
+    width: 100%;
+    height: 100%;
+  }
+  .el-carousel__item > div > img {
+    width: 100%;
+    height: 100%;
+  }
+  .lunbotu .el-carousel >>> .el-carousel__arrow {
+    border: 1px solid #fff;
+  }
+  .lunbotu .total {
+    position: absolute;
+    bottom: 10%;
+    left: 10%;
+    z-index: 99;
+    color: #fff;
+    font-size: 48px;
+  }
+  .lunbotu .total span {
+    font-size: 16px;
+  }
+  /* .lunbotu .el-carousel >>> .el-carousel__arrow{border: 1px solid #fff;position: absolute;right: 20%!important;} */
+  /* .lunbotu .el-carousel >>> .el-carousel__arrow--left{top: 40%;}
+  .lunbotu .el-carousel >>> .el-carousel__arrow--right{top: 50%;} */
+  /* .el-carousel__indicators.el-carousel__indicators--horizontal{
+    position: absolute;
+    bottom: 10%;
+    right: 10%;
+  } */
+  /* -----------------------第一部分完成----------------------------------------------------------------------------------------- */
+  /* -----------------------第二部分开始----------------------------------------------------------------------------------------- */
+  .section2 {
+    color: #333;
+  }
+  .section2 .jz {
+    padding-top: 200px;
+    padding-bottom: 250px;
+  }
+  .section2 .title {
+    text-align: center;
+    padding-bottom: 200px;
+  }
+  .section2 .title .title_1 {
+    font-size: 42px;
+  }
+  .section2 .title .title_2 {
+    font-size: 32px;
+  }
+  .section2 .itemDiv {
+    justify-content: space-around;
+  }
+  .section2 .itemDiv .item {
+    flex-direction: column;
+    align-items: center;
+  }
+  .section2 .itemDiv .item .title_3 {
+    margin: 20px 0;
+    font-size: 24px;
+  }
+  .section2 .itemDiv .item .title_4 {
+    font-size: 18px;
+  }
+  /* -----------------------第二部分完成----------------------------------------------------------------------------------------- */
+  /* -----------------------第三部分开始----------------------------------------------------------------------------------------- */
+  .section3 {
+    color: #333;
+    background-color: rgba(246, 246, 246, 1);
+    padding-bottom: 100px;
+  }
+  .section3 .itemDiv {
+    padding-bottom: 100px;
+    justify-content: space-between;
+  }
+  .section3 .itemDiv .item {
+    background-color: rgba(255, 255, 255, 1);
+    width: 450px;
+    height: 610px;
+  }
+  .section3 .itemDiv .item img {
+    width: 380px;
+    height: 380px;
+    margin: 35px 0 0 35px;
+  }
+  .section3 .itemDiv .item .titleDiv,
+  .section3 .itemDiv .item .price {
+    padding: 38px 50px 0 50px;
+  }
+  .section3 .itemDiv .item .titleDiv {
+    font-size: 30px;
+  }
+  .section3 .itemDiv .item .titleDiv span {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .section3 .itemDiv .item .price span {
+    font-size: 32px;
+    color: #746957;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  /* -----------------------第三部分完成----------------------------------------------------------------------------------------- */
+  /* -----------------------第四部分开始----------------------------------------------------------------------------------------- */
+  .section4 {
+    padding-bottom: 200px;
+  }
+  .section4 .titleCont {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* -----------------------第四部分完成----------------------------------------------------------------------------------------- */
+  /* -----------------------第五部分开始----------------------------------------------------------------------------------------- */
+  .section5 {
+    padding-bottom: 200px;
+    background-color: rgba(246, 246, 246, 1);
+  }
+  .section5 .titleCont {
+    flex-direction: column;
+    align-items: center;
+  }
+  .section5 .more {
+    margin-bottom: 50px;
+    margin-top: 50px;
+  }
+  .section5 .tabs >>> .el-tabs__item.is-top {
+    font-size: 26px;
+  }
+  .section5 .tabs >>> .el-tabs__nav.is-top {
+    padding-bottom: 10px;
+  }
+  .section5 .tabs .jz {
+    justify-content: space-between;
+  }
+  .section5 .tabs .jz .item {
+    background-color: #fff;
+    width: 19%;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 30px;
+  }
+  .section5 .tabs .jz .item img {
+    width: 80%;
+  }
+  .section5 .tabs .jz .item p {
+    width: 100%;
+    padding-left: 28px;
+    padding-right: 28px;
+    box-sizing: border-box;
+  }
+  .section5 .tabs .jz .item p .line {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+  .section5 .tabs .jz .item div {
+    width: 100%;
+    padding-left: 28px;
+    box-sizing: border-box;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+  .section5 .tabs .jz .item div .el-tag {
+    margin-right: 10px;
+  }
+  .section5 .priceDiv {
+    justify-content: space-between;
+    align-items: center;
+    color: #746957;
+  }
+  .section5 .priceDiv .f_12 {
+    color: rgba(116, 105, 87, 0.6);
+  }
+  /* -----------------------第五部分完成----------------------------------------------------------------------------------------- */
+</style>