乡村相册

This commit is contained in:
yanran200730
2022-05-16 18:04:46 +08:00
parent 09e403d20a
commit 5c9c6d7ba4
23 changed files with 906 additions and 19 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="Daily">
<div class="Daily" ref="home">
<div class="top">
<span>请输入汇报单位</span>
</div>
@@ -22,7 +22,7 @@
</div>
</div>
<div class="add">
<div class="add-btn">
<div class="add-btn" @click="choose">
<span>添加图片</span>
</div>
<div class="add-btn">
@@ -34,6 +34,7 @@
</template>
<script>
import html2canvas from 'html2canvas'
export default {
name: 'Daily',
@@ -50,7 +51,21 @@
},
methods: {
choose () {
html2canvas(this.$refs.home, {
allowTaint: true,
useCORS: true,
backgroundColor: '#fff',
width: this.$refs.home.offsetWidth,
scale: 4,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.src = dataURL
console.log(dataURL)
}).catch(e => {
console.log(e)
})
}
}
}
</script>

View File

@@ -1,5 +1,5 @@
<template>
<div class="album-home">
<div class="album-home" ref="home">
<div class="userinfo">
<image src="https://pica.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_is.jpg?source=32738c0c" />
<div class="right">
@@ -19,8 +19,8 @@
</div>
<div class="album-operate">
<div class="left">
<div class="left-item">
<image src="../images/paizhao.png" @click="linkTo('/saas/AppCountryAlbum/Watermark')" />
<div class="left-item" @click="linkTo('./Watermark')">
<image src="../images/paizhao.png" />
<span>拍照</span>
</div>
<div class="left-item" @click="linkTo('./AddReport')">
@@ -69,6 +69,7 @@
</div>
</div>
</div>
<img :src="src">
</div>
</template>
@@ -78,7 +79,7 @@
data () {
return {
src: ''
}
},

View File

@@ -1,6 +1,6 @@
<template>
<div class="MeetingMminutes">
<table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE">
<table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE" @click="choose" ref="home">
<tr>
<th colspan="4" class="title">会议纪要</th>
</tr>
@@ -35,7 +35,7 @@
</table>
<div class="bottom">
<div class="add">
<div class="add-btn">
<div class="add-btn" @click="choose">
<span>添加图片</span>
</div>
<div class="add-btn">
@@ -47,6 +47,7 @@
</template>
<script>
import html2canvas from 'html2canvas'
export default {
name: 'MeetingMminutes',
@@ -63,7 +64,21 @@
},
methods: {
choose () {
html2canvas(this.$refs.home, {
allowTaint: true,
useCORS: true,
backgroundColor: '#fff',
width: this.$refs.home.offsetWidth,
scale: 2,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.src = dataURL
console.log(dataURL)
}).catch(e => {
console.log(e)
})
}
}
}
</script>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录2</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录3</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录4</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录5</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录6</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录7</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="Watermark1">
<div class="top">
<h2>打卡记录8</h2>
<p>09:45</p>
</div>
<div class="info">
<p>2022.02.25 星期五</p>
<p>武汉市·绿地蓝海国际A座</p>
<p> 7</p>
</div>
<div class="text">#这是一条备注信息</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>