组件调整
This commit is contained in:
zhaotiantian
@@ -1,76 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title :title="props.title">
|
||||
<template #right>
|
||||
{{ props.tips }}
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
<div>
|
||||
<public-title :title="props.title">
|
||||
<template #right>
|
||||
{{ props.tips }}
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import { onMounted, ref, unref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import {screenPie} from '/@/components/item-d/pieCharts.ts';
|
||||
import {onMounted, ref, unref, watch, defineProps} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
const healthChart = ref<HTMLElement>();
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const {setSpin, spinning} = useSpin();
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
|
||||
async function init() {
|
||||
// setHealth(props.data);
|
||||
// const yData = unref(getValue);
|
||||
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(props.data, 78, props.color);
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
|
||||
function initChart(chartData, total, color) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
const {healthData, getValue, setHealth} = useHealth();
|
||||
|
||||
async function init() {
|
||||
// setHealth(props.data);
|
||||
// const yData = unref(getValue);
|
||||
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(props.data, 78, props.color);
|
||||
}
|
||||
|
||||
function initChart(chartData, total, color) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color, '{d}%');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export function screenPie(chartData, total, color) {
|
||||
export function screenPie(chartData, total, color, formatter) {
|
||||
return {
|
||||
title: {
|
||||
text: '总人数',
|
||||
@@ -31,7 +31,7 @@ export function screenPie(chartData, total, color) {
|
||||
top: 'center',
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemGap: 26,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
@@ -46,7 +46,7 @@ export function screenPie(chartData, total, color) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
formatter: formatter,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
},
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '放松', value: 204},
|
||||
{name: '中等', value: 34},
|
||||
{name: '偏高', value: 78},
|
||||
],
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{name: '37.2', value: 234},
|
||||
{name: '37.2-38', value: 204},
|
||||
{name: '>38', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@ export function sleepCharts() {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '18%',
|
||||
bottom: '20%',
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
@@ -68,7 +68,7 @@ export function useHealth() {
|
||||
const healthData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '0',
|
||||
value: '23',
|
||||
type: '1',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
:pagination="tableInfo.pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
>
|
||||
<template #address="{text}">
|
||||
<template #address="{text,record}">
|
||||
<div class="police-times">
|
||||
<span class="police-text">{{ text }}</span>
|
||||
<span class="police-icon"></span>
|
||||
<span class="police-text">{{ record.address }}</span>
|
||||
<span class="police-icon" @click="handlePoliceDetail(record)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -59,7 +59,6 @@ const tableInfo = ref({
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: {customRender: 'address'}
|
||||
@@ -68,9 +67,13 @@ const tableInfo = ref({
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 2,
|
||||
total: 2,
|
||||
total: 10,
|
||||
},
|
||||
});
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
console.log(record)
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner-screen {
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="步数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
<div>
|
||||
<public-title title="步数"/>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, unref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useHealth } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import {ref, unref, onMounted} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import {getHealthDataList} from '/@/components/body-d-right/right.api';
|
||||
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import {screenPie} from '/@/components/item-d/pieCharts.ts';
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const {setSpin, spinning} = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const {healthData, getValue, setHealth} = useHealth();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const { code, result } = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(unref(healthData), total);
|
||||
} catch {
|
||||
initChart(unref(healthData), 0);
|
||||
}
|
||||
async function init() {
|
||||
try {
|
||||
const {code, result} = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(unref(healthData), '89');
|
||||
} catch {
|
||||
initChart(unref(healthData), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value, '{c}');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
+169
-209
@@ -1,234 +1,194 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<div class="title-d">
|
||||
<div class="title-d-left">
|
||||
<div class="outer">
|
||||
<div class="title-d">
|
||||
<div class="title-d-left">
|
||||
<span style="cursor: pointer" @click="clickBack">
|
||||
<a-space>
|
||||
<rollback-outlined />
|
||||
<rollback-outlined/>
|
||||
</a-space>
|
||||
返回
|
||||
</span>
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<SecondMap>
|
||||
<template #rightForm>
|
||||
<a-select
|
||||
placeholder="选择单位"
|
||||
v-model:value="orgCode"
|
||||
class="type-select"
|
||||
:options="option"
|
||||
:fieldNames="fieldNames"
|
||||
></a-select>
|
||||
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
|
||||
</template>
|
||||
</SecondMap>
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<one-r />
|
||||
<two-r />
|
||||
<three-r />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-d"></div>
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<PieCharts/>
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<SecondMap>
|
||||
<template #rightForm>
|
||||
<a-select
|
||||
placeholder="选择单位"
|
||||
v-model:value="orgCode"
|
||||
class="type-select"
|
||||
:options="option"
|
||||
:fieldNames="fieldNames"
|
||||
></a-select>
|
||||
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
|
||||
:options="timeRangeOption"></a-select>
|
||||
</template>
|
||||
</SecondMap>
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<one-r/>
|
||||
<two-r/>
|
||||
<three-r/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-d"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
|
||||
import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
|
||||
import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
|
||||
import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
|
||||
import router from '/@/router';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
import { useDepart, useTimeType } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { useTopTime } from '/@/utils/utils.ts';
|
||||
import {RollbackOutlined} from '@ant-design/icons-vue';
|
||||
import {ref} from 'vue';
|
||||
import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
|
||||
import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
|
||||
import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
|
||||
import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
|
||||
import PieCharts from '/@/components/secondaryScreen/screen-left/PieCharts.vue'
|
||||
import router from '/@/router';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import {useTopTime} from '/@/utils/utils.ts';
|
||||
|
||||
const dayTimeT = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '放松', value: 204 },
|
||||
{ name: '中等', value: 34 },
|
||||
{ name: '偏高', value: 78 },
|
||||
],
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{ name: '37.2', value: 234 },
|
||||
{ name: '37.2-38', value: 204 },
|
||||
{ name: '>38', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
},
|
||||
]);
|
||||
const dayTimeT = ref();
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
init();
|
||||
function init() {
|
||||
getTime();
|
||||
setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
const { timeRight } = useTopTime();
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
init();
|
||||
|
||||
function clickBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
function getTime() {
|
||||
const {timeRight} = useTopTime();
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
const { orgCode, option, fieldNames } = useDepart({});
|
||||
const { type, timeRangeOption } = useTimeType('week');
|
||||
function clickBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
|
||||
const {orgCode, option, fieldNames} = useDepart({});
|
||||
const {type, timeRangeOption} = useTimeType('week');
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('../assets/images/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('../assets/images/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.title-d {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
padding-bottom: 9px;
|
||||
background: url('../assets/images/top-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-d-left,
|
||||
.title-d-middle,
|
||||
.title-d-right {
|
||||
font-size: 27px;
|
||||
color: #ffffff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-d-left {
|
||||
text-align: left !important;
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 42%;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 29%;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d {
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
//padding-top: 10px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.body-d-left,
|
||||
.body-d-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body-d-right {
|
||||
> :nth-child(1) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title-d {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
padding-bottom: 9px;
|
||||
background: url('../assets/images/top-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-d-left,
|
||||
.title-d-middle,
|
||||
.title-d-right {
|
||||
font-size: 27px;
|
||||
color: #ffffff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-d-left {
|
||||
text-align: left !important;
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 42%;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 29%;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.body-d {
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
//padding-top: 10px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.body-d-left,
|
||||
.body-d-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body-d-right {
|
||||
> :nth-child(1) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 100%;
|
||||
height: calc(100% / 2);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 120px;
|
||||
color: #008cff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
width: 100%;
|
||||
height: calc(100% / 2);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
height: 40px;
|
||||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 120px;
|
||||
color: #008cff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
height: 40px;
|
||||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user