#

whycq

2023-10-22 2647a5a829f3554e985b1aac99c6a87892f42479

#

 pages.json

@@ -2,6 +2,18 @@
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        
        {
            "path" : "pages/maoboli/maoboli",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "毛玻璃",
                "enablePullDownRefresh": false
				
				
            }
			
		    
        },
        {
            "path": "pages/LoginDemo/LoginDemo",
            "style": {
                "navigationBarTitleText": "登录"

 pages/maoboli/maoboli.vue

New file
@@ -0,0 +1,147 @@
<template>
    <view>
        <view class="container">
            dasdasdas dasd 
        </view> 
		
        <view class="box">
            <view class="bg1">
                背景底层
            </view>
            <view class="bg2">
                <view class="bg2-glass"></view>
                <text class="text">背景上层</text>
            </view>
        </view>
		
		
        <view class="box2">
			
        </view>
		
        <view class="box3"></view>
		
        <view class="box4"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>
    :root {
        --pcol: #888;
    }
    .container {
        margin: 8px;
        min-height: 100px;
        font-size: 40px;
        color: #ffffff;
        background-color: #333;
        filter: blur(.1px); /* 设置滤镜效果 */
    }
    .container::before {
        filter: blur(1px); /* 设置滤镜效果 */
        margin: 8px;
        min-height: 100px;
    }
    .box {
        background-color: azure;
        position: relative;
        margin: 8px;
    }
    .bg1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 48rpx;
        min-height: 200rpx;
        background-color: #92cbff;
        white-space: nowrap;
    }
    .bg2 {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 16rpx;
        min-height: 200rpx;
    }
    .bg2-glass {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: 20px;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid red;
    }
    .bg2::before {
        position: absolute;
        content: '';
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .5);
        backdrop-filter: blur(4px);
        border: 1px solid #000;
    }
    .text {
        position: absolute;
    }
    .box2 {
        margin-top: 100px;
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-bottom-color: red;
    }
    .box3 {
        width: 0px;
        height: 0px;
        border-top: 100px solid transparent;
        border-left: 100px solid gray;
        border-right: 100px solid transparent;
        border-bottom: 100px solid gray;
    }
    .box4 {
        width: 100%;
        height: 100px;
        background-color: #92cbff;
        position: relative;
        margin-top: 30px;
    }
    .box4::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: -20px;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid red;
    }
</style>