vue 布局局中

最新推荐文章于 2023-06-13 16:17:02 发布

grant_cloud

最新推荐文章于 2023-06-13 16:17:02 发布

阅读量326

点赞数

分类专栏： vue 文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/Alangao420983/article/details/126056650

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客记录了UI界面设计的学习心得，重点展示了用于照片图库、拍照和浏览功能的组件设计。通过对话框样式 `.dialog_div`，详细描述了各个元素的布局、尺寸和颜色等属性，旨在提升用户体验。文中提到的`.text_left_stytle`和`.image_gallery_style`分别用于展示文字和图标，体现了前端开发中关于GUI设计的细节处理。

摘要由CSDN通过智能技术生成

     <div class="dialog_div" v-show="is_dialog_visible">
            <div class="dialog_div_style">
                <text class="text_left_stytle">照片图库</text>
                <img class="image_gallery_style" src="@/assets/icon_gallery.png">

            </div>
            <div class="divider_style_text"></div>
            <div class="dialog_div_style">
                <text class="text_left_stytle">拍照</text>
                <img class="image_gallery_style" src="@/assets/icon_camera.png">
            </div>
            <div class="divider_style_text"></div>
            <div class="dialog_div_style">
                <text class="text_left_stytle">浏览</text>
                <img class="image_gallery_style" src="@/assets/icon_browse.png">
            </div>
        </div>

.dialog_div {
    width: 43%;
    height: 92px;
    background-color: #bfbfbf;
    display: inline-grid;
    border-radius: 10px;
    position: relative;
    top: 75%;
}

.dialog_div_style {
    height: 30px;
    justify-content: flex-end;
    flex: 1;
}

.text_left_stytle {
    width: 50%;
    height: 100%;
    text-align: left;
    font-size: 12px;
    float: left;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #515151;
    margin-left: 10px;

}

只是记录自己的学习