parent
69bcb03291
commit
be9e5b5c8c
33 changed files with 1429 additions and 0 deletions
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 117 KiB |
@ -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; |
||||
} |
||||
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 226 B |
@ -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"; |
||||
} |
||||
|
||||
@ -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); |
||||
@ -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 |
||||
} |
||||
] |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 1.5 KiB |
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue