#

whycq

2023-10-30 00a6062e335ee063a32d8127bfca6f3903ec0885

#

 pages.json

@@ -91,6 +91,15 @@
            }
            
        }
        ,{
            "path" : "pages/maoboli/card",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "card",
                "enablePullDownRefresh": false
            }
            
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",

 pages/maoboli/card.vue

New file
@@ -0,0 +1,53 @@
<template>
    <view>
        <view class="card"></view>
    </view>
</template>

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

<style>
    .card{
      width: 700rpx;
      height: 250rpx;
      margin: 0 auto 20rpx;
      border-radius: 20rpx;
      position: relative;
      background: #ff6810;
      position: relative;
      filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, .3));
    }
	
    .card::before,
    .card::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      background: #fff;
      /* top: calc(50% - 20rpx); */
    }
    .card::before {
      /* border-radius: 0 20rpx 20rpx 0; */
      border-top: 20px solid #fff;
      border-left: 20px solid #ff6810;
      border-right: 20px solid #ff6810;
      border-bottom: 20px solid #ff6810;
      left: calc(50% - 20rpx);
    }
    .card::after {
      border-radius: 20rpx 0 0 20rpx;
      right: 0;
    }
</style>