renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 调整样式

Browse Source
This commit is contained in:
zk
2024-06-15 18:26:15 +08:00
parent fc6e3a736e
commit 1645f16579
13 changed files with 191 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/less/amap-item.less
+19
View File
@@ -62,6 +62,25 @@
} }
} }
//浅色地图上info-window
.light {
.alarm-content {
background-color: #f3f5ff;
color: #5876DB;
border: 1px solid #1b7ef2;
.close-btn {
background-color: #f3f5ff;
color: #5876DB;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.close-btn:hover {
background: #1b7ef2;
}
}
}
/*地图元素样式---end*/ /*地图元素样式---end*/
/*infoWindow*/ /*infoWindow*/
.amap-info-content { .amap-info-content {
src/assets/less/index.less
+36
View File
@@ -193,3 +193,39 @@
margin-bottom: 4px; margin-bottom: 4px;
} }
//Modal
.dialog.light {
background-color: #f3f5ff;
.police-con {
color: #000;
background-color: #f3f5ff;
}
.ant-modal-title {
color: #576BAD !important;
background: url('/@/assets/images/dialog-light.png') no-repeat;
background-size: 100%;
}
}
.dialog.dark {
color: #ffffff;
background-color: #00152b;
.police-con {
color: #ffffff;
background-color: #00152b;
}
.ant-modal-title {
color: #ffffff !important;
background: url('/@/assets/images/dialog.png') no-repeat;
background-size: 100%;
}
}
/*表单*/
:deep(.ant-form-item-label > label) {
color: var(--formLabel);
}
src/assets/theme/theme.css
+10 -2
View File
@@ -1,5 +1,5 @@
/*默认dark*/
:root { :root {
--antSelectDropdownBg: #00152b; --antSelectDropdownBg: #00152b;
--antSelectDropdownBorderColor: #1b7ef2; --antSelectDropdownBorderColor: #1b7ef2;
--antSelectItemActive: #002e64; --antSelectItemActive: #002e64;
@@ -8,5 +8,13 @@
/*服务详情数据*/ /*服务详情数据*/
--typeTimeSelectColor: #45a2ff; --typeTimeSelectColor: #45a2ff;
--typeTimeUnSelectColor: #a3a4a4; --typeTimeUnSelectColor: #a3a4a4;
/*表格 */
--tableHeadBg: rgba(35, 132, 221, 0.5);
--tableFontColor: #fff;
--tableRowBg: #00152b;
--tableRowBorder: #2384dd;
--pageItemLink: #bdc9f5;
--pageItemActiveBg: #0081ff;
/*表单*/
--formLabel: #1b7ef2;
} }
src/assets/theme/themeList.ts
+19
View File
@@ -9,6 +9,15 @@ export const themeList = {
/*服务详情数据*/ /*服务详情数据*/
typeTimeSelectColor: '#45a2ff', typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4', typeTimeUnSelectColor: '#a3a4a4',
// 表格
tableHeadBg: 'rgba(35, 132, 221, 0.5)',
tableFontColor: '#fff',
tableRowBg: '#00152b',
tableRowBorder: '#2384dd',
pageItemLink: '#1f2935',
pageItemActiveBg: '#0081ff',
//form
formLabel: '#1b7ef2',
}, },
light: { light: {
antSelectDropdownBg: '#fff', antSelectDropdownBg: '#fff',
@@ -19,6 +28,15 @@ export const themeList = {
/*服务详情数据*/ /*服务详情数据*/
typeTimeSelectColor: '#45a2ff', typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4', typeTimeUnSelectColor: '#a3a4a4',
// 表格
tableHeadBg: '#bdc9f5',
tableFontColor: '#607DDB',
tableRowBg: '#f3f5ff',
tableRowBorder: '#e1e6fa',
pageItemLink: '#bdc9f5',
pageItemActiveBg: '#7092ff',
//form
formLabel: '#7092ff',
}, },
}; };
@@ -26,5 +44,6 @@ export function setTheme(theme: string) {
const themeStyle = themeList[theme]; const themeStyle = themeList[theme];
for (const key in themeStyle) { for (const key in themeStyle) {
document.documentElement.style.setProperty(`--${key}`, themeStyle[key]); document.documentElement.style.setProperty(`--${key}`, themeStyle[key]);
document.documentElement.className = theme;
} }
} }
src/components/body-d-right/oneR.vue
+42 -39
View File
@@ -62,6 +62,7 @@
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts'; import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
import { DataType } from '/@/utils/settings.ts'; import { DataType } from '/@/utils/settings.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts'; import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { message } from 'ant-design-vue';
const props = defineProps({ const props = defineProps({
setting: Object, setting: Object,
@@ -128,6 +129,8 @@
Map.createMarker(item, () => { Map.createMarker(item, () => {
handlePolice(item); handlePolice(item);
}); });
} else {
message.warn('暂无定位信息');
} }
} }
@@ -219,49 +222,49 @@
} }
} }
</style> </style>
<style lang="less"> <!--<style lang="less">-->
.dialog-con { <!-- .dialog-con {-->
background-color: #00152b; <!-- background-color: #00152b;-->
// antd表格样式 <!-- // antd表格样式-->
.ant-table-thead > tr > th { <!-- .ant-table-thead > tr > th {-->
//border-bottom: 1px solid #1e73c2 !important; <!-- //border-bottom: 1px solid #1e73c2 !important;-->
} <!-- }-->
.ant-table-body { <!-- .ant-table-body {-->
background-color: #00152b !important; <!-- background-color: #00152b !important;-->
} <!-- }-->
.ant-modal-header { <!-- .ant-modal-header {-->
border-bottom: none !important; <!-- border-bottom: none !important;-->
} <!-- }-->
.ant-table-tbody > tr > td { <!-- .ant-table-tbody > tr > td {-->
border-bottom: 1px solid #1e73c2 !important; <!-- border-bottom: 1px solid #1e73c2 !important;-->
background-color: #00152b !important; <!-- background-color: #00152b !important;-->
color: #ffffff !important; <!-- color: #ffffff !important;-->
} <!-- }-->
.ant-table-tbody > tr.ant-table-row:hover > td, <!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
.ant-table-tbody > tr > td.ant-table-cell-row-hover, <!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
.ant-table-thead > tr > th { <!-- .ant-table-thead > tr > th {-->
background-color: #00152b !important; <!-- background-color: #00152b !important;-->
color: #ffffff !important; <!-- color: #ffffff !important;-->
} <!-- }-->
.ant-table-cell-scrollbar { <!-- .ant-table-cell-scrollbar {-->
box-shadow: none !important; <!-- box-shadow: none !important;-->
} <!-- }-->
/* <!-- /*-->
表格滚动条 <!--表格滚动条-->
*/ <!--*/-->
.ant-table-body::-webkit-scrollbar-thumb { <!-- .ant-table-body::-webkit-scrollbar-thumb {-->
border: 4px solid rgba(0, 0, 0, 0); <!-- border: 4px solid rgba(0, 0, 0, 0);-->
height: 6px; <!-- height: 6px;-->
border-radius: 25px; <!-- border-radius: 25px;-->
background-clip: padding-box; <!-- background-clip: padding-box;-->
background-color: rgba(30, 115, 194, 0.3); <!-- background-color: rgba(30, 115, 194, 0.3);-->
} <!-- }-->
} <!-- }-->
</style> <!--</style>-->
src/components/dialog/Dialog.vue
+4 -60
View File
@@ -1,6 +1,6 @@
<template> <template>
<a-modal <a-modal
:class="[themeType == ThemeType.dark ? 'dialog-dark' : 'dialog-light']" :class="['dialog', themeType]"
v-model:visible="props.openVis" v-model:visible="props.openVis"
:title="props.title" :title="props.title"
:width="props.width" :width="props.width"
@@ -13,9 +13,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import { ThemeType } from '/@/utils/settings.ts';
const emit = defineEmits(['close']); const emit = defineEmits(['close']);
const props = defineProps({ const props = defineProps({
@@ -29,11 +27,7 @@
type: String, type: String,
}, },
}); });
const store = useUserStore(); const { themeType } = useTheme();
const themeType = ref('');
onMounted(() => {
themeType.value = store.getThemeType;
});
function handleCancel() { function handleCancel() {
emit('close'); emit('close');
@@ -41,7 +35,7 @@
</script> </script>
<style lang="less"> <style lang="less">
.dialog-dark { .dialog {
border: 1px solid #0a50a0; border: 1px solid #0a50a0;
background-color: #00152b; background-color: #00152b;
@@ -51,56 +45,6 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
padding-left: 2%;
font-size: 18px;
font-weight: bold;
}
.ant-modal-header {
padding: 0 !important;
border-bottom: none;
}
.ant-modal-header,
.ant-modal-content {
background-color: transparent !important;
box-shadow: none;
}
.ant-modal-body {
padding: 0 !important;
}
.ant-modal-close-x,
.anticon {
color: #999999 !important;
height: 40px;
line-height: 40px;
}
.ant-modal-footer {
border-top: none !important;
}
.ant-modal-wrap {
//background-color: rgba(0, 0, 0, 0.6);
}
}
.dialog-light {
border: 1px solid #0a50a0;
background-color: #fff;
.ant-modal-title {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 40px;
background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #ffffff !important; color: #ffffff !important;
padding-left: 2%; padding-left: 2%;
src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue
+19 -20
View File
@@ -109,9 +109,9 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
:deep(.ant-table-thead > tr > th) { :deep(.ant-table-thead > tr > th) {
color: #fff !important; color: var(--tableFontColor) !important;
background: rgba(35, 132, 221, 0.5) !important; background: var(--tableHeadBg) !important;
border-top: 1px solid #1d4e7c !important; border-top: 1px solid var(--tableHeadBg) !important;
border-bottom: none; border-bottom: none;
padding: 9px 9px; padding: 9px 9px;
} }
@@ -121,7 +121,7 @@
} }
:deep(.ant-table) { :deep(.ant-table) {
color: #fff; color: var(--tableFontColor);
background-color: transparent; background-color: transparent;
//pointer-events: none; //pointer-events: none;
} }
@@ -133,13 +133,13 @@
:deep(.ant-table-row:hover) { :deep(.ant-table-row:hover) {
background-color: transparent; background-color: transparent;
color: #ffffff; color: var(--tableFontColor);
} }
.ant-table-striped :deep(.table-default) td, .ant-table-striped :deep(.table-default) td,
.ant-table-striped :deep(.table-striped) td { .ant-table-striped :deep(.table-striped) td {
background-color: #00152b; background-color: var(--tableRowBg) !important;
border-bottom: 1px solid #2384dd; border-bottom: 1px solid var(--tableRowBorder);
padding: 10px 4px !important; padding: 10px 4px !important;
} }
@@ -147,42 +147,41 @@
background: transparent; background: transparent;
} }
//#00152b
// 分页 // 分页
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) { :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935; background-color: var(--pageItemLink);
color: #8291a9; color: #8291a9;
border: none; border: none;
} }
:deep(.ant-pagination-item) { :deep(.ant-pagination-item) {
background-color: #1f2935; background-color: var(--pageItemLink);
color: #ffffff; color: var(--tableFontColor);
border: none; border: none;
} }
// 当前页选中的样式 // 当前页选中的样式
:deep(.ant-pagination-item-active) { :deep(.ant-pagination-item-active) {
background-color: #0081ff; background-color: var(--pageItemActiveBg);
} }
:deep(.ant-pagination-item-active a) { :deep(.ant-pagination-item-active a) {
color: #ffffff; color: #fff;
} }
:deep(.ant-pagination-item a), :deep(.ant-pagination-item a),
:deep(.ant-pagination-total-text) { :deep(.ant-pagination-total-text) {
color: #ffffff; color: var(--tableFontColor);
} }
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) { //:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
color: #ffffff; // color: var(--tableFontColor);
background-color: #1f2935; // background-color: var(--pageItemLink);
} //}
// 省略样式 // 省略样式
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) { :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
color: #ffffff; color: var(--tableFontColor);
} }
// 省略鼠标移入样式 // 省略鼠标移入样式
@@ -192,7 +191,7 @@
// 下一页 // 下一页
:deep(.ant-pagination-next .ant-pagination-item-link) { :deep(.ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935; background-color: var(--pageItemLink);
color: #8291a9; color: #8291a9;
border: none; border: none;
} }
src/views/components/employeeDialog.vue
-1
View File
@@ -59,7 +59,6 @@
.police-con { .police-con {
color: #ffffff; color: #ffffff;
background-color: #00152b; background-color: #00152b;
//border: 1px solid #129bff;
padding: 2% 0 2% 5%; padding: 2% 0 2% 5%;
.sub-text { .sub-text {
src/views/components/phoneDialog/phoneDialog.vue
+3
View File
@@ -11,6 +11,7 @@
<BasicTable <BasicTable
ref="registerTable" ref="registerTable"
class="table-container" class="table-container"
:class="[themeType]"
:key="visible" :key="visible"
:columns="columns" :columns="columns"
:api="getPhoneList" :api="getPhoneList"
@@ -27,6 +28,7 @@
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
import { SexType, sexTypeList } from '/@/utils/settings.ts'; import { SexType, sexTypeList } from '/@/utils/settings.ts';
import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts'; import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const props = defineProps({ const props = defineProps({
record: Object, record: Object,
@@ -37,6 +39,7 @@
setting: Object, setting: Object,
phoneType: String, phoneType: String,
}); });
const { themeType } = useTheme();
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
style: { width: '100px' }, style: { width: '100px' },
src/views/index.vue
+35 -33
View File
@@ -4,7 +4,7 @@
<div class="title-d-left"> <div class="title-d-left">
{{ dayTimeO }} {{ dayTimeO }}
</div> </div>
<div class="title-d-middle" @click="employeeDialogOpen"> 应急就医服务中心</div> <div class="title-d-middle"> 应急就医服务中心</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div> <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div> </div>
<div class="body-d"> <div class="body-d">
@@ -101,7 +101,7 @@
//模拟开启 //模拟开启
function employeeDialogOpen() { function employeeDialogOpen() {
setEmergencyData({ setSocketData({
userId: '001a9878fdaf401c844a03e2fc7c370b', userId: '001a9878fdaf401c844a03e2fc7c370b',
realName: '曹燕', realName: '曹燕',
lon: 108.872442, lon: 108.872442,
@@ -284,37 +284,37 @@
showHospitalList.value = false; showHospitalList.value = false;
} }
//地图上绘制 // 地图上绘制
// function test() { function test() {
// let nVal = { let nVal = {
// watchNo: 'CRFTQ22C03000080', watchNo: 'CRFTQ22C03000080',
// eventType: 'heart_rate', eventType: 'heart_rate',
// bindUserId: 'fd358031299d4816b5d304fd818ecc73', bindUserId: 'fd358031299d4816b5d304fd818ecc73',
// createBy: null, createBy: null,
// createDate: null, createDate: null,
// dataValue: '999', dataValue: '999',
// address: address:
// '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字', '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
// lon: 108.6666, lon: 108.6666,
// lat: 29.8888, lat: 29.8888,
// dataDate: '2023-12-07', dataDate: '2023-12-07',
// warnTime: '2023-12-07', warnTime: '2023-12-07',
// gpsErrorMsg: '', gpsErrorMsg: '',
// lonGd: 108.67084314886117, lonGd: 108.67084314886117,
// latGd: 29.88607705672868, latGd: 29.88607705672868,
// addressGd: null, addressGd: null,
// sendFlag: '0', sendFlag: '0',
// largeScreenFlag: '0', largeScreenFlag: '0',
// orgCode: null, orgCode: null,
// orgName: '冯地坑采油作业区', orgName: '冯地坑采油作业区',
// realName: '王志文', realName: '王志文',
// phone: '15229020494', phone: '15229020494',
// }; };
// nextTick(() => { nextTick(() => {
// setEmergencyData(nVal); setEmergencyData(nVal);
// emergencyDialogRef.value.openDialog(); emergencyDialogRef.value.openDialog();
// }); });
// } }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.outer { .outer {
@@ -376,10 +376,12 @@
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> div { > div {
height: calc((100% / 3) - 10px); height: calc((100% / 3) - 10px);
padding: 10px; padding: 10px;
} }
> :nth-child(n + 1) { > :nth-child(n + 1) {
margin-bottom: 10px; margin-bottom: 10px;
} }
src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<public-title title="一线医疗点每日工作动态" /> <public-title title="一线医疗点每日工作动态" themeType="dark" />
<div class="inner"> <div class="inner">
<div class="trends-item" v-for="(item, k) in trendsData" :key="k"> <div class="trends-item" v-for="(item, k) in trendsData" :key="k">
<div class="trends-title-con"> <div class="trends-title-con">
src/views/yinChuan/componetns/employeeHealth/employeeHealth.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<public-title title="员工队伍健康状况"> <public-title title="员工队伍健康状况" themeType="dark">
<template #right> <template #right>
<!-- <span class="right-text" @click="viewDetail">更多</span>--> <!-- <span class="right-text" @click="viewDetail">更多</span>-->
</template> </template>
src/views/yinChuan/yinChuan.vue
+2 -2
View File
@@ -21,7 +21,7 @@
@handleClick="handlePhoneDialog" @handleClick="handlePhoneDialog"
/> />
<!--一线医疗点每日工作动态--> <!--一线医疗点每日工作动态-->
<DailyWorkTrends :refreshState="refreshState" class="daily-work-trends" /> <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
</div> </div>
<div class="body-d-middle"> <div class="body-d-middle">
<china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" /> <china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" />
@@ -30,7 +30,7 @@
<!--健康终端报警--> <!--健康终端报警-->
<TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" /> <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
<!--员工队伍健康状况--> <!--员工队伍健康状况-->
<EmployeeHealth :refreshState="refreshState" :setting="setting" /> <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
<!--体检数据--> <!--体检数据-->
<PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" /> <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
</div> </div>