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;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

.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>