简单使用vue实现的单页面demo,希望对大家有帮助!
连接查看地址:https://eight1302.github.io/my_resume/my_resume/view/resume.html
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/resume.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="shortcut icon" href="free.ico">
<title>FREE履历</title>
</head>
<body>
<div id="resume" class="col-md-12" style="height: 100%;overflow-y: auto;">
<div class="col-md-12 resume" style="padding: 0;height: auto;width: 50%;max-width: 937px;margin-bottom: 40px;">
<section class="col-md-10" style="padding: 0px;padding-bottom: 20px;">
<div class="col-md-2 img" style="padding: 0;">
<img v-bind:src="img" class="one">
</div>
<div class="col-md-10" style="padding: 0;">
<div class="col-md-12 name" style="padding: 0;">
<span style="font-weight: bold;">{
{name}}</span>
</div>
<div class="col-md-12 position" style="padding: 0;">
<span class="job">{
{job}}</span>
</div>
<div class="col-md-12 " style="padding: 0;">
<ul style="text-align: left;list-style: none;">
<li style="float: left;">
<i class="fa fa-envelope" aria-hidden="true"></i>{
{email}}
</li>
<li style="float: left;">
<i class="fa fa-phone" aria-hidden="true"></i> {
{phone}}
</li>
<li style="float: left;">
<i class="fa fa-github" aria-hidden="true"></i> <a v-bind:href="github">{
{github_name}}</a>
</li>
</ul>
</div>
<div class="col-md-12" style="padding: 0;">
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba">
<i class="fa fa-address-card-o fa-1" style="margin-right: 10px;"></i>{
{education_ba}}
</span>
<hr / style="border-top: 1px solid #161515;">
</div><