洪海洋的博客

小小白

自适应 panel 小 demo
html(宽度是百分比):
<div class="panel-out">
  <div class="panel-main">
    <div class="logo-content">

    </div>
    <div class="panel-content">

    </div>
  </div>
</div>
css:
CSS marginpadding属性的垂直方向的百分比值都是相对于宽度计算的
.panel-out {
  padding: 10px;
  border-bottom: 1px solid rgb(236, 236, 236);
  box-sizing: border-box;
  background-color: white;
}

.panel-main {
  position: relative;
  padding-left: 25%;
  padding-bottom: 25%;
  border: 1px solid red;
}

.logo-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background-color: lightgray;
}

.panel-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  height: 100%;
  background-color: gray;
}


panel-vue 组件(宽度是固定的数值):
<template>
    <div class="panel-out">
        <div class="panel-main">
            <div class="user-avatar-panel" :style="{'background-image':'url('+ avatar +')'}"></div>
            <div class="info-content">
                <div class="long-text">{{name}}</div>
                <div class="company long-text">{{company}}</div>
                <!-- <div v-if="desc" class="company long-text">{{desc}}</div> -->
            </div>
        </div>
        <div v-if="desc" class="desc">{{desc}}</div>
    </div>
</template>

<script>

    export default {
        name: "user-info-panel",
        props: ['name', 'company', 'desc', 'avatar'],
        data() {
            return {
            };
        },
        computed: {},
        methods: {},
        components: {}
    }
</script>

<style scoped>
    .panel-out {
        /* height: 100px; */
        padding: 10px;
        border-bottom: 1px solid rgb(236, 236, 236);
        box-sizing: border-box;
        background-color: white;
    }

    .panel-main {
        position: relative;
        padding-left: 60px;
    }

    .user-avatar-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        background-position: center;
        background-size: cover;
        border-radius: 50%;
    }

    .info-content {
        height: 60px;        
        box-sizing: border-box;
        margin-left: 5%;
    }

    .info-content div{
        line-height: 30px;
    }

    .company {
        color: rgb(148, 143, 143);
        font-size: 15px;
    }
    .long-text{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .desc{
        color: rgb(148, 143, 143);        
    }
</style>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/afr3828/article/details/80322095
文章标签: css
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

自适应 panel 小 demo

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭