首页警情动态新增时间选择组件，按钮样式调整

zhongrj

2022-12-27 4b625e2bef18faa1658593ae78c20d0602b6c1fd

首页警情动态新增时间选择组件，按钮样式调整

 src/styles/media/index.scss

@@ -238,7 +238,7 @@

                                .timeTab {
                                    top: countSizeVh(22);
                                    right: countSizeVw(12, 1920);
                                    right: countSizeVw(400, 1920);
                                    border-radius: countSizeVh(6);

                                    span {
@@ -248,9 +248,14 @@
                                    }
                                }

                                .timeSeclect{
                                    top: countSizeVh(15);
                                    right: countSizeVw(128, 1920);
                                }

                                .history-tab {
                                    top: countSizeVh(22);
                                    right: countSizeVw(96, 1920);
                                    right: countSizeVw(12, 1920);
                                    border-radius: countSizeVh(6);

                                    span {

 src/views/home/components/bottomContainer.vue

@@ -2,18 +2,6 @@
    <div class="container">
        <div class="header">
            <div class="bottom-title">警情动态</div>
            <div class="history-tab">
                <span
                    class="beforetime"
                    :class="{ choosed: historytype == 0 }"
                    @click="historyTabClick(0)"
                >实时</span>
                <span
                    class="beforetime"
                    :class="{ choosed: historytype == 1 }"
                    @click="historyTabClick(1)"
                >历史</span>
            </div>
            <div class="timeTab" v-show="historytype">
                <span
                    class="beforetime"
@@ -26,6 +14,24 @@
                    @click="timeTabClick(1)"
                >月</span>
            </div>
            <div class="timeSeclect" v-show="historytype">
                <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
            </div>
            <div class="history-tab">
                <span
                    class="beforetime"
                    :class="{ choosed: historytype == 0 }"
                    @click="historyTabClick(0)"
                >实时</span>
                <span
                    class="beforetime"
                    :class="{ choosed: historytype == 1 }"
                    @click="historyTabClick(1)"
                >历史</span>
            </div>
            
        </div>

        <div class="body" ref="tableBox" @click="handleSelectClick($event)">
@@ -83,6 +89,34 @@
            policeSituationRealtimeArr: [],
            policeSituationHistoryArr: [],
            policeSituationHistorySaveArr: [],
            eventTime: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
        }
    },

@@ -244,7 +278,7 @@
        .timeTab {
            position: absolute;
            top: 22px;
            right: 12px;
            right: 400px;
            display: flex;
            border-radius: 6px;
            overflow: hidden;
@@ -267,10 +301,18 @@
            }
        }

        .timeSeclect{
            width: 250px;
            height: 30px;
            position:absolute;
            top: 12px;
            right: 130px;
        }

        .history-tab {
            position: absolute;
            top: 22px;
            right: 96px;
            right: 12px;
            display: flex;
            border-radius: 6px;
            overflow: hidden;