乡村相册
This commit is contained in:
yanran200730
@@ -1,23 +1,21 @@
|
||||
<template>
|
||||
<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" />
|
||||
<!-- <image src="./images/gengduo1.png" @click="back" /> -->
|
||||
<u-icon name="close" color="#fff" size="28" @click="back"></u-icon>
|
||||
<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">
|
||||
<image :src="img" mode="aspectFit" />
|
||||
<div class="watermark" v-if="currIndex > -1">
|
||||
<component :is="'Watermark' + (currIndex + 1)"></component>
|
||||
</div>
|
||||
<div class="photo-bottom" v-if="!isHide">
|
||||
<div class="photo-bottom__top">
|
||||
<image src="./images/gengduo1.png" />
|
||||
<image src="./images/gengduo1.png" @click="isHide = true, currIndex = -1" />
|
||||
<h2>水印</h2>
|
||||
<span>确定</span>
|
||||
</div>
|
||||
@@ -67,7 +65,7 @@
|
||||
|
||||
data () {
|
||||
return {
|
||||
src: '',
|
||||
img: '',
|
||||
config,
|
||||
currIndex: 0,
|
||||
isHide: false,
|
||||
@@ -76,7 +74,8 @@
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
onLoad (query) {
|
||||
this.img = query.url
|
||||
this.height = uni.getSystemInfoSync().windowHeight
|
||||
},
|
||||
|
||||
@@ -88,20 +87,21 @@
|
||||
setTimeout(() => {
|
||||
html2canvas(this.$refs.waterMarker, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
backgroundColor: '#fff',
|
||||
width: this.$refs.waterMarker.offsetWidth,
|
||||
height: this.$refs.waterMarker.offsetHeight,
|
||||
scale: 1
|
||||
useCORS: true
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL("image/png");
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
this.waterSrc = dataURL
|
||||
console.log(dataURL)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
|
||||
back () {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
156
src/saas/AppCountryAlbum/WatermarkConfig.vue
Normal file
156
src/saas/AppCountryAlbum/WatermarkConfig.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="AttendanceFiexdTime">
|
||||
<div class="form-group">
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<switch color="#1088F9" checked />
|
||||
<div class="left-right">
|
||||
<h2>大标题</h2>
|
||||
<p>打卡</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<switch color="#1088F9" disabled checked />
|
||||
<div class="left-right">
|
||||
<h2>时间</h2>
|
||||
<p>2022-01-03</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<switch color="#1088F9" checked />
|
||||
<div class="left-right">
|
||||
<h2>地点</h2>
|
||||
<p>绿地蓝海</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<switch color="#1088F9" checked />
|
||||
<div class="left-right">
|
||||
<h2>拍摄人</h2>
|
||||
<p>陶白白</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<switch color="#1088F9" checked />
|
||||
<div class="left-right">
|
||||
<h2>天气</h2>
|
||||
<p>雨夹雪 北风3℃</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-btn" hover-class="text-hover">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AttendanceFiexdTime {
|
||||
padding-bottom: 130px;
|
||||
|
||||
* {
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
background: #1365DD;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 32px;
|
||||
background: #fff;
|
||||
|
||||
.form-group__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 160px;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-right {
|
||||
margin-left: 36px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
<div class="album-operate">
|
||||
<div class="left">
|
||||
<div class="left-item" @click="linkTo('./Watermark')">
|
||||
<div class="left-item" @click="addPhoto">
|
||||
<image src="../images/paizhao.png" />
|
||||
<span>拍照</span>
|
||||
</div>
|
||||
@@ -92,6 +92,23 @@
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
addPhoto () {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: res => {
|
||||
console.log(res.tempFiles[0])
|
||||
let formData = new FormData()
|
||||
formData.append('file', res.tempFiles[0])
|
||||
this.$http.post('/admin/file/add2?type=image', formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.linkTo(`./Watermark?url=${res.data.url}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="Watermark1" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>打卡记录</h2>
|
||||
<p>09:45</p>
|
||||
<p>{{ time }}</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>2022.02.25 星期五</p>
|
||||
<p>{{ date }} {{ weekCn }}</p>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<p>晴 7℃</p>
|
||||
</div>
|
||||
@@ -14,9 +14,95 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
computed: {
|
||||
weekCn() {
|
||||
if (this.week === 1) {
|
||||
return '星期一'
|
||||
}
|
||||
if (this.week === 2) {
|
||||
return '星期二'
|
||||
}
|
||||
if (this.week === 3) {
|
||||
return '星期三'
|
||||
}
|
||||
if (this.week === 4) {
|
||||
return '星期四'
|
||||
}
|
||||
if (this.week === 5) {
|
||||
return '星期五'
|
||||
}
|
||||
|
||||
if (this.week === 6) {
|
||||
return '星期六'
|
||||
}
|
||||
|
||||
return '星期天'
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
|
||||
this.injectJWeixin(['getLocation']).then(res => {
|
||||
console.log(res)
|
||||
wx.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
var latitude = res.latitude
|
||||
var longitude = res.longitude
|
||||
var speed = res.speed
|
||||
var accuracy = res.accuracy
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
getLocation () {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: res => {
|
||||
console.log(res)
|
||||
this.$http.get('https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1').then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
fail: error => {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,26 +1,86 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="Watermark2" @click="linkTo('./WatermarkConfig')">
|
||||
<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 class="left">
|
||||
<h2>{{ time }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ date }} </h2>
|
||||
<p>{{ weekCn }} 晴 7℃</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
computed: {
|
||||
weekCn() {
|
||||
if (this.week === 1) {
|
||||
return '星期一'
|
||||
}
|
||||
if (this.week === 2) {
|
||||
return '星期二'
|
||||
}
|
||||
if (this.week === 3) {
|
||||
return '星期三'
|
||||
}
|
||||
if (this.week === 4) {
|
||||
return '星期四'
|
||||
}
|
||||
if (this.week === 5) {
|
||||
return '星期五'
|
||||
}
|
||||
|
||||
if (this.week === 6) {
|
||||
return '星期六'
|
||||
}
|
||||
|
||||
return '星期天'
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark1 {
|
||||
.Watermark2 {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -31,33 +91,57 @@ export default {
|
||||
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%);
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 184px;
|
||||
background: #FEFFFE;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #1ABDA6;
|
||||
font-size: 34px;
|
||||
font-weight: normal;
|
||||
.left {
|
||||
position: relative;
|
||||
margin-right: 38px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
z-index: 1;
|
||||
width: 6px;
|
||||
height: 72px;
|
||||
background: #F8BC58;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 68px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
font-size: 48px;
|
||||
.right {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 20px 0 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 40px;
|
||||
margin: 32px 0;
|
||||
|
||||
@@ -1,71 +1,156 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="Watermark3" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>打卡记录3</h2>
|
||||
<p>09:45</p>
|
||||
<h2>巡查</h2>
|
||||
<span>陶白白</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>2022.02.25 星期五</p>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<p>晴 7℃</p>
|
||||
<div class="middle">
|
||||
<h2>{{ time }}</h2>
|
||||
<span>晴 7℃</span>
|
||||
</div>
|
||||
<p>{{ date }} {{ weekCn }}</p>
|
||||
<div class="text">
|
||||
<span>铁路巡检</span>
|
||||
<image src="./../../images/quotes.png" />
|
||||
</div>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
computed: {
|
||||
weekCn() {
|
||||
if (this.week === 1) {
|
||||
return '星期一'
|
||||
}
|
||||
if (this.week === 2) {
|
||||
return '星期二'
|
||||
}
|
||||
if (this.week === 3) {
|
||||
return '星期三'
|
||||
}
|
||||
if (this.week === 4) {
|
||||
return '星期四'
|
||||
}
|
||||
if (this.week === 5) {
|
||||
return '星期五'
|
||||
}
|
||||
|
||||
if (this.week === 6) {
|
||||
return '星期六'
|
||||
}
|
||||
|
||||
return '星期天'
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark1 {
|
||||
.Watermark3 {
|
||||
width: 348px;
|
||||
line-height: 1;
|
||||
padding: 16px;
|
||||
background: rgba(56, 167, 255, 0.6);
|
||||
border-radius: 4px;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text {
|
||||
min-width: 274px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
padding-left: 10px;
|
||||
font-size: 28px;
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 0;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 184px;
|
||||
background: #FEFFFE;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
h2 {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #1ABDA6;
|
||||
font-size: 34px;
|
||||
font-size: 68px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
font-size: 48px;
|
||||
span {
|
||||
color: #53FBFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 40px;
|
||||
margin: 32px 0;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
& > p {
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px 0 0 6px;
|
||||
border-bottom: 4px solid #FFE97A;
|
||||
|
||||
h2 {
|
||||
width: 100px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #498abe;
|
||||
font-size: 32px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background: #FFE97A;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,71 +1,167 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="Watermark4" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>打卡记录4</h2>
|
||||
<p>09:45</p>
|
||||
<image src="./../../images/fangyishuiyin.png" />
|
||||
<h2>日常消杀</h2>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>2022.02.25 星期五</p>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<p>晴 7℃</p>
|
||||
<div class="Watermark4-body">
|
||||
<h2>{{ time }}</h2>
|
||||
<p>{{ date }} {{ weekCn }}</p>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<label>地点：</label>
|
||||
<span>武汉市·绿地蓝海A座</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>人员：</label>
|
||||
<span>陶白白</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>备注：</label>
|
||||
<span>这是一条很长的备注信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
computed: {
|
||||
weekCn() {
|
||||
if (this.week === 1) {
|
||||
return '星期一'
|
||||
}
|
||||
if (this.week === 2) {
|
||||
return '星期二'
|
||||
}
|
||||
if (this.week === 3) {
|
||||
return '星期三'
|
||||
}
|
||||
if (this.week === 4) {
|
||||
return '星期四'
|
||||
}
|
||||
if (this.week === 5) {
|
||||
return '星期五'
|
||||
}
|
||||
|
||||
if (this.week === 6) {
|
||||
return '星期六'
|
||||
}
|
||||
|
||||
return '星期天'
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark1 {
|
||||
.Watermark4 {
|
||||
width: 400px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
|
||||
* {
|
||||
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;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 60px;
|
||||
background: linear-gradient(270deg, rgba(67, 60, 255, 0) 0%, rgba(60, 163, 255, 0.8) 50%, #3B92FF 100%);
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -16px;
|
||||
z-index: 1;
|
||||
width: 92px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
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;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 40px;
|
||||
margin: 32px 0;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
.Watermark4-body {
|
||||
padding: 24px 20px;
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
& > h2 {
|
||||
line-height: 56px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
& > p {
|
||||
line-height: 36px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.info {
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #BADCFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,71 +1,207 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="Watermark5" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>打卡记录5</h2>
|
||||
<p>09:45</p>
|
||||
<h2>走访慰问</h2>
|
||||
<div class="right">
|
||||
<h2>{{ time }}</h2>
|
||||
<p>{{ date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>2022.02.25 星期五</p>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<p>晴 7℃</p>
|
||||
<div class="info-item">
|
||||
<label>人员：</label>
|
||||
<span>陶白白</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>网格：</label>
|
||||
<span>迁延街第一网格</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>地点：</label>
|
||||
<span>武汉市·绿地蓝海A座</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>服务对象：</label>
|
||||
<span>王一一</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
<div class="bottom">
|
||||
<span>工作纪实</span>
|
||||
<i>网格员工作纪实</i>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
computed: {
|
||||
weekCn() {
|
||||
if (this.week === 1) {
|
||||
return '星期一'
|
||||
}
|
||||
if (this.week === 2) {
|
||||
return '星期二'
|
||||
}
|
||||
if (this.week === 3) {
|
||||
return '星期三'
|
||||
}
|
||||
if (this.week === 4) {
|
||||
return '星期四'
|
||||
}
|
||||
if (this.week === 5) {
|
||||
return '星期五'
|
||||
}
|
||||
|
||||
if (this.week === 6) {
|
||||
return '星期六'
|
||||
}
|
||||
|
||||
return '星期天'
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark1 {
|
||||
.Watermark5 {
|
||||
width: 440px;
|
||||
padding: 0 16px 22px;
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
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%);
|
||||
.line {
|
||||
margin-top: 4px;
|
||||
height: 4px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 184px;
|
||||
background: #FEFFFE;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 3px solid #2145C4;
|
||||
|
||||
h2 {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #1ABDA6;
|
||||
font-size: 34px;
|
||||
font-weight: normal;
|
||||
span {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
font-size: 48px;
|
||||
i {
|
||||
flex: 1;
|
||||
color: #2145C4;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 40px;
|
||||
margin: 32px 0;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
margin-bottom: 16px;
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #000000;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90px;
|
||||
margin-bottom: 20px;
|
||||
color: #2145C4;
|
||||
border-bottom: 4px solid #2145C4;
|
||||
|
||||
& > h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
width: 96px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,71 +1,131 @@
|
||||
<template>
|
||||
<div class="Watermark1">
|
||||
<div class="top">
|
||||
<h2>打卡记录6</h2>
|
||||
<p>09:45</p>
|
||||
<div class="Watermark6" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="title">
|
||||
<h2>我是标题</h2>
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>2022.02.25 星期五</p>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<p>晴 7℃</p>
|
||||
<div class="info-item">
|
||||
<label>时间：</label>
|
||||
<span>{{ date }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>地点：</label>
|
||||
<span>武汉市·绿地蓝海A座</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import {mapActions} from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
created () {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD HH:mm')
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD HH:mm')
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin']),
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark1 {
|
||||
.Watermark6 {
|
||||
width: 440px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
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%);
|
||||
.info {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
color: #000000;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 184px;
|
||||
background: #FEFFFE;
|
||||
border-radius: 16px;
|
||||
.title {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background: rgba(23, 91, 255, 0.7);
|
||||
|
||||
h2 {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #1ABDA6;
|
||||
font-size: 34px;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
font-size: 48px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 40px;
|
||||
margin: 32px 0;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/saas/AppCountryAlbum/images/quotes.png
Normal file
BIN
src/saas/AppCountryAlbum/images/quotes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
Reference in New Issue
Block a user