哥伦比亚展会大屏开发
货梯大屏修改
This commit is contained in:
hzz
parent
b7fb95ccf3
commit
cad9dc0c88
@ -259,7 +259,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/MicroExhibition",
|
||||
name: "MicroExhibition",
|
||||
component: () => import("../views/MicroExhibition/indexOld.vue"),
|
||||
component: () => import("../views/MicroExhibition/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/MicroExhibition/:id",
|
||||
@ -274,6 +274,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "CismaExhibition",
|
||||
component: () => import("../views/MicroExhibition/indexOld.vue"),
|
||||
},
|
||||
{
|
||||
path: "/ColombiaExhibition",
|
||||
name: "ColombiaExhibition",
|
||||
component: () => import("../views/Exhibition/Colombia/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/MicroExhibitionTable",
|
||||
name: "MicroExhibitionTable",
|
||||
|
||||
@ -133,7 +133,7 @@ let fir_floor = computed(() => {
|
||||
]
|
||||
})
|
||||
|
||||
watch(() => thatstatus.value, (val) => {
|
||||
watch(thatstatus, (val) => {
|
||||
if (val == 'up') {
|
||||
elevatorUp('up')
|
||||
} else if (val == 'down') {
|
||||
@ -168,7 +168,7 @@ function elevatorUp(type) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
}, 95)
|
||||
}
|
||||
|
||||
|
||||
@ -180,6 +180,12 @@ function getWebsocket(val) {
|
||||
if (data.type == 'liftInfo') {
|
||||
let msg = data.msg
|
||||
if (msg.name == 'first') {
|
||||
if (msg.IN7 == 1&&second_data.value.IN1 == 0) {
|
||||
msg.IN1 = 1
|
||||
}
|
||||
if (msg.IN8 == 1&&second_data.value.IN2 == 0) {
|
||||
msg.IN2 = 1
|
||||
}
|
||||
first_data.value = msg
|
||||
} else if (msg.name == 'second') {
|
||||
second_data.value = msg
|
||||
|
||||
98
src/views/Exhibition/Colombia/component/BarChart.vue
Normal file
98
src/views/Exhibition/Colombia/component/BarChart.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div ref="LChartRef" class="cc"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
||||
|
||||
|
||||
const prop = defineProps({
|
||||
xData: {
|
||||
type: Array,
|
||||
default: ['1050910', '1050269']
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
let LChartRef = ref(null);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let charts:any = null;
|
||||
const setCharts = () => {
|
||||
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||||
let option = {
|
||||
// title: {
|
||||
// text: '工作时间'
|
||||
// },
|
||||
backgroundColor: '#0E0E0E',
|
||||
legend: {
|
||||
data: ['计划完成', '实际完成'],
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
fontSize:14
|
||||
|
||||
},
|
||||
grid:{
|
||||
left:'80',
|
||||
right:'0',
|
||||
bottom:'40',
|
||||
},
|
||||
color:['#2FC5D4','#FEDA81'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: prop.xData,
|
||||
// axisLabel: {
|
||||
// interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
// },
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '日产量',
|
||||
axisLabel:{
|
||||
fontSize:14
|
||||
}
|
||||
}
|
||||
],
|
||||
series: prop.seriesData
|
||||
};
|
||||
|
||||
charts.setOption(option);
|
||||
}
|
||||
|
||||
watch(() => prop.seriesData, (newVal, oldVal) => {
|
||||
charts.setOption({
|
||||
series: newVal
|
||||
});
|
||||
}, { deep: true })
|
||||
watch(() => prop.xData, (newVal, oldVal) => {
|
||||
charts.setOption({
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: prop.xData,
|
||||
// axisLabel: {
|
||||
// interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
// },
|
||||
},
|
||||
});
|
||||
}, { deep: true })
|
||||
onMounted(() => {
|
||||
setCharts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
87
src/views/Exhibition/Colombia/component/Border.vue
Normal file
87
src/views/Exhibition/Colombia/component/Border.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
}
|
||||
})
|
||||
|
||||
// let newTitle = computed(() => {
|
||||
// return prop.title.split('').join(' ')
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: url(./../images/border.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.borderpng {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
text-align: left;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 40px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.hr {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: url(./../images/hr.png) no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
width: 100%;
|
||||
height: 84%;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
114
src/views/Exhibition/Colombia/component/DevCard.vue
Normal file
114
src/views/Exhibition/Colombia/component/DevCard.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="dev-card">
|
||||
<div class="dev-left">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="dev-right">
|
||||
<div class="dev-box">
|
||||
<div class="dev-content dev-title">
|
||||
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||||
</div>
|
||||
<div class="dev-content" v-for="(items, index) in (dev_value as any)">
|
||||
<div v-for="(item, index) in items" class="dev_value">
|
||||
<div :class="{ status: index == 1 }"
|
||||
:style="{ background: index == 1 ? status_color[item] : '' }">{{ index ==
|
||||
1 ? '' : item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { defineProps, ref } from 'vue'
|
||||
const prop = defineProps({
|
||||
dev_title: {
|
||||
type: Array,
|
||||
default: ['机架号', '状态', '布料层数', '裁片数量']
|
||||
},
|
||||
dev_value: {
|
||||
type: Array,
|
||||
default: [
|
||||
[102014422, '待机', '40层', '0']
|
||||
]
|
||||
},
|
||||
})
|
||||
const status_color = {
|
||||
'0': '#FF6E76',
|
||||
'1': '#FDDD60',
|
||||
'2': '#7CFFB2',
|
||||
'3': '#FDDD60',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dev-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dev-left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dev-right {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dev-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.dev-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dev-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dev_value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 75px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #02C1D7;
|
||||
/* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
117
src/views/Exhibition/Colombia/component/Header.vue
Normal file
117
src/views/Exhibition/Colombia/component/Header.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:38:58
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-05 14:49:17
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\Header.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="headerbg" :style="prop.wh">
|
||||
<span>{{ prop.title }}</span>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted,onUpdated } from "vue";
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
wh: {
|
||||
type: Object,
|
||||
default: {
|
||||
width: '100%',
|
||||
height: '100px'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
window.document.title = prop.title;
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.headerbg {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('./../images/header.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
}
|
||||
|
||||
.headerbg span {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 52px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/Exhibition/Colombia/images/border.png
Normal file
BIN
src/views/Exhibition/Colombia/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/Exhibition/Colombia/images/fzmbj.png
Normal file
BIN
src/views/Exhibition/Colombia/images/fzmbj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/views/Exhibition/Colombia/images/header.png
Normal file
BIN
src/views/Exhibition/Colombia/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/views/Exhibition/Colombia/images/hr.png
Normal file
BIN
src/views/Exhibition/Colombia/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/views/Exhibition/Colombia/images/hty.png
Normal file
BIN
src/views/Exhibition/Colombia/images/hty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
src/views/Exhibition/Colombia/images/mjxhj.png
Normal file
BIN
src/views/Exhibition/Colombia/images/mjxhj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
306
src/views/Exhibition/Colombia/index.vue
Normal file
306
src/views/Exhibition/Colombia/index.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-06 15:21:39
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 16:40:32
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<Header :title="'富 怡 物 联 管 理 平 台'" :wh="{ width: '100%', height: '100px' }"></Header>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<BorderVue :title="'服装模板机'">
|
||||
<div class="box">
|
||||
<img src="./images/fzmbj.png" class="fzmbj-img" alt="">
|
||||
<div class="devcard-container">
|
||||
<DevCard :dev_title="dev_title" :dev_value="dev_value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
|
||||
</BarChart>
|
||||
</DevCard>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</BorderVue>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ctop">
|
||||
<video controls loop autoplay="true" ref="videoElement" width="780">
|
||||
<source :src="videoUrl" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="cbottom">
|
||||
<BorderVue :title="'单头混合毛巾绣花机'">
|
||||
<div class="box">
|
||||
<div class="box-top">
|
||||
<div class="top-item" v-for="(item, index) in mjxhj_data">
|
||||
<span class="key-text">{{ item.key }}:</span>
|
||||
<span class="value-text">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</BorderVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BorderVue :title="'绘图仪（一代）'">
|
||||
<div class="box">
|
||||
<img src="./images/hty.png" class="fzmbj-img" alt="">
|
||||
<div class="devcard-container">
|
||||
<DevCard :dev_title="dev_title" :dev_value="dev_value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
|
||||
</BarChart>
|
||||
</DevCard>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</BorderVue>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import Header from './component/Header.vue'
|
||||
import BorderVue from './component/Border.vue'
|
||||
import DevCard from './component/DevCard.vue'
|
||||
import BarChart from './component/BarChart.vue'
|
||||
|
||||
import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
|
||||
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
|
||||
const videoElement = ref(null)
|
||||
let timer = null
|
||||
|
||||
let dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
|
||||
let dev_value = ref([
|
||||
[102014422, '0', '40层', '0min']
|
||||
])
|
||||
let mjxhj_data = ref([
|
||||
{ key: '机 架 号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼 动 率', value: '40层' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
let data = reactive({ series: [], xData: [] })
|
||||
setTimeout(() => {
|
||||
data.series = [
|
||||
{
|
||||
"type": "bar",
|
||||
"data": [
|
||||
100,
|
||||
],
|
||||
"name": "计划完成"
|
||||
},
|
||||
{
|
||||
"type": "bar",
|
||||
"data": [
|
||||
0,
|
||||
],
|
||||
"name": "实际完成"
|
||||
}
|
||||
]
|
||||
data.xData = [
|
||||
"振镜激光裁床",
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'mDeviceStatus') {
|
||||
// changestatus(data.msg)
|
||||
}
|
||||
// if (data.type == 'WorkingState') {
|
||||
// store.changestatus(data.msg)
|
||||
// }
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// setInterval(() => {
|
||||
// let status = Math.round(Math.random() * 3)
|
||||
// let val = {
|
||||
// step: '后整设备',
|
||||
// num: 24,
|
||||
// status: status
|
||||
// }
|
||||
|
||||
// changestatus(val)
|
||||
// }, 5000)
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
closeWebsocket()
|
||||
clearInterval(timer)
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(0, 11, 18, 1);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 800px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ctop {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
/* background: url(./images/border.png) no-repeat;
|
||||
background-size: 100% 100%; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cbottom {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fzmbj-img {
|
||||
height: 345px;
|
||||
}
|
||||
|
||||
.devcard-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 335px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-top {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box-bottom {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.top-item {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.key-text {
|
||||
width: 60%;
|
||||
font-size: 28px;
|
||||
color: #00FFFFFE;
|
||||
font-family: '华文新魏', sans-serif;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
width: 40%;
|
||||
font-size: 24px;
|
||||
color: #AEEEFAFE;
|
||||
font-family: '华文新魏', sans-serif;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -30,7 +30,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
import { onMounted,onUpdated } from "vue";
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
@ -44,6 +44,9 @@ const prop = defineProps({
|
||||
}
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
window.document.title = prop.title;
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user