乡村相册
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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: ''
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
Normal 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>
|
||||
72
src/saas/AppCountryAlbum/components/watermark/Watermark8.vue
Normal file
72
src/saas/AppCountryAlbum/components/watermark/Watermark8.vue
Normal 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>
|
||||
Reference in New Issue
Block a user