1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027 |
- <template>
- <div class="mod-home" id="content">
- <el-button @click="fullScreen" class="full-screen-btn">全屏</el-button>
- <el-row :span="24" class="sample-bg">
- <el-col :span="6" class="bg1-1">
- <el-row :span="24" class="bg1-1-1">
- <div class="box-company-title">
- <div class="company-title">东齐公司大数据看板</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-1-2">
- <div class="box-custom-number">
- <div class="custom-number">客户数:{{ analytics.clients }}</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-1-1">
- <div class="box-contract-number">
- <div class="contract-number">合同数:{{ analytics.num }}</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-1-2">
- <div class="box-contract-amount">
- <div class="contract-amount">
- 合同总金额:{{ analytics.totalAmount }}
- </div>
- </div>
- </el-row>
- </el-col>
- <el-col :span="12" class="bg1-2">
- <el-row :span="24" class="bg1-2-1">
- <div ref="boxnoticetitle" class="box-notice-title" @dblclick="doubleClick">
- <div ref="noticetitle" :class="isTran ? 'notice-title notice-title-animation' : 'notice-title'">{{ noticeContent }}</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-2-2">
- <div class="box-stat-number">
- <div class="stat-number">
- <div class="item">
- <div class="title">在制产品总数</div>
- <div class="number">{{ produceCensus.produceNum }}</div>
- </div>
- <div class="item">
- <div class="title">已完成数量</div>
- <div class="number">{{ produceCensus.completeNum }}</div>
- </div>
- <div class="item">
- <div class="title">损坏数量</div>
- <div class="number">{{ produceCensus.damageNum }}</div>
- </div>
- <div class="item">
- <div class="title">生产总值</div>
- <div class="number">{{ produceCensus.totalOutputValue }}</div>
- </div>
- </div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-2-3">
- <div class="box-contract-table">
- <div class="contract-table table">
- <el-table
- ref="contractProdTable"
- :data="contractProdList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column
- prop="orderCode"
- label="合同号"
- ></el-table-column>
- <el-table-column
- prop="productName"
- label="产品名称"
- ></el-table-column>
- <el-table-column
- prop="prodCode"
- label="产品编号"
- ></el-table-column>
- <el-table-column
- prop="batchNo"
- label="批次号"
- ></el-table-column>
- <el-table-column label="生产进度" width="180">
- <template slot-scope="scope">
- <el-progress
- :percentage="parseInt(scope.row.progressBar)"
- ></el-progress>
- </template>
- </el-table-column>
- <el-table-column
- prop="customerName"
- label="客户名称"
- ></el-table-column>
- <el-table-column
- prop="curOperator"
- label="当前操作人"
- ></el-table-column>
- </el-table>
- </div>
- </div>
- </el-row>
- </el-col>
- <el-col :span="6" class="bg1-3">
- <el-row :span="24" class="bg1-3-1">
- <div class="box-custom-ranking">
- <div class="custom-ranking">客户排名</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg1-3-2">
- <div class="box-custom-ranking">
- <div class="custom-ranking">
- <div class="table">
- <el-table
- ref="customerRankTable"
- :data="customerRankList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column
- prop="customerName"
- label="客户名称"
- ></el-table-column>
- <el-table-column label="合同金额占比">
- <template slot-scope="scope">
- <el-progress
- :text-inside="true"
- :stroke-width="16"
- :percentage="scope.row.percentage * 100"
- status="success"
- ></el-progress>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </el-row>
- </el-col>
- </el-row>
- <el-row :span="24" class="sample-bg1">
- <el-col :span="6" class="bg2-1">
- <el-row :span="24" class="bg2-3-1">
- <div class="box-contract-alert">
- <div class="contract-alert">合同预警</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg2-3-2">
- <div class="box-contract-alert">
- <div class="contract-alert">
- <div class="table">
- <el-table
- ref="contractAlarmTable"
- :data="contractAlarmList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column
- prop="contractNumber"
- label="合同号"
- ></el-table-column>
- <!-- <el-table-column prop="orderCode" label="订单号"></el-table-column> -->
- <el-table-column
- prop="remainTime"
- label="剩余时间(天)"
- width="100"
- ></el-table-column>
- <el-table-column
- prop="deliveryTime"
- label="交付日期"
- ></el-table-column>
- <el-table-column
- prop="customerName"
- label="客户名称"
- ></el-table-column>
- <!-- <el-table-column prop="salesmenName" label="业务员"></el-table-column> -->
- </el-table>
- </div>
- </div>
- </div>
- </el-row>
- </el-col>
- <el-col :span="6" class="bg2-2">
- <el-row :span="24" class="bg2-3-1">
- <div class="box-contract-alert">
- <div class="contract-alert">报损记录</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg2-3-2">
- <div class="box-contract-alert">
- <div class="contract-alert">
- <div class="table">
- <el-table
- ref="damageTable"
- :data="damageList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column
- prop="productName"
- label="产品"
- ></el-table-column>
- <el-table-column
- prop="prodCode"
- label="编号"
- ></el-table-column>
- <!-- <el-table-column prop="damageReason" label="原因"></el-table-column> -->
- <el-table-column
- prop="liableUserName"
- label="报损人"
- width="80"
- ></el-table-column>
- <el-table-column
- prop="createTime"
- label="报损时间"
- ></el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </el-row>
- </el-col>
- <el-col :span="6" class="bg2-1">
- <el-row :span="24" class="bg2-3-1">
- <div class="box-contract-alert">
- <div class="contract-alert">报工</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg2-3-2">
- <div class="box-contract-alert">
- <div class="contract-alert">
- <div class="table">
- <el-table
- ref="submittedRecordTable"
- :data="submittedRecordList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column
- prop="nodeName"
- label="工序"
- width="70"
- ></el-table-column>
- <el-table-column
- prop="taskName"
- label="产品名字"
- ></el-table-column>
- <el-table-column
- prop="endTime"
- label="完成时间"
- ></el-table-column>
- <el-table-column
- prop="operatorName"
- label="操作人名字"
- ></el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </el-row>
- </el-col>
- <el-col :span="6" class="bg2-2">
- <el-row :span="24" class="bg2-3-1">
- <div class="box-contract-alert">
- <div class="contract-alert">出库记录</div>
- </div>
- </el-row>
- <el-row :span="24" class="bg2-3-2">
- <div class="box-contract-alert">
- <div class="contract-alert">
- <div class="table">
- <el-table
- ref="outboundRecordTable"
- :data="outboundRecordList"
- height="100%"
- row-class-name="custom-ranking-table-row"
- style="width: 100%"
- >
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column
- prop="materialName"
- label="物品"
- ></el-table-column>
- <el-table-column
- prop="cnt"
- label="数量"
- width="50"
- ></el-table-column>
- <el-table-column
- prop="createTime"
- label="时间"
- ></el-table-column>
- <el-table-column
- prop="applicant"
- label="申请人"
- ></el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </el-row>
- </el-col>
- </el-row>
- <el-dialog title="设置通知内容" :visible.sync="dialogFormVisible">
- <el-form :model="noticeForm">
- <el-form-item label="通知内容">
- <el-input v-model="noticeForm.content" autocomplete="off"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer">
- <el-button @click="dialogFormVisible = false">取 消</el-button>
- <el-button type="primary" @click="dialogSubmit">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- getAnalytics,
- getContractAlarmList,
- getCustomerRankList,
- getDamageList,
- getOutboundRecordList,
- getContractProdList,
- getSubmittedRecordList,
- getProduceCensus
- } from '@/api/home'
- export default {
- name: 'admin',
- components: {},
- data () {
- return {
- analytics: {
- clients: '', // 客户数
- num: '', // 合同数
- totalAmount: '' // 合同总金额
- },
- analyticsTimer: null,
- // 合同预警列表
- contractAlarmList: [],
- contractAlarmListTimer: null,
- // 客户排名列表
- customerRankList: [],
- customerRankListTimer: null,
- // 报损记录列表
- damageList: [],
- damageListTimer: null,
- // 出库记录列表
- outboundRecordList: [],
- outboundRecordListTimer: null,
- // 合同生产记录列表
- contractProdList: [],
- contractProdListTimer: null,
- // 报工列表
- submittedRecordList: [],
- submittedRecordListTimer: null,
- // 生产统计
- produceCensus: {
- produceNum: 0, // 在制产品总数
- completeNum: 0, // 已完成数量
- damageNum: 0, // 损坏数量
- totalOutputValue: 0 // 生产总值
- },
- produceCensusTimer: null,
- dialogFormVisible: false,
- noticeForm: {
- content: ''
- },
- noticeContent: '',
- isTran: false
- }
- },
- created () {
- this.getAnalytics()
- this.analyticsTimer = setInterval(this.getAnalytics, 1000 * 3600) // 1小时刷新
- this.getContractAlarmList()
- this.contractAlarmListTimer = setInterval(
- this.getContractAlarmList,
- 1000 * 60 * 10
- ) // 10分钟刷新
- this.getCustomerRankList()
- this.damageListTimer = setInterval(
- this.getCustomerRankList,
- 1000 * 60 * 10
- ) // 10分钟刷新
- this.getDamageList()
- this.customerRankListTimer = setInterval(
- this.getDamageList,
- 1000 * 60 * 10
- ) // 10分钟刷新
- this.getOutboundRecordList()
- this.outboundRecordListTimer = setInterval(
- this.getOutboundRecordList,
- 1000 * 60 * 5
- ) // 5分钟刷新
- this.getContractProdList()
- this.contractProdListTimer = setInterval(
- this.getContractProdList,
- 1000 * 60 * 10
- ) // 10分钟刷新
- this.getSubmittedRecordList()
- this.submittedRecordListTimer = setInterval(
- this.getSubmittedRecordList,
- 1000 * 60 * 5
- ) // 5分钟刷新
- this.getProduceCensus()
- this.produceCensusTimer = setInterval(this.getProduceCensus, 1000 * 60 * 5) // 5分钟刷新
- this.getNoticeContent()
- this.setTitleScroll()
- },
- mounted () {
- this.contractProdTableScroll()
- this.customerRankTableScroll()
- this.contractAlarmTableScroll()
- this.outboundRecordTableScroll()
- this.submittedRecordTableScroll()
- this.damageTableScroll()
- },
- beforeDestroy () {
- clearInterval(this.analyticsTimer)
- clearInterval(this.contractAlarmListTimer)
- clearInterval(this.damageListTimer)
- clearInterval(this.customerRankListTimer)
- clearInterval(this.outboundRecordListTimer)
- clearInterval(this.contractProdListTimer)
- clearInterval(this.submittedRecordListTimer)
- clearInterval(this.produceCensusTimer)
- },
- methods: {
- setTitleScroll () {
- this.$nextTick(() => {
- let boxWidth = this.$refs.boxnoticetitle.offsetWidth
- let contentWidth = this.$refs.noticetitle.offsetWidth
- if (contentWidth > boxWidth) {
- // 设置水平滚动效果
- this.isTran = true
- }
- })
- },
- getNoticeContent () {
- let content = sessionStorage.getItem('noticeContent')
- if (content == null || content === '') {
- content = '双击此处修改通知内容'
- }
- this.noticeContent = content
- },
- doubleClick () {
- this.dialogFormVisible = true
- },
- dialogSubmit () {
- this.noticeContent = this.noticeForm.content
- this.dialogFormVisible = false
- sessionStorage.setItem('noticeContent', this.noticeContent)
- this.setTitleScroll()
- },
- // 合同统计
- getAnalytics () {
- getAnalytics({}).then(({ data }) => {
- if (data && data.code === '200') {
- this.analytics = { ...data.data }
- }
- })
- },
- // 合同预警列表
- getContractAlarmList () {
- let params = {
- current: 1,
- size: 20
- }
- getContractAlarmList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.contractAlarmList = data.data.records
- }
- })
- },
- // 客户排名列表
- getCustomerRankList () {
- let params = {
- current: 1,
- size: 20
- }
- getCustomerRankList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.customerRankList = data.data
- }
- })
- },
- // 报损记录列表
- getDamageList () {
- let params = {
- current: 1,
- size: 20
- }
- getDamageList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.damageList = data.data.records
- }
- })
- },
- // 出库记录列表
- getOutboundRecordList () {
- let params = {
- current: 1,
- size: 20
- }
- getOutboundRecordList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.outboundRecordList = data.data.records
- }
- })
- },
- // 合同生产记录列表
- getContractProdList () {
- let params = {
- current: 1,
- size: 20
- }
- getContractProdList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.contractProdList = data.data.records
- }
- })
- },
- // 报工列表
- getSubmittedRecordList () {
- let params = {
- current: 1,
- size: 20
- }
- getSubmittedRecordList(params).then(({ data }) => {
- if (data && data.code === '200') {
- this.submittedRecordList = data.data.records
- }
- })
- },
- // 生产统计
- getProduceCensus () {
- getProduceCensus({}).then(({ data }) => {
- if (data && data.code === '200') {
- this.produceCensus = data.data
- }
- })
- },
- contractProdTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.contractProdTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- customerRankTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.customerRankTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- contractAlarmTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.contractAlarmTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- outboundRecordTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.outboundRecordTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- submittedRecordTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.submittedRecordTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- damageTableScroll () {
- this.$nextTick(() => {
- const divData = this.$refs.damageTable.bodyWrapper
- setInterval(() => {
- divData.scrollTop += 1
- if (
- divData.clientHeight + divData.scrollTop + 1 >
- divData.scrollHeight
- ) {
- divData.scrollTop = 0
- }
- }, 50)
- })
- },
- // 全屏显示
- fullScreen () {
- const element = document.getElementById('content')
- element.requestFullscreen()
- }
- }
- }
- </script>
- <style>
- html,
- body,
- .site-wrapper,
- .site-content__wrapper,
- .site-content,
- .el-tabs--top,
- .el-tabs__content,
- .el-tab-pane,
- .el-card,
- .el-card__body {
- height: 100%;
- }
- </style>
- <style scoped>
- .mod-home {
- /* line-height: 1.5; */
- height: 100%;
- position: relative;
- }
- .full-screen-btn {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 9;
- padding: 0 0;
- border-radius: 0;
- }
- .sample-bg {
- background-color: #021327;
- height: 60%;
- }
- .sample-bg1 {
- background-color: #021327;
- height: 40%;
- }
- .bg1-1 {
- /* background-color: yellow; */
- height: 100%;
- }
- .bg1-2 {
- /* background-color: orange; */
- height: 100%;
- }
- .bg1-3 {
- /* background-color: orchid; */
- height: 100%;
- }
- .bg2-1 {
- /* background-color: red; */
- height: 100%;
- }
- .bg2-2 {
- /* background-color: aqua; */
- height: 100%;
- }
- .bg1-1-1 {
- height: 25%;
- padding: 10px 10px;
- /* border: 1px solid black; */
- }
- .bg1-1-2 {
- height: 25%;
- padding: 10px;
- /* border: 1px solid black; */
- }
- .box-company-title {
- background-color: #094198;
- display: flex;
- height: 100%;
- }
- .company-title {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- }
- .box-custom-number {
- background-color: #d65246;
- display: flex;
- height: 100%;
- }
- .custom-number {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- }
- .box-contract-number {
- background-color: #11d2b7;
- display: flex;
- height: 100%;
- }
- .contract-number {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- }
- .box-contract-amount {
- background-color: #f6a647;
- display: flex;
- height: 100%;
- }
- .contract-amount {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- }
- /*中间通知区域*/
- .bg1-2-1 {
- height: 15%;
- padding: 10px;
- /* border: 1px solid black; */
- }
- .bg1-2-2 {
- height: 25%;
- padding: 10px;
- /* border: 1px solid black; */
- }
- .bg1-2-3 {
- height: 60%;
- padding: 10px;
- /* border: 1px solid black; */
- }
- .box-notice-title {
- background-color: #2fb5f2;
- display: flex;
- height: 100%;
- width: 100%;
- margin: 0 auto;
- overflow: hidden;
- }
- .notice-title {
- font-size: 20px;
- color: red;
- margin: 0 auto;
- align-items: center;
- display: flex;
- white-space: nowrap;
- }
- .notice-title-animation {
- animation: wordsLoop 25s linear infinite normal;
- }
- @keyframes wordsLoop{
- 0% {
- transform: translateX(0);
- -webkit-transform: translateX(0);
- }
- 100% {
- transform: translateX(-51%);
- -webkit-transform: translateX(-51%);
- }
- }
- @-webkit-keyframes wordsLoop{
- 0% {
- transform: translateX(0);
- -webkit-transform: translateX(0);
- }
- 100% {
- transform: translateX(-51%);
- -webkit-transform: translateX(-51%);
- }
- }
- .box-stat-number {
- background-color: #415065;
- display: flex;
- height: 100%;
- }
- .stat-number {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- justify-content: space-around;
- width: 100%;
- }
- .stat-number > .item {
- height: 80%;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- }
- .stat-number > .item > .title {
- color: darkturquoise;
- }
- .stat-number > .item > .number {
- text-align: center;
- }
- /*合同列表*/
- .box-contract-table {
- background-color: #415065;
- display: flex;
- height: 100%;
- }
- .contract-table {
- font-size: 20px;
- color: aliceblue;
- margin: 0 auto;
- align-items: center;
- display: flex;
- justify-content: space-around;
- width: 100%;
- }
- .bg1-3-1 {
- height: 10%;
- /* min-height: 45px; */
- padding: 10px;
- /* border: 1px solid black; */
- }
- .bg1-3-2 {
- height: 90%;
- padding: 2px 10px 10px;
- /* border: 1px solid black; */
- }
- /*客户排名*/
- .box-custom-ranking {
- background-color: #415065;
- height: 100%;
- }
- .custom-ranking {
- font-size: 14px;
- color: aliceblue;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: justify;
- width: 100%;
- height: 100%;
- }
- .custom-ranking > .table {
- background-color: darkturquoise;
- height: 100%;
- width: 100%;
- }
- .custom-ranking-table-row {
- font-size: 8px;
- }
- .bg2-3-1 {
- height: 10%;
- padding: 5px 10px;
- /* border: 1px solid black; */
- }
- .bg2-3-2 {
- height: 90%;
- padding: 2px 10px 10px;
- /* border: 1px solid black; */
- }
- /*合同预警*/
- .box-contract-alert {
- background-color: #415065;
- height: 100%;
- }
- .contract-alert {
- font-size: 14px;
- color: aliceblue;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: justify;
- width: 100%;
- height: 100%;
- }
- .contract-alert > .title > div {
- background-color: #415065;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: justify;
- }
- .contract-alert > .table {
- background-color: darkturquoise;
- height: 100%;
- width: 100%;
- }
- .table thead .cell {
- font-size: 12px;
- -webkit-transform: scale(0.8) !important;
- }
- .table tbody .cell {
- font-size: 12px;
- -webkit-transform: scale(0.8) !important;
- }
- /* 设置滚动条的样式 */
- ::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- }
- /* 滚动槽 */
- ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
- border-radius: 10px;
- }
- /* 滚动条滑块 */
- ::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background: rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
- }
- ::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(161, 156, 156, 0.2);
- }
- </style>
|