bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bdzl2:7c9dd6e9b30ec52512551f6477301ea66815496c
Branches Tags
bdzl2:main
bdzl2:dev
bdzl2:feat-zc
..
compare: bdzl2:b52dabbf4070929cd34ca2b5f8417a38dd9952ae
Branches Tags
bdzl2:dev
bdzl2:feat-zc
bdzl2:main

No commits in common. "7c9dd6e9b30ec52512551f6477301ea66815496c" and "b52dabbf4070929cd34ca2b5f8417a38dd9952ae" have entirely different histories.
7c9dd6e9b3 ... b52dabbf40

14 changed files with 149 additions and 214 deletions
Show Stats Expand all files Collapse all files

2
packages/screen/src/styles/index.scss
View File

@ -1,5 +1,3 @@
@import './mixins.scss';
* {
margin: 0;
padding: 0;

27
packages/screen/src/styles/mixins.less
View File

@ -1,27 +0,0 @@
// 屏幕适配工具 (Less 版本)
// 设计稿基准：1920px (宽) × 982px (高，不含头部)
// 设计稿基准值
@design-width: 1920;
@design-height: 982;
// 将 px 转换为 vw (基于设计稿宽度 1920px)
.vw(@px) {
@vw-value: (@px / @design-width * 100vw);
}
// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
.vh(@px) {
@vh-value: (@px / @design-height * 100vh);
}
// 字体大小转换 (使用 vw 确保响应式)
.fs(@px) {
@fs-value: (@px / @design-width * 100vw);
}
// 由于 Less 的限制，直接使用 calc() 表达式更简单
// 使用示例（推荐方式）：
// width: calc(580 / 1920 * 100vw);
// height: calc(400 / 982 * 100vh);
// font-size: calc(16 / 1920 * 100vw);

22
packages/screen/src/styles/mixins.scss
View File

@ -1,22 +0,0 @@
// 屏幕适配工具
// 设计稿基准：1920px (宽) × 982px (高，不含头部)
// 将 px 转换为 vw (基于设计稿宽度 1920px)
@function vw($px) {
@return calc($px / 1920 * 100vw);
}
// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
@function vh($px) {
@return calc($px / 982 * 100vh);
}
// 字体大小转换 (使用 vw 确保响应式)
@function fs($px) {
@return calc($px / 1920 * 100vw);
}
// 使用示例：
// width: vw(580); // 580px → vw
// height: vh(400); // 400px → vh
// font-size: fs(16); // 16px → vw

BIN
packages/screen/src/views/cockpit/assets/img/block-panel-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 372 KiB

BIN
packages/screen/src/views/cockpit/assets/img/emergency-panel-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 228 KiB

BIN
packages/screen/src/views/cockpit/assets/img/statistics-panel-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 212 KiB

BIN
packages/screen/src/views/cockpit/assets/img/weather-panel-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 194 KiB

After

Width:  |  Height:  |  Size: 293 KiB

48
packages/screen/src/views/cockpit/components/BlockEvent.vue
View File

@ -35,13 +35,11 @@ const stats = ref([
])
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.block-event {
background: url(../assets/img/block-panel-bg.png) no-repeat;
background-size: 100% 100%;
padding: vw(20) vw(30);
padding: 20px 30px;
flex: 1;
display: flex;
flex-direction: column;
@ -49,18 +47,18 @@ const stats = ref([
.panel-header {
position: relative;
width: vw(293);
height: vh(49);
width: 293px;
height: 49px;
background: url(../assets/img/common-panel-header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
padding-left: vw(24);
margin-bottom: vh(40);
padding-left: 24px;
margin-bottom: 40px;
.title {
color: rgba(255, 255, 255, 1);
font-size: fs(22);
font-size: 22px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
}
@ -69,7 +67,7 @@ const stats = ref([
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: vh(40) vw(20);
gap: 40px 20px;
flex: 1;
align-content: flex-start;
}
@ -77,11 +75,11 @@ const stats = ref([
.stat-card {
display: flex;
align-items: center;
gap: vw(10);
gap: 10px;
.stat-icon {
width: vw(53);
height: vh(84);
width: 53px;
height: 84px;
flex-shrink: 0;
}
@ -90,40 +88,40 @@ const stats = ref([
position: relative;
.stat-title {
height: vh(28);
height: 28px;
background: url(../assets/img/block-stat-title-bg.png) no-repeat;
background-size: 100% 100%;
color: rgba(255, 255, 255, 1);
font-size: fs(15);
font-size: 15px;
font-family: SourceHanSansCN-Bold, sans-serif;
font-weight: 700;
display: flex;
align-items: center;
padding-left: vw(10);
margin-bottom: vh(10);
padding-left: 10px;
margin-bottom: 10px;
}
.stat-value {
color: rgba(255, 255, 255, 1);
font-size: fs(42);
font-size: 42px;
font-family: SourceHanSansCN-Bold, sans-serif;
font-weight: 700;
line-height: 1;
padding-left: vw(10);
padding-left: 10px;
}
.stat-unit {
position: absolute;
top: vh(50);
right: vw(20);
top: 50px;
right: 20px;
color: rgba(255, 255, 255, 1);
font-size: fs(15);
font-size: 15px;
}
.stat-decoration {
width: vw(154);
height: vh(29);
margin-top: vh(5);
width: 154px;
height: 29px;
margin-top: 5px;
}
}
}

12
packages/screen/src/views/cockpit/components/CockpitLayout.vue
View File

@ -28,9 +28,7 @@ import BlockEvent from './BlockEvent.vue'
import YearStatistics from './YearStatistics.vue'
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.cockpit-layout {
width: 100vw;
height: 100vh;
@ -44,9 +42,9 @@ import YearStatistics from './YearStatistics.vue'
.cockpit-main {
flex: 1;
display: grid;
grid-template-columns: vw(580) 1fr vw(580);
gap: vw(20);
padding: vw(20);
grid-template-columns: 580px 1fr 580px;
gap: 20px;
padding: 20px;
padding-top: 0;
}
@ -54,7 +52,7 @@ import YearStatistics from './YearStatistics.vue'
.right-panel {
display: flex;
flex-direction: column;
gap: vw(20);
gap: 20px;
}
.center-panel {

44
packages/screen/src/views/cockpit/components/EmergencyResources.vue
View File

@ -98,13 +98,11 @@ const resources = ref([
])
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.emergency-resources {
background: url(../assets/img/emergency-panel-bg.png) no-repeat;
background-size: 100% 100%;
padding: vw(20) vw(30);
padding: 20px 30px;
flex: 1;
display: flex;
flex-direction: column;
@ -112,18 +110,18 @@ const resources = ref([
.panel-header {
position: relative;
width: vw(293);
height: vh(49);
width: 293px;
height: 49px;
background: url(../assets/img/common-panel-header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
padding-left: vw(24);
margin-bottom: vh(30);
padding-left: 24px;
margin-bottom: 30px;
.title {
color: rgba(255, 255, 255, 1);
font-size: fs(22);
font-size: 22px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
}
@ -135,7 +133,7 @@ const resources = ref([
flex-direction: column;
.table-header {
height: vh(35);
height: 35px;
background: url(../assets/img/emergency-table-header-bg.png) no-repeat;
background-size: 100% 100%;
display: grid;
@ -143,20 +141,20 @@ const resources = ref([
align-items: center;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: fs(16);
font-size: 16px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
margin-bottom: vh(5);
margin-bottom: 5px;
}
.table-row {
height: vh(35);
height: 35px;
display: grid;
grid-template-columns: vw(35) 1fr 1fr 1fr 1fr;
grid-template-columns: 35px 1fr 1fr 1fr 1fr;
align-items: center;
gap: vw(10);
gap: 10px;
color: rgba(255, 255, 255, 1);
font-size: fs(14);
font-size: 14px;
font-family: PingFangSC-Medium, sans-serif;
font-weight: 500;
@ -171,14 +169,14 @@ const resources = ref([
}
.row-number {
width: vw(35);
height: vh(35);
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(28, 161, 255, 0.44);
color: rgba(255, 255, 255, 1);
font-size: fs(14);
font-size: 14px;
font-family: FZZYJW--GB1-0, sans-serif;
}
@ -194,7 +192,7 @@ const resources = ref([
text-align: center;
font-family: PingFangSC-Semibold, sans-serif;
font-weight: 600;
font-size: fs(14);
font-size: 14px;
&.green {
color: rgba(17, 187, 119, 1);
@ -213,11 +211,11 @@ const resources = ref([
display: flex;
align-items: center;
justify-content: center;
gap: vw(5);
gap: 5px;
.alert-icon {
width: vw(10);
height: vh(10);
width: 10px;
height: 10px;
}
}
}

58
packages/screen/src/views/cockpit/components/MapCenter.vue
View File

@ -109,9 +109,7 @@ const markers = ref([
])
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.map-center {
width: 100%;
height: 100%;
@ -122,23 +120,23 @@ const markers = ref([
.top-buttons {
position: absolute;
top: vh(20);
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: vw(10);
gap: 10px;
z-index: 10;
}
.func-button {
width: vw(60);
height: vh(60);
border: vw(0.5) solid rgba(60, 174, 255, 1);
width: 60px;
height: 60px;
border: 0.5px solid rgba(60, 174, 255, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: vh(5);
gap: 5px;
cursor: pointer;
transition: all 0.3s;
@ -155,13 +153,13 @@ const markers = ref([
}
.button-icon {
width: vw(28);
height: vh(23);
width: 28px;
height: 23px;
}
span {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
font-family: SourceHanSansCN-Regular, sans-serif;
}
}
@ -172,8 +170,8 @@ const markers = ref([
.marker {
position: absolute;
width: vw(44);
height: vh(44);
width: 44px;
height: 44px;
cursor: pointer;
transition: transform 0.3s;
@ -190,27 +188,27 @@ const markers = ref([
.bottom-menu {
position: absolute;
bottom: vh(20);
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: vw(30);
gap: 30px;
align-items: flex-end;
}
.menu-left {
.menu-text {
color: rgba(255, 255, 255, 1);
font-size: fs(14);
line-height: vh(39);
font-size: 14px;
line-height: 39px;
white-space: nowrap;
}
}
.menu-center {
position: relative;
width: vw(350);
height: vh(156);
width: 350px;
height: 156px;
.center-menu-bg {
width: 100%;
@ -223,7 +221,7 @@ const markers = ref([
.center-menu-content {
position: relative;
z-index: 1;
padding: vw(15) vw(34);
padding: 15px 34px;
height: 100%;
display: flex;
flex-direction: column;
@ -232,11 +230,11 @@ const markers = ref([
display: flex;
justify-content: space-between;
margin-top: auto;
margin-bottom: vh(5);
margin-bottom: 5px;
span {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
cursor: pointer;
@ -255,31 +253,31 @@ const markers = ref([
display: flex;
flex-direction: column;
align-items: center;
gap: vh(5);
gap: 5px;
cursor: pointer;
transition: transform 0.3s;
&:hover {
transform: translateY(vh(-5));
transform: translateY(-5px);
}
&.highlighted {
background: url(../assets/img/map-menu-item-highlight-bg.png) no-repeat;
background-size: contain;
padding: vw(10);
padding: 10px;
}
img {
width: vw(32);
height: vh(32);
width: 32px;
height: 32px;
}
span {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
text-align: center;
line-height: vh(14);
line-height: 14px;
}
}
}

20
packages/screen/src/views/cockpit/components/PageHeader.vue
View File

@ -10,11 +10,9 @@
<script setup>
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.page-header {
height: vh(137);
height: 137px;
background: url(../assets/img/header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
@ -26,7 +24,7 @@
.header-bg {
background-image: url(../assets/img/header-title-bg.png);
width: 100%;
height: vh(107);
height: 107px;
display: flex;
align-items: center;
justify-content: center;
@ -35,8 +33,8 @@
.title {
color: rgba(255, 255, 255, 1);
font-size: fs(51);
letter-spacing: vw(2.32);
font-size: 51px;
letter-spacing: 2.32px;
font-family: FZLTDHJW--GB1-0, sans-serif;
white-space: nowrap;
margin: 0;
@ -45,15 +43,15 @@
.app-button {
position: absolute;
right: vw(40);
right: 40px;
top: 50%;
transform: translateY(-50%);
width: vw(165);
height: vh(44);
width: 165px;
height: 44px;
background: url(../assets/img/header-btn-app-bg.png) no-repeat;
background-size: 100% 100%;
color: rgba(255, 255, 255, 1);
font-size: fs(16);
font-size: 16px;
font-family: SourceHanSansCN-Regular, sans-serif;
border: none;
cursor: pointer;

78
packages/screen/src/views/cockpit/components/WeatherWarning.vue
View File

@ -115,13 +115,11 @@ const districts = ref([
])
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.weather-warning {
background: url(../assets/img/weather-panel-bg.png) no-repeat;
background-size: 100% 100%;
padding: vw(20) vw(30);
padding: 20px 30px;
flex: 1;
display: flex;
flex-direction: column;
@ -129,18 +127,18 @@ const districts = ref([
.panel-header {
position: relative;
width: vw(293);
height: vh(49);
width: 293px;
height: 49px;
background: url(../assets/img/common-panel-header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
padding-left: vw(24);
margin-bottom: vh(20);
padding-left: 24px;
margin-bottom: 20px;
.title {
color: rgba(255, 255, 255, 1);
font-size: fs(22);
font-size: 22px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
}
@ -149,16 +147,16 @@ const districts = ref([
.warning-levels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: vw(20);
margin: 0 vw(30);
padding: 0 vw(27);
gap: 20px;
margin: 0 30px;
padding: 0 27px;
}
.warning-level-item {
display: flex;
flex-direction: column;
align-items: center;
gap: vh(10);
gap: 10px;
// 徽章和光圈容器
.badge-container {
@ -171,8 +169,8 @@ const districts = ref([
// 六边形徽章
.level-badge {
position: relative;
width: vw(80);
height: vh(90);
width: 80px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
@ -187,7 +185,7 @@ const districts = ref([
.level-count {
position: relative;
font-size: fs(32);
font-size: 32px;
font-family: DISPLAYFREETFB, sans-serif;
font-weight: normal;
z-index: 1;
@ -197,9 +195,9 @@ const districts = ref([
// 底座光圈（双背景图）
.glow-base {
width: vw(72);
height: vh(65);
margin-top: vh(-10);
width: 72px;
height: 65px;
margin-top: -10px;
z-index: 1;
// 双背景图实现
@ -209,7 +207,7 @@ const districts = ref([
background-position:
center 0px, // 上层：紧贴顶部
center vh(10); // 下层：稍微偏下
center 10px; // 下层：稍微偏下
background-size:
100% auto, // 上层：正常宽度
@ -221,35 +219,35 @@ const districts = ref([
// 底部文字标签
.level-name {
color: rgba(255, 255, 255, 1);
font-size: fs(14);
font-size: 14px;
font-family: SourceHanSansCN-Bold, sans-serif;
font-weight: 700;
text-align: center;
margin-top: vh(4);
margin-top: 4px;
}
}
.altitude-section {
margin: vh(20) 0;
margin: 20px 0;
.altitude-header {
width: 100%;
height: vh(38);
height: 38px;
background: url(../assets/img/weather-altitude-bar-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
gap: vw(10);
padding: 0 vw(10);
gap: 10px;
padding: 0 10px;
.altitude-icon {
width: vw(39);
height: vh(35);
width: 39px;
height: 35px;
}
span {
color: rgba(255, 255, 255, 1);
font-size: fs(16);
font-size: 16px;
font-family: PingFangSC-Semibold, sans-serif;
font-weight: 600;
}
@ -262,7 +260,7 @@ const districts = ref([
flex-direction: column;
.table-header {
height: vh(35);
height: 35px;
background: url(../assets/img/weather-table-header-bg.png) no-repeat;
background-size: 100% 100%;
display: grid;
@ -270,21 +268,21 @@ const districts = ref([
align-items: center;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: fs(14);
font-size: 14px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
margin-bottom: vh(5);
margin-bottom: 5px;
}
.table-row {
height: vh(35);
height: 35px;
display: grid;
grid-template-columns: vw(9) 1fr 1fr 1fr;
grid-template-columns: 9px 1fr 1fr 1fr;
align-items: center;
gap: vw(10);
padding: 0 vw(10);
gap: 10px;
padding: 0 10px;
color: rgba(255, 255, 255, 1);
font-size: fs(14);
font-size: 14px;
font-family: PingFangSC-Medium, sans-serif;
font-weight: 500;
@ -299,9 +297,9 @@ const districts = ref([
}
.row-indicator {
width: vw(9);
height: vh(33);
border-radius: vw(1);
width: 9px;
height: 33px;
border-radius: 1px;
}
.district-name {

52
packages/screen/src/views/cockpit/components/YearStatistics.vue
View File

@ -50,13 +50,11 @@ const xAxisYears = ref([
])
</script>
<style scoped lang="scss">
@import '@/styles/mixins.scss';
<style scoped lang="less">
.year-statistics {
background: url(../assets/img/statistics-panel-bg.png) no-repeat;
background-size: 100% 100%;
padding: vw(20) vw(30);
padding: 20px 30px;
flex: 1;
display: flex;
flex-direction: column;
@ -64,18 +62,18 @@ const xAxisYears = ref([
.panel-header {
position: relative;
width: vw(293);
height: vh(49);
width: 293px;
height: 49px;
background: url(../assets/img/common-panel-header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
padding-left: vw(24);
margin-bottom: vh(25);
padding-left: 24px;
margin-bottom: 25px;
.title {
color: rgba(255, 255, 255, 1);
font-size: fs(22);
font-size: 22px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
}
@ -84,18 +82,18 @@ const xAxisYears = ref([
.chart-header {
display: flex;
align-items: center;
gap: vw(15);
margin-bottom: vh(10);
padding-left: vw(10);
gap: 15px;
margin-bottom: 10px;
padding-left: 10px;
.y-axis-label {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
}
.chart-title {
color: rgba(255, 255, 255, 1);
font-size: fs(16);
font-size: 16px;
font-family: PingFangSC-Semibold, sans-serif;
font-weight: 600;
margin-left: auto;
@ -103,17 +101,17 @@ const xAxisYears = ref([
.legend {
display: flex;
gap: vw(15);
gap: 15px;
.legend-item {
display: flex;
align-items: center;
gap: vw(5);
gap: 5px;
.legend-color {
width: vw(9);
height: vh(9);
border-radius: vw(4);
width: 9px;
height: 9px;
border-radius: 4px;
&.blue {
background-color: rgba(0, 143, 255, 1);
@ -126,7 +124,7 @@ const xAxisYears = ref([
span {
color: rgba(255, 255, 255, 1);
font-size: fs(10);
font-size: 10px;
}
}
}
@ -135,18 +133,18 @@ const xAxisYears = ref([
.chart-container {
flex: 1;
display: flex;
gap: vw(10);
margin-bottom: vh(10);
gap: 10px;
margin-bottom: 10px;
.y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: vh(5) 0;
padding: 5px 0;
span {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
font-family: HelveticaNeue, sans-serif;
text-align: right;
}
@ -159,7 +157,7 @@ const xAxisYears = ref([
display: flex;
align-items: center;
justify-content: center;
padding: vw(15);
padding: 15px;
.chart-image {
width: 100%;
@ -172,11 +170,11 @@ const xAxisYears = ref([
.x-axis {
display: flex;
justify-content: space-around;
padding: 0 vw(40) 0 vw(60);
padding: 0 40px 0 60px;
span {
color: rgba(255, 255, 255, 1);
font-size: fs(12);
font-size: 12px;
text-align: center;
}
}