bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏等页面创建

This commit is contained in:
BianLzhaoMin 2025-01-02 14:50:44 +08:00
parent ddeb9d11d6
commit 6452782b2f
21 changed files with 822 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components.d.ts vendored
View File

@ -9,49 +9,17 @@ declare module 'vue' {
export interface GlobalComponents {
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
EditorModel: typeof import('./src/components/EditorModel/index.vue')['default']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElCountdown: typeof import('element-plus/es')['ElCountdown']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']
ElUpload: typeof import('element-plus/es')['ElUpload']
Empty: typeof import('./src/components/Empty/index.vue')['default']
EquipCard: typeof import('./src/components/equipCard.vue')['default']
EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
@ -64,6 +32,7 @@ declare module 'vue' {
PagingComponent: typeof import('./src/components/PagingComponent/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
ScreenTitle: typeof import('./src/components/ScreenTitle/index.vue')['default']
TableComponent: typeof import('./src/components/TableComponent/index.vue')['default']
TitleTip: typeof import('./src/components/TitleTip/index.vue')['default']
UploadComponent: typeof import('./src/components/uploadComponent/index.vue')['default']

75
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@jiaminghi/data-view": "^2.10.0",
"@js-preview/docx": "^1.6.2",
"@tinymce/tinymce-vue": "^6.1.0",
"@vue-office/docx": "^1.6.2",
@ -411,6 +412,18 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.26.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/@babel/runtime/-/runtime-7.26.0.tgz",
"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
"license": "MIT",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.25.9",
"resolved": "https://repo.huaweicloud.com/repository/npm/@babel/template/-/template-7.25.9.tgz",
@ -853,6 +866,62 @@
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
"license": "MIT"
},
"node_modules/@jiaminghi/bezier-curve": {
"version": "0.0.9",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.5.5"
}
},
"node_modules/@jiaminghi/c-render": {
"version": "0.4.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.5.5",
"@jiaminghi/bezier-curve": "*",
"@jiaminghi/color": "*",
"@jiaminghi/transition": "*"
}
},
"node_modules/@jiaminghi/charts": {
"version": "0.2.18",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/charts/-/charts-0.2.18.tgz",
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.5.5",
"@jiaminghi/c-render": "^0.4.3"
}
},
"node_modules/@jiaminghi/color": {
"version": "1.1.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/color/-/color-1.1.3.tgz",
"integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==",
"license": "MIT"
},
"node_modules/@jiaminghi/data-view": {
"version": "2.10.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
"integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.5.5",
"@jiaminghi/charts": "*"
}
},
"node_modules/@jiaminghi/transition": {
"version": "1.1.11",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jiaminghi/transition/-/transition-1.1.11.tgz",
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.5.5"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.8",
"resolved": "https://repo.huaweicloud.com/repository/npm/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@ -4081,6 +4150,12 @@
"node": ">=8.10.0"
}
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"license": "MIT"
},
"node_modules/regexp.prototype.flags": {
"version": "1.5.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@jiaminghi/data-view": "^2.10.0",
"@js-preview/docx": "^1.6.2",
"@tinymce/tinymce-vue": "^6.1.0",
"@vue-office/docx": "^1.6.2",

BIN
src/assets/font-family/DS-Digital/DS-DIGI-1.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font-family/DS-Digital/DS-DIGIB-2.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font-family/DS-Digital/DS-DIGII-3.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font-family/DS-Digital/DS-DIGIT-4.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/img/screen/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

BIN
src/assets/img/screen/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

24
src/components/ScreenTitle/index.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="title">
{{ title }}
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: () => '',
},
})
</script>
<style scoped>
.title {
padding: 12px 6px;
color: #fff;
background: linear-gradient(to right, #086c94, #0e557f, #06112c);
letter-spacing: 4px;
font-size: 18px;
}
</style>

15
src/http/api/screen/index.ts Normal file
View File

@ -0,0 +1,15 @@
import { get, post } from '../../index'
// 装备上架统计
export const getDevCountApi = (data: any = {}) => {
return get('/material-mall/largeScreen/devCount', data)
}
// 装备租赁统计
export const getDevLeaseCountApi = (data: any = {}) => {
return get('/material-mall/largeScreen/devLeaseCount', data)
}
// 装备需求统计
export const getDemandCountApi = (data: any = {}) => {
return get('/material-mall/largeScreen/demandCount', data)
}

13
src/router/index.ts
View File

@ -205,6 +205,17 @@ const routes: Array<RouteRecordRaw> = [
isLogin: true
},
},
{
path: '/big-screen',
name: 'big-screen',
component: () => import('views/big-screen/index.vue'),
meta: {
title: '数据大屏',
keepAlive: true,
AuthFlag: false,
isLogin: true
},
},
// 消息
{
path: '/message',
@ -769,7 +780,7 @@ const router = createRouter({
})
const white = ['/qr-code']
const white = ['/qr-code', '/big-screen']
// 使页面跳转后滚动条恢复至顶部
router.beforeEach((to, from, next) => {

1
src/style/css/reset.css
View File

@ -149,6 +149,7 @@ table {
body {
overflow-x: hidden;
margin: 0;
}
a {

82
src/views/big-screen/index.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div class="screen-container">
<div class="screen-title">安徽机械化装备共享平台</div>
<div class="header"></div>
<dv-full-screen-container class="dashboard">
<div class="box">
<LeftOneModel />
</div>
<div class="box">
<RightOneModel />
</div>
<div class="box">
<LeftTwoModel />
</div>
<div class="box center">
<CenterModel />
</div>
<div class="box">
<RightTwoModel />
</div>
<div class="box">
<LeftThreeModel />
</div>
<div class="box">
<RightThreeModel />
</div>
</dv-full-screen-container>
</div>
</template>
<script lang="ts" setup>
import LeftOneModel from './model-components/left-one-model.vue'
import LeftTwoModel from './model-components/left-two-model.vue'
import LeftThreeModel from './model-components/left-three-model.vue'
import RightOneModel from './model-components/right-one-model.vue'
import RightTwoModel from './model-components/right-two-model.vue'
import RightThreeModel from './model-components/right-three-model.vue'
import CenterModel from './model-components/center-model.vue'
</script>
<style lang="scss" scoped>
.screen-container {
width: 100vw;
height: 100vh;
background: url('@/assets/img/screen/bg.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
position: relative;
.screen-title {
position: absolute;
top: 5%;
left: 50%;
color: #fff;
font-size: 24px;
font-weight: bold;
transform: translateX(-50%);
letter-spacing: 3px;
font-style: italic;
}
.header {
height: 80px;
}
}
.dashboard {
display: grid;
grid-template-columns: 2fr 5fr 2fr;
grid-template-rows: repeat(3, 1fr);
gap: 0.5rem;
height: calc(100% - 130px);
// padding: 0.5rem;
padding: 0 60px;
box-sizing: border-box;
}
.center {
grid-row: 1 / span 3;
grid-column: 2;
}
</style>

214
src/views/big-screen/model-components/center-model.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<div class="container">
<div class="item">
<h2>装备上架</h2>
<div class="item-info">
<div class="info-box">
<div class="yyyy">入驻装备数</div>
<div>
<span class="xxxx">
{{ devNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div style="background-color: #0986da; width: 60px; height: 50px"></div>
</div>
<div class="info-box" style="transform: translateY(50%)">
<div class="yyyy">上架装备数</div>
<div>
<span class="xxxx">
{{ devUpNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box" style="transform: translateY(50%)">
<div class="yyyy">装备总类型数</div>
<div>
<span class="xxxx">
{{ devTypeNum }}
</span>
<span class="zzzz"> 类 </span>
</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box">
<div class="yyyy">保养告警</div>
<div>
<span class="xxxx">
{{ devQcWaningNum }}
</span>
<span class="zzzz"> 条 </span>
</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
</div>
</div>
<div class="item">
<h2>装备租赁</h2>
<div class="item-info">
<div class="info-box">
<div>
<span class="xxxx">
{{ devNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div>租赁订单数</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box" style="transform: translateY(50%)">
<div>
<span class="xxxx">
{{ devNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div>在租装备数</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box" style="transform: translateY(50%)">
<div>
<span class="xxxx">
{{ devNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div>在修装备数</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box">
<div>
<span class="xxxx">
{{ devNum }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div>装备利用率</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
</div>
</div>
<div class="item">
<h2>装备需求</h2>
<div class="item-info">
<div class="info-box">
<div>
<span class="xxxx">
{{ leaseNum }}
</span>
<span class="zzzz"> 项 </span>
</div>
<div>需求总数</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box" style="transform: translateY(50%)">
<div>
<span class="xxxx">
{{ leaseOrderRatio }}
</span>
<span class="zzzz"> 种 </span>
</div>
<div>需求装备种类</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
<div class="info-box">
<div>第一</div>
<div>{{ topPopularTypeName }}</div>
<div>最需装备</div>
<div style="background-color: #0986da; width: 60px; height: 50px">图片占位</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { getDevCountApi, getDevLeaseCountApi, getDemandCountApi } from 'http/api/screen/index'
const devNum = ref<any>(0)
const devUpNum = ref<any>(0)
const devTypeNum = ref<any>(0)
const devQcWaningNum = ref<any>(0)
const leaseNum = ref<any>(0)
const leaseOrderRatio = ref<any>(0)
const topPopularTypeName = ref<any>('')
const getDevCountData = async () => {
const res: any = await getDevCountApi()
devNum.value = res.data.devNum
devUpNum.value = res.data.devUpNum
devTypeNum.value = res.data.devTypeNum
devQcWaningNum.value = res.data.devQcWaningNum
const result1: any = await getDemandCountApi()
leaseNum.value = result1.data.leaseNum
leaseOrderRatio.value = result1.data.leaseOrderRatio
topPopularTypeName.value = result1.data.topPopularTypeName
// const result = await getDevLeaseCountApi()
// console.log(result)
console.log(result1)
}
onMounted(() => {
getDevCountData()
})
</script>
<style scoped lang="scss">
@font-face {
font-family: 'electronicFont';
src: url('@/assets/font-family/DS-Digital/DS-DIGI-1.ttf');
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 100%;
color: #fff;
font-size: 16px;
.item {
height: 30%;
.item-info {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px 0;
.info-box {
display: flex;
flex-direction: column;
align-items: center;
}
}
}
h2 {
color: #42bbfc;
font-style: italic;
font-size: 20px;
font-weight: bold;
letter-spacing: 6px;
text-align: center;
// font-family: electronicFont;
}
}
.xxxx {
font-family: electronicFont;
font-style: italic;
font-size: 30px;
font-weight: bold;
letter-spacing: 3px;
}
.yyyy {
padding-bottom: 10px;
}
.zzzz {
transform: translateX(10px);
color: #5c7f9d;
}
</style>

67
src/views/big-screen/model-components/left-one-model.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<!-- 闲置装备分析 -->
<div class="container">
<ScreenTitle :title="`闲置装备分析`" />
<div class="content">
<div class="item bg1">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>&gt;80%</div>
</div>
<div class="item bg2">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>30%-80%</div>
</div>
<div class="item bg3">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>&lt;30%</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// background-color: orange;
display: flex;
justify-content: space-around;
.item {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
background-color: #072949;
}
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>

48
src/views/big-screen/model-components/left-three-model.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<!-- 装备租赁互联 -->
<div class="container">
<ScreenTitle :title="`装备租赁互联`" />
<div class="content"></div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// background-color: orange;
display: flex;
justify-content: space-around;
.item {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
background-color: #072949;
}
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>

138
src/views/big-screen/model-components/left-two-model.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<!-- 出租装备分析 -->
<div class="container">
<ScreenTitle :title="`出租装备分析`" />
<div class="content">
<div class="top">
<div class="item">
<div>100 台</div>
<div>
出租比重：
<span>30%</span>
</div>
<div>图片占位</div>
<div>牵引机</div>
</div>
<div class="item">
<div>100 台</div>
<div>
出租比重：
<span>30%</span>
</div>
<div>图片占位</div>
<div>挖掘机</div>
</div>
</div>
<div class="bottom">
<div class="item">
<div>100 台</div>
<div>
出租比重：
<span>30%</span>
</div>
<div>图片占位</div>
<div>牵引机</div>
</div>
<div class="item" style="margin-top: 20px">
<div>第1</div>
<div>100 台</div>
<div>
出租比重：
<span>30%</span>
</div>
<div>图片占位</div>
<div>挖掘机</div>
</div>
<div class="item">
<div>100 台</div>
<div>
出租比重：
<span>30%</span>
</div>
<div>图片占位</div>
<div>挖掘机</div>
</div>
</div>
<!-- <div class="item bg1">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>&gt;80%</div>
</div>
<div class="item bg2">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>30%-80%</div>
</div>
<div class="item bg3">
<div>100 台</div>
<div>图片</div>
<div>闲置时间</div>
<div>&lt;30%</div>
</div> -->
</div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// display: flex;
// justify-content: space-around;
.top,
.bottom {
display: flex;
justify-content: space-between;
.item {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}
}
.top {
padding: 10px 30px;
}
.bottom {
padding: 20px 0;
}
// .item {
// width: 30%;
// height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// color: #fff;
// font-size: 18px;
// background-color: #072949;
// }
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>

48
src/views/big-screen/model-components/right-one-model.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<!-- 装备共享排名 -->
<div class="container">
<ScreenTitle :title="`装备共享排名`" />
<div class="content"></div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// background-color: orange;
display: flex;
justify-content: space-around;
.item {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
background-color: #072949;
}
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>

48
src/views/big-screen/model-components/right-three-model.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<!-- 租赁需求分析 -->
<div class="container">
<ScreenTitle :title="`租赁需求分析`" />
<div class="content"></div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// background-color: orange;
display: flex;
justify-content: space-around;
.item {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
background-color: #072949;
}
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>

48
src/views/big-screen/model-components/right-two-model.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<!-- 租赁跟踪 -->
<div class="container">
<ScreenTitle :title="`租赁跟踪`" />
<div class="content"></div>
</div>
</template>
<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.content {
flex: 1;
// background-color: orange;
display: flex;
justify-content: space-around;
.item {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
background-color: #072949;
}
.bg1 {
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
}
.bg2 {
background: linear-gradient(to bottom, #071426, #03322f, #133945);
}
.bg3 {
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
}
}
}
</style>