页面自适应

guanqb

2022-12-13 57f53e349a70ad3154a056d7869310edf3840272

页面自适应

 src/styles/media/index.scss

@@ -21,7 +21,6 @@
                        font-size: countSizeVh(24);
                    }


                    .menu-list.left {
                        margin-left: countSizeVh(72);
                    }
@@ -283,6 +282,383 @@
                        }
                    }

                    .police-page {
                        .switch-box {
                                padding: countSizeVh(6);
                        }

                        .list-show {
                                height: calc(100% - countSizeVh(50));

                                .search-box {
                                    padding: countSizeVh(6) countSizeVw(6, 1920);
                                    height: countSizeVh(46);

                                    input {
                                        font-size: countSizeVh(18);
                                        border-radius: countSizeVh(20) 0 0 countSizeVw(20,1920);
                                    }

                                    button {
                                        font-size: countSizeVh(24);
                                        width: countSizeVw(80,1920);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(20,1920) countSizeVh(20) 0;
                                    }

                                    button:active {
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
                                }
                                .search-val-box{
                                    top: countSizeVh(48);
                                    left: countSizeVw(6,1920);
                                    width: calc(100% - countSizeVw(12,1920));
                                    max-height: countSizeVh(160);
                                    border-radius: countSizeVh(10) countSizeVw(10,1920);

                                    & > div {
                                        padding: 0 countSizeVw(10,1920);
                                        line-height: countSizeVh(36);
                                    }
                                }
                                .list {
                                    height: calc(100% - countSizeVh(48));

                                    .pages {
                                        height: countSizeVh(40);
                                    }

                                    .state-box {
                                        width: countSizeVw(20,1920);
                                        height: countSizeVh(20);
                                        line-height: countSizeVh(20);
                                    }
                                }
                                
                        }

                        .track-box {
                                height: calc(100% - countSizeVh(50));

                                .back-btn {
                                    height: countSizeVh(42);
                                    line-height: countSizeVh(42);
                                    border-bottom: countSizeVh(1) solid #fff;
                                }

                                .back-btn::before {
                                    height: countSizeVh(28);
                                    line-height: countSizeVh(28);
                                    top: countSizeVh(4);
                                    left: countSizeVw(8, 1920);
                                }

                                li {
                                    padding: 0 countSizeVw(4, 1920);
                                    height: countSizeVh(42);
                                    line-height: countSizeVh(42);
                                    border-bottom: countSizeVh(1) solid #fff;
                                }

                                li:last-child {
                                    .el-button {
                                        width: countSizeVw(68, 1920);
                                        height: countSizeVh(32);
                                        line-height: countSizeVh(32);
                                    }
                                }}
                    }

                    .video-page {
                        .list {
                            .search-box {
                                padding: countSizeVw(6, 1920) countSizeVh(6);
                                height: countSizeVh(52);

                                input {
                                    font-size: countSizeVh(18);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: countSizeVh(20) 0 0 countSizeVw(20, 1920);
                                }

                                button {
                                    font-size: countSizeVh(24);
                                    width: countSizeVw(80, 1920);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: 0 countSizeVw(20, 1920) countSizeVh(20) 0;
                                }
                    
                                button:active {
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }
                            }

                            .search-val-box {
                                top: countSizeVh(48);
                                left: countSizeVw(6, 1920);
                                width: calc(100% - countSizeVw(12, 1920));
                                max-height: countSizeVh(160);
                                border-radius: countSizeVh(10) countSizeVw(10, 1920);

                                & > div {
                                    padding: 0 countSizeVw(10, 1920);
                                    line-height: countSizeVh(36);
                                }
                            }

                            .draw-btn {
                                margin: countSizeVh(8) countSizeVw(8, 1920);
                                height: countSizeVh(26);
                            }

                            .range-input {
                                right: countSizeVw(-190, 1920);
                                top: countSizeVh(20);
                                width: countSizeVw(180, 1920);
                                height: countSizeVh(100);

                                input {
                                    border: countSizeVh(1) solid #005ca9;
                                    width: countSizeVw(160, 1920);
                                    height: countSizeVh(30);
                                    margin-top: countSizeVh(10);
                                    padding-left: countSizeVw(6, 1920);
                                }
                    
                                .btn {
                                    width: countSizeVw(60, 1920);
                                    height: countSizeVh(30);
                                    border-radius: countSizeVh(4)  ;
                                    margin-top: countSizeVh(10);
                                }
                    
                                .close {
                                    width: countSizeVw(20, 1920);
                                    height: countSizeVh(10);
                                }
                    
                                .close::before {
                                    font-size: countSizeVh(18);
                                }
                            }

                            .list-show {
                                .pages {
                                    height:  countSizeVh(40);
                                }
                            }
                        }

                        .region {
                            .left-container{
                                .search-box {
                                    padding: countSizeVw(6, 1920) countSizeVh(6);
                                    height: countSizeVh(52);
    
                                    input {
                                        font-size: countSizeVh(18);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: countSizeVh(20) 0 0 countSizeVw(20, 1920);
                                    }
    
                                    button {
                                        font-size: countSizeVh(24);
                                        width: countSizeVw(80, 1920);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(20, 1920) countSizeVh(20) 0;
                                    }
                        
                                    button:active {
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
                                }

                                .search-val-box {
                                    top: countSizeVh(48);
                                    left: countSizeVw(6, 1920);
                                    width: calc(100% - countSizeVw(12, 1920));
                                    max-height: countSizeVh(160);
                                    border-radius: countSizeVh(10) countSizeVw(10, 1920);
    
                                    & > div {
                                        padding: 0 countSizeVw(10, 1920);
                                        line-height: countSizeVh(36);
                                    }
                                }

                                .list-show {
                                    & > div {
                                        .list-box {
                                            .btn {
                                                width: 60px;
                                                height: countSizeVh(30);
                                                border-radius: countSizeVh(4) countSizeVw(4, 1920);
                                                margin-top: countSizeVh(10);
                                            }
                    
                                            .btn:active {
                                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                            }
                                        }
                                    }
                                    .pages {
                                        height:  countSizeVh(40);
                                    }
                                }
                            }
                        }
                    }

                    .activity-page{
                        &-content{
                            font-size: countSizeVh(24);

                            .title {
                                height: countSizeVh(40);
                                line-height: countSizeVh(40);
                                font-size: countSizeVh(24);
                                letter-spacing: countSizeVw(20, 1920);
                            }
    
                            .search-box {
                                padding: 0 countSizeVw(10, 1920);
                    
                                & > div {
                                    margin-top: countSizeVh(10);
                    
                                    .category {
                                        width: countSizeVw(88, 1920);
                                    }
                    
                                    input {
                                        width: 209px;
                                        height: countSizeVh(32);
                                        font-size: countSizeVh(12);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: countSizeVh(5) 0 0 countSizeVw(5, 1920);
                                    }
                    
                                    button {
                                        font-size: countSizeVh(20);
                                        width: countSizeVw(60, 1920);
                                        height: countSizeVh(32) ;
                                        border: countSizeVh(1)  solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(5, 1920) countSizeVh(5)  0;
                                    }
                    
                                    button:active {
                                        border: countSizeVh(1)  solid rgb(0, 92, 169);
                                    }
                                }
                            }
    
                            .result-content {
                                margin-top: countSizeVh(8);
                    
                                .table-box {
    
                                    .row-box {
                                        margin: countSizeVh(10) countSizeVw(10, 1920) ;
                                        padding: countSizeVh(10) countSizeVw(10, 1920) ;
                                        font-size: countSizeVh(14);
                    
                                        .row-content {
                                            & > div {
                                                line-height: countSizeVh(28);
                    
                                                .category {
                                                    width: countSizeVw(88, 1920) ;
                                                }
                                            }
                                        }
                                    }
                    
                                    .tableClass {
                                        width: countSizeVw(400, 1920) ;
                                    }
                    
                                    .tableClass td {
                                        width: countSizeVw(300, 1920) ;
                                    }
                                }
                    
                                .pages {
                                    height: countSizeVh(40);
                                }
                            }
                        }
                       
                        .draw-btn-box {
                            bottom: countSizeVh(40);
                    
                            ul {
                                li {
                                    button {
                                        width: countSizeVw(60, 1920);
                                        height: countSizeVh(30);
                                        margin: 0 countSizeVw(5, 1920);
                                        border: countSizeVh(1) solid #cecece;
                                        border-radius: countSizeVh(4) countSizeVw(4, 1920);
                                    }
                                }
                            }
                        }

                        .second-container {
                            top: countSizeVh(10);
                            width: countSizeVw(240, 1920);
                        }

                        .second-container.spread {
                            left: countSizeVw(410, 1920);
                        }
                    
                        .second-container.take-back {
                            left: countSizeVw(10, 1920);
                        }
                    
                        .activity-details-box {
                            top: countSizeVh(90);
                            right: countSizeVw(10, 1920);
                            width: countSizeVw(400, 1920);
                            padding: countSizeVh(10) countSizeVw(10, 1920);
                            border-radius: countSizeVh(10) countSizeVw(10, 1920);
                    
                            .title {
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                            }
                    
                            .row-box {
                                line-height: countSizeVh(28);
                    
                                .category {
                                    width: countSizeVw(96, 1920);
                                }
                            }
                        }
                    
                        .btn-box {
                            top: countSizeVh(78);
                            min-height: countSizeVh(40);
                            padding: countSizeVh(10) countSizeVw(10, 1920) 0 countSizeVw(10, 1920);
                            border-radius: countSizeVw(10, 1920);
                    
                            ul {
                                li {
                                    button {
                                        width: countSizeVw(60, 1920);
                                        height: countSizeVh(30);
                                        margin: 0 countSizeVw(5, 1920);
                                        border: countSizeVh(1) solid #cecece;
                                        border-radius: countSizeVw(4, 1920);
                                    }
                                }
                            }
                        }
                    }

                }

                .main-content.spread {

 src/views/activity/index.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div class="container">
    <div class="activity-page container">
        <div v-show="boxShow" class="container-content">
            <div class="title">活动信息</div>
            <div class="search-box">
@@ -1076,16 +1076,18 @@
<style scoped lang="scss">
.container {
    height: 100%;
    width: 100%;
    position: relative;

    &-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 400px;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
        font-size: 24px;

        .title {
            height: 40px;

 src/views/police/index.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div class="container">
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
@@ -812,7 +812,7 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 400px;
    width: 100%;
    height: 100%;

    &-content {
@@ -963,7 +963,7 @@

            ul {
                margin: 0;
                padding: 0px;
                padding: 0;
            }

            li {

 src/views/video/index.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div style="position: absolute; height: 100%;">
    <div class="video-page" style="position: absolute; height: 100%;">
        <router-view ref="video-target-box"></router-view>
    </div>
</template>
@@ -23,4 +23,10 @@
        },
    },
}
</script>
</script>
<style scoped lang="scss">
.video-page {
    width: 100%;
    height: 100%;
}
</style>

 src/views/video/list.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div class="container">
    <div class="list container">
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                <input
@@ -446,7 +446,7 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 400px;
    width: 100%;
    height: 100%;

    &-content {

 src/views/video/region.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div class="container">
    <div class="region container">
        <div class="left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
@@ -757,7 +757,7 @@

    .left-container {
        position: relative;
        width: 400px;
        width: 100%;
        height: 100%;

        .container-content {