部分修改

shuishen

2022-09-19 0f4d00f6bf344326069b271b8e113ee895285db6

部分修改

 src/styles/base/index.scss

@@ -4,7 +4,8 @@
    box-sizing: border-box;
}

html, body {
html,
body {
    width: 100%;
    height: 100%;
}
@@ -15,4 +16,34 @@
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: none;
}

// hsla(0, 0%, 84.7%, 0.6);
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(7, 22, 37, 0.8);
    padding-left: 2px;
    padding-right: 2px;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(7, 22, 37, 0.8);
}

:not(select)::-webkit-scrollbar {
    background-color: hsla(0, 0%, 84.7%, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(7, 22, 37, 0.8);
}

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:26:34
 * @LastEditTime: 2022-09-19 14:59:44
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -10,7 +10,74 @@
-->

<template>
    <div class="container"></div>
    <div class="container">
        <div class="title">活动信息</div>
        <div class="search-box">
            <div>
                <div class="category">活动类型：</div>
                <div class="category-value">
                    <el-select size="small" v-model="activityType" placeholder="请选择">
                        <el-option
                            v-for="item in activityOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <div class="category">活动名称：</div>
                <div class="category-value">
                    <el-input size="small" placeholder="请输入活动名称" v-model="searchActivity">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <div>
                <div class="category">选择时间：</div>
                <div class="category-value">
                    <el-date-picker
                        size="small"
                        v-model="selectTime"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
            </div>
        </div>
        <div class="result-content">
            <div class="table-box">
                <div class="row-box" v-for="(item, index) in 6" :key="index">
                    <div class="row-title">常规安保</div>
                    <div class="row-content">
                        <div>
                            <div class="category">活动名称：</div>
                            <div class="category-value">xxx活动</div>
                        </div>
                        <div>
                            <div class="category">活动时间：</div>
                            <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                        </div>
                        <div>
                            <div class="category">活动详情：</div>
                            <div class="category-value">护送某某某到某某某个地方</div>
                        </div>
                    </div>
                </div>
            </div>

            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
@@ -18,7 +85,27 @@
export default {
    data () {
        return {

            activityOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            activityType: '',
            searchActivity: '',
            selectTime: '',
            navType: 0,
            currentPage: 4
        }
    },
    created () {
@@ -31,7 +118,12 @@

    },
    methods: {

        sizeChange (val) {
            console.log(`每页 ${val} 条`)
        },
        currentChange (val) {
            console.log(`当前页: ${val}`)
        }
    }
}
</script>
@@ -39,7 +131,68 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
    color: #fff;
    background: rgba(7, 22, 37, 0.8);

    .search-box {
        padding: 0 10px;

        & > div {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .category {
                width: 88px;
            }

            .category-value {
                flex: 1;
            }
        }
    }

    .result-content {
        flex: 1;
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .table-box {
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;

            .row-box {
                margin: 10px;
                padding: 10px;
                background: rgba(15, 31, 50, 0.5);

                .row-content {
                    & > div {
                        display: flex;
                        line-height: 28px;

                        .category {
                            width: 88px;
                        }

                        .category-value {
                            flex: 1;
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                        }
                    }
                }
            }
        }
    }
}
</style>
</style>

 vue.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 09:49:47
 * @LastEditTime: 2022-09-19 10:20:28
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description: 
 * 
@@ -65,5 +65,25 @@
            //     minRatio: 0.8 // 压缩比
            // })
        ]
    }
    },

    devServer: {
        open: false, // 编译完成是否打开网页
        host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
        port: 8081, // 访问端口
        https: false, // 编译失败时刷新页面
        hot: true, // 开启热加载
        hotOnly: false,
        // proxy: {
        //     [process.env.VUE_APP_API]: {//拦截器(拦截链接中有/api)
        //         target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             //'^/api': '/' 
        //             [`^${process.env.VUE_APP_API}`]: '',
        //             //[`^${process.env.VUE_APP_API}`]: '/', //配置出来的接口没有 /api
        //         }
        //     }
        // }
    },
}