乡村相册
This commit is contained in:
yanran200730
@@ -1,29 +1,106 @@
|
||||
<template>
|
||||
<div class="photo">
|
||||
<image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
|
||||
<div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
|
||||
<div class="photo-top" data-html2canvas-ignore>
|
||||
<image src="./images/gengduo1.png" />
|
||||
<div class="photo-top__middle">
|
||||
<span>保存至：默认相册</span>
|
||||
<image src="./images/gengduo1.png" />
|
||||
</div>
|
||||
<span @click="save">保存</span>
|
||||
</div>
|
||||
<image
|
||||
mode="aspectFit"
|
||||
crossorigin="anonymous"
|
||||
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
|
||||
<div class="watermark">
|
||||
<component :is="'Watermark' + (currIndex + 1)"></component>
|
||||
</div>
|
||||
<div class="photo-bottom" v-if="!isHide">
|
||||
<div class="photo-bottom__top">
|
||||
<image src="./images/gengduo1.png" />
|
||||
<h2>水印</h2>
|
||||
<span>确定</span>
|
||||
</div>
|
||||
<div class="waterlist">
|
||||
<div
|
||||
class="water-item"
|
||||
:class="[currIndex === index ? 'active' : '']"
|
||||
v-for="(item, index) in config"
|
||||
:key="index"
|
||||
@click="currIndex = index">
|
||||
<image :src="item.thum" mode="aspectFill" />
|
||||
<div class="water-item__bottom">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import Watermark1 from './components/watermark/Watermark1'
|
||||
import Watermark2 from './components/watermark/Watermark2'
|
||||
import Watermark3 from './components/watermark/Watermark3'
|
||||
import Watermark4 from './components/watermark/Watermark4'
|
||||
import Watermark5 from './components/watermark/Watermark5'
|
||||
import Watermark6 from './components/watermark/Watermark6'
|
||||
import Watermark7 from './components/watermark/Watermark7'
|
||||
import Watermark8 from './components/watermark/Watermark8'
|
||||
|
||||
import { config } from './config'
|
||||
export default {
|
||||
name: 'Watermark',
|
||||
|
||||
appName: '水印相机',
|
||||
|
||||
components: {
|
||||
Watermark1,
|
||||
Watermark2,
|
||||
Watermark3,
|
||||
Watermark4,
|
||||
Watermark5,
|
||||
Watermark6,
|
||||
Watermark7,
|
||||
Watermark8
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
src: '',
|
||||
config,
|
||||
currIndex: 0,
|
||||
isHide: false,
|
||||
height: '100%',
|
||||
waterSrc: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
this.height = uni.getSystemInfoSync().windowHeight
|
||||
},
|
||||
|
||||
methods: {
|
||||
back () {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
save () {
|
||||
this.isHide = true
|
||||
console.log(this.$refs.waterMarker.offsetHeight)
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
html2canvas(this.$refs.waterMarker, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
backgroundColor: '#fff',
|
||||
width: this.$refs.waterMarker.offsetWidth,
|
||||
height: this.$refs.waterMarker.offsetHeight,
|
||||
scale: 1
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL("image/png");
|
||||
this.waterSrc = dataURL
|
||||
console.log(dataURL)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -34,8 +111,163 @@
|
||||
.photo {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
height: 800px;
|
||||
background: #444;
|
||||
overflow: hidden;
|
||||
|
||||
.newImg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 11111;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
position: fixed;
|
||||
left: 32px;
|
||||
bottom: 512px;
|
||||
z-index: 111;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.photo-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 474px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32px 32px 0px 0px;
|
||||
|
||||
.waterlist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: calc(100% - 96px);
|
||||
padding: 18px 16px;
|
||||
overflow-y: auto;
|
||||
|
||||
.water-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 352px;
|
||||
height: 240px;
|
||||
margin-bottom: 16px;
|
||||
background: #2A3540;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
border: 6px solid #408EF6;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 176px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.water-item__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-bottom__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
padding: 0 32px;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-top {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 0 32px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
& > image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #cbcbcb;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.photo-top__middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 336px;
|
||||
height: 72px;
|
||||
background: #0B111F;
|
||||
border-radius: 40px;
|
||||
font-size: 28px;
|
||||
color: #cbcbcb;
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.home-active {
|
||||
.photo-bottom {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.watermark {
|
||||
bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
& > image {
|
||||
width: 100%;
|
||||
|
||||
@@ -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>
|
||||
47
src/saas/AppCountryAlbum/config/index.js
Normal file
47
src/saas/AppCountryAlbum/config/index.js
Normal file
@@ -0,0 +1,47 @@
|
||||
export const config = [
|
||||
{
|
||||
name: '打卡水印',
|
||||
type: '1',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
|
||||
},
|
||||
{
|
||||
name: '时间地点水印',
|
||||
type: '2',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/2.png'
|
||||
},
|
||||
{
|
||||
name: '巡查水印',
|
||||
type: '3',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/3.png'
|
||||
},
|
||||
{
|
||||
name: '防疫水印',
|
||||
type: '4',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/4.png'
|
||||
},
|
||||
{
|
||||
name: '网格化水印',
|
||||
type: '5',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/5.png'
|
||||
},
|
||||
{
|
||||
name: '标题水印',
|
||||
type: '6',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/6.png'
|
||||
},
|
||||
{
|
||||
name: '环境卫生水印',
|
||||
type: '7',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/7.png'
|
||||
},
|
||||
{
|
||||
name: '日历水印',
|
||||
type: '8',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png'
|
||||
},
|
||||
// {
|
||||
// name: '自定义水印',
|
||||
// type: '9',
|
||||
// thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
|
||||
// }
|
||||
]
|
||||
BIN
src/saas/AppCountryAlbum/images/sy/1.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/2.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/3.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/4.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/5.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/6.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/7.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/8.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/9.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Reference in New Issue
Block a user