geekai/web/src/App.vue

<template>
  <el-config-provider :locale="zhCn">
    <router-view/>
  </el-config-provider>
</template>

<script setup>
import {ElConfigProvider} from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';</script>


<style lang="stylus">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.el-overlay-dialog {
  display flex
  justify-content center
  align-items center
  overflow hidden

  .el-dialog {
    margin 0;

    .el-dialog__body {
      max-height 90vh
    }
  }
}

/* 省略显示 */
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.sl3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.sl4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* 居中布局 */
.auto_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.h_center{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.w_center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

/* flex布局 */
.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center;
}

.items-baseline {
	align-items: baseline;
}

.items-stretch {
	align-items: stretch;
}

.self-start {
	align-self: flex-start;
}

.self-end {
	align-self: flex-end;
}

.self-center {
	align-self: center;
}

.self-baseline {
	align-self: baseline;
}

.self-stretch {
	align-self: stretch;
}

.flex-1 {
	flex: 1 1 0%;
}

.flex-auto {
	flex: 1 1 auto;
}

.grow {
	flex-grow: 1;
}

.grow-0 {
	flex-grow: 0;
}

.shrink {
	flex-shrink: 1;
}

.shrink-0 {
	flex-shrink: 0;
}

.shrink-1 {
	flex-shrink: 1;
}

.relative {
	position: relative;
}

</style>