<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>约定书</title>
<style>
html{
font-size: 20px;
}
body {
font-family: "Microsoft YaHei", sans-serif;
padding: 2rem;
margin: 0;
box-sizing: border-box;
width: 30rem;
text-align: center;
margin: 0 auto;
}
h1 {
color: red;
text-align: center;
font-size: 2rem;
}
.subtitle {
text-align: center;
font-size: 1.2rem;
}
p {
text-indent: 2em;
font-size: 1rem;
line-height: 1.8;
text-align: justify;
margin: 20px 0;
}
.highlight {
color: red;
font-weight: bold;
text-align: center;
}
.signature {
text-align: right;
margin-top: 40px;
}
.signature div {
display: inline-block;
margin: 0 30px;
}
.editable {
cursor: pointer;
outline: none;
/*border-bottom: 1px dashed #ccc;*/
display: inline-block;
}
.date {
text-align: right;
margin-top: 20px;
float: right;
}
hr{
border: none;
border-top: 2px solid red;
margin: 20px 0;
}
.flex{
display: flex !important;
align-items: center;
justify-content: center;
}
.sy{
position: relative;
}
.sy .sy1{
width: 3rem;
transform: rotate(15deg);
}
.sy-text{
position: absolute;
top:50%;
left: 50%;
}
@font-face {
font-family: 'MyCustomFont'; /* 定义字体的名称 */
src:
url('段宁毛笔精美行书.ttf') format('truetype'); /* 引用 .ttf 文件 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}
.sybg,.sybg2{
background-image: url(sy1.png);
background-size: 3rem auto;
background-repeat: no-repeat;
/* width: 300px; */
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-position: center;
font-family: 'MyCustomFont';
font-size: 2rem;
min-width: 100px;
}
.sybg2{
background-image: url(sy2.png);
}
.data-text{
font-family: 'MyCustomFont';
font-weight:bold;
}
</style>
</head>
<body>
<h1 contenteditable="true" class="editable">约定书</h1>
<div class="subtitle editable" contenteditable="true" style="display:block">约字[2024] 001号</div>
<hr>
<p contenteditable="true" class="editable">
我们可以吵架，但不能记仇，更不能分开，这是约定。因为夫妻就是一双筷子，有苦一起吃，有甜一起享，有难一起扛，有累一起忙。
</p>
<p contenteditable="true" class="editable">
融入了同一个家庭，不说感谢，不分彼此，最好的感情不是一辈子不吵架，而是吵了还能一辈子，闹了一辈子，还想风雨同舟，携手此生！
</p>
<p class="highlight" contenteditable="true" class="editable">
特此约定，遇你、与你、予你、余你！
</p>
<div class="signature flex" style="justify-content: flex-end;">
<div contenteditable="true" class="editable flex" >
老公：
<span class="sybg">
茄子
</span>
</div>
<div contenteditable="true" class="editable flex">
老婆：
<span class="sybg2">
茄子
</span>
</div>
</div>
<div class="date editable" contenteditable="true" >
签发日期：<span class="data-text">2024.10.23</span>
</div>
<script>
document.querySelectorAll('.editable').forEach(function(element) {
element.addEventListener('click', function() {
this.focus();
});
});
</script>
</body>
</html>
