mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-19 01:50:15 +09:00
修改：调整恋爱日记相关UI
This commit is contained in:
小莫唐尼
parent
1305b4a555
commit
f12262f4df
79
components/scroll-btn/scroll-btn.vue
Normal file
79
components/scroll-btn/scroll-btn.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class="scroll-btn" :style="{ bottom: bottom }" @click.stop="fnScroll()">
|
||||
<text v-if="_scrollTop >= 180" class="iconfont icon-long-arrow-up"></text>
|
||||
<text v-else class="iconfont icon-long-arrow-down"></text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import throttle from '@/utils/throttle.js';
|
||||
export default {
|
||||
name: 'scroll-btn',
|
||||
props: {
|
||||
bottom: {
|
||||
type: String,
|
||||
default: '180rpx'
|
||||
},
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return { _scrollTop: 0 };
|
||||
},
|
||||
watch: {
|
||||
scrollTop(val) {
|
||||
this._scrollTop = val;
|
||||
console.log('监听1：', val);
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this._scrollTop = this.scrollTop;
|
||||
},
|
||||
methods: {
|
||||
fnScroll() {
|
||||
throttle(() => {
|
||||
const isTop = this._scrollTop >= 180;
|
||||
this._scrollTop = isTop ? 0 : 999999;
|
||||
uni.pageScrollTo({
|
||||
duration: 500,
|
||||
scrollTop: this._scrollTop
|
||||
});
|
||||
this.$emit('update:scrollTop', this._scrollTop);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll-btn {
|
||||
position: fixed;
|
||||
// bottom: 200rpx;
|
||||
// right: -90rpx;
|
||||
right: 52rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #ffffff;
|
||||
background-color: #bfe9ef;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 99;
|
||||
transition: right 0.5s ease-in-out;
|
||||
|
||||
&.is-show {
|
||||
right: 52rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 36rpx;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
|
||||
// 关于我们：支持富文本内容
|
||||
journey: `
|
||||
<p>有一只马，它的邻居是一只驴。</p><p>有一天，马和驴都被主人牵到外面晒太阳，马和驴聊起了天。</p><p>马说：“我叫马，你呢？”</p><p>驴说：“我叫驴。（哄小宝贝睡觉的甜甜睡前故事）”</p><p>马说：“为什么我俩的名字不一样呢？”</p><p>驴说：“因为我和你不一样。”</p><p>马说：“我们俩什么地方不一样呢？”</p><p>驴说：“我身材小巧，而你却比较粗壮，不如我耐看。”马看了看比自已矮小很多的驴，认为驴说的话有点道理。</p><p>马说：“我们俩除了身材不一样，还有什么不同呢？”</p><p>驴说：“我们俩的声音不一样，我的声音多动听呀！”说着驴伸长脖子叫了两声。“不信，你也叫两声试试。”马也伸长脖子嘶鸣了两声，的确和驴的声音有点不同，马不好意思地低下了头。</p><p>过了一会儿，马又说：“我们俩除了身材和声音不一样外，还有什么不同呢？”</p><p>驴说：“我的步伐多么优雅呀。”说着，驴迈开蹄子走了两步，“而你呢，却昂首阔步，一点儿也不优雅，（如何哄女朋友睡觉的睡前故事爱情浪漫）不信你走两步试试。”</p><p>马听驴这么一说，就高昂着头走了两步，旋即，马飞奔了起来，转了一圈回来后，驴得意地说：“怎么样，我没说错罢，你就是急性子，和优雅不沾边。”马听了驴的话，有点感到惭愧。</p><p>最后，马又鼓起勇气说：“我们俩还有什么不同呢？”</p><p>驴说：“我的家庭意识比你强，主人抽我一鞭子，我就跟着主人回家，而你呢？恐怕不会吧……”</p><p>马还没有来得及回答，马和驴的主人同时来到了马和驴的身边。只见驴的主人抽了驴一鞭子后，驴乖乖地跟着主人回家了。马把这一切都看在了眼里，它为自已和驴的诸多不同而感到惭愧，只见马的主人也抽了马一鞭子，马犹豫了一下，终于象驴一样乖乖地跟着主人回了家。</p><p>一个伯乐站在远处看到了这一幕后，叹口气离开了。</p>
|
||||
准备晚安啦,睡觉前讲个故事吧~<p>槐树庄的村口有一棵大槐树，树下的村口第一家就是猫奶奶的家。</p><p>猫奶奶是一位孤寡老人，因为她经常收留和救治周围的流浪猫，所以村民就都管她叫“猫奶奶”。</p><p>一个月圆之夜，猫奶奶走到院门口，忽然发现门口石级上放着一个红毯子，里面包着一个啼（tí）哭的女婴。</p><p>猫奶奶找不到女婴的父母，只好收留了她，并给她起了个名字叫樱红。</p><p>猫奶奶辛苦地抚育着樱红成长，转眼之间，樱红已经九岁，上小学三年级了。</p><p>从樱红懂事起，猫奶奶就爱给她讲一个睡前故事，那是当地一个古老的传说。</p><p>在浓郁的树影深处有一个百花园，百花园里生长着奇花异草，还住了一个会唱歌的花仙子。花仙子的歌声美丽动人，能治百病。但是那里有一条奇怪的规矩，寻找花仙子的人在进入百花园后，见到花仙子之前，都不能发出一点声音，不然花仙子就不会出来见他。</p><p>受这个故事的影响，樱红特别喜欢唱歌。</p><p>这天晚上，樱红放学回家，家家户户炊烟袅（niǎo）袅，而自家烟囱却连一丝一缕（lǚ）的炊烟都没有。</p><p>樱红一惊，冲进院门一看，果然出事了！只见猫奶奶呻吟着倒在灶台前，双目紧闭，两只小脚也在不停地抽搐（chù）。</p><p>樱红慌了，好在有邻居的帮助，猫奶奶被送到了医院。经过抢救，猫奶奶总算醒过来，但是却半身不遂（suí），说话也不利落了。</p><p>猫奶奶不能下地行走做家务，小小的樱红，一夜之间就挑起了家庭的重担。</p><p>樱红一面求助于村委会，四处寻医问药，让猫奶奶获得进一步的治疗；一面在课余学做家务，悉心照顾猫奶奶，端水喂饭，不辞辛苦。</p><p>自从猫奶奶病倒以后，樱红每天早晨推开院门就会看见门前放着一朵小花，有时还会有一两尾鲜活的鲑（guī）鱼。</p><p>这样过了三个月，好奇的樱红在一个夜晚悄悄躲在院门的后面，想看看到底是谁。</p><p>到了午夜十二点，只见一只花猫衔着一棵风铃草来到院门前，把风铃草放下，转身就走。（浪漫童话小故事）樱红认出这只小花猫曾经被猫奶奶救助过，于是，她悄悄地尾随小花猫往前走。</p><p>不一会儿，她就发现自己进入了一个从未见过的世界：蔚蓝的天空飘着七色的云，阳光千丝万缕地落下来，鲜花盛开，彩蝶飞舞，百鸟齐鸣。</p><p>这到底是什么地方？她忽然想起了那个传说，这该不会就是花仙子住的百花园吧？</p><p>樱红几乎惊叫起来，但她立即想起了那条在见到花仙子之前，不能发出一点声音的规矩。于是她捂紧了嘴巴。</p><p>这时，她发现百花园里除了自己还有一个面色苍白的男孩子，闭着眼睛，右手攥着一根竹竿摸索着前行，应该是眼睛看不见了。</p><p>只见男孩子慢慢地偏离了路径，马上就要掉进路边的水沟里了。</p><p>樱红下意识地大声呼喊：“站住，小心脚底下！”一张口，樱红才想起来，自己已经坏了规矩！</p><p>此时，“轰隆”一声巨响后，眼前的一切都消失了，樱红仍然站在自家院门前的大槐树下。</p><p>真遗憾啊！樱红深深叹了口气，可为了救人，她并不觉得后悔。</p><p>第二天早上，樱红被一种美妙的歌声唤醒。</p><p>唱歌的人就是美丽的花仙子，她乘坐着奇花异草编成的花篮，飘进了她家的院子里。</p><p>奇迹发生了，只见猫奶奶起身下床，像健康人一样走出房门。</p><p>猫奶奶看到了花仙子，不敢相信地揉着眼睛说：“你就是传说中的花仙子吗？是你治好了我的病？”</p><p>花仙子说：“是的！是这个小女孩的善良打动了我，连我那不能出声的规矩都要为她破例了。”</p><p>樱红高兴地看着猫奶奶。从此，她和猫奶奶继续幸福地生活着。</p>
|
||||
`,
|
||||
// 恋爱相册
|
||||
albumKeyName: '恋爱相册', // 对应后台的图库分组名称
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<view class="app-page">
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<view v-if="loading == 'loading'" class="loading">
|
||||
<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
|
||||
<view class="loadig-text ">相册正在努力加载中啦~</view>
|
||||
</view>
|
||||
<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
|
||||
<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
|
||||
</tm-empty>
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<view v-else class="app-page-content">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~"></tm-empty></view>
|
||||
<view v-if="dataList.length == 0" color="light-blue" class="content-empty flex flex-center">
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
|
||||
<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
|
||||
</tm-empty>
|
||||
</view>
|
||||
<block v-else>
|
||||
<swiper
|
||||
class="swiper-album"
|
||||
@ -49,7 +56,11 @@
|
||||
<text class="icon"><text class="iconfont icon-arrow-left"></text></text>
|
||||
<text class="text">上一张</text>
|
||||
</view>
|
||||
<view class="refresh" @click="fnRefresh()">刷新</view>
|
||||
<view class="refresh" @click="fnRefresh()">
|
||||
<text class="refresh-text">点击</text>
|
||||
<text class="refresh-heart iconfont icon-diagnose"></text>
|
||||
<text class="refresh-text">刷新</text>
|
||||
</view>
|
||||
<view class="next" @click="fnChange(true)">
|
||||
<text class="text">下一张</text>
|
||||
<text class="icon"><text class="iconfont icon-arrow-right"></text></text>
|
||||
@ -62,14 +73,15 @@
|
||||
|
||||
<script>
|
||||
import LoveConfig from '@/config/love.config.js';
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import throttle from '@/utils/throttle.js';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmFlotbutton,
|
||||
tmTranslate,
|
||||
tmEmpty
|
||||
@ -82,7 +94,7 @@ export default {
|
||||
size: 99,
|
||||
page: 0,
|
||||
sort: 'takeTime',
|
||||
team: LoveConfig.photoKeyName
|
||||
team: LoveConfig.albumKeyName
|
||||
},
|
||||
result: {},
|
||||
dataList: [],
|
||||
@ -113,11 +125,6 @@ export default {
|
||||
this.fnGetData();
|
||||
},
|
||||
fnGetData() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
|
||||
this.loading = 'loading';
|
||||
this.$httpApi
|
||||
.getPhotoListByPage(this.queryParams)
|
||||
@ -131,11 +138,7 @@ export default {
|
||||
return item;
|
||||
});
|
||||
this.dataList = _list;
|
||||
// this.fnCacheDataList(_list);
|
||||
// this.dataList = this.dataList.concat(_list);
|
||||
|
||||
this.swiperIndex = 0;
|
||||
uni.hideLoading();
|
||||
}
|
||||
} else {
|
||||
this.loading = 'error';
|
||||
@ -168,23 +171,24 @@ export default {
|
||||
});
|
||||
},
|
||||
fnOnChange(e) {
|
||||
console.log('e', e);
|
||||
this.swiperIndex = e.detail.current;
|
||||
},
|
||||
fnChange(isNext) {
|
||||
if (isNext) {
|
||||
if (this.swiperIndex == this.dataList.length - 1) {
|
||||
this.swiperIndex = 0;
|
||||
throttle(() => {
|
||||
if (isNext) {
|
||||
if (this.swiperIndex == this.dataList.length - 1) {
|
||||
this.swiperIndex = 0;
|
||||
} else {
|
||||
this.swiperIndex += 1;
|
||||
}
|
||||
} else {
|
||||
this.swiperIndex += 1;
|
||||
if (this.swiperIndex == 0) {
|
||||
this.swiperIndex = this.dataList.length - 1;
|
||||
} else {
|
||||
this.swiperIndex -= 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.swiperIndex == 0) {
|
||||
this.swiperIndex = this.dataList.length - 1;
|
||||
} else {
|
||||
this.swiperIndex -= 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -210,18 +214,42 @@ export default {
|
||||
rgba(7, 179, 155, 0.1) 86%,
|
||||
rgba(109, 186, 130, 0.1)
|
||||
);
|
||||
color: #55423b;
|
||||
}
|
||||
.app-page-content {
|
||||
}
|
||||
.loading-wrap {
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 36rpx;
|
||||
|
||||
::v-deep {
|
||||
.tm-icons {
|
||||
margin-right: -20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.e-loading-icon {
|
||||
font-size: 120rpx;
|
||||
// color: #f88ca2;
|
||||
color: #56bbf9;
|
||||
}
|
||||
|
||||
.loadig-text {
|
||||
margin-top: 28rpx;
|
||||
font-size: 28rpx;
|
||||
// color: #f88ca2;
|
||||
color: #56bbf9;
|
||||
}
|
||||
.content-empty {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
.loading-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.swiper-album {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 24rpx - 144rpx);
|
||||
@ -286,7 +314,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.tabbar {
|
||||
width: 80vw;
|
||||
width: 90vw;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
@ -300,18 +328,49 @@ export default {
|
||||
// background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
.refresh {
|
||||
animation: refreshAni 6s ease-in-out infinite;
|
||||
color: #56bbf9;
|
||||
&-heart {
|
||||
font-size: 42rpx;
|
||||
color: inherit;
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
&-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.pre {
|
||||
color: #56bbf9;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.text {
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
color: #f88ca2;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.text {
|
||||
padding-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes refreshAni {
|
||||
0% {
|
||||
color: #f88ca2;
|
||||
}
|
||||
50% {
|
||||
color: #56bbf9;
|
||||
}
|
||||
100% {
|
||||
color: #f88ca2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,14 +2,19 @@
|
||||
<view class="app-page">
|
||||
<view class="page-title">我们的故事</view>
|
||||
<view class="html-typed" v-html="html">内容渲染</view>
|
||||
|
||||
<scroll-btn bottom="60rpx" :scrollTop.sync="scrollTop"></scroll-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoveConfig from '@/config/love.config.js';
|
||||
import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
|
||||
export default {
|
||||
components: { ScrollBtn },
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
html: '',
|
||||
timer: null
|
||||
};
|
||||
@ -17,6 +22,9 @@ export default {
|
||||
created() {
|
||||
this.fnInit();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
onBackPress() {
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
|
||||
@ -70,14 +70,18 @@
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<scroll-btn :scrollTop.sync="scrollTop"></scroll-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoveConfig from '@/config/love.config.js';
|
||||
import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
|
||||
export default {
|
||||
components: { ScrollBtn },
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
loveConfig: LoveConfig,
|
||||
list: []
|
||||
};
|
||||
@ -101,6 +105,9 @@ export default {
|
||||
created() {
|
||||
this.fnGetList();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
methods: {
|
||||
fnGetList() {
|
||||
if (LoveConfig.loveList.useApi && LoveConfig.loveList.api) {
|
||||
@ -164,9 +171,8 @@ export default {
|
||||
rgba(7, 179, 155, 0.1) 86%,
|
||||
rgba(109, 186, 130, 0.1)
|
||||
);
|
||||
// background: rgba(247, 246, 242, 1);
|
||||
// color: #55423b;
|
||||
}
|
||||
|
||||
.love-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -182,10 +188,8 @@ export default {
|
||||
background-color: rgba(255, 199, 184, 0.9);
|
||||
margin-bottom: 52rpx;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
&:hover {
|
||||
transform: translateY(-6rpx);
|
||||
}
|
||||
animation: loveCardAni 3s ease-in-out infinite;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
.avatar {
|
||||
@ -247,6 +251,17 @@ export default {
|
||||
color: #f88ca2;
|
||||
}
|
||||
}
|
||||
@keyframes loveCardAni {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -286,13 +301,9 @@ export default {
|
||||
// background-color: #faf8eb;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 36rpx;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
animation: cardAni 3s ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
&:hover {
|
||||
transform: translateY(-8rpx);
|
||||
}
|
||||
.head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -309,6 +320,7 @@ export default {
|
||||
font-size: 24rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
color: #55423b;
|
||||
&.finish {
|
||||
background-color: #bfe9ef;
|
||||
}
|
||||
@ -328,7 +340,7 @@ export default {
|
||||
&-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(96, 77, 68, 1);
|
||||
color: #555;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -388,6 +400,7 @@ export default {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -141,6 +141,7 @@ export default {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -148,7 +149,7 @@ export default {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
|
||||
z-index: 0;
|
||||
backdrop-filter: blur(4rpx);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user