如图 vue实现一块手机的样式

组件代码

<script setup lang="ts">
defineOptions({
    name: "Phone"
});
const props = defineProps({
    /* 标题 */
    phoneTitle: {
        type: String,
        required: true,
        default() {
            return "";
        }
    }
});

/* 手机时间 */
function showData() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const currentTime = `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}`;
    return currentTime;
}
</script>

<template>
    <div>
        <div class="look_box">
            <div class="phone">
                <div class="phone_shadow">
                    <div class="nav">
                        <div style="font-size: 15px; padding-top: 5px; padding-left: 5px">
                            {{ showData() }}
                        </div>
                        <div class="icons">
                            <span style="font-size: 22px; margin-right: 5px">...</span>
                            <span style="margin-right: 7px">
                                <svg
                                    t="1701753286800"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="1539"
                                    width="18"
                                    height="18"
                                >
                                    <path
                                        d="M42.666667 384l85.333333 85.333333c212.053333-212.053333 555.946667-212.053333 768 0l85.333333-85.333333C722.133333 124.8 301.866667 124.8 42.666667 384z m341.333333 341.333333l128 128 128-128c-70.613333-70.613333-185.386667-70.613333-256 0z m-170.666667-170.666666l85.333334 85.333333c117.76-117.76 308.906667-117.76 426.666666 0l85.333334-85.333333c-164.906667-164.906667-432.426667-164.906667-597.333334 0z"
                                        p-id="1540"
                                        fill="#2d4247"
                                    />
                                </svg>
                            </span>
                            <span>
                                <svg
                                    t="1701754878961"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="6536"
                                    width="23"
                                    height="23"
                                >
                                    <path
                                        d="M144.700101 684.994006l535.580045 0L680.280146 359.237781 144.700101 359.237781 144.700101 684.994006 144.700101 684.994006zM918.373823 440.680675l0-81.442894c0-44.791136-36.649711-81.437777-81.437777-81.437777l-692.235944 0c-44.791136 0-81.437777 36.646642-81.437777 81.437777L63.262324 684.994006c0 44.791136 36.646642 81.442894 81.437777 81.442894l692.235944 0c44.788066 0 81.437777-36.650735 81.437777-81.442894l0-81.437777c22.396079 0 40.7194-18.322297 40.7194-40.7194l0-81.436754C959.093223 459.003995 940.769902 440.680675 918.373823 440.680675L918.373823 440.680675zM877.655446 481.400075l0 81.436754L877.655446 684.994006c0 22.395056-18.323321 40.718377-40.7194 40.718377l-692.235944 0c-22.396079 0-40.7194-18.323321-40.7194-40.718377L103.980701 359.237781c0-22.396079 18.323321-40.7194 40.7194-40.7194l692.235944 0c22.396079 0 40.7194 18.323321 40.7194 40.7194L877.655446 481.400075 877.655446 481.400075zM877.655446 481.400075"
                                        fill="#2d4247"
                                        p-id="6537"
                                    />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="nav_s" style="background-color: #fff">
                        <div class="span_title">{{ props.phoneTitle }}</div>
                    </div>
                    <!-- 内容区域 -->
                    <div class="phone_conts" style="background-color: #f3f4f6">
                        <slot name="conts">
                            <!-- 页面头部 -->
                        </slot>
                    </div>
                    <div class="bottom_bar" />
                </div>
                <div class="volume" />
                <div class="bang">
                    <div class="yuan" />
                </div>
                <div class="power1" />
                <div class="power2" />
                <div class="power3" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
/* 手机样式 */
:deep(.look_box .el-dialog__header) {
    display: none;
}
:deep(.look_box .el-dialog) {
    border-radius: 0px !important;
}
:deep(.look_box .el-dialog__body) {
    padding: 0 !important;
}
:deep(.look_box .el-dialog) {
    background: transparent !important;
    box-shadow: none;
}
:deep(.look_box .el-dialog__body) {
    border: none !important;
}

.html_conts img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    padding: 5px 0;
}

.look_box {
    .look_box_cont {
        height: 380px;
    }
}

.phone {
    position: relative;
    width: 322px;
    height: 596px;
    border: 15px solid #000;
    border-radius: 55px;
    box-sizing: border-box;
    z-index: 1;
}

.phone_shadow {
    content: "";
    position: absolute;
    width: 310px;
    height: 583px;
    box-shadow: 0px 0px 24px #fff;
    border-radius: 48px;
    left: -9px;
    top: -9px;
    background: #fff;
    border: 4px solid #000;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 8;

    .nav {
        height: 36px;
        color: #333333;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding-right: 19px;
        padding-left: 35px;
        margin-top: 4px;
        .data {
        }
        .icons {
            display: flex;
            align-items: center;
        }
    }

    .nav_s {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-color: #f4f4f5;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 16px;
        border-bottom: 1px solid #ececec;
        .span_title {
            position: absolute;
            font-size: 16px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #000;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .left {
            color: #000;
            font-size: 20px;
        }

        .right {
            color: #83878d;

            .one {
                margin-right: 5px;
            }
        }
    }

    .phone_conts {
        height: 507px;
        overflow-y: scroll;
        box-sizing: border-box;
        color: #000;

        .titles {
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
        }

        .data {
            color: #666769;
            border-bottom: 1px dashed #c6c6c6;
            line-height: 26px;
        }

        .html_conts {
            margin-top: 20px;
            color: #666769;
            line-height: 30px;
            word-break: break-all;
        }
    }
    .bottom_bar {
        position: absolute;
        width: 120px;
        height: 4px;
        background-color: #2d4247;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5px;
        border-radius: 5px;
    }
}

.phone_conts::-webkit-scrollbar {
    display: none;
}

.volume {
    width: 5px;
    height: 100px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -18px;
    top: 172px;
    z-index: -1;
    border-radius: 0 20px 20px 0;
}

.power1 {
    width: 5px;
    height: 35px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    left: -19px;
    top: 100px;
    z-index: -1;
    border-radius: 20px 0 0 20px;
}

.power2 {
    width: 5px;
    height: 58px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    left: -19px;
    top: 158px;
    z-index: -1;
    border-radius: 20px 0 0 20px;
}
.power3 {
    width: 5px;
    height: 58px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    left: -19px;
    top: 232px;
    z-index: -1;
    border-radius: 20px 0 0 20px;
}
.receiver {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    border: #484848 1px solid;
    width: 50px;
    height: 8px;
    z-index: 9;
    border-radius: 20px;
}

.bang {
    width: 69px;
    height: 26px;
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 13px;
    top: 4px;
    z-index: 9;
}

.yuan {
    width: 12px;
    height: 12px;
    background-color: #0f2563;
    box-sizing: border-box;
    position: absolute;
    top: 7px;
    right: 9px;
    border-radius: 50%;
}

.look_my_phone .phone_conts {
    overflow: hidden !important;
    padding: 0 !important;
}
</style>