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 11:46:49 +08:00
parent 14c50baeed
commit 7ee32fb8d9
9 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/less/themeType.less
+15
View File
@@ -7,4 +7,19 @@
.police-con.dark {
color: #ffffff;
background-color: #00152b;
}
.common-card.light {
background: #f3f5ff;
border-radius: 14px;
}
// 左侧区域
.body-d-left.light {
padding: 0 16px;
}
//右侧区域
.body-d-right.light {
padding: 0 16px;
}
src/components/body-d-left/oneL.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="common-card" :class="[themeType]">
<public-title title="服务详情数据" />
<div class="inner">
<div class="type-time">
@@ -35,7 +35,9 @@
import { useDetailStore } from '/@/store/modules/detailData.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import { setTheme } from '/@/assets/theme/themeList.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const { themeType } = useTheme();
const { LEFT_KEY1 } = caching;
const props = defineProps({
refreshState: {
src/components/body-d-left/threeL.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="common-card" :class="[themeType]">
<public-title title="体检数据" />
<div class="inner">
<div class="type-time">
@@ -25,6 +25,7 @@
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import * as echarts from 'echarts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const props = defineProps({
refreshState: {
@@ -32,6 +33,7 @@
},
setting: Object,
});
const { themeType } = useTheme();
const { setSession, getSession } = useSession();
const { LEFT_KEY3 } = caching;
const { setSpin, spinning } = useSpin();
src/components/body-d-left/twoL.vue
+4 -2
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="common-card" :class="[themeType]">
<public-title title="主诉分类" />
<div class="zc-inner">
<div class="title">
@@ -24,18 +24,20 @@
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { ref, onMounted, watch } from 'vue';
import PublicTitle from '/@/components/publicTitle.vue';
import * as echarts from 'echarts';
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const props = defineProps({
refreshState: {
type: Boolean,
},
});
const { themeType } = useTheme();
const { setSession, getSession } = useSession();
const { LEFT_KEY2 } = caching;
const { setSpin, spinning } = useSpin();
src/components/body-d-right/oneR.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="terminal-container">
<div class="terminal-container common-card" :class="[themeType]">
<public-title title="健康终端报警">
<template #right>
<span class="right-text" @click="viewDetail">查看详情</span>
src/components/body-d-right/threeR.vue
+4 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="common-card" :class="themeType">
<public-title title="基层医疗点远程会诊" />
<div class="inner">
<div class="inner-item" data-text="应急就医-服务中心"></div>
@@ -11,6 +11,9 @@
</template>
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const { themeType } = useTheme();
</script>
<style scoped lang="less">
.inner {
src/components/body-d-right/twoR.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="common-card" :class="themeType">
<public-title title="长庆油田大病人数" />
<div class="inner" ref="healthChart"></div>
</div>
@@ -12,10 +12,12 @@
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const props = defineProps({
setting: Object,
});
const { themeType } = useTheme();
const { setSession, getSession } = useSession();
const { RIGHT_KEY2 } = caching;
const { setSpin, spinning } = useSpin();
src/components/xianMap/xianMap.vue
+13 -12
View File
@@ -141,7 +141,7 @@
if (TabType.diFangYiYuan == item.type) {
let { lng, lat } = Map.getMapCenter();
Map.getAddressByPoint([lng, lat]).then((text, data) => {
console.log('data', data, data.citycode);
// console.log('data', data, data.citycode);
});
Map.removeOverlayGroup();
Map.map.on('moveend', logMapinfo);
@@ -348,16 +348,15 @@
display: flex;
justify-content: center;
align-items: center;
color: #29f1fa;
background: url('/@/assets/img/tab-default.png') no-repeat;
background-size: 100% 100%;
color: #607ddb;
background: #cad6fc;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
&.active {
color: #fff;
background: url('/@/assets/img/tab-active.png') no-repeat;
background-size: 100% 100%;
background: #7593f8;
}
}
}
@@ -534,7 +533,7 @@
display: flex;
border-radius: 6px;
flex-direction: column;
background-color: #fff;
background-color: #f3f5ff;
box-shadow:
0 3px 6px -4px #0000001f,
0 6px 16px #00000014,
@@ -545,7 +544,7 @@
font-size: 12px;
font-weight: 400;
line-height: 30px;
color: #000;
color: #607ddb;
.legend-img {
width: 20px;
@@ -572,23 +571,25 @@
gap: 20px;
.count-item {
//src/assets/images/footer-num.png
width: 340px;
height: 80px;
display: flex;
color: #ffffff;
flex-direction: column;
align-items: center;
justify-content: center;
background: #00071b;
box-shadow: inset 0 0 40px 0 #1b7ef2;
border-radius: 4px;
background: url('/@/assets/images/footer-num.png') no-repeat;
background-size: 100% 100%;
border-radius: 14px;
.num {
font-size: 24px;
font-weight: 700;
color: #3f59ae;
}
.text {
color: #607ddb;
font-size: 16px;
font-weight: 400;
}
src/views/index.vue
+9 -9
View File
@@ -8,7 +8,7 @@
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
<div class="body-d-left">
<div class="body-d-left" :class="[themeType]">
<one-l theme="light" :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
<two-l theme="light" :key="tabState" :refreshState="refreshState" />
<three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
@@ -21,7 +21,7 @@
:mapOptions="lightMapOption"
/>
</div>
<div class="body-d-right">
<div class="body-d-right" :class="[themeType]">
<one-r :setting="setting" :refreshState="refreshState" />
<two-r :key="tabState" :setting="setting" :refreshState="refreshState" />
<three-r :key="refreshState" />
@@ -54,6 +54,7 @@
import { Map } from '/@/assets/mapUtils/map.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const { refreshState } = useRefresh(DEFAULT_TIME);
const dayTimeO = ref();
@@ -81,6 +82,7 @@
//设置主题
store.setThemeType(ThemeType.light);
});
const { themeType } = useTheme();
onUnmounted(() => {
clearInterval(interval.value);
document.removeEventListener('visibilitychange', checkTabState);
@@ -374,14 +376,12 @@
.body-d-left,
.body-d-right {
text-align: center;
}
display: flex;
flex-direction: column;
gap: 10px;
.body-d-left,
.body-d-right {
> :nth-child(n) {
width: 100%;
height: calc(100% / 3);
padding: 10px;
> div {
flex: 1;
}
}