大学网站建设的目标与思路,wordpress移动端底部导航,wordpress返回上一页,环球网最新国际新闻烘培坊项目 文章目录 烘培坊项目项目概述项目页面展示后台管理页面登录页面文章详情页面稿件发布页面 项目关键代码实现后台管理页面稿件管理页面内容列表页面文章详情页面烘培坊主页面注册页面登录页面个人信息页面稿件发布页面 项目概述
烘培坊#xff08;Bakery#xff0…烘培坊项目 文章目录 烘培坊项目项目概述项目页面展示后台管理页面登录页面文章详情页面稿件发布页面 项目关键代码实现后台管理页面稿件管理页面内容列表页面文章详情页面烘培坊主页面注册页面登录页面个人信息页面稿件发布页面 项目概述
烘培坊Bakery是一个虚构的在线烘焙产品销售网站主要面向烘焙爱好者和美食爱好者。该网站提供各种烘焙产品的食谱介绍、视频教学服务包括烘焙原料、工具和书籍等烘培坊网站使用了现代化的Web技术如HTML5、CSS3和JavaScript等使用Vue、ElementUI框架作为学习前端搭建网页的教学项目使用
项目页面展示
后台管理页面 登录页面 文章详情页面 稿件发布页面 项目关键代码实现
后台管理页面 el-containerel-header height70px stylebackground-color: #386582h1 stylecolor: white;font-size: 30px;margin: 0;line-height: 70px烘焙坊后台管理系统span stylefont-size: 20px;float: right欢迎汤姆回来!a href stylecolor: orange退出登录/a/span/h1/el-headerel-containerel-aside width200pxel-menu selecthandleSelect default-active1 styleheight: 1000px active-text-colororangeimg srcimgs/icon.png width150pxel-divider/el-dividerel-menu-item index1template slottitlei classel-icon-user/ispan用户管理/span/template/el-menu-itemel-menu-item index2template slottitlei classel-icon-picture/ispan轮播图/span/template/el-menu-itemel-menu-item index3template slottitlei classel-icon-s-order/ispan烘焙食谱/span/template/el-menu-itemel-menu-item index4template slottitlei classel-icon-video-camera/ispan烘焙视频/span/template/el-menu-itemel-menu-item index5template slottitlei classel-icon-info/ispan行业资讯/span/template/el-menu-item/el-menu/el-asideel-main!--用户表格开始--el-table v-ifcurrentIndex1 :datauserArrel-table-column typeindex label编号/el-table-columnel-table-column propuserName label用户名/el-table-columnel-table-column propnickName label昵称/el-table-columnel-table-column label头像template slot-scopescopeel-avatar :srcscope.row.imgUrl/el-avatar/template/el-table-columnel-table-column label管理员template slot-scopescopeel-switch v-modelscope.row.isAdmin/el-switch/template/el-table-columnel-table-column propcreateTime label创建时间/el-table-columnel-table-column label操作template slot-scopescopeel-button typedanger删除/el-button/template/el-table-column/el-table!--用户表格结束--!--轮播图表格开始--el-table v-ifcurrentIndex2 :databannerArrel-table-column typeindex label编号/el-table-columnel-table-column propcode label编码/el-table-columnel-table-column label轮播图template slot-scopescopeimg :srcscope.row.imgUrl width200px/template/el-table-columnel-table-column propcreateTime label创建时间/el-table-columnel-table-column label操作template slot-scopescopeel-button typedanger删除/el-button/template/el-table-column/el-table!--轮播图表格结束--!--内容表格开始--el-table v-ifcurrentIndex2 :datacontentArr borderel-table-column label标题 width150pxproptitle aligncenter/el-table-columnel-table-column label封面 width60pxtemplate slot-scopescopeimg :srcscope.row.imgUrl width50px/template/el-table-columnel-table-column label摘要 width300pxpropbrief aligncenter/el-table-columnel-table-column label类型propcategoryName aligncenter/el-table-columnel-table-column label浏览量propviewCount aligncenter/el-table-columnel-table-column label回复量propcommentCount aligncenter/el-table-columnel-table-column label创建时间propcreateTime aligncenter/el-table-columnel-table-column label操作 width200px fixedrightaligncentertemplate slot-scopescopeel-button sizemini typesuccessclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-button sizemini typedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table!--内容表格结束--/el-main/el-container/el-container稿件管理页面
el-containerel-header height80px div classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter el-row gutter20el-col span4el-card styleheight: 500pxp clicklocation.hrefpersonal.html个人信息/pp stylecolor: orange 稿件管理/p/el-card/el-colel-col span20el-card!--标签页卡开始--el-tabs v-modeltype typecard tab-clickhandleClickel-tab-pane label食谱 name1/el-tab-paneel-tab-pane label视频 name2/el-tab-paneel-tab-pane label资讯 name3/el-tab-pane/el-tabs!--标签页卡结束--el-button typeprimary发帖/el-button!--内容列表开始--el-table :datacontentArr borderel-table-column label标题 width150pxproptitle aligncenter/el-table-columnel-table-column label封面 width60pxtemplate slot-scopescopeimg :srcscope.row.imgUrl width50px/template/el-table-columnel-table-column label摘要 width300pxpropbrief aligncenter/el-table-columnel-table-column label类型propcategoryName aligncenter/el-table-columnel-table-column label浏览量propviewCount aligncenter/el-table-columnel-table-column label回复量propcommentCount aligncenter/el-table-columnel-table-column label创建时间propcreateTime aligncenter/el-table-columnel-table-column label操作 width200px fixedrightaligncentertemplate slot-scopescopeel-button sizemini typesuccessclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-button sizemini typedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table!--内容列表结束--/el-card/el-col/el-row/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer
/el-container内容列表页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter !--内容列表开始--el-row gutter20el-col v-forr in recipeArr span6el-card stylemargin: 10px 0img :srcr.imgUrl width100% height144p styleheight: 40px{{r.title}}/pel-row gutter20el-col span4!--圆形图片,专门用来显示头像--el-avatar sizesmall :srcr.userImgUrl/el-avatar/el-colel-col span10{{r.nickName}}/el-colel-col span10span stylefloat: right;font-size: 12px;color: #ccc{{r.categoryName}}/span/el-col/el-row/el-card/el-col/el-rowdiv styletext-align: center;margin-bottom: 20pxel-button点击查看更多内容/el-button/div!--内容列表结束--/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div文章详情页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter el-row gutter20el-col span18el-cardh2 stylecolor: orange;text-align: center枣泥花式面包,好吃到爆!/h2p stylefont-size: 12px;color: #666;text-align: center作者:汤姆 | 发布时间:2023/5/26 11:12:30 | 阅读次数:1/pel-divider/el-dividerel-card stylefont-size: 12pxb stylecolor: #409EFF摘要:/b之前做了枣泥馅配上花式面包好吃到爆。 枣泥花式面包的用料 肉松面包面团/el-cardp styleheight: 500px文章内容/p/el-card!--评论相关开始--el-cardp发一条友善的评论/pel-divider/el-dividerel-row gutter20el-col span20el-input typetextarea placeholder说点儿啥.../el-input/el-colel-col span2el-button发布/el-button/el-col/el-row!--评论列表开始--el-row stylemargin: 5px 0el-col span2el-avatar srcimgs/head.jpg/el-avatar/el-colel-col span20span stylecolor: orange;font-weight: bold汤姆:/spanp stylemargin:5px 0开起来很好吃!/pspan stylecolor: #666;font-size: 12px2023/5/26 15:52:30/span/el-col/el-row!--评论列表结束--/el-card!--评论相关结束--/el-colel-col span6el-card classright-card styleheight: 240px;text-align: center;div stylebackground-image: url(imgs/avarbg.jpg);height: 90px/divdiv styleposition: relative;top: -45pximg srcimgs/head.jpgstyleborder-radius: 90px;border: 5px solid white;width: 90px;height: 90pxp stylefont-size: 20px;margin: 0;font-weight: bold汤姆/pi classel-icon-edit本文作者/ibri classel-icon-time2023/5/26 16:43:30/i/div/el-card!--作者其它文章开始--el-card stylemargin:10px 0h3作者其它文章/h3el-divider/el-divider!--文章列表开始--el-row gutter10 v-foritem in 4el-col span10img srcimgs/a.jpg width100% height70px/el-colel-col span14p stylemargin: 0;height: 50px枣泥面包好吃到爆!/pi classel-icon-time stylecolor: #6662023/6/30/i/el-col/el-row!--文章列表结束--/el-card!--作者其它文章结束--!--热门文章开始--el-card stylemargin:10px 0h3热门文章/h3el-divider/el-divider!--文章列表开始--el-row gutter10 v-foritem in 4el-col span10img srcimgs/a.jpg width100% height70px/el-colel-col span14p stylemargin: 0;height: 50px枣泥面包好吃到爆!/pi classel-icon-time stylecolor: #6662023/6/30/i/el-col/el-row!--文章列表结束--/el-card!--热门文章结束--/el-col/el-row/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div烘培坊主页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter el-carousel height375pxel-carousel-itemimg srcimgs/banner1.jpg width100%/el-carousel-itemel-carousel-itemimg srcimgs/banner2.jpg width100%/el-carousel-itemel-carousel-itemimg srcimgs/banner3.jpg width100%/el-carousel-item/el-carousel!--食谱开始--el-row stylebackground-color: whiteel-col span3p stylefont-size: 28px;line-height: 65px;margin: 0烘焙食谱/p/el-colel-col span21!--食谱导航开始--el-menu modehorizontal default-active0 active-text-colororangeel-menu-item index0全部/el-menu-itemel-menu-item index1面包/el-menu-itemel-menu-item index2零食/el-menu-itemel-menu-item index3家常菜/el-menu-item/el-menu!--食谱导航结束--/el-col/el-row!--食谱列表开始--el-row gutter20el-col v-forr in recipeArr span6el-card stylemargin: 10px 0img :srcr.imgUrl width100% height144p styleheight: 40px{{r.title}}/pel-row gutter20el-col span4!--圆形图片,专门用来显示头像--el-avatar sizesmall :srcr.userImgUrl/el-avatar/el-colel-col span10{{r.nickName}}/el-colel-col span10span stylefloat: right;font-size: 12px;color: #ccc{{r.categoryName}}/span/el-col/el-row/el-card/el-col/el-rowdiv styletext-align: center;margin-bottom: 20pxel-button点击查看更多食谱/el-button/div!--食谱列表结束--!--食谱结束--!--视频开始--el-row stylebackground-color: whiteel-col span3p stylefont-size: 28px;line-height: 65px;margin: 0烘焙视频/p/el-colel-col span21!--视频导航开始--el-menu modehorizontal default-active0 active-text-colororangeel-menu-item index0全部/el-menu-itemel-menu-item index1面包教学/el-menu-itemel-menu-item index2零食鉴赏/el-menu-itemel-menu-item index3家常菜教程/el-menu-item/el-menu!--视频导航结束--/el-col/el-row!--视频列表开始--el-row gutter20el-col v-forr in recipeArr span6el-card stylemargin: 10px 0img :srcr.imgUrl width100% height144p styleheight: 40px{{r.title}}/pel-row gutter20el-col span4!--圆形图片,专门用来显示头像--el-avatar sizesmall :srcr.userImgUrl/el-avatar/el-colel-col span10{{r.nickName}}/el-colel-col span10span stylefloat: right;font-size: 12px;color: #ccc{{r.categoryName}}/span/el-col/el-row/el-card/el-col/el-rowdiv styletext-align: center;margin-bottom: 20pxel-button点击查看更多视频/el-button/div!--视频列表结束--!--视频结束--!--资讯开始--el-row stylebackground-color: whiteel-col span3p stylefont-size: 28px;line-height: 65px;margin: 0行业资讯/p/el-colel-col span21!--资讯导航开始--el-menu modehorizontal default-active0 active-text-colororangeel-menu-item index0全部/el-menu-itemel-menu-item index1美食资讯/el-menu-itemel-menu-item index2店家资讯/el-menu-item/el-menu!--资讯导航结束--/el-col/el-row!--资讯列表开始--el-row gutter20el-col v-forr in recipeArr span6el-card stylemargin: 10px 0img :srcr.imgUrl width100% height144p styleheight: 40px{{r.title}}/pel-row gutter20el-col span4!--圆形图片,专门用来显示头像--el-avatar sizesmall :srcr.userImgUrl/el-avatar/el-colel-col span10{{r.nickName}}/el-colel-col span10span stylefloat: right;font-size: 12px;color: #ccc{{r.categoryName}}/span/el-col/el-row/el-card/el-col/el-rowdiv styletext-align: center;margin-bottom: 20pxel-button点击查看更多资讯/el-button/div!--资讯列表结束--!--资讯结束--/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div注册页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter stylemargin-top: 30pxel-row gutter20el-col span12el-cardimg srcimgs/reg.png width100%/el-card/el-colel-col span12!--注册表单开始--el-form label-width80pxel-form-itemh1 stylefloat: left;font-size: 28px立即注册/h1a stylefloat: right;text-decoration: none;color: #409EFF;position: relative;top: 20px hreflogin.html已有账号?现在登录/a/el-form-itemel-form-item label用户名el-input placeholder请输入用户名/el-input/el-form-itemel-form-item label密码el-input placeholder请输入密码/el-input/el-form-itemel-form-item label昵称el-input placeholder请输入昵称/el-input/el-form-itemel-form-itemel-button typeprimary注册/el-button/el-form-item/el-form!--注册表单结束--/el-col/el-row/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div登录页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main stylebackground-image: url(imgs/loginbg.gif);height: 500px;background-size: cover;background-position: centerel-card stylewidth: 500px;height: 300px;;margin: 50px autoel-form label-width80px stylewidth: 400px;margin: 50px autoel-form-item label用户名el-input placeholder请输入用户名/el-input/el-form-itemel-form-item label密码el-input placeholder请输入用密码/el-input/el-form-itemel-form-itemel-button typeprimary登录/el-button/el-form-item/el-form/el-card/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div个人信息页面
div idappel-containerel-header height80pxdiv classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter el-row gutter20el-col span4el-card styleheight: 500pxp stylecolor: orange个人信息/pp clicklocation.hrefarticleManagement.html稿件管理/p/el-card/el-colel-col span20el-card styleheight: 500pxel-form label-width100pxel-form-item label头像img srcimgs/head.jpgstylewidth: 145px;height: 145px;border-radius: 10px;float: left!--**********上传组件开始***********--el-upload stylefloat: leftactionhttps://jsonplaceholder.typicode.com/posts/list-typepicture-card:on-previewhandlePictureCardPreview:on-removehandleRemovei classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcdialogImageUrl alt/el-dialog!--**********上传组件结束***********--/el-form-itemel-form-item label昵称el-input placeholder请输入昵称stylewidth: 200px/el-input/el-form-itemel-form-item label用户名el-input disabled valuetomstylewidth: 200px/el-input/el-form-itemel-form-itemel-button typeprimary保存信息/el-button/el-form-item/el-form/el-card/el-col/el-row/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div稿件发布页面
div idapp el-containerel-header height80px div classcenterel-row gutter20el-col span6img srcimgs/icon.png width196 height65/el-colel-col span10el-menu modehorizontal active-text-colororangeel-menu-item index0首页/el-menu-itemel-menu-item index1食谱/el-menu-itemel-menu-item index2视频/el-menu-itemel-menu-item index3资讯/el-menu-item/el-menu/el-colel-col span6el-input stylemargin-top: 15px placeholder请输入搜索的关键字el-button slotappend iconel-icon-search/el-button/el-input/el-colel-col span2el-popoverplacementtop-starttitle欢迎来到烘焙坊!width200triggerhoverdiv slotreferencei classel-icon-userstylefont-size: 30px;position: relative;top: 20px/i/divel-button typeinfo注册/el-buttonel-button stylebackground-color: orange登录/el-button/el-popover/el-col/el-row/div/el-headerel-main classcenter el-row gutter20el-col span4el-card styleheight: 500pxp clicklocation.hrefpersonal.html个人信息/pp stylecolor: orange 稿件管理/p/el-card/el-colel-col span20el-card!--标签页卡开始--el-tabs v-modeltype typecard tab-clickhandleClickel-tab-pane label食谱 name1/el-tab-paneel-tab-pane label视频 name2/el-tab-paneel-tab-pane label资讯 name3/el-tab-pane/el-tabs!--标签页卡结束--!--发布文章表单开始--el-form label-width100pxel-form-item label文章标题el-input stylewidth: 200pxplaceholder请输入标题/el-input/el-form-itemel-form-item label文章分类el-selectel-option label面包 value1/el-optionel-option label家常菜 value2/el-optionel-option label小食 value3/el-option/el-select/el-form-itemel-form-item label封面el-uploadactionhttps://jsonplaceholder.typicode.com/posts/list-typepicture-card:on-previewhandlePictureCardPreview:on-removehandleRemovei classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcdialogImageUrl alt/el-dialog/el-form-itemel-form-item label文章内容div styleborder: 1px solid #cccdiv idtoolbar-container styleborder-bottom: 1px solid #ccc;!-- 工具栏 --/divdiv ideditor-container styleheight: 300px;!-- 编辑器 --/div/div/el-form-itemel-form-itemel-button typeprimary发布/el-button/el-form-item/el-form!--发布文章表单结束--/el-card/el-col/el-row/el-mainel-footer styleheight: 280px;background-color: #2f3234;padding:50px 0div classcenter styletext-align: center;color: #666el-rowel-col span8img srcimgs/icon.pngp教程灵感就看烘焙坊/pp烘焙行业网络社区平台/pp全国百城上千个职位等你来/p/el-colel-col span8el-row idfooter_centerel-col span8h3关于我们/h3p关于我们/pp烘焙学院/pp烘焙食谱/pp分类信息/pp求职招聘/pp社区交流/p/el-colel-col span8h3支持与服务/h3p联系我们/pp广告投放/pp用户协议/pp友情链接/pp在线反馈/pp我发投稿/p/el-colel-col span8h3底部导航/h3pArchiver/pp手机版/pp小黑屋/p/el-col/el-row/el-colel-col span8div stylefont-size: 58px;margin-top: 30pxspan stylecolor: orange烘焙/spanspan stylecolor: #666666坊/span/divp烘焙行业网络社区平台/p/el-col/el-row/div/el-footer/el-container
/div
