码迷,mamicode.com
首页 > 其他好文 > 详细

1.5_视图容器_cover-view

时间:2020-06-08 22:06:31      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:png   stat   视图   inf   position   load()   default   turn   return   

图:

技术图片

 代码:

<template>
    <view>
        <view class="v1">
            <image src="../../static/shuijiao.jpg" mode="widthFix"></image>
            <cover-view class="v2">简单的cover-view</cover-view>
            <cover-image class="v3" src="../../static/app-plus/uni@2x.png"></cover-image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .v1{
        text-align: center;
        position: relative;
    }
    .v2{
        position: absolute;
        top: 30rpx;
        left: 80rpx;
        background-color: #A80077;
        border-radius: 8rpx;
        padding: 10rpx;
        color: #FFFFFF;
    }
    .v3{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 96px;
        height: 96px;
    }
</style>

1.5_视图容器_cover-view

标签:png   stat   视图   inf   position   load()   default   turn   return   

原文地址:https://www.cnblogs.com/luwei0915/p/13068836.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!