index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="http://192.168.0.112:8080/favicon.ico">
<title>vueblog-vue</title>
<link rel="stylesheet" href="./assets/element.css">
<style scoped>
.mpage {
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="mcontaner">
<div class="m-content">
<h3>欢迎来到我的博客</h3>
<div class="block"><span class="el-avatar el-avatar--circle"
style="height: 50px; width: 50px; line-height: 50px;"><img
src="./assets/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>
<div>请先登录</div>
</div>
<div class="maction"><span><a href="./index.html" class="el-link el-link--default is-underline">
<!----><span class="el-link--inner">主页</span>
<!---->
</a></span>
<div class="el-divider el-divider--vertical">
<!---->
</div><span><a href="./add.html" class="el-link el-link--success is-underline">
<!----><span class="el-link--inner">发表博客</span>
<!---->
</a></span>
<div class="el-divider el-divider--vertical">
<!---->
</div><span><a href="./login.html" class="el-link el-link--primary is-underline">
<!----><span class="el-link--inner">登录</span>
<!---->
</a></span><span style="display: none;"><a class="el-link el-link--danger is-underline">
<!----><span class="el-link--inner">退出</span>
<!---->
</a></span>
</div>
</div>
<div class="block">
<ul class="el-timeline">
<li class="el-timeline-item">
<div class="el-timeline-item__tail"></div>
<div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--">
<!---->
</div>
<!---->
<div class="el-timeline-item__wrapper">
<div class="el-timeline-item__timestamp is-top">
</div>
<div class="el-timeline-item__content">
<div class="el-card is-always-shadow">
<!---->
<div class="el-card__body">
<h4><a href="./detail.html" class="router-link-active"> 900余件故宫文物在港展出 </a></h4>
<p> 微信公众号“微故宫”7月3日消息,香港回归祖国25周年之际,筹备多年的香港故宫文化博物馆在今天正式对公众开放! </p>
</div>
</div>
</div>
<!---->
</div>
</li>
</ul>
<div class="mpage el-pagination is-background"><button type="button" disabled="disabled" class="btn-prev"><i
class="el-icon el-icon-arrow-left"></i></button>
<ul class="el-pager">
<li class="number active">1</li>
<!---->
<!---->
<!---->
</ul><button type="button" disabled="disabled" class="btn-next"><i
class="el-icon el-icon-arrow-right"></i></button>
</div>
</div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
login.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>vueblog-vue</title>
<link rel="stylesheet" href="./assets/element.css">
</head>
<style>
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
/*background-color: #E9EEF3;*/
color: #333;
text-align: center;
line-height: 160px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.mlogo {
height: 60%;
margin-top: 10px;
}
.demo-ruleForm {
max-width: 500px;
margin: 0 auto;
}
</style>
<body>
<noscript>
</noscript>
<div id="app">
<div data-v-26084dc2="">
<section data-v-26084dc2="" class="el-container is-vertical">
<header data-v-26084dc2="" class="el-header" style="height: 60px;"><img data-v-26084dc2=""
src="https://ddrk.me/wp-content/uploads/2019/01/android-chrome-512x512-150x150.png" alt="" class="mlogo">
</header>
<main data-v-26084dc2="" class="el-main">
<form data-v-26084dc2="" class="el-form demo-ruleForm">
<div data-v-26084dc2="" class="el-form-item is-required"><label for="username" class="el-form-item__label"
style="width: 100px;">用户名</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div data-v-26084dc2="" class="el-input">
<!----><input type="text" autocomplete="off" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div data-v-26084dc2="" class="el-form-item is-required"><label for="password" class="el-form-item__label"
style="width: 100px;">密码</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div data-v-26084dc2="" class="el-input">
<!----><input type="password" autocomplete="off" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div data-v-26084dc2="" class="el-form-item">
<!---->
<div class="el-form-item__content" style="margin-left: 100px;"><button data-v-26084dc2="" type="button"
class="el-button el-button--primary">
<!---->
<!----><span>立即创建</span>
</button><button data-v-26084dc2="" type="button" class="el-button el-button--default">
<!---->
<!----><span>重置</span>
</button>
<!---->
</div>
</div>
</form>
</main>
</section>
</div>
</div>
</body>
</html>
detail.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>vueblog-vue</title>
<link rel="stylesheet" href="./assets/element.css">
</head>
<style>
.mblog {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
width: 100%;
min-height: 700px;
padding: 20px 15px;
}
.m-content {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.maction {
margin: 10px 0;
}
</style>
<body>
<noscript>
<strong>We're sorry but vueblog-vue doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app">
<div>
<div data-v-61dd7a3d="" class="m-content">
<h3 data-v-61dd7a3d="">欢迎来到我的博客</h3>
<div data-v-61dd7a3d="" class="block"><span data-v-61dd7a3d="" class="el-avatar el-avatar--circle"
style="height: 50px; width: 50px; line-height: 50px;"><img
src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
style="object-fit: cover;"></span>
<div data-v-61dd7a3d="">请先登录</div>
</div>
<div data-v-61dd7a3d="" class="maction"><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./index.html"
class="el-link el-link--default is-underline">
<!----><span class="el-link--inner">主页</span>
<!---->
</a></span>
<div data-v-61dd7a3d="" class="el-divider el-divider--vertical">
<!---->
</div><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./add.html"
class="el-link el-link--success is-underline">
<!----><span class="el-link--inner">发表博客</span>
<!---->
</a></span>
<div data-v-61dd7a3d="" class="el-divider el-divider--vertical">
<!---->
</div><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./login.html"
class="el-link el-link--primary is-underline">
<!----><span class="el-link--inner">登录</span>
<!---->
</a></span><span data-v-61dd7a3d="" style="display: none;"><a data-v-61dd7a3d=""
class="el-link el-link--danger is-underline">
<!----><span class="el-link--inner">退出</span>
<!---->
</a></span>
</div>
</div>
<div class="mblog">
<h2></h2>
<!---->
<div class="el-divider el-divider--horizontal">
<!---->
</div>
<div class="markdown-body"> 微信公众号“微故宫”7月3日消息,香港回归祖国25周年之际,筹备多年的香港故宫文化博物馆在今天正式对公众开放!
香港故宫文化博物馆是西九文化区管理局与故宫博物院的合作项目,以推动中国文化艺术的研究和欣赏,并促进不同文明之间的对话为宗旨。香港故宫文化博物馆的建成,让香港市民能够零距离欣赏珍贵文物,体悟中华优秀传统文化的厚重底蕴,增强香港繁荣昌盛的文化自信。
观众参观香港故宫文化博物馆 香港故宫文化博物馆/摄影师:刘庭玉 观众参观香港故宫文化博物馆 图片来源:央视新闻客户端
香港故宫文化博物馆将展出900余件故宫文物,绝大部分为首次在港展出;开设9大展览,从香港角度演绎故宫文化;开放全新展馆,打造香港新地标。 让我们展开来,仔细看! </div>
</div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="http://192.168.0.112:8080/favicon.ico">
<title>vueblog-vue</title>
<link rel="stylesheet" href="./assets/element.css">
<link rel="stylesheet" href="./assets/github-markdown.min.css">
</head>
<style>
.m-content {
text-align: center;
}
</style>
<body>
<noscript>
<strong>We're sorry but vueblog-vue doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app">
<div>
<div class="m-content">
<h3>欢迎来到我的博客</h3>
<div class="block"><span class="el-avatar el-avatar--circle"
style="height: 50px; width: 50px; line-height: 50px;"><img
src="./assets/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>
<div>请先登录</div>
</div>
<div class="maction"><span><a href="./index.html" class="el-link el-link--default is-underline">
<!----><span class="el-link--inner">主页</span>
<!---->
</a></span>
<div class="el-divider el-divider--vertical">
<!---->
</div><span><a href="./add.html" class="el-link el-link--success is-underline">
<!----><span class="el-link--inner">发表博客</span>
<!---->
</a></span>
<div class="el-divider el-divider--vertical">
<!---->
</div><span><a href="./login.html" class="el-link el-link--primary is-underline">
<!----><span class="el-link--inner">登录</span>
<!---->
</a></span><span style="display: none;"><a class="el-link el-link--danger is-underline">
<!----><span class="el-link--inner">退出</span>
<!---->
</a></span>
</div>
</div>
<div class="m-content">
<form class="el-form demo-ruleForm">
<div class="el-form-item is-required"><label for="title" class="el-form-item__label"
style="width: 100px;">标题</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!----><input type="text" autocomplete="off" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="el-form-item is-required"><label for="description" class="el-form-item__label"
style="width: 100px;">摘要</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-textarea"><textarea autocomplete="off" class="el-textarea__inner"
style="min-height: 33px;"></textarea>
<!---->
</div>
<!---->
</div>
</div>
<div class="el-form-item"><label for="content" class="el-form-item__label" style="width: 100px;">内容</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-textarea"><textarea autocomplete="off" class="el-textarea__inner"
style="min-height:300px;"></textarea>
<!---->
</div>
</div>
</div>
<div class="el-form-item">
<!---->
<div class="el-form-item__content" style="margin-left: 100px;"><button type="button"
class="el-button el-button--primary">
<!---->
<!----><span>立即创建</span>
</button><button type="button" class="el-button el-button--default">
<!---->
<!----><span>重置</span>
</button>
<!---->
</div>
</div>
</form>
</div>
</div>
</div>
<!-- built files will be auto injected -->
<div>
<!---->
</div>
</body>
</html>