<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
<meta name="HandheldFriendly" content="true" />
|
<meta name="MobileOptimized" content="320" />
|
<title>新凯迪制造云平台</title>
|
<!-- 引入像素转换 px->rpx -->
|
<script src="../../js/rpx4html.js"></script>
|
<!-- 引入样式文件 -->
|
<!-- <link rel="stylesheet1" href="https://unpkg.com/vant@2.12/lib/index.css" /> -->
|
<!-- <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" /> -->
|
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
<!-- <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script> -->
|
<!-- <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script> -->
|
|
|
|
|
|
<link rel="stylesheet" href="../css/global.css" type="text/css" charset="utf-8" />
|
<script type="text/javascript">
|
// 在 #app 标签下渲染一个按钮组件
|
new Vue({
|
el: '#app',
|
template: `<van-button>按钮</van-button>`,
|
});
|
|
// 调用函数组件，弹出一个 Toast
|
vant.Toast('提示');
|
|
// 通过 CDN 引入时不会自动注册 Lazyload 组件
|
// 可以通过下面的方式手动注册
|
Vue.use(vant.Lazyload);
|
</script>
|
</head>
|
<body>
|
|
<div class="body">
|
<!-- 头部logo -->
|
<div class="headBG">
|
<div class="headPic" />
|
</div>
|
<!-- 主体 -->
|
|
|
|
</div>
|
</body>
|
<style type="text/css">
|
body {
|
background-color: antiquewhite;
|
}
|
|
.body {
|
width: 100%;
|
height: 700px;
|
background-color: grey;
|
margin-top: 300px;
|
}
|
|
.headBG {
|
width: 240px;
|
height: 240px;
|
background-color: #fff;
|
border-radius: 50%;
|
position: absolute;
|
top: 170px;
|
left: 248px;
|
}
|
|
.headPic {
|
width: 200px;
|
height: 200px;
|
border-radius: 50%;
|
background: url('../../static/images/96x96.png') no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 22px;
|
left: 20px;
|
}
|
</style>
|
</html>
|
