bj-maritime-dcds-web/src/App.vue

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { nextTick, onMounted } from 'vue';

onMounted(() => {
    nextTick(() => {
        // 初始化主题样式
        handleThemeStyle(useSettingsStore().theme);
    });
});
</script>
<style lang="scss">
.app-main {
    background-color: #f8f8f9;
}
.el-form-item__label {
    font-weight: 400 !important;
    font-size: 14px !important;
}
/* red颜色 */
.red {
    color: #c00000;
}
.yellow {
    color: #f2941e;
}
.green {
    color: #46a70c;
}
.blue {
    color: #004095;
}
.orange {
    color: #ff6600;
}
.fw700 {
    font-weight: 700;
}
/* 超出省略 */
.omg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* flex布局 */
.flex {
    display: flex !important;
}

.flex-c {
    display: flex !important;
    align-items: center;
}

.flex-b {
    display: flex !important;
    justify-content: space-between;
}

.flex-bc {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.flex-ac {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
}

.flex-cc {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.flex-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; // 让元素尽量向左靠齐
    align-items: center;
}

.flex-jend {
    display: flex !important;
    justify-content: flex-end !important;
}
.flex-d {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
/* 小手 */
.pointer {
    cursor: pointer;
}

// 超出一行省略
.nowarp {
    /* 块级元素;  也可以是 inline-block */
    display: block;
    /* 设置超出内容隐藏 */
    overflow: hidden;
    /* 设置文本超出内容隐藏 */
    text-overflow: ellipsis;
    /*  溢出不换行 */
    white-space: nowrap;
}
// 超出2行省略
.nowarp2 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 作为弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
    -webkit-box-orient: vertical;
    /* 显示的行 */
    -webkit-line-clamp: 2;
}

// 对话框按钮间隔
.mr20 {
    margin-right: 20px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
.mt15 {
    margin-top: 15px;
}
// 总计样式
.footSlotStyle {
    margin-top: 20px;
    font-size: 13px;
    color: #606266;
}
// 隐藏按钮
.hid_input {
    position: absolute;
    left: 100000px;
}
/* 详情页面 */
#app {
    height: 100vh;
}
.details_home {
    margin: 20px 15px;
    height: calc(100vh - 134px);
    border: 1px solid #eaeaea;
    background-color: #fff;
    .info_form {
        padding: 25px 45px 0 5px;
        .multiselect {
            width: 20rem;
        }
    }
    .btns {
        position: absolute;
        bottom: 100px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
.el-select.el-select--default {
    width: 100%;
}
</style>