帝国cms 调用网站名称,国际新闻最新消息十条,做网站开发没有人带,图片一键生成文章目录 一、项目截图二、主要知识点三、Main.js四、App.vue五、componentsXtxBanner.vueXtxFooter.vueXtxHeaderNav.vueXtxHotBrand.vueXtxNewGoods.vueXtxShortCut.vueXtxTopic.vue 六、stylesbase.csscommon.css 一、项目截图 二、主要知识点
把静态页面拆分成一个个vue组… 文章目录 一、项目截图二、主要知识点三、Main.js四、App.vue五、componentsXtxBanner.vueXtxFooter.vueXtxHeaderNav.vueXtxHotBrand.vueXtxNewGoods.vueXtxShortCut.vueXtxTopic.vue 六、stylesbase.csscommon.css 一、项目截图 二、主要知识点
把静态页面拆分成一个个vue组件
三、Main.js
import Vue from vue
import App from ./App.vue
import ./styles/base.css // css 样式重置
import ./styles/common.css // 公共全局样式
import ./assets/iconfont/iconfont.css // 字体图标的样式Vue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
四、App.vue
template
div classApp
!-- 快捷链接--XtxShortCut/XtxShortCut
!-- 顶部导航--XtxHeaderNav/XtxHeaderNav
!-- 轮播区域--XtxBanner/XtxBanner
!-- 新鲜好物--XtxNewGoods/XtxNewGoods
!-- 热门品牌--XtxHotBrand/XtxHotBrand
!-- 最新专题--XtxTopic/XtxTopic
!-- 版权底部--XtxFooter/XtxFooter
/div
/templatescript
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}
}
/scriptstyle/style
五、components
XtxBanner.vue
template!-- 轮播区域 --div classbannerdiv classwrapper!-- 图 --ul classpiclia href#img src/assets/images/banner1.png alt //a/lilia href#img src/assets/images/banner1.png alt //a/li/ul!-- 侧导航 --div classsubnavullidivspana href#生鲜/a/spanspana href#水果/aa href#蔬菜/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#美食/a/spanspana href#面点/aa href#干果/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#餐厨/a/spanspana href#数码产品/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#电器/a/spanspana href#床品/aa href#四件套/aa href#被枕/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#居家/a/spanspana href#奶粉/aa href#玩具/aa href#辅食/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#洗护/a/spanspana href#洗发/aa href#洗护/aa href#美妆/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#孕婴/a/spanspana href#奶粉/aa href#玩具/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#服饰/a/spanspana href#女装/aa href#男装/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#杂货/a/spanspana href#户外/aa href#图书/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#品牌/a/spanspana href#品牌制造/a/span/divi classiconfont icon-arrow-right-bold/i/li/ul/div!-- 指示器 --olli classcurrenti/i/lilii/i/lilii/i/li/ol/div/div
/templatescript
export default {}
/scriptstyle
/* 轮播区域 */
.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!-- 版权底部 --div classfooterdiv classwrapperdiv classserviceullispan/spanp价格亲民/p/lilispan/spanp物流快捷/p/lilispan/spanp品质新鲜/p/lilispan/spanp售后无忧/p/li/ul/divdiv classhelpdiv classleftdldt购物指南/dtdda href#购物流程/a/dddda href#支付方式/a/dddda href#售后规则/a/dd/dldldt配送方式/dtdda href#配送运费/a/dddda href#配送范围/a/dddda href#配送时间/a/dd/dldldt关于我们/dtdda href#平台规则/a/dddda href#联系我们/a/dddda href#问题反馈/a/dd/dldldt售后服务/dtdda href#售后政策/a/dddda href#退款说明/a/dddda href#取消订单/a/dd/dldldt服务热线/dtdda href#在线客服span classiconfont icon-customer-service/span/a/dddda href#客服电话 400-0000-000/a/dddda href#工作时间 周一至周日 8:00-18:00/a/dd/dl/divdiv classrightullidivimg src/assets/images/wechat.png alt //divp微信公众号/p/lilidivimg src/assets/images/app.png alt //divpAPP下载二维码/p/li/ul/div/divdiv classcopyrightpa href#关于我们/a|a href#帮助中心/a|a href#售后服务/a|a href#配送与验收/a|a href#商务合作/a|a href#搜索推荐/a|a href#友情链接/a/ppCopyRight © 小兔鲜/p/div/div/div
/templatescript
export default {}
/scriptstyle
/* 版权底部 */
.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!-- 头部导航 --div classheader wrapper!-- logo --div classlogoh1a href#小兔鲜儿/a/h1/div!-- 导航 --div classnavullia href#首页/a/lilia href#生鲜/a/lilia href#美食/a/lilia href#餐厨/a/lilia href#电器/a/lilia href#居家/a/lilia href#洗护/a/lilia href#孕婴/a/lilia href#服装/a/li/ul/div!-- 搜索 --div classsearchspan classiconfont icon-search/spaninput typetext placeholder搜一搜 //div!-- 购物车 --div classcartspan classiconfont icon-cart-full/spani2/i/div/div
/templatescript
export default {}
/scriptstyle
/* 头部导航 */
.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;/* right: -5px; */left: 15px;top: 0;padding: 0 5px;height: 15px;background-color: #E26237;border-radius: 7px;font-size: 12px;color: #fffefe;line-height: 15px;
}
/style
XtxHotBrand.vue
template!-- 热门品牌 --div classhotdiv classwrapperdiv classtitlediv classlefth3热门品牌/h3p国际经典 品质认证/p/divdiv classbuttona href#i classiconfont icon-arrow-left-bold/i/aa href#i classiconfont icon-arrow-right-bold/i/a/div/divdiv classbdullia href#img src/assets/images/hot1.png alt //a/lilia href#img src/assets/images/hot2.png alt //a/lilia href#img src/assets/images/hot3.png alt //a/lilia href#img src/assets/images/hot4.png alt //a/lilia href#img src/assets/images/hot5.png alt //a/li/ul/div/div/div
/templatescript
export default {}
/scriptstyle
/* 热门品牌 */
.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
XtxNewGoods.vue
template!-- 新鲜好物 --div classgoods wrapperdiv classtitlediv classlefth3新鲜好物/h3p新鲜出炉 品质靠谱/p/divdiv classrighta href# classmore查看全部span classiconfont icon-arrow-right-bold/span/a/div/divdiv classbdullia href#div classpicimg src/assets/images/goods1.png alt //divdiv classtxth4KN95级莫兰迪色防护口罩/h4p¥ span79/span/p/div/a/lilia href#div classpicimg src/assets/images/goods2.png alt //divdiv classtxth4KN95级莫兰迪色防护口罩/h4p¥ span566/span/p/div/a/lilia href#div classpicimg src/assets/images/goods3.png alt //divdiv classtxth4法拉蒙高颜值记事本可定制/h4p¥ span58/span/p/div/a/lilia href#div classpicimg src/assets/images/goods4.png alt //divdiv classtxth4科技布布艺沙发/h4p¥ span3759/span/p/div/a/li/ul/div/div
/templatescript
export default {}
/scriptstyle
/* 新鲜好物 */
.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
XtxShortCut.vue
template!-- 快捷链接 --div classshortcutdiv classwrapperullia href# classlogin请先登录/a/lilia href#免费注册/a/lilia href#我的订单/a/lilia href#会员中心/a/lilia href#帮助中心/a/lilia href#在线客服/a/lilia href#span classiconfont icon-mobile-phone/span手机版/a/li/ul/div/div
/templatescript
export default {}
/scriptstyle
/* 快捷导航 */
.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
XtxTopic.vue
template!-- 最新专题 --div classtopic wrapperdiv classtitlediv classlefth3最新专题/h3/divdiv classrighta href# classmore查看全部span classiconfont icon-arrow-right-bold/span/a/div/divdiv classtopic_bdullia href#div classpicimg src/assets/images/topic1.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-favorites-fill red/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/lilia href#div classpicimg src/assets/images/topic2.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-fabulous/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/lilia href#div classpicimg src/assets/images/topic3.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-fabulous/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/li/ul/div/div
/templatescript
export default {}
/scriptstyle
/* 最新专题 */
.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
六、styles
base.css
/* 去除常见标签默认的 margin 和 padding */
* {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标签默认下划线并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐去除img默认下间隙 */
img {width: 100%;height: 100%;vertical-align: middle;
}/* 去除input默认样式 */
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;
}
common.css
/* 公共的全局样式 */
.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;
}
