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*/
/*infoWindow*/
.amap-info-content {
src/assets/less/index.less
+36
View File
@@ -193,3 +193,39 @@
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 {
--antSelectDropdownBg: #00152b;
--antSelectDropdownBorderColor: #1b7ef2;
--antSelectItemActive: #002e64;
@@ -8,5 +8,13 @@
/*服务详情数据*/
--typeTimeSelectColor: #45a2ff;
--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',
typeTimeUnSelectColor: '#a3a4a4',
// 表格
tableHeadBg: 'rgba(35, 132, 221, 0.5)',
tableFontColor: '#fff',
tableRowBg: '#00152b',
tableRowBorder: '#2384dd',
pageItemLink: '#1f2935',
pageItemActiveBg: '#0081ff',
//form
formLabel: '#1b7ef2',
},
light: {
antSelectDropdownBg: '#fff',
@@ -19,6 +28,15 @@ export const themeList = {
/*服务详情数据*/
typeTimeSelectColor: '#45a2ff',
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];
for (const key in themeStyle) {
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 { DataType } from '/@/utils/settings.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { message } from 'ant-design-vue';
const props = defineProps({
setting: Object,
@@ -128,6 +129,8 @@
Map.createMarker(item, () => {
handlePolice(item);
});
} else {
message.warn('暂无定位信息');
}
}
@@ -219,49 +222,49 @@
}
}
</style>
<style lang="less">
.dialog-con {
background-color: #00152b;
// antd表格样式
.ant-table-thead > tr > th {
//border-bottom: 1px solid #1e73c2 !important;
}
<!--<style lang="less">-->
<!-- .dialog-con {-->
<!-- background-color: #00152b;-->
<!-- // antd表格样式-->
<!-- .ant-table-thead > tr > th {-->
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
<!-- }-->
.ant-table-body {
background-color: #00152b !important;
}
<!-- .ant-table-body {-->
<!-- background-color: #00152b !important;-->
<!-- }-->
.ant-modal-header {
border-bottom: none !important;
}
<!-- .ant-modal-header {-->
<!-- border-bottom: none !important;-->
<!-- }-->
.ant-table-tbody > tr > td {
border-bottom: 1px solid #1e73c2 !important;
background-color: #00152b !important;
color: #ffffff !important;
}
<!-- .ant-table-tbody > tr > td {-->
<!-- border-bottom: 1px solid #1e73c2 !important;-->
<!-- background-color: #00152b !important;-->
<!-- color: #ffffff !important;-->
<!-- }-->
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover,
.ant-table-thead > tr > th {
background-color: #00152b !important;
color: #ffffff !important;
}
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
<!-- .ant-table-thead > tr > th {-->
<!-- background-color: #00152b !important;-->
<!-- color: #ffffff !important;-->
<!-- }-->
.ant-table-cell-scrollbar {
box-shadow: none !important;
}
<!-- .ant-table-cell-scrollbar {-->
<!-- box-shadow: none !important;-->
<!-- }-->
/*
表格滚动条
*/
<!-- /*-->
<!--表格滚动条-->
<!--*/-->
.ant-table-body::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(30, 115, 194, 0.3);
}
}
</style>
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
<!-- height: 6px;-->
<!-- border-radius: 25px;-->
<!-- background-clip: padding-box;-->
<!-- background-color: rgba(30, 115, 194, 0.3);-->
<!-- }-->
<!-- }-->
<!--</style>-->
src/components/dialog/Dialog.vue
+4 -60
View File
@@ -1,6 +1,6 @@
<template>
<a-modal
:class="[themeType == ThemeType.dark ? 'dialog-dark' : 'dialog-light']"
:class="['dialog', themeType]"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
@@ -13,9 +13,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useUserStore } from '/@/store/modules/user.ts';
import { ThemeType } from '/@/utils/settings.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const emit = defineEmits(['close']);
const props = defineProps({
@@ -29,11 +27,7 @@
type: String,
},
});
const store = useUserStore();
const themeType = ref('');
onMounted(() => {
themeType.value = store.getThemeType;
});
const { themeType } = useTheme();
function handleCancel() {
emit('close');
@@ -41,7 +35,7 @@
</script>
<style lang="less">
.dialog-dark {
.dialog {
border: 1px solid #0a50a0;
background-color: #00152b;
@@ -51,56 +45,6 @@
align-items: center;
width: 100%;
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%;
color: #ffffff !important;
padding-left: 2%;
src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue
+19 -20
View File
@@ -109,9 +109,9 @@
</script>
<style scoped lang="less">
:deep(.ant-table-thead > tr > th) {
color: #fff !important;
background: rgba(35, 132, 221, 0.5) !important;
border-top: 1px solid #1d4e7c !important;
color: var(--tableFontColor) !important;
background: var(--tableHeadBg) !important;
border-top: 1px solid var(--tableHeadBg) !important;
border-bottom: none;
padding: 9px 9px;
}
@@ -121,7 +121,7 @@
}
:deep(.ant-table) {
color: #fff;
color: var(--tableFontColor);
background-color: transparent;
//pointer-events: none;
}
@@ -133,13 +133,13 @@
:deep(.ant-table-row:hover) {
background-color: transparent;
color: #ffffff;
color: var(--tableFontColor);
}
.ant-table-striped :deep(.table-default) td,
.ant-table-striped :deep(.table-striped) td {
background-color: #00152b;
border-bottom: 1px solid #2384dd;
background-color: var(--tableRowBg) !important;
border-bottom: 1px solid var(--tableRowBorder);
padding: 10px 4px !important;
}
@@ -147,42 +147,41 @@
background: transparent;
}
//#00152b
// 分页
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935;
background-color: var(--pageItemLink);
color: #8291a9;
border: none;
}
:deep(.ant-pagination-item) {
background-color: #1f2935;
color: #ffffff;
background-color: var(--pageItemLink);
color: var(--tableFontColor);
border: none;
}
// 当前页选中的样式
:deep(.ant-pagination-item-active) {
background-color: #0081ff;
background-color: var(--pageItemActiveBg);
}
:deep(.ant-pagination-item-active a) {
color: #ffffff;
color: #fff;
}
:deep(.ant-pagination-item a),
: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) {
color: #ffffff;
background-color: #1f2935;
}
//:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
// color: var(--tableFontColor);
// background-color: var(--pageItemLink);
//}
// 省略样式
: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) {
background-color: #1f2935;
background-color: var(--pageItemLink);
color: #8291a9;
border: none;
}
src/views/components/employeeDialog.vue
-1
View File
@@ -59,7 +59,6 @@
.police-con {
color: #ffffff;
background-color: #00152b;
//border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.sub-text {
src/views/components/phoneDialog/phoneDialog.vue
+3
View File
@@ -11,6 +11,7 @@
<BasicTable
ref="registerTable"
class="table-container"
:class="[themeType]"
:key="visible"
:columns="columns"
:api="getPhoneList"
@@ -27,6 +28,7 @@
import { Form } from 'ant-design-vue';
import { SexType, sexTypeList } from '/@/utils/settings.ts';
import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const props = defineProps({
record: Object,
@@ -37,6 +39,7 @@
setting: Object,
phoneType: String,
});
const { themeType } = useTheme();
const formItemLayout = {
labelCol: {
style: { width: '100px' },
src/views/index.vue
+35 -33
View File
@@ -4,7 +4,7 @@
<div class="title-d-left">
{{ dayTimeO }}
</div>
<div class="title-d-middle" @click="employeeDialogOpen"> 应急就医服务中心</div>
<div class="title-d-middle"> 应急就医服务中心</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
@@ -101,7 +101,7 @@
//模拟开启
function employeeDialogOpen() {
setEmergencyData({
setSocketData({
userId: '001a9878fdaf401c844a03e2fc7c370b',
realName: '曹燕',
lon: 108.872442,
@@ -284,37 +284,37 @@
showHospitalList.value = false;
}
//地图上绘制
// function test() {
// let nVal = {
// watchNo: 'CRFTQ22C03000080',
// eventType: 'heart_rate',
// bindUserId: 'fd358031299d4816b5d304fd818ecc73',
// createBy: null,
// createDate: null,
// dataValue: '999',
// address:
// '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
// lon: 108.6666,
// lat: 29.8888,
// dataDate: '2023-12-07',
// warnTime: '2023-12-07',
// gpsErrorMsg: '',
// lonGd: 108.67084314886117,
// latGd: 29.88607705672868,
// addressGd: null,
// sendFlag: '0',
// largeScreenFlag: '0',
// orgCode: null,
// orgName: '冯地坑采油作业区',
// realName: '王志文',
// phone: '15229020494',
// };
// nextTick(() => {
// setEmergencyData(nVal);
// emergencyDialogRef.value.openDialog();
// });
// }
// 地图上绘制
function test() {
let nVal = {
watchNo: 'CRFTQ22C03000080',
eventType: 'heart_rate',
bindUserId: 'fd358031299d4816b5d304fd818ecc73',
createBy: null,
createDate: null,
dataValue: '999',
address:
'一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
lon: 108.6666,
lat: 29.8888,
dataDate: '2023-12-07',
warnTime: '2023-12-07',
gpsErrorMsg: '',
lonGd: 108.67084314886117,
latGd: 29.88607705672868,
addressGd: null,
sendFlag: '0',
largeScreenFlag: '0',
orgCode: null,
orgName: '冯地坑采油作业区',
realName: '王志文',
phone: '15229020494',
};
nextTick(() => {
setEmergencyData(nVal);
emergencyDialogRef.value.openDialog();
});
}
</script>
<style lang="less" scoped>
.outer {
@@ -376,10 +376,12 @@
text-align: center;
display: flex;
flex-direction: column;
> div {
height: calc((100% / 3) - 10px);
padding: 10px;
}
> :nth-child(n + 1) {
margin-bottom: 10px;
}
src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<public-title title="一线医疗点每日工作动态" />
<public-title title="一线医疗点每日工作动态" themeType="dark" />
<div class="inner">
<div class="trends-item" v-for="(item, k) in trendsData" :key="k">
<div class="trends-title-con">
src/views/yinChuan/componetns/employeeHealth/employeeHealth.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<public-title title="员工队伍健康状况">
<public-title title="员工队伍健康状况" themeType="dark">
<template #right>
<!-- <span class="right-text" @click="viewDetail">更多</span>-->
</template>
src/views/yinChuan/yinChuan.vue
+2 -2
View File
@@ -21,7 +21,7 @@
@handleClick="handlePhoneDialog"
/>
<!--一线医疗点每日工作动态-->
<DailyWorkTrends :refreshState="refreshState" class="daily-work-trends" />
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
</div>
<div class="body-d-middle">
<china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" />
@@ -30,7 +30,7 @@
<!--健康终端报警-->
<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" />
</div>