|
|
@@ -0,0 +1,596 @@
|
|
|
+<template>
|
|
|
+ <div class="m-4">
|
|
|
+ <!-- 透前准备
|
|
|
+ <a-button type="primary" @click="plusFn">
|
|
|
+ {{ countRef }}
|
|
|
+ </a-button> -->
|
|
|
+ <XTTitle title="透析病历" :right-data="titleData" />
|
|
|
+
|
|
|
+ <div class="mt-6" />
|
|
|
+ <XTTab type="illness11" :selected="tabSelected" :data="tabData1" @item-click="callTab" />
|
|
|
+ <div class="mt-6" />
|
|
|
+ <div class="mt-6" />
|
|
|
+ <XTTab type="illness11" :selected="tabSelected" :data="tabData2" @item-click="callTab" />
|
|
|
+ <div class="mt-6" />
|
|
|
+ <div class="flex justify-between my-4">
|
|
|
+ <XTTab
|
|
|
+ type="illness"
|
|
|
+ :width="120"
|
|
|
+ :selected="tabSelected"
|
|
|
+ :data="tabData"
|
|
|
+ @item-click="callTab"
|
|
|
+ />
|
|
|
+ <XTForm :form-data="formData" />
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <Sift :data="siftData" />
|
|
|
+ </div>
|
|
|
+ <div class="m-6">
|
|
|
+ <BasicForm @register="registerForm" @field-value-change="filedChange" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #headerTop>
|
|
|
+ <span>headerTop</span>
|
|
|
+ </template>
|
|
|
+ <template #toolbar>
|
|
|
+ <span>toolbar</span>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+ <div class="mx-6 my-2">
|
|
|
+ <ChartsCard
|
|
|
+ title="透前血压趋势"
|
|
|
+ :has-safe="true"
|
|
|
+ :colors="chartData.colors"
|
|
|
+ :safe-range="chartData.safeRange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="mx-6 my-2">
|
|
|
+ <DescCard
|
|
|
+ id="1"
|
|
|
+ icon="icon-xt-add_default"
|
|
|
+ title="透析测量"
|
|
|
+ type="touxi"
|
|
|
+ :data="descData"
|
|
|
+ :right="descRight"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="mx-6 my-2">
|
|
|
+ <TimeLine :data="timeLineData" @hover="callHover">
|
|
|
+ <template #head>
|
|
|
+ <div class="animate__animated animate__slideInLeft">
|
|
|
+ <div class="timeline-outer" v-if="timeOuter">
|
|
|
+ <div class="timeline-outer_item" @click="handleAdd">AVF</div>
|
|
|
+ <div class="timeline-outer_item">AVH</div>
|
|
|
+ <div class="timeline-outer_item">TCG</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </TimeLine>
|
|
|
+ </div>
|
|
|
+ <div class="mx-6 my-2">
|
|
|
+ <List type="default" :data="listData" selected="0" />
|
|
|
+ </div>
|
|
|
+ <div class="mx-6 my-2">
|
|
|
+ <List type="attachment" :data="listData1" selected="0" :width="320" />
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <XTCard class="m-2" :data="cardData1" @item-click="cellCard" />
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <XTCard class="m-2" :data="cardData" @item-click="cellCard" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref } from 'vue';
|
|
|
+ import { XTTab } from '/@/components/XTTab/index';
|
|
|
+ import { XTCard } from '/@/components/XTCard/index';
|
|
|
+ import { XTForm } from '/@/components/XTForm/index';
|
|
|
+ import { XTTitle } from '/@/components/XTTitle/index';
|
|
|
+ import { ColorEnum } from '/@/enums/colorEnum';
|
|
|
+ import { BasicForm, useForm } from '/@/components/Form';
|
|
|
+ import { dataFormSchema, columns } from './data';
|
|
|
+ import { BasicTable, useTable } from '/@/components/Table';
|
|
|
+ import { onMounted } from 'vue';
|
|
|
+ import ChartsCard from '/@/components/XTCard/src/ChartsCard.vue';
|
|
|
+ import DescCard from '/@/components/XTCard/src/DescCard.vue';
|
|
|
+ import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
|
|
|
+ import List from '/@/components/XTList/src/List.vue';
|
|
|
+ import { Sift } from '/@/components/XTList/index';
|
|
|
+ // import { TransitionPresets, useTransition } from '@vueuse/core';
|
|
|
+
|
|
|
+ const tabSelected = ref('0');
|
|
|
+ const dataSource = ref([]);
|
|
|
+ const titleData = [
|
|
|
+ {
|
|
|
+ type: 'import',
|
|
|
+ icon: 'icon-xt-import_default',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'export',
|
|
|
+ icon: 'icon-xt-export_default',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'add',
|
|
|
+ btnIcon: 'icon-xt-add_default',
|
|
|
+ btnText: '患者建档',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const siftData = [
|
|
|
+ {
|
|
|
+ field: 'gender',
|
|
|
+ label: '性别',
|
|
|
+ value: '男',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'age',
|
|
|
+ label: '年龄区间',
|
|
|
+ value: '25岁-50岁',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const chartData = {
|
|
|
+ colors: [
|
|
|
+ {
|
|
|
+ color: 'rgba(0, 117, 255, 1)',
|
|
|
+ label: '化验值',
|
|
|
+ dot: 'rgba(0, 117, 255, 1)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ safeRange: [
|
|
|
+ {
|
|
|
+ // name: '60分到80分',
|
|
|
+ yAxis: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 20,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ const listData = [
|
|
|
+ {
|
|
|
+ id: '0',
|
|
|
+ title: '红细胞笔迹测定',
|
|
|
+ startTime: '2023-11-11 12:00',
|
|
|
+ endTime: '2023-12-11 12:00',
|
|
|
+ status: 'default',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '红细胞笔迹测定2',
|
|
|
+ startTime: '2023-11-11 12:00',
|
|
|
+ endTime: '2023-12-11 12:00',
|
|
|
+ status: 'default',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const listData1 = [
|
|
|
+ {
|
|
|
+ id: '0',
|
|
|
+ title: '红细胞笔迹测定',
|
|
|
+ startTime: '2023-11-11 12:00',
|
|
|
+ endTime: '2023-12-11 12:00',
|
|
|
+ status: 'default',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '红细胞笔迹测定2',
|
|
|
+ startTime: '2023-11-11 12:00',
|
|
|
+ endTime: '2023-12-11 12:00',
|
|
|
+ status: 'default',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const descData = [
|
|
|
+ {
|
|
|
+ label: '诊断名称/病史/状态',
|
|
|
+ value: '乙肝 / 2022-01-19 ～',
|
|
|
+ tags: [{ id: '12', label: '活动中', type: 'error' }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ value: '药物治疗或其他治疗',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '测试',
|
|
|
+ value: '药物治疗或其他治疗',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '诊断名称/病史/状态备份',
|
|
|
+ value: '结核 / 2022-02-10 ～ 20',
|
|
|
+ tags: [
|
|
|
+ { id: '1', label: '未活动', type: 'muted' },
|
|
|
+ { id: '2', label: '未活动1', type: 'primary' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const descRight = {
|
|
|
+ show: true,
|
|
|
+ date: '2023-04-23',
|
|
|
+ doctor: '张医生',
|
|
|
+ edit: true,
|
|
|
+ delete: true,
|
|
|
+ };
|
|
|
+
|
|
|
+ const timeLineData = [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ dot: '王医生',
|
|
|
+ date: '2023-05-20',
|
|
|
+ cnt: {
|
|
|
+ title: '测试' + Math.round(Math.random() * 1000),
|
|
|
+ id: '123',
|
|
|
+ type: '123',
|
|
|
+ data: descData,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '12',
|
|
|
+ dot: '范医生',
|
|
|
+ date: '2023-03-20',
|
|
|
+ cnt: {
|
|
|
+ title: '测试' + Math.round(Math.random() * 1000),
|
|
|
+ id: '123',
|
|
|
+ type: '123',
|
|
|
+ data: descData,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const timeOuter = ref(false);
|
|
|
+ onMounted(async () => {
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ const obj = {
|
|
|
+ createTime: '2023-05-23 10:09:48',
|
|
|
+ updateTime: '2023-05-23 19:00:32',
|
|
|
+ id: '1660830352886149125' + Math.round(Math.random() * 10000),
|
|
|
+ name: '驼人',
|
|
|
+ packageId: '1655202440997244930',
|
|
|
+ packageName: '测试套餐',
|
|
|
+ username: 'tuoren',
|
|
|
+ type: 'custom',
|
|
|
+ contractUser: 'Lf',
|
|
|
+ contactMobile: '18339543638',
|
|
|
+ remark: null,
|
|
|
+ disable: 0,
|
|
|
+ };
|
|
|
+ dataSource.value.push(obj);
|
|
|
+ }
|
|
|
+
|
|
|
+ await setFieldsValue({
|
|
|
+ configName333: {
|
|
|
+ bool: 1,
|
|
|
+ remark: '321321dsada',
|
|
|
+ dictValues: ['DIC_BIZ', '-1'],
|
|
|
+ },
|
|
|
+ configValue: [100, 150],
|
|
|
+ idCard: {
|
|
|
+ input: '测试',
|
|
|
+ dictValue: 'DICT_SYS',
|
|
|
+ },
|
|
|
+ apiCheck: ['pump_single'],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // const count = ref(0);
|
|
|
+ // const countRef = useTransition(count, {
|
|
|
+ // duration: 1000,
|
|
|
+ // transition: TransitionPresets.easeInCirc,
|
|
|
+ // });
|
|
|
+ // function plusFn() {
|
|
|
+ // count.value = Math.round(Math.random() * 100);
|
|
|
+ // }
|
|
|
+ // const [registerTable, { reload, getCacheColumns, setColumns }] = useTable({
|
|
|
+ const [registerTable] = useTable({
|
|
|
+ id: 'sys_config',
|
|
|
+ title: '参数列表2121',
|
|
|
+ columns,
|
|
|
+ dataSource: dataSource,
|
|
|
+ useSearchForm: false,
|
|
|
+ titleStyle: {
|
|
|
+ fontSize: '14px',
|
|
|
+ color: '#000a18',
|
|
|
+ cursor: 'default',
|
|
|
+ },
|
|
|
+ titleLined: true,
|
|
|
+ bordered: false,
|
|
|
+ showIndexColumn: false,
|
|
|
+ pagination: false,
|
|
|
+ // maxHeight: 350,
|
|
|
+ canResize: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ const [registerForm, { setFieldsValue }] = useForm({
|
|
|
+ layout: 'vertical',
|
|
|
+ labelWidth: '100%',
|
|
|
+ baseColProps: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
+ baseRowGutter: [16, 8],
|
|
|
+ schemas: dataFormSchema,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ actionColOptions: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
+ showResetButton: false,
|
|
|
+ submitButtonOptions: {
|
|
|
+ text: '添加',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ function filedChange(key, value) {
|
|
|
+ console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ value:', value);
|
|
|
+ console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ key:', key);
|
|
|
+ }
|
|
|
+ const tabData = [
|
|
|
+ {
|
|
|
+ key: '0',
|
|
|
+ label: '全部',
|
|
|
+ value: 128,
|
|
|
+ hasValue: true,
|
|
|
+ hasBracket: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: 'A区',
|
|
|
+ value: 12,
|
|
|
+ hasValue: true,
|
|
|
+ prefixColor: '#1BC1B3',
|
|
|
+ valueColor: 'red',
|
|
|
+ hasBracket: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ label: 'B区',
|
|
|
+ value: 18,
|
|
|
+ hasValue: true,
|
|
|
+ prefixColor: '#854AFF',
|
|
|
+ hasBracket: true,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const tabData2 = [
|
|
|
+ {
|
|
|
+ key: '0',
|
|
|
+ label: 'A1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: 'A2',
|
|
|
+ disabled: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ label: 'B3',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const tabData1 = [
|
|
|
+ {
|
|
|
+ key: '0',
|
|
|
+ label: '全部',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: 'A区',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ label: 'B区',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // formdata
|
|
|
+ const formData = [
|
|
|
+ {
|
|
|
+ name: 'text',
|
|
|
+ label: '全部',
|
|
|
+ componentType: 'Select',
|
|
|
+ placeholder: '请选择',
|
|
|
+ width: 80,
|
|
|
+ defaultValue: '1',
|
|
|
+ dicts: [
|
|
|
+ { label: '全部', value: '1' },
|
|
|
+ { label: '未称量', value: '2', prefixColor: '#1BC1B3' },
|
|
|
+ { label: '待确认', value: '3', prefixColor: '#854AFF' },
|
|
|
+ { label: '可打印', value: '4', prefixColor: '#1BC1B3' },
|
|
|
+ { label: '完成', value: '5', prefixColor: '#854AFF' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'text22',
|
|
|
+ componentType: 'Select',
|
|
|
+ placeholder: '请选择',
|
|
|
+ width: 120,
|
|
|
+ defaultValue: '1',
|
|
|
+ label: '班次',
|
|
|
+ dicts: [
|
|
|
+ { label: '第一班', value: '1' },
|
|
|
+ { label: '第二班', value: '2' },
|
|
|
+ { label: '第三班', value: '3' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'text1',
|
|
|
+ componentType: 'Input',
|
|
|
+ placeholder: '请输入',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'text233',
|
|
|
+ componentType: 'DatePicker',
|
|
|
+ placeholder: '请输入',
|
|
|
+ format: 'YYYY-MM-DD',
|
|
|
+ valueFormat: 'YYYY-MM-DD',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'text233',
|
|
|
+ componentType: 'RangePicker',
|
|
|
+ placeholder: '请输入',
|
|
|
+ format: 'YYYY-MM-DD',
|
|
|
+ valueFormat: 'YYYY-MM-DD',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'filter',
|
|
|
+ componentType: 'IconBtn',
|
|
|
+ count: 4,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // card 标签组
|
|
|
+ const cardData = [
|
|
|
+ {
|
|
|
+ groupKey: '123',
|
|
|
+ groupTit: '待确认/测试/待核对',
|
|
|
+ groupMode: 'default',
|
|
|
+ groupValue: [
|
|
|
+ { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
|
|
|
+ { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
|
|
|
+ { value: 4, color: ColorEnum.PRIMARY, background: ColorEnum.PRIMARY_BG },
|
|
|
+ ],
|
|
|
+ groupValueShow: true,
|
|
|
+ groupData: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: '1',
|
|
|
+ borderLeftColor: ColorEnum.BLUE,
|
|
|
+ ward: 'A区',
|
|
|
+ bed: '99',
|
|
|
+ cure: 'HDF/AVF',
|
|
|
+ name: '范了饭饭饭',
|
|
|
+ age: 20,
|
|
|
+ gender: '1',
|
|
|
+ infoShow: true,
|
|
|
+ info: [
|
|
|
+ { label: '时间', value: '4:00', span: 12 },
|
|
|
+ { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
|
|
|
+ { label: '血流量', value: '300', span: 12 },
|
|
|
+ { label: '透析器', value: 'fx60', span: 12 },
|
|
|
+ { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
|
|
|
+ ],
|
|
|
+ way: [
|
|
|
+ { label: '下机', type: '0' },
|
|
|
+ { label: '医嘱执行', type: '1', badge: 12 },
|
|
|
+ { label: '记录并发症', type: '2', badge: 2 },
|
|
|
+ { label: '交叉核对', type: '3' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '12',
|
|
|
+ type: '2',
|
|
|
+ borderLeftColor: ColorEnum.PRIMARY,
|
|
|
+ ward: 'C区',
|
|
|
+ bed: '99',
|
|
|
+ cure: 'HDF/AVF',
|
|
|
+ name: '范了饭饭饭',
|
|
|
+ age: 20,
|
|
|
+ gender: '1',
|
|
|
+ infoShow: true,
|
|
|
+ info: [
|
|
|
+ { label: '时间', value: '4:00', span: 12 },
|
|
|
+ { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
|
|
|
+ { label: '血流量', value: '300', span: 12 },
|
|
|
+ { label: '透析器', value: 'fx60', span: 12 },
|
|
|
+ { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
|
|
|
+ ],
|
|
|
+ way: [
|
|
|
+ { label: '下机', type: '0' },
|
|
|
+ { label: '医嘱执行', type: '1', badge: 12 },
|
|
|
+ { label: '记录并发症', type: '2', badge: 2 },
|
|
|
+ { label: '交叉核对', type: '3' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ type: '3',
|
|
|
+ borderLeftColor: ColorEnum.MUTED,
|
|
|
+ ward: 'C区',
|
|
|
+ bed: '99',
|
|
|
+ cure: 'HDF/AVF',
|
|
|
+ name: '范了饭饭饭',
|
|
|
+ age: 20,
|
|
|
+ gender: '1',
|
|
|
+ infoShow: true,
|
|
|
+ info: [
|
|
|
+ { label: '时间', value: '4:00', span: 12 },
|
|
|
+ { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
|
|
|
+ { label: '血流量', value: '300', span: 12 },
|
|
|
+ { label: '透析器', value: 'fx60', span: 12 },
|
|
|
+ { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
|
|
|
+ ],
|
|
|
+ way: [
|
|
|
+ { label: '下机', type: '0' },
|
|
|
+ { label: '医嘱执行', type: '1', badge: 12 },
|
|
|
+ { label: '记录并发症', type: '2', badge: 2 },
|
|
|
+ { label: '交叉核对', type: '3' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const cardData1 = [
|
|
|
+ {
|
|
|
+ groupKey: '123',
|
|
|
+ groupTit: '待确认/测试',
|
|
|
+ groupMode: 'simple',
|
|
|
+ groupValue: [
|
|
|
+ { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
|
|
|
+ { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
|
|
|
+ ],
|
|
|
+ groupValueShow: true,
|
|
|
+ groupData: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: '1',
|
|
|
+ borderLeftColor: ColorEnum.BLUE,
|
|
|
+ ward: 'A区',
|
|
|
+ bed: '99',
|
|
|
+ cure: 'HDF/AVF',
|
|
|
+ name: '范了饭饭饭',
|
|
|
+ age: 20,
|
|
|
+ gender: '1',
|
|
|
+ infoShow: false,
|
|
|
+ way: [
|
|
|
+ { label: '透前称量', type: '2' },
|
|
|
+ { label: '确认配方', type: '3' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ function handleAdd() {
|
|
|
+ timeOuter.value = false;
|
|
|
+ }
|
|
|
+ // 回调
|
|
|
+ function callTab(data) {
|
|
|
+ console.log('🚀 ~ file: index.vue:41 ~ callTab ~ data:', data);
|
|
|
+ tabSelected.value = data.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ function cellCard(data) {
|
|
|
+ console.log('🚀 ~ file: index.vue:106 ~ cellCard ~ data:', data);
|
|
|
+ }
|
|
|
+
|
|
|
+ function callHover() {
|
|
|
+ timeOuter.value = true;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ ::v-deep(.ant-form-item-label > label) {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-outer {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 20px;
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+
|
|
|
+ &_item {
|
|
|
+ padding: 0 30px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 30px;
|
|
|
+ color: #fff;
|
|
|
+ background: #0075ff;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
fan