乡村相册
This commit is contained in:
@@ -13,6 +13,9 @@ instance.interceptors.request.use(config => {
|
||||
if (/AppCountryAlbum/.test(location.pathname)) {
|
||||
config.url = config.url.replace(/(app|auth|admin)\//, "api/")
|
||||
}
|
||||
if (sessionStorage.getItem("prj") == "saas") {
|
||||
config.url = config.url.replace(/(app|auth|admin)\//, "api/")
|
||||
}
|
||||
if (!config.withoutToken && store.state.token) {
|
||||
config.headers["Authorization"] = store.state.token
|
||||
}
|
||||
|
||||
@@ -36,12 +36,19 @@
|
||||
}
|
||||
},
|
||||
"/online": {
|
||||
"target": "https://test87tpweb.cunwuyun.cn",
|
||||
"target": "https://test87xcxc.cunwuyun.cn",
|
||||
"changeOrigin": true,
|
||||
"pathRewrite": {
|
||||
"^/online": "/"
|
||||
}
|
||||
},
|
||||
"/api": {
|
||||
"target": "https://test87xcxc.cunwuyun.cn",
|
||||
"changeOrigin": true,
|
||||
"pathRewrite": {
|
||||
"^/api": "/api"
|
||||
}
|
||||
},
|
||||
"/tmap": {
|
||||
"target": "https://apis.map.qq.com",
|
||||
"changeOrigin": true,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<span>相册名称</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入相册名称" placeholder-style="color: #999" />
|
||||
<input placeholder="请输入相册名称" v-model="albumName" placeholder-style="color: #999" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
@@ -15,8 +15,8 @@
|
||||
<label>*</label>
|
||||
<span>水印</span>
|
||||
</div>
|
||||
<div class="right" @click="linkTo('./WatermarkSetting')">
|
||||
<span>请选择</span>
|
||||
<div class="right" @click="linkTo('./WatermarkSetting?value=' + watermarkId)">
|
||||
<span>{{ watermarkId ? '已选择' : '不限' }}</span>
|
||||
<image src="./images/right.png" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,22 +26,22 @@
|
||||
<span>拍摄人</span>
|
||||
</div>
|
||||
<div class="right" @click="linkTo('./PersonnelSetting')">
|
||||
<span>请选择</span>
|
||||
<span>{{ createUserId ? '已选择' : '不限' }}</span>
|
||||
<image src="./images/right.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item" @click="linkTo('./SourceSetting')">
|
||||
<div class="form-group__item" @click="linkTo('./SourceSetting?value=' + photoSource)">
|
||||
<div class="left">
|
||||
<label>*</label>
|
||||
<span>照片来源</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>请选择</span>
|
||||
<span>{{ photoSource == 1 ? '仅限乡村相册拍摄' : '不限' }}</span>
|
||||
<image src="./images/right.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-btn" hover-class="text-hover">保存</div>
|
||||
<button :loading="isLoading" @click="save" class="form-btn" hover-class="text-hover">保存</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -52,12 +52,31 @@
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
albumName: '',
|
||||
createUserId: '',
|
||||
photoSource: 0,
|
||||
watermarkId: '',
|
||||
isLoading: false,
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
onLoad (query) {
|
||||
this.id = query.id || ''
|
||||
|
||||
if (query.id) {
|
||||
this.getInfo(query.id)
|
||||
}
|
||||
|
||||
uni.$on('change', e => {
|
||||
if (e.type === 'watermark') {
|
||||
this.watermarkId = e.value
|
||||
}
|
||||
|
||||
if (e.type === 'photoSource') {
|
||||
this.photoSource = e.value
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -65,6 +84,50 @@
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.albumName = res.data.albumName
|
||||
this.createUserId = res.data.createUserId || ''
|
||||
this.photoSource = res.data.photoSource || 0
|
||||
this.watermarkId = res.data.watermarkId || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
save () {
|
||||
if (!this.albumName) {
|
||||
return this.$u.toast('请输入相册名称')
|
||||
}
|
||||
|
||||
this.$loading()
|
||||
|
||||
this.$http.post('/api/appalbum/addOrUpdate', {
|
||||
albumName: this.albumName,
|
||||
createUserId: this.createUserId,
|
||||
photoSource: this.photoSource,
|
||||
watermarkId: this.watermarkId,
|
||||
id: this.id || ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.id ? '编辑成功' : '新建成功')
|
||||
|
||||
if (this.id) {
|
||||
uni.$emit('change')
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 500)
|
||||
} else {
|
||||
this.$hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -197,4 +260,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,25 +3,25 @@
|
||||
<div class="photo-header">
|
||||
<image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" mode="aspectFill" />
|
||||
<div>
|
||||
<h2>默认相册</h2>
|
||||
<span @click="linkTo('./AddAlbum')">相册设置</span>
|
||||
<h2>{{ info.albumName }}</h2>
|
||||
<span @click="linkTo('./AddAlbum?id=' + id)">相册设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-info">
|
||||
<div class="photo-info__item">
|
||||
<h2>131</h2>
|
||||
<h2>{{ totalInfo.all || 0 }}</h2>
|
||||
<span>照片</span>
|
||||
</div>
|
||||
<div class="photo-info__item">
|
||||
<h2>13</h2>
|
||||
<h2>{{ totalInfo.today || 0 }}</h2>
|
||||
<span>今日</span>
|
||||
</div>
|
||||
<div class="photo-info__item">
|
||||
<h2>{{ totalInfo.benyue || 0 }}</h2>
|
||||
<span>本月</span>
|
||||
</div>
|
||||
<div class="photo-info__item">
|
||||
<h2>133</h2>
|
||||
<span>上月</span>
|
||||
</div>
|
||||
<div class="photo-info__item">
|
||||
<h2>13</h2>
|
||||
<h2>{{ totalInfo.bennian || 0 }}</h2>
|
||||
<span>今年</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,18 +40,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-item__wrapper">
|
||||
<div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in 10" :key="index">
|
||||
<div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in list" :key="index">
|
||||
<image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" @click="preview(item.url)" mode="aspectFill" />
|
||||
<div class="photo-item__text">
|
||||
<h2>张三</h2>
|
||||
<p>02-12 12:32</p>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="upload" hover-class="text-hover">编辑照片</div>
|
||||
<div class="btn" @click="upload" hover-class="text-hover">上传照片</div>
|
||||
<div class="btn" hover-class="text-hover">编辑照片</div>
|
||||
<div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,7 +73,9 @@
|
||||
coverImg: '',
|
||||
imgList: [],
|
||||
hideStatus: false,
|
||||
pageShow: false
|
||||
pageShow: false,
|
||||
id: '',
|
||||
totalInfo: {}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -81,13 +84,21 @@
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
// this.type = query.type
|
||||
// this.name = query.name
|
||||
// this.coverImg = query.url
|
||||
this.id = query.id
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getTotalInfo(query.id)
|
||||
this.getInfo(query.id)
|
||||
this.getList()
|
||||
})
|
||||
|
||||
uni.$on('change', () => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
},
|
||||
|
||||
onUnload () {
|
||||
// uni.$off('update')
|
||||
uni.$off('change')
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -97,6 +108,14 @@
|
||||
})
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
preview (url) {
|
||||
let imgs = []
|
||||
this.list.forEach(item => {
|
||||
@@ -109,106 +128,36 @@
|
||||
})
|
||||
},
|
||||
|
||||
upload() {
|
||||
if (!this.token) {
|
||||
this.$refs.login.show()
|
||||
getTotalInfo (id) {
|
||||
this.$http.post(`/api/appalbumphoto/photoDetail?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.totalInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.imgList = []
|
||||
this.hideStatus = false
|
||||
toAddImg () {
|
||||
uni.chooseImage({
|
||||
count: this.limit,
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
if (res.tempFilePaths.length > 9) {
|
||||
this.$toast(`图片不能超过9张`)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.$loading('上传中')
|
||||
res.tempFilePaths.forEach((item, index) => {
|
||||
if (index === res.tempFilePaths.length - 1) {
|
||||
this.hideStatus = true
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.uploadFile(item, res.tempFilePaths.length)
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
uploadFile (img, total) {
|
||||
uni.uploadFile({
|
||||
url: this.$http.baseURL + '/admin/file/add',
|
||||
filePath: img,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
Authorization: uni.getStorageSync('token'),
|
||||
},
|
||||
success: (res) => {
|
||||
const data = JSON.parse(res.data)
|
||||
|
||||
if (data.code === 0) {
|
||||
this.imgList.push(data.data[0].split(';')[0])
|
||||
} else {
|
||||
this.$toast(data.msg)
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.imgList.length === total && this.hideStatus) {
|
||||
this.$instance.post(`/app/appvillagepicturealbum/addPictures`, {
|
||||
areaName: uni.getStorageSync('areaName'),
|
||||
areaId: uni.getStorageSync('areaId'),
|
||||
type: this.type,
|
||||
urlList: this.imgList
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getList(this.type)
|
||||
this.getTotalInfo(this.type)
|
||||
uni.$emit('update')
|
||||
}
|
||||
this.$hideLoading()
|
||||
this.hideStatus = false
|
||||
})
|
||||
success: res => {
|
||||
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}&albumId=${this.id}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getTotalInfo (type) {
|
||||
this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
||||
getList () {
|
||||
this.$http.post(`/api/appalbumphoto/list`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList (type) {
|
||||
this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = Object.keys(res.data).map(v => {
|
||||
return {
|
||||
name: v,
|
||||
list: res.data[v]
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
|
||||
this.$hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,8 +18,9 @@
|
||||
<div class="tips">
|
||||
选择不限后:
|
||||
1. 成员可以同步手机原相机、数码相机等拍摄的照片和视频;
|
||||
2. 仅乡村相册裴舍的照片或者视频会计入考勤,保证考勤统计真实性。
|
||||
2. 仅乡村相册拍摄的照片或者视频会计入考勤,保证考勤统计真实性。
|
||||
</div>
|
||||
<div class="form-btn" hover-class="text-hover" @click="save">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,14 +36,18 @@
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
onLoad (query) {
|
||||
this.currIndex = Number(query.value)
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
save () {
|
||||
uni.$emit('change', {
|
||||
type: 'photoSource',
|
||||
value: this.currIndex
|
||||
})
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -55,6 +60,25 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
line-height: 44px;
|
||||
margin: 32px;
|
||||
@@ -120,4 +144,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
|
||||
<div class="photo-top" data-html2canvas-ignore>
|
||||
<image src="./images/close.png" @click="back" />
|
||||
<div class="photo-top__middle">
|
||||
<span>保存至:默认相册</span>
|
||||
<div class="photo-top__middle" @click="isShowAlbum = true">
|
||||
<span>保存至:{{ albumName || '默认相册' }}</span>
|
||||
<image src="./images/to-right.png" />
|
||||
</div>
|
||||
<span @click="save">保存</span>
|
||||
@@ -22,10 +22,10 @@
|
||||
<div
|
||||
class="water-item"
|
||||
:class="[currIndex === index ? 'active' : '']"
|
||||
v-for="(item, index) in config"
|
||||
:key="index"
|
||||
v-for="(item, index) in watermarkList"
|
||||
:key="item.id"
|
||||
@click="currIndex = index">
|
||||
<image :src="item.thum" mode="aspectFill" />
|
||||
<image :src="config[index].thum" mode="aspectFill" />
|
||||
<div class="water-item__bottom">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,6 +45,7 @@
|
||||
<div>上传</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-select v-model="isShowAlbum" :default-value="defaultValue" :list="albumList" @confirm="onConfirm"></u-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,13 +84,34 @@
|
||||
currIndex: 0,
|
||||
isHide: false,
|
||||
height: '100%',
|
||||
waterSrc: ''
|
||||
waterSrc: '',
|
||||
albumId: '1',
|
||||
albumName: '',
|
||||
watermarkList: [],
|
||||
isShowAlbum: false,
|
||||
albumList: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
defaultValue () {
|
||||
if (!this.albumList.length) {
|
||||
return [0]
|
||||
}
|
||||
|
||||
return [this.albumList.map(v => v.value).indexOf(this.albumId)]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
if (query.albumId) {
|
||||
this.albumId = query.albumId
|
||||
}
|
||||
|
||||
this.img = query.url
|
||||
this.height = uni.getSystemInfoSync().windowHeight
|
||||
|
||||
this.getWatermarkList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -102,6 +124,30 @@
|
||||
useCORS: true
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
const file = this.dataURLtoFile(dataURL, 'photo.png')
|
||||
let formData = new FormData()
|
||||
formData.append('file', file)
|
||||
this.$http.post('/admin/file/add2?type=image', formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
console.log(res)
|
||||
let info = {}
|
||||
if (this.currIndex > -1) {
|
||||
info = this.watermarkList[this.currIndex]
|
||||
}
|
||||
this.$http.post('/api/appalbumphoto/addOrUpdate', {
|
||||
albumId: this.albumId,
|
||||
photoUrl: res.data.url,
|
||||
fileId: res.data.id,
|
||||
watermarkType: this.currIndex > -1 ? info.watermarkType : '',
|
||||
templateId: this.currIndex > -1 ? info.id : ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
console.log(res)
|
||||
this.$u.toast('新增成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.waterSrc = dataURL
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
@@ -110,6 +156,48 @@
|
||||
})
|
||||
},
|
||||
|
||||
dataURLtoFile (dataurl, filename) {
|
||||
let arr = dataurl.split(',')
|
||||
let mime = arr[0].match(/:(.*?);/)[1]
|
||||
let bstr = atob(arr[1])
|
||||
let n = bstr.length
|
||||
let u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime })
|
||||
},
|
||||
|
||||
onConfirm (e) {
|
||||
this.albumId = e[0].value
|
||||
this.albumName = e[0].label
|
||||
},
|
||||
|
||||
getWatermarkList () {
|
||||
this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=0`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.watermarkList = res.data.records
|
||||
}
|
||||
})
|
||||
|
||||
this.$http.post('/api/appalbum/list', null, {
|
||||
parmas: {
|
||||
size: 1000
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.albumList = res.data.records.map(v => {
|
||||
return {
|
||||
label: v.albumName,
|
||||
value: v.id
|
||||
}
|
||||
})
|
||||
|
||||
this.albumName = this.albumList.filter(v => v.value === this.albumId)[0].label
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
back () {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<span>*选择水印后,相册只能上传该水印照片</span>
|
||||
</div>
|
||||
<div class="cell-group">
|
||||
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
|
||||
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 0, checkedList = []">
|
||||
<div class="cell-item__left">
|
||||
<h2>不限</h2>
|
||||
</div>
|
||||
@@ -18,20 +18,21 @@
|
||||
<div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="title" v-if="currIndex === 1">
|
||||
<h2>水印库</h2>
|
||||
</div>
|
||||
<div class="watermark-list">
|
||||
<div class="item" @click="checkd(index)" v-for="(item, index) in 10" :key="index" :class="[checkedList.includes(index) ? 'active' : '']">
|
||||
<image class="checked" v-if="checkedList.includes(index)" src="./images/xuanzhong.png" />
|
||||
<image class="watermark" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
|
||||
<div class="watermark-list" v-if="currIndex === 1">
|
||||
<div class="item" @click="checkd(item.type)" v-for="(item, index) in config" :key="index" :class="[checkedList.includes(index) ? 'active' : '']">
|
||||
<image class="checked" v-if="checkedList.includes(item.type)" src="./images/xuanzhong.png" />
|
||||
<image class="watermark" :src="item.thum" mode="aspectFill" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-btn" hover-class="text-hover">保存</div>
|
||||
<div class="form-btn" hover-class="text-hover" @click="save">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { config } from './config'
|
||||
export default {
|
||||
name: 'WatermarkSetting',
|
||||
|
||||
@@ -40,27 +41,35 @@
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
checkedList: [0, 1, 5]
|
||||
config,
|
||||
checkedList: []
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
onLoad (query) {
|
||||
if (query.value) {
|
||||
this.currIndex = 1
|
||||
this.checkedList = query.value.split(',')
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
save () {
|
||||
uni.$emit('change', {
|
||||
type: 'watermark',
|
||||
value: this.checkedList.length ? this.checkedList.join(',') : ''
|
||||
})
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
|
||||
checkd (index) {
|
||||
const i = this.checkedList.indexOf(index)
|
||||
checkd (type) {
|
||||
const i = this.checkedList.indexOf(type)
|
||||
if (i > -1) {
|
||||
this.checkedList.splice(i, 1)
|
||||
} else {
|
||||
this.checkedList.push(index)
|
||||
this.checkedList.push(type)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -84,17 +93,19 @@
|
||||
padding: 16px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
width: 352px;
|
||||
height: 240px;
|
||||
border-radius: 8px;
|
||||
font-size: 0;
|
||||
background: #2A3540;
|
||||
|
||||
&.active {
|
||||
.watermark {
|
||||
border: 4px solid #2477F1;
|
||||
}
|
||||
border: 4px solid #2477F1;
|
||||
}
|
||||
|
||||
.checked {
|
||||
@@ -107,8 +118,8 @@
|
||||
}
|
||||
|
||||
.watermark {
|
||||
width: 352px;
|
||||
height: 240px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
@@ -211,4 +222,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
<div class="album-total">
|
||||
<div class="album-total__item">
|
||||
<span>今日拍照人数</span>
|
||||
<i>5</i>
|
||||
<i>{{ countPhotographer || 0 }}</i>
|
||||
</div>
|
||||
<div class="album-total__item">
|
||||
<span>今日拍照数量</span>
|
||||
<i>5</i>
|
||||
<i>{{ countPhotoNo || 0 }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-operate">
|
||||
@@ -45,11 +45,11 @@
|
||||
<div class="album-list">
|
||||
<h2>工作相册</h2>
|
||||
<div class="album-list__wrapper">
|
||||
<div class="item" v-for="(item, index) in 3" :key="index" @click="linkTo('./AlbumDetail')">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('./AlbumDetail?id=' + item.id)">
|
||||
<span>未查看</span>
|
||||
<image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
|
||||
<div class="item-bottom">
|
||||
<h2>工作相册</h2>
|
||||
<h2>{{ item.albumName }}</h2>
|
||||
<div class="item-bottom__info">
|
||||
<div class="left">
|
||||
<span>今日新增</span>
|
||||
@@ -69,7 +69,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img :src="src">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -79,12 +78,15 @@
|
||||
|
||||
data () {
|
||||
return {
|
||||
src: ''
|
||||
countPhotoNo: '',
|
||||
countPhotographer: '',
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
mounted () {
|
||||
this.getCountPhotoNo()
|
||||
this.getAlbumList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -94,6 +96,31 @@
|
||||
})
|
||||
},
|
||||
|
||||
getCountPhotoNo () {
|
||||
this.$http.post('/api/appalbumphoto/countPhotoNo').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.countPhotoNo = res.data
|
||||
}
|
||||
})
|
||||
this.$http.post('/api/appalbumphoto/countPhotographer').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.countPhotographer = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getAlbumList () {
|
||||
this.$http.post('/api/appalbum/list', null, {
|
||||
parmas: {
|
||||
size: 100
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
addPhoto () {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div class="Watermark2" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="Watermark3" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<h2>{{ time }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ date }} </h2>
|
||||
<p>{{ weekCn }} 晴 7℃</p>
|
||||
</div>
|
||||
<h2>巡查</h2>
|
||||
<span>陶白白</span>
|
||||
</div>
|
||||
<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>
|
||||
<p>武汉市·绿地蓝海国际A座</p>
|
||||
<div class="text">#这是一条备注信息</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -80,76 +82,75 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark2 {
|
||||
.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;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 0;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
h2 {
|
||||
font-size: 68px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #53FBFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px 0 0 6px;
|
||||
border-bottom: 4px solid #FFE97A;
|
||||
|
||||
.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;
|
||||
}
|
||||
h2 {
|
||||
width: 100px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #498abe;
|
||||
font-size: 32px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background: #FFE97A;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
span {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
<template>
|
||||
<div class="Watermark3" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="Watermark2" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>巡查</h2>
|
||||
<span>陶白白</span>
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
@@ -82,75 +80,76 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark3 {
|
||||
width: 348px;
|
||||
line-height: 1;
|
||||
padding: 16px;
|
||||
background: rgba(56, 167, 255, 0.6);
|
||||
border-radius: 4px;
|
||||
|
||||
.Watermark2 {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
padding-left: 10px;
|
||||
font-size: 28px;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 0;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
h2 {
|
||||
font-size: 68px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #53FBFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
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.7) 100%);
|
||||
}
|
||||
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
.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;
|
||||
padding-left: 22px;
|
||||
border-left: 6px solid #F8BC58;
|
||||
|
||||
p:nth-of-type(2) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,16 @@
|
||||
<template>
|
||||
<div class="Watermark4" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<image src="./../../images/fangyishuiyin.png" />
|
||||
<h2>日常消杀</h2>
|
||||
<div class="Watermark6" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="title">
|
||||
<h2>我是标题</h2>
|
||||
</div>
|
||||
<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 class="info">
|
||||
<div class="info-item">
|
||||
<label>时间:</label>
|
||||
<span>{{ date }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>地点:</label>
|
||||
<span>武汉市·绿地蓝海A座</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,46 +22,15 @@
|
||||
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.date = this.$dayjs().format('YYYY-MM-DD 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()
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD HH:mm')
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
@@ -91,77 +51,81 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark4 {
|
||||
width: 400px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
.Watermark6 {
|
||||
width: 440px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
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%);
|
||||
.info {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -16px;
|
||||
z-index: 1;
|
||||
width: 92px;
|
||||
height: 112px;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
color: #000000;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
.title {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: rgba(23, 91, 255, 0.7);
|
||||
|
||||
& > h2 {
|
||||
line-height: 56px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
& > p {
|
||||
line-height: 36px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,27 @@
|
||||
<template>
|
||||
<div class="Watermark5" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="Watermark4" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>走访慰问</h2>
|
||||
<div class="right">
|
||||
<h2>{{ time }}</h2>
|
||||
<p>{{ date }}</p>
|
||||
<image src="./../../images/fangyishuiyin.png" />
|
||||
<h2>日常消杀</h2>
|
||||
</div>
|
||||
<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="info">
|
||||
<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="bottom">
|
||||
<span>工作纪实</span>
|
||||
<i>网格员工作纪实</i>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -99,108 +91,76 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark5 {
|
||||
width: 440px;
|
||||
padding: 0 16px 22px;
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.Watermark4 {
|
||||
width: 400px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 4px;
|
||||
height: 4px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 3px solid #2145C4;
|
||||
|
||||
span {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
i {
|
||||
flex: 1;
|
||||
color: #2145C4;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.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;
|
||||
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 {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
|
||||
& > h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 56px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
& > p {
|
||||
line-height: 36px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 96px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
background: #2145C4;
|
||||
}
|
||||
.info {
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #BADCFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,35 @@
|
||||
<template>
|
||||
<div class="Watermark6" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="title">
|
||||
<h2>我是标题</h2>
|
||||
<div class="Watermark5" @click="linkTo('./WatermarkConfig')">
|
||||
<div class="top">
|
||||
<h2>走访慰问</h2>
|
||||
<div class="right">
|
||||
<h2>{{ time }}</h2>
|
||||
<p>{{ date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<label>时间:</label>
|
||||
<span>{{ date }}</span>
|
||||
<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="bottom">
|
||||
<span>工作纪实</span>
|
||||
<i>网格员工作纪实</i>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -22,15 +39,46 @@
|
||||
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().format('YYYY-MM-DD HH:mm')
|
||||
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 HH:mm')
|
||||
this.date = this.$dayjs().format('YYYY-MM-DD')
|
||||
this.time = this.$dayjs().format('HH:mm')
|
||||
this.week = new Date().getDay()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
@@ -51,9 +99,12 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Watermark6 {
|
||||
.Watermark5 {
|
||||
width: 440px;
|
||||
padding: 0 16px 22px;
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
@@ -63,9 +114,38 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 4px;
|
||||
height: 4px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 3px solid #2145C4;
|
||||
|
||||
span {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
i {
|
||||
flex: 1;
|
||||
color: #2145C4;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 16px;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
@@ -78,54 +158,50 @@
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
color: #000000;
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: rgba(23, 91, 255, 0.7);
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90px;
|
||||
margin-bottom: 20px;
|
||||
color: #2145C4;
|
||||
border-bottom: 4px solid #2145C4;
|
||||
|
||||
h2 {
|
||||
& > h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FFCA32;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
h2 {
|
||||
width: 96px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
background: #2145C4;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,23 @@
|
||||
export const config = [
|
||||
{
|
||||
name: '打卡水印',
|
||||
type: '1',
|
||||
type: '0',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
|
||||
},
|
||||
{
|
||||
name: '巡查水印',
|
||||
type: '1',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/3.png'
|
||||
},
|
||||
{
|
||||
name: '时间地点水印',
|
||||
type: '2',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/2.png'
|
||||
},
|
||||
{
|
||||
name: '巡查水印',
|
||||
name: '标题水印',
|
||||
type: '3',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/3.png'
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/6.png'
|
||||
},
|
||||
{
|
||||
name: '防疫水印',
|
||||
@@ -24,19 +29,14 @@ export const config = [
|
||||
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',
|
||||
type: '6',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/7.png'
|
||||
},
|
||||
{
|
||||
name: '日历水印',
|
||||
type: '8',
|
||||
type: '7',
|
||||
thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png'
|
||||
},
|
||||
// {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
BIN
src/saas/AppCountryAlbum/images/sy/22.png
Normal file
BIN
src/saas/AppCountryAlbum/images/sy/22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 721 B |
Reference in New Issue
Block a user