文章目录
一、项目截图 二、主要知识点 三、Main.js 四、App.vue 五、components XtxBanner.vue XtxFooter.vue XtxHeaderNav.vue XtxHotBrand.vue XtxNewGoods.vue XtxShortCut.vue XtxTopic.vue 六、styles
import Vue from 'vue'
import App from './App.vue'
import './styles/base.css'
import './styles/common.css'
import './assets/iconfont/iconfont.css'
Vue. config. productionTip = false
new Vue ( {
render : h => h ( App) ,
} ) . $mount ( '#app' )
< template> < divclass = " App" > < XtxShortCut> </ XtxShortCut> < XtxHeaderNav> </ XtxHeaderNav> < XtxBanner> </ XtxBanner> < XtxNewGoods> </ XtxNewGoods> < XtxHotBrand> </ XtxHotBrand> < XtxTopic> </ XtxTopic> < XtxFooter> </ XtxFooter> </ div> </ template> < script>
import XtxShortCut from "./components/XtxShortCut.vue"
import XtxHeaderNav from "./components/XtxHeaderNav.vue"
import XtxBanner from "./components/XtxBanner.vue"
import XtxNewGoods from "./components/XtxNewGoods.vue"
import XtxHotBrand from "./components/XtxHotBrand.vue"
import XtxTopic from "./components/XtxTopic.vue"
import XtxFooter from "./components/XtxFooter.vue"
export default {
components : {
XtxShortCut,
XtxHeaderNav,
XtxBanner,
XtxNewGoods,
XtxHotBrand,
XtxTopic,
XtxFooter
}
}
</ script> < style>
</ style> < template> < divclass = " banner" > < divclass = " wrapper" > < ulclass = " pic" > < li> < ahref = " #" > < imgsrc = " @/assets/images/banner1.png" alt = " " /> </ a> </ li> < li> < ahref = " #" > < imgsrc = " @/assets/images/banner1.png" alt = " " /> </ a> </ li> </ ul> < divclass = " subnav" > < ul> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> < li> < div> < span> < ahref = " #" > </ a> </ span> < span> < ahref = " #" > </ a> </ span> </ div> < iclass = " iconfont icon-arrow-right-bold" > </ i> </ li> </ ul> </ div> < ol> < liclass = " current" > < i> </ i> </ li> < li> < i> </ i> </ li> < li> < i> </ i> </ li> </ ol> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.banner {
height : 500px;
background-color : #F5F5F5 ;
}
.banner .wrapper {
position : relative;
overflow : hidden;
}
.banner .pic {
display : flex;
width : 3720px;
height : 500px;
}
.banner .pic li {
width : 1240px;
height : 500px;
}
.banner .subnav {
position : absolute;
left : 0;
top : 0;
width : 250px;
height : 500px;
background-color : rgba ( 0, 0, 0, 0.42) ;
}
.banner .subnav li {
display : flex;
justify-content : space-between;
padding : 0 20px 0 30px;
height : 50px;
line-height : 50px;
}
.banner .subnav a,
.banner .subnav i {
color : #fff;
}
.banner .subnav li span:nth-child(1) {
margin-right : 14px;
}
.banner .subnav li span:nth-child(2) a {
margin-right : 5px;
}
.banner .subnav li span:nth-child(2) a {
font-size : 14px;
}
.banner .subnav li:hover {
background-color : #00BE9A;
}
.banner ol {
position : absolute;
right : 17px;
bottom : 17px;
display : flex;
}
.banner ol li {
cursor : pointer;
margin-left : 8px;
padding : 4px;
width : 22px;
height : 22px;
background-color : transparent;
border-radius : 50%;
}
.banner ol li i {
display : block;
width : 14px;
height : 14px;
background-color : rgba ( 255, 255, 255, 0.5) ;
border-radius : 50%;
}
.banner ol .current {
background-color : rgba ( 255, 255, 255, 0.5) ;
}
.banner ol .current i {
background-color : #fff;
}
</ style> XtxFooter.vue
< template> < divclass = " footer" > < divclass = " wrapper" > < divclass = " service" > < ul> < li> < span> </ span> < p> </ p> </ li> < li> < span> </ span> < p> </ p> </ li> < li> < span> </ span> < p> </ p> </ li> < li> < span> </ span> < p> </ p> </ li> </ ul> </ div> < divclass = " help" > < divclass = " left" > < dl> < dt> </ dt> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> </ dl> < dl> < dt> </ dt> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> </ dl> < dl> < dt> </ dt> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> </ dl> < dl> < dt> </ dt> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> </ dl> < dl> < dt> </ dt> < dd> < ahref = " #" > < spanclass = " iconfont icon-customer-service" > </ span> </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> < dd> < ahref = " #" > </ a> </ dd> </ dl> </ div> < divclass = " right" > < ul> < li> < div> < imgsrc = " @/assets/images/wechat.png" alt = " " /> </ div> < p> </ p> </ li> < li> < div> < imgsrc = " @/assets/images/app.png" alt = " " /> </ div> < p> </ p> </ li> </ ul> </ div> </ div> < divclass = " copyright" > < p> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> < ahref = " #" > </ a> </ p> < p> </ p> </ div> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.footer {
height : 580px;
background-color : #F5F5F5;
}
.footer .service {
padding : 60px 0;
height : 180px;
border-bottom : 1px solid #E8E8E8;
}
.footer .service ul {
display : flex;
justify-content : space-around;
}
.footer .service li {
display : flex;
line-height : 58px;
}
.footer .service span {
display : block;
margin-right : 20px;
width : 58px;
height : 58px;
background-image : url ( ~@/assets/images/sprite.png) ;
}
.footer .service li:nth-child(2) span {
background-position : 0 -58px;
}
.footer .service li:nth-child(3) span {
background-position : 0 -116px;
}
.footer .service li:nth-child(4) span {
background-position : 0 -174px;
}
.footer .service p {
font-size : 28px;
}
.footer .help {
display : flex;
justify-content : space-between;
margin-top : 60px;
}
.footer .help .left {
display : flex;
}
.footer .help .left dl {
margin-right : 84px;
}
.footer .help .left dt {
margin-bottom : 30px;
font-size : 18px;
}
.footer .help .left dd {
margin-bottom : 10px;
}
.footer .help .left dd a {
color : #969696;
}
.footer .help .right ul {
display : flex;
align-items : flex-start;
}
.footer .help .right li:nth-child(1) {
margin-right : 55px;
text-align : center;
}
.footer .help .right div {
margin-bottom : 10px;
width : 120px;
height : 120px;
color : #969696;
}
.icon-customer-service {
margin-left : 3px;
color : #00BE9A;
}
.copyright {
margin-top : 100px;
text-align : center;
color : #A1A1A1;
}
.copyright p {
margin-bottom : 15px;
}
.copyright a {
margin : 0 10px;
color : #A1A1A1;
}
</ style> XtxHeaderNav.vue
< template> < divclass = " header wrapper" > < divclass = " logo" > < h1> < ahref = " #" > </ a> </ h1> </ div> < divclass = " nav" > < ul> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> </ ul> </ div> < divclass = " search" > < spanclass = " iconfont icon-search" > </ span> < inputtype = " text" placeholder = " 搜一搜" /> </ div> < divclass = " cart" > < spanclass = " iconfont icon-cart-full" > </ span> < i> </ i> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.header {
display : flex;
margin : 22px auto;
}
.header .logo {
margin-right : 40px;
width : 200px;
height : 88px;
background-color : pink;
}
.header .logo a {
display : block;
width : 200px;
height : 88px;
background-image : url ( ~@/assets/images/logo.png) ;
font-size : 0;
}
.header .nav {
margin-top : 33px;
margin-right : 27px;
}
.header .nav ul {
display : flex;
}
.header .nav li {
margin-right : 48px;
}
.header .nav a {
display : block;
height : 34px;
}
.header .nav a:hover {
border-bottom : 2px solid #5EB69C;
}
.header .search {
display : flex;
margin-right : 45px;
margin-top : 33px;
width : 170px;
height : 34px;
border-bottom : 2px solid #F4F4F4;
}
.header .search .icon-search {
margin-right : 8px;
font-size : 20px;
color : #999;
}
.header .search input {
flex : 1;
}
.header .search input::placeholder {
color : #ccc;
}
.header .cart {
position : relative;
margin-top : 33px;
}
.header .cart .icon-cart-full {
font-size : 24px;
}
.header .cart i {
position : absolute;
left : 15px;
top : 0;
padding : 0 5px;
height : 15px;
background-color : #E26237;
border-radius : 7px;
font-size : 12px;
color : #fffefe;
line-height : 15px;
}
</ style> < template> < divclass = " hot" > < divclass = " wrapper" > < divclass = " title" > < divclass = " left" > < h3> </ h3> < p> </ p> </ div> < divclass = " button" > < ahref = " #" > < iclass = " iconfont icon-arrow-left-bold" > </ i> </ a> < ahref = " #" > < iclass = " iconfont icon-arrow-right-bold" > </ i> </ a> </ div> </ div> < divclass = " bd" > < ul> < li> < ahref = " #" > < imgsrc = " @/assets/images/hot1.png" alt = " " /> </ a> </ li> < li> < ahref = " #" > < imgsrc = " @/assets/images/hot2.png" alt = " " /> </ a> </ li> < li> < ahref = " #" > < imgsrc = " @/assets/images/hot3.png" alt = " " /> </ a> </ li> < li> < ahref = " #" > < imgsrc = " @/assets/images/hot4.png" alt = " " /> </ a> </ li> < li> < ahref = " #" > < imgsrc = " @/assets/images/hot5.png" alt = " " /> </ a> </ li> </ ul> </ div> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.hot {
margin-top : 60px;
padding-bottom : 40px;
overflow : hidden;
background-color : #F5F5F5;
}
.hot .title {
position : relative;
margin-bottom : 40px;
}
.hot .button {
display : flex;
position : absolute;
right : 0;
top : 47px;
}
.hot .button a {
display : block;
width : 20px;
height : 20px;
background-color : #ddd;
text-align : center;
line-height : 20px;
color : #fff;
}
.hot .button a:nth-child(2) {
margin-left : 12px;
background-color : #00BE9A;
}
.hot .bd ul {
display : flex;
justify-content : space-between;
}
.hot .bd li {
width : 244px;
height : 306px;
}
</ style> < template> < divclass = " goods wrapper" > < divclass = " title" > < divclass = " left" > < h3> </ h3> < p> </ p> </ div> < divclass = " right" > < ahref = " #" class = " more" > < spanclass = " iconfont icon-arrow-right-bold" > </ span> </ a> </ div> </ div> < divclass = " bd" > < ul> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/goods1.png" alt = " " /> </ div> < divclass = " txt" > < h4> </ h4> < p> < span> </ span> </ p> </ div> </ a> </ li> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/goods2.png" alt = " " /> </ div> < divclass = " txt" > < h4> </ h4> < p> < span> </ span> </ p> </ div> </ a> </ li> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/goods3.png" alt = " " /> </ div> < divclass = " txt" > < h4> </ h4> < p> < span> </ span> </ p> </ div> </ a> </ li> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/goods4.png" alt = " " /> </ div> < divclass = " txt" > < h4> </ h4> < p> < span> </ span> </ p> </ div> </ a> </ li> </ ul> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.goods .bd ul {
display : flex;
justify-content : space-between;
}
.goods .bd li {
width : 304px;
height : 404px;
background-color : #EEF9F4;
}
.goods .bd li {
display : block;
}
.goods .bd li .pic {
width : 304px;
height : 304px;
}
.goods .bd li .txt {
text-align : center;
}
.goods .bd li h4 {
margin-top : 17px;
margin-bottom : 8px;
font-size : 20px;
}
.goods .bd li p {
font-size : 18px;
color : #AA2113;
}
.goods .bd li p span {
font-size : 22px;
}
</ style> < template> < divclass = " shortcut" > < divclass = " wrapper" > < ul> < li> < ahref = " #" class = " login" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > < spanclass = " iconfont icon-mobile-phone" > </ span> </ a> </ li> </ ul> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.shortcut {
height : 52px;
line-height : 52px;
background-color : #333;
}
.shortcut .wrapper {
display : flex;
justify-content : flex-end;
}
.shortcut ul {
display : flex;
}
.shortcut a {
padding : 0 15px;
border-right : 1px solid #999;
color : #fff;
font-size : 14px;
line-height : 14px;
}
.shortcut .login {
color : #5EB69C;
}
.shortcut .icon-mobile-phone {
margin-right : 5px;
}
</ style> < template> < divclass = " topic wrapper" > < divclass = " title" > < divclass = " left" > < h3> </ h3> </ div> < divclass = " right" > < ahref = " #" class = " more" > < spanclass = " iconfont icon-arrow-right-bold" > </ span> </ a> </ div> </ div> < divclass = " topic_bd" > < ul> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/topic1.png" alt = " " /> < divclass = " info" > < divclass = " left" > < h5> </ h5> < p> </ p> </ div> < divclass = " right" > < span> </ span> </ div> </ div> </ div> < divclass = " txt" > < divclass = " left" > < p> < spanclass = " iconfont icon-favorites-fill red" > </ span> < i> </ i> </ p> < p> < spanclass = " iconfont icon-browse" > </ span> < i> </ i> </ p> </ div> < divclass = " right" > < spanclass = " iconfont icon-comment" > </ span> < i> </ i> </ div> </ div> </ a> </ li> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/topic2.png" alt = " " /> < divclass = " info" > < divclass = " left" > < h5> </ h5> < p> </ p> </ div> < divclass = " right" > < span> </ span> </ div> </ div> </ div> < divclass = " txt" > < divclass = " left" > < p> < spanclass = " iconfont icon-fabulous" > </ span> < i> </ i> </ p> < p> < spanclass = " iconfont icon-browse" > </ span> < i> </ i> </ p> </ div> < divclass = " right" > < spanclass = " iconfont icon-comment" > </ span> < i> </ i> </ div> </ div> </ a> </ li> < li> < ahref = " #" > < divclass = " pic" > < imgsrc = " @/assets/images/topic3.png" alt = " " /> < divclass = " info" > < divclass = " left" > < h5> </ h5> < p> </ p> </ div> < divclass = " right" > < span> </ span> </ div> </ div> </ div> < divclass = " txt" > < divclass = " left" > < p> < spanclass = " iconfont icon-fabulous" > </ span> < i> </ i> </ p> < p> < spanclass = " iconfont icon-browse" > </ span> < i> </ i> </ p> </ div> < divclass = " right" > < spanclass = " iconfont icon-comment" > </ span> < i> </ i> </ div> </ div> </ a> </ li> </ ul> </ div> </ div> </ template> < script>
export default {
}
</ script> < style>
.topic {
padding-top : 60px;
margin-bottom : 40px;
}
.topic_bd ul {
display : flex;
justify-content : space-between;
}
.topic_bd li {
width : 405px;
height : 355px;
}
.topic_bd .pic {
position : relative;
width : 405px;
height : 288px;
}
.topic_bd .txt {
display : flex;
justify-content : space-between;
padding : 0 15px;
height : 67px;
line-height : 67px;
color : #666;
font-size : 14px;
}
.topic_bd .txt .left {
display : flex;
}
.topic_bd .txt .left p {
margin-right : 20px;
}
.topic_bd .txt .left .red {
color : #AA2113;
}
.topic_bd .info {
position : absolute;
left : 0;
bottom : 0;
display : flex;
justify-content : space-between;
padding : 0 15px;
width : 100%;
height : 90px;
background-image : linear-gradient ( 180deg, rgba ( 137, 137, 137, 0.00) 0%, rgba ( 0, 0, 0, 0.90) 100%) ;
}
.topic_bd .info .left {
padding-top : 20px;
color : #fff;
}
.topic_bd .info .left h5 {
margin-bottom : 5px;
font-size : 20px;
}
.topic_bd .info .right {
margin-top : 35px;
padding : 0 7px;
height : 25px;
line-height : 25px;
background-color : #fff;
color : #AA2113;
font-size : 15px;
}
</ style>
* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
body {
font : 16px/1.5 "Microsoft Yahei" ,
"Hiragino Sans GB" , "Heiti SC" , "WenQuanYi Micro Hei" , sans-serif;
color : #333;
}
ul,
ol {
list-style : none;
}
em,
i {
font-style : normal;
}
a {
text-decoration : none;
color : #333;
}
img {
width : 100%;
height : 100%;
vertical-align : middle;
}
input {
border : none;
outline : none;
color : #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight : 400;
}
.clearfix::before,
.clearfix::after {
content : "" ;
display : table;
}
.clearfix::after {
clear : both;
}
.wrapper {
margin : 0 auto;
width : 1240px;
}
.title {
display : flex;
justify-content : space-between;
margin-top : 40px;
margin-bottom : 30px;
height : 42px;
}
.title .left {
display : flex;
align-items : flex-end;
}
.title .left h3 {
margin-right : 35px;
font-size : 30px;
}
.title .left p {
padding-bottom : 5px;
color : #A1A1A1;
}
.title .right {
line-height : 42px;
}
.title .right .more {
color : #A1A1A1;
}
.title .right .iconfont {
margin-left : 10px;
}
