904 lines
23 KiB
Vue
904 lines
23 KiB
Vue
<template>
|
||
<div class="photo" :class="[isHide ? 'home-active' : '']" @click="isHide = true" :style="{height: height + 'px'}">
|
||
<div class="photo-top" data-html2canvas-ignore>
|
||
<div class="photo-top__middle" @click="isShowAlbum = true">
|
||
<span>保存至：{{ albumName || '系统相册' }}</span>
|
||
<image src="./images/to-right.png" />
|
||
</div>
|
||
</div>
|
||
<div class="photo-wrapper">
|
||
<div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
|
||
<img class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
|
||
<div
|
||
class="watermark"
|
||
v-if="currIndex > -1 && currWatermarkConfig.length"
|
||
:style="{left: x + 'px', top: y + 'px', transform: 'scale(' + watermarkScale + ')', transformOrigin: 'left' }"
|
||
@touchstart="onTouchstart"
|
||
@touchmove="onTouchmove">
|
||
<component ref="WatermarkItem" :addressInfo="address" :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
|
||
<div v-if="!isHide" @click.stop="currIndex = -1" class="watermark-close" data-html2canvas-ignore>
|
||
<image src="./images/close-b.png" />
|
||
</div>
|
||
<span v-if="!isHide" class="watermark-edit" @click.stop="toEdit" data-html2canvas-ignore>编辑</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="photo-bottom" data-html2canvas-ignore>
|
||
<div class="photo-bottom__top">
|
||
<span @click.stop="isHide = true">取消</span>
|
||
<h2>水印</h2>
|
||
<span @click.stop="isHide = true">确定</span>
|
||
</div>
|
||
<div class="waterlist">
|
||
<div
|
||
class="water-item"
|
||
:class="[currIndex === -1 ? 'active' : '']"
|
||
key="-1"
|
||
@click.stop="currIndex = -1">
|
||
<image src="./images/clear.png" />
|
||
<image class="checked" v-if="currIndex === -1" src="./images/xuanzhong.png" />
|
||
<div class="water-item__bottom">不使用水印</div>
|
||
</div>
|
||
<div
|
||
class="water-item"
|
||
:class="[currIndex === index ? 'active' : '']"
|
||
v-for="(item, index) in watermarkList"
|
||
:key="item.id"
|
||
@click.stop="currIndex = index">
|
||
<image :src="item.thum" />
|
||
<span v-show="currIndex === index" @click.stop="toEdit">编辑</span>
|
||
<image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
|
||
<div class="water-item__bottom">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="photo-tabbar" data-html2canvas-ignore>
|
||
<h2>编辑图片</h2>
|
||
<div class="tabbar-wrapper">
|
||
<div class="item" @click.stop="back">
|
||
<image src="./images/fanhui-black.png" />
|
||
<div>返回</div>
|
||
</div>
|
||
<div class="item" @click.stop="isHide = false">
|
||
<image src="./images/shuiyin-white.png" />
|
||
<div>水印</div>
|
||
</div>
|
||
<div class="item" @click.stop="toClipping">
|
||
<image src="./images/jiancai.png" />
|
||
<div>剪裁</div>
|
||
</div>
|
||
<div class="item" @click.stop="save">
|
||
<image src="./images/shangchuan-black.png" />
|
||
<div>上传</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<u-popup v-model="isShowAlbum" :closeable="false" border-radius="32" height="70%" mode="bottom">
|
||
<div class="album">
|
||
<div class="top">
|
||
<span @click="isShowAlbum = false">取消</span>
|
||
<span @click="onConfirm">确定</span>
|
||
</div>
|
||
<scroll-view scroll-y class="album-list__wrapper">
|
||
<div
|
||
class="item"
|
||
@click="albumIndex = index"
|
||
v-for="(item, index) in albumList"
|
||
:key="index"
|
||
:class="[albumIndex === index ? 'active' : '']">
|
||
<image class="checked" v-if="albumIndex === index" src="./images/xuanzhong.png" />
|
||
<image class="icon" v-if="!item.lastPhotoUrl" src="./images/icon.png" />
|
||
<image class="img" v-if="item.lastPhotoUrl" :src="item.lastPhotoUrl" mode="aspectFill" />
|
||
<div class="item-bottom">
|
||
<h2>{{ item.albumName }}</h2>
|
||
<div class="item-bottom__info">
|
||
<div class="left">
|
||
<span>今日新增</span>
|
||
<i>{{ item.dayPhtoto }}</i>
|
||
<span>张</span>
|
||
</div>
|
||
<div class="right">
|
||
<image src="./images/zhaopianshuliang.png" />
|
||
<span>{{ item.photoTotal || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</u-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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 { mapActions, mapState } from 'vuex'
|
||
|
||
export default {
|
||
name: 'Watermark',
|
||
|
||
appName: '水印相机',
|
||
|
||
components: {
|
||
Watermark1,
|
||
Watermark2,
|
||
Watermark3,
|
||
Watermark4,
|
||
Watermark5,
|
||
Watermark6,
|
||
Watermark7,
|
||
Watermark8
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
img: '',
|
||
currIndex: 0,
|
||
isHide: true,
|
||
height: '100%',
|
||
waterSrc: '',
|
||
albumId: '',
|
||
albumName: '',
|
||
albumIndex: 0,
|
||
watermarkList: [],
|
||
isShowAlbum: false,
|
||
albumList: [],
|
||
address: {},
|
||
x: 32,
|
||
y: 24,
|
||
startX: 0,
|
||
watermarkScale: 1,
|
||
startY: 0,
|
||
canvasHeight: 0
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
defaultValue () {
|
||
if (!this.albumList.length) {
|
||
return [0]
|
||
}
|
||
|
||
return [this.albumList.map(v => v.value).indexOf(this.albumId)]
|
||
},
|
||
|
||
currWatermarkConfig () {
|
||
if (this.currIndex < 0 || !this.watermarkList.length) return []
|
||
|
||
return this.watermarkList[this.currIndex].itemList
|
||
},
|
||
...mapState(['wxwork'])
|
||
},
|
||
|
||
onLoad (query) {
|
||
if (query.albumId) {
|
||
this.albumId = query.albumId
|
||
}
|
||
|
||
this.img = decodeURIComponent(query.url)
|
||
this.height = uni.getSystemInfoSync().windowHeight
|
||
|
||
this.getLocation()
|
||
|
||
this.$nextTick(() => {
|
||
this.getWatermarkList()
|
||
})
|
||
uni.$on('cropper', e => {
|
||
this.img = e
|
||
this.x = 32
|
||
this.y = 200
|
||
})
|
||
},
|
||
|
||
mounted () {
|
||
// this.$nextTick(() => {
|
||
// document.body.addEventListener('touchmove', this.bindEvent, { passive: false })
|
||
// })
|
||
},
|
||
|
||
onUnload () {
|
||
uni.$off('cropper')
|
||
},
|
||
|
||
methods: {
|
||
...mapActions(['injectJWeixin', 'agentSign']),
|
||
|
||
toClipping () {
|
||
uni.navigateTo({
|
||
url: `./Clipping?url=${encodeURIComponent(this.img)}`
|
||
})
|
||
},
|
||
|
||
bindEvent (e) {
|
||
e.preventDefault()
|
||
},
|
||
|
||
onImgLoad () {
|
||
const img = document.querySelector('.waterMarker-img')
|
||
|
||
this.canvasHeight = img.clientHeight
|
||
this.watermarkScale = img.clientWidth / uni.getSystemInfoSync().windowWidth
|
||
},
|
||
|
||
onTouchstart (e) {
|
||
const isMobile = e.type !== 'mousemove'
|
||
const watermark = document.querySelector('.watermark')
|
||
if (isMobile) {
|
||
this.startX = e.touches[0].clientX - Number((watermark.style.left).replace('px', ''))
|
||
this.startY = e.touches[0].clientY - Number((watermark.style.top).replace('px', ''))
|
||
} else {
|
||
this.startX = e.clientX - Number((watermark.style.left).replace('px', ''))
|
||
this.startY = e.clientY -Number((watermark.style.top).replace('px', ''))
|
||
}
|
||
},
|
||
|
||
onTouchmove (e) {
|
||
const isMobile = e.type !== 'mousemove'
|
||
if (isMobile) {
|
||
this.x = e.touches[0].clientX - this.startX
|
||
this.y = e.touches[0].clientY - this.startY
|
||
} else {
|
||
this.x = e.clientX - this.startX
|
||
this.y = e.clientY - this.startY
|
||
}
|
||
},
|
||
|
||
toEdit () {
|
||
this.$refs.WatermarkItem.linkTo('./WatermarkConfig')
|
||
},
|
||
|
||
save () {
|
||
this.$loading()
|
||
this.isHide = true
|
||
this.$nextTick(() => {
|
||
html2canvas(this.$refs.waterMarker, {
|
||
allowTaint: true,
|
||
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) {
|
||
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) {
|
||
uni.$emit('update')
|
||
this.$u.toast('新增成功')
|
||
|
||
setTimeout(() => {
|
||
this.back()
|
||
}, 500)
|
||
} else {
|
||
this.$u.toast(res.msg)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}).catch(e => {
|
||
console.log(e)
|
||
})
|
||
})
|
||
},
|
||
|
||
getWeather (code) {
|
||
this.$http.post(`/api/bdweather/wdata?districtId=${code}`).then(res => {
|
||
if (res.code === 0) {
|
||
const data = res.data.result.now
|
||
|
||
uni.setStorageSync('address', {
|
||
...uni.getStorageSync('address'),
|
||
weather: `${data.text} ${data.temp}°` || ''
|
||
})
|
||
|
||
this.address = {
|
||
...uni.getStorageSync('address'),
|
||
weather: `${data.text} ${data.temp}°` || ''
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getLocation () {
|
||
this.agentSign({
|
||
corpId: this.wxwork.config.corpId,
|
||
suiteId: this.wxwork.config.suiteId
|
||
}).then(() => {
|
||
this.injectJWeixin(['getLocation']).then(() => {
|
||
wx.getLocation({
|
||
type: 'wgs84',
|
||
success: res => {
|
||
var lat = res.latitude
|
||
var lng = res.longitude
|
||
this.$http.post('/api/appdvcpconfig/apiForward', `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1`).then(res => {
|
||
if (res.code === 0) {
|
||
const data = res.data.result
|
||
uni.setStorageSync('address', {
|
||
lat,
|
||
lng,
|
||
address: data.address,
|
||
cityCode: `${data.ad_info.adcode}`
|
||
})
|
||
|
||
this.address = {
|
||
...uni.getStorageSync('address')
|
||
}
|
||
|
||
this.getWeather(`${data.ad_info.adcode}`)
|
||
}
|
||
})
|
||
},
|
||
error: res => {
|
||
console.log(res)
|
||
}
|
||
})
|
||
}).catch(e => {
|
||
})
|
||
})
|
||
},
|
||
|
||
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 () {
|
||
this.albumId = this.albumList[this.albumIndex].value
|
||
this.albumName = this.albumList[this.albumIndex].label
|
||
|
||
this.isShowAlbum = false
|
||
},
|
||
|
||
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, {
|
||
params: {
|
||
size: 1000
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.albumList = res.data.records.map(v => {
|
||
return {
|
||
...v,
|
||
label: v.albumName,
|
||
value: v.id
|
||
}
|
||
})
|
||
|
||
this.albumList.some((v, index) => {
|
||
if (this.albumId) {
|
||
if (v.value === this.albumId) {
|
||
this.albumIndex = index
|
||
this.albumName = v.label
|
||
|
||
return true
|
||
}
|
||
} else {
|
||
if (v.label === '系统相册') {
|
||
this.albumIndex = index
|
||
this.albumId = v.value
|
||
this.albumName = '系统相册'
|
||
|
||
return true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
back () {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.photo {
|
||
width: 100%;
|
||
background: #333;
|
||
overflow: hidden;
|
||
|
||
.photo-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
top: 128px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100vh - 321px - 128px);
|
||
}
|
||
|
||
.newImg {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 11111;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.album {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.album-list__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 328px;
|
||
height: 328px;
|
||
margin-bottom: 32px;
|
||
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
background: #EFF5FA;
|
||
|
||
&:nth-of-type(2n) {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
&.active {
|
||
border: 4px solid #2477F1;
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-bottom {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
padding: 20px 16px 16px;
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
|
||
|
||
& > h2 {
|
||
margin-bottom: 14px;
|
||
font-size: 32px;
|
||
color: #fff;
|
||
}
|
||
|
||
.item-bottom__info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 86px;
|
||
height: 48px;
|
||
padding: 0 8px;
|
||
color: #fff;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
|
||
border-radius: 8px;
|
||
|
||
image {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
span {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
span {
|
||
color: #c6c5c4;
|
||
font-size: 28px;
|
||
}
|
||
|
||
i {
|
||
padding: 0 3px;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > span {
|
||
position: absolute;
|
||
left: 16px;
|
||
top: 16px;
|
||
z-index: 1;
|
||
width: 94px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
background: #FF524F;
|
||
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.checked {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
z-index: 1;
|
||
width: 80px;
|
||
height: 80px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
scroll-view {
|
||
height: calc(100% - 96px);
|
||
padding: 0 32px;
|
||
font-size: 0;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 96px;
|
||
padding: 0 32px;
|
||
font-size: 32px;
|
||
color: #999;
|
||
font-weight: 600;
|
||
|
||
span:last-child {
|
||
color: #222;
|
||
}
|
||
}
|
||
}
|
||
|
||
.waterMarker-wrapper {
|
||
position: relative;
|
||
max-height: calc(100vh - 321px - 128px);
|
||
overflow: hidden;
|
||
|
||
.waterMarker-img {
|
||
max-width: 100%;
|
||
object-fit: cover;
|
||
max-height: calc(100vh - 321px - 128px);
|
||
}
|
||
|
||
.watermark {
|
||
position: absolute;
|
||
left: 32px;
|
||
z-index: 11;
|
||
padding: 8px;
|
||
color: #FFFFFF;
|
||
font-size: 28px;
|
||
border: 2px solid #FFFFFF;
|
||
|
||
.watermark-edit {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 80px;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||
border-radius: 24px;
|
||
color: #222222;
|
||
font-size: 24px;
|
||
transform: translate(50%, -50%);
|
||
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
|
||
.watermark-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 48px;
|
||
height: 48px;
|
||
background: #FFFFFF;
|
||
border-radius: 50%;
|
||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||
transform: translate(-50%, -50%);
|
||
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.photo-tabbar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
width: 100%;
|
||
height: 321px;
|
||
background: #FFFFFF;
|
||
border-radius: 32px 32px 0px 0px;
|
||
border: 1px solid #DDDDDD;
|
||
overflow: hidden;
|
||
|
||
h2 {
|
||
width: 750px;
|
||
height: 96px;
|
||
line-height: 96px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
}
|
||
|
||
& > div {
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 56px;
|
||
height: 56px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
div {
|
||
font-size: 28px;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.photo-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 111;
|
||
width: 100%;
|
||
height: 474px;
|
||
background: #FFFFFF;
|
||
border-radius: 32px 32px 0px 0px;
|
||
transition: all ease 0.3s;
|
||
|
||
.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: 236px;
|
||
height: 200px;
|
||
}
|
||
|
||
span {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
z-index: 1;
|
||
width: 128px;
|
||
height: 56px;
|
||
line-height: 56px;
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border-radius: 8px;
|
||
color: #fff;
|
||
font-size: 32px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
&:first-child {
|
||
flex-direction: column;
|
||
background: #E4E7EB;
|
||
|
||
& > image {
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
|
||
.water-item__bottom {
|
||
position: relative;
|
||
color: #8A93A4;
|
||
font-size: 28px;
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
.checked {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
|
||
.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: center;
|
||
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: 400px;
|
||
height: 72px;
|
||
line-height: 1;
|
||
background: #0B111F;
|
||
border-radius: 40px;
|
||
font-size: 28px;
|
||
color: #cbcbcb;
|
||
|
||
span {
|
||
max-width: 70%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.home-active {
|
||
.photo-bottom {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.watermark {
|
||
border-color: transparent;
|
||
// bottom: 38px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|