hldy_app/component/rightItemssecond/index.vue

1506 lines
50 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 护嘱 -->
<template>
<!-- click是让抖动停止 -->
<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}"
@click="bottomisShaking=false;shakyTable = false">
<view class="right-container-title-nav">
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
ID12345678
</text>
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
名称未命名01
</text>
<view class="right-icons">
<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
</view>
<view class="right-container-title-class-anhei-button" @click="darkFanschange()" v-show="!darkFans">
<text class="right-container-title-class-anhei">
切换到暗黑模式
</text>
</view>
<view class="right-container-title-class-anhei-button" :style="darkFans ? { backgroundColor:'#fff' } : {}"
@click="darkFanschange()" v-show="darkFans">
<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
取消暗黑模式
</text>
</view>
</view>
<view class="doctorsay-container-view">
<view class="doctorsay-container-items">
<view class="doctorsay-container-up">
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
<view class="doctorsay-container-card"
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
<image class="doctorsay-container-card-img"
:src="index === upmenuIndex ? item.targetUrl : item.url" />
<view
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
{{ item.name }}
</view>
</view>
</view>
<view>
<view class="doctorsay-container-card"
style="background: linear-gradient(135deg, #01e7be 0%, #0080dd 100%);">
<image class="doctorsay-container-card-img" src="/static/index/shexiang.png" />
<view class="doctorsay-container-card-font-dark">
监控
</view>
</view>
</view>
</view>
<view class="doctorsay-container-down">
<view class="doctorsay-top">
<view class="doctorsay-top-gun"></view>
<view class="doctorsay-top-font">服务类型</view>
</view>
<scroll-view :scroll-y="canmove" class="doctorsay-container-scroll" @scroll="handleScroll">
<view v-for="(item,index) in downList" :key="index">
<view class="doctorsay-container-button" @touchstart="handleTouchStart(item,index,$event)"
@touchmove="handleTouchMove" @touchend="handleTouchEnd">
<text
:class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
:style="{
backgroundColor: item.color ? item.color : '',
...(isBack ? {} : { width: '250rpx', height: '75rpx', fontSize: '30rpx', borderRadius: '10rpx' })
}">{{item.title}}</text>
<image v-show="downmenuIndex===index" class="doctorsay-container-button-uplight"
:style="isBack?{}:{top:'30rpx'}" :src="`/static/index/cardicons/uplight.png`" />
</view>
</view>
</scroll-view>
</view>
</view>
<view class="doctorsay-container-container">
<view class="doctorsay-container-title">
<view class="doctorsay-container-left">
<view class="doctorsay-container-left-gun"></view>
<view class="doctorsay-container-left-font">时间矩阵</view>
<view class="doctorsay-container-share" @click="shareToWeixin">
分享到微信
</view>
</view>
<view class="doctorsay-container-right">
<view class="doctorsay-container-right-kuai-cheng"></view>
<view class="doctorsay-container-kuai-font">日常</view>
<view class="doctorsay-container-right-kuai-zi"></view>
<view class="doctorsay-container-kuai-font">周期</view>
<view class="doctorsay-container-button-father" v-for="(item,index) in rightList" :key="index">
<view
:class="rightListIndex===index?`doctorsay-container-button-target`:`doctorsay-container-button`"
@click="rightListClick(index)">
{{item}}
</view>
</view>
<view class="doctorsay-container-juzhen" @click="routerPush">
预览
</view>
</view>
</view>
<view class="super-card">
<view class="super-card-container">
<!-- 气泡 top: `${2 * scrollTop - 253}rpx` -->
<view class="boom">
<view :style="{ marginTop: `-${2 *moveDownNumber}rpx` }">
<view v-for="(item,index) in timearr[0].children" :key="index">
<view
:class="touchindex1 === index ||(liang.index1 === index && !canmove) || (flyNumber.index1 === index && shakyTable) ? `boom-son-target`: `boom-son`"
v-show="item.typeName">
{{item.typeName}}
</view>
</view>
</view>
</view>
<swiper :disable-touch="!canmove || shakyTable" :current="currentNumber" class="scroll-x"
circular :indicator-dots="false" @change="changecurrentNumber" :interval="4000"
:duration="500">
<swiper-item v-for="(item,index) in [1,2,3,4]" :key="index">
<view
style="display: flex;box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);background: linear-gradient(to right, #c4dbf4,#c9c2ef, #c6dcf3);">
<view v-for="(item0,index0) in timearr.slice(index * 6, (index + 1) * 6)"
:key="index0">
<view class="super-card-time"
:style="rightListIndex ? { width: '274rpx' } : { width: '206rpx' }">
{{(item0.positioning.length == 1 ? ('0' + item0.positioning) : item0.positioning) + ":00"}}
</view>
</view>
</view>
<view style="display: flex;height: calc(100% - 80rpx);">
<scroll-view style="height: 100%;" :scroll-top="scrollTop"
:scroll-y="canmove && !shakyTable" @scroll="handleScrolltime"
:style="rightListIndex ? { width: '6700rpx' } : { width: '5000rpx' }"
:show-scrollbar="false">
<view style="display: flex;height: 100%;">
<view v-for="(item0,index0) in timearr.slice(index * 6, (index + 1) * 6)"
:key="index0">
<view class="super-card-time-und"
:style="rightListIndex ? { width: '274rpx' } : { width: '206rpx' }">
<view v-for="(item1,index1) in item0.children" style="width: 100%;"
:key="index1">
<view
:class="targetRuler.current===currentNumber && targetRuler.index0 === index0 && targetRuler.index1 === index1 ? targetRuler.index1 ?`title-time-border-big`:`title-time-border-big-top` : `super-card-time-card` "
:style="!targetRuler.bordershow && saveRulerTime.index0 === index0 && saveRulerTime.index1 === index1 ? {zIndex:999} : {borderTop: '1rpx solid transparent'}"
:id="`a${index0}_${index1}`" style="position: relative;"
@click="rulerTouchClick(item1,index0,index1,$event)"
@touchstart="rulerTouchStart(item1,index0,index1,$event)"
@touchmove="rulerTouchMove" @touchend="rulerTouchEnd()"
:data-index0="index0" :data-index1="index1">
<view class="title-time-delete"
v-show="liang.index0 !== index0 || liang.index1 !== index1 || canmove"
v-if="item1.directiveName&&shakyTable "
@click.stop="deleteItems(item1,index0,index1)">
-
</view>
<view :class="getClass(item1,index0,index1)"
style="font-size: 30rpx;overflow: hidden;"
:style="{ animationDelay:`-${computeDelay(index0, index1).toFixed(2)}s` }">
<view class="title-time" v-if="item1.startTime"
v-show=" liang.index0 !== index0 || liang.index1 !== index1 || canmove"
style="margin-top: 5rpx;">
<view class="title-time-time"
style="font-size: 30rpx;">
{{item1.startTime + `-` + item1.endTime}}
</view>
<image class="title-time-button"
:src="item1.cycleType=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
<view class="title-time-font">
{{item1.cycleType}}
</view>
</view>
<view style="margin-top: 20rpx;font-weight: 700;"
v-show=" liang.index0 !== index0 || liang.index1 !== index1 || canmove">
{{splitString(item1.directiveName)[0]}}
</view>
<view class="down-icons"
v-show=" liang.index0 !== index0 || liang.index1 !== index1 || canmove"
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
v-if="splitString(item1.directiveName)[1]">
<view class=""
v-for="(item,index) in splitString(item1.directiveName).slice(1)"
:key="index">
<view class="icon"
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
{{splitString(item1.directiveName)[index + 1]}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="super-card-end">
<view class="super-end-father">
<view class="super-end-font-father">
<view class="super-end-font-gun"></view>
<view class="super-end-font-font">即时指令</view>
</view>
<scroll-view scroll-x class="super-end-items-all" :scroll-left="scrollLeft">
<view class="super-end-items">
<view v-for="(item,index) in bottomItems" :key="index">
<view @touchstart="bottomTouchStart" @touchmove="bottomTouchMove"
@touchend="bottomTouchEnd"
:style="item.target?{background: item.target,transition:`all 1.5s ease-in-out`}:{transition:`all 1.5s ease-in-out`}"
class="super-end-items-father">
<view class="super-end-items-father-close-father" v-show="bottomisShaking"
@click.stop="deletebottom(index,item.name)">
-
</view>
<view :style="{ animationDelay:`-${index * 0.1}s` }"
:class="bottomisShaking?`super-end-items-img-father-active`:`super-end-items-img-father`">
<image class="super-end-items-img" :src="item.url" />
</view>
<view class="super-end-items-font">{{item.name}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
<!-- 长按的弹出层 -->
<view v-show="isopen" class="popup-overlay" @click="isopen=false;flyNumber.index0=999;touchindex1=-1">
<view class="popup-overlay-content"
:style="{ top: (2*openY - 350) + 'rpx',left: (2*openX - 780) + 'rpx',opacity: isopacity ? 1 : 0,backgroundColor:timearr[flyNumber.index0]?.children[flyNumber.index1]?.type==='日常'? '#fffcf6':'rgb(246, 244, 254)' }"
@click.stop>
<view class="popup-overlay-content-left">
<image class="popup-overlay-content-left-img" :src="`/static/index/teeth.png`" />
<text class="popup-overlay-content-left-font">
{{ timearr[flyNumber.index0]?.children[flyNumber.index1]?.value }}
</text>
</view>
<view class="popup-overlay-content-right">
<view class="time-font">
10:00 - 10:10
</view>
<view class="time-text">
为老人提供口腔清洁器具,牙膏、牙刷及水杯,看护完成
</view>
</view>
</view>
</view>
<!-- 拉动松手的弹出层 -->
<view v-if="songisopen" class="popup-song" @click="songisopen=false">
<view class="popup-song-contain" :style="{opacity: songisopacity ? 1 : 0}" @click.stop>
<view class="popup-song-father">
<image class="shu-up-img" src="/static/index/cheng.png" />
<view class="shu-up-font">
<view class="">
服务时段:{{ openValue.time + ":00"}}
</view>
<view style="margin-left: 30rpx;">
护理时长10分钟
</view>
</view>
<view class="shu-container-left">
<view class="shu-container-left-gun"></view>
<view class="shu-container-left-font">服务指令</view>
</view>
<view class="arrayindex">
<view v-for="(item,index) in openValue.array" :key="index">
<view style="position: relative;box-shadow: 10rpx 10rpx 20rpx rgba(105, 129, 178, 0.4)"
:class="cardsumit.op.index[2]===index?`arrayindex-one-target`:`arrayindex-one`"
@click="clickOp(index,item)">
<image class="ri-img" v-show="item.cycleType ==='日常护理'"
:src="cardsumit.op.index[2]!==index? `/static/index/ridark.png`:`/static/index/ri.png`" />
<image class="ri-img" v-show="item.cycleType ==='周期护理'"
:src="cardsumit.op.index[2]==index? `/static/index/zhoudark.png`:`/static/index/zhou.png`" />
<image class="ri-img" v-show="item.cycleType ==='即时护理'"
:src="cardsumit.op.index[2]==index? `/static/index/jidark.png`:`/static/index/ji.png`" />
{{item.relName}}
</view>
</view>
</view>
<view class="shu-container-left" style="margin-top: 50rpx;" v-show="openOp!=2">
<view class="shu-container-left-gun"></view>
<view class="shu-container-left-font">开始分钟</view>
</view>
<view class="time-father" v-show="openOp!=2">
<view v-for="(item,index) in timeArray" :key="index">
<view v-show="Number(item)>=50" class="time-one-hui">
{{item}}
</view>
<view v-show="Number(item)<50"
:class="cardsumit.startTime===item?`time-one-target`:`time-one`"
@click="clickTime(item)">
{{item}}
</view>
</view>
</view>
<view class="shu-container-left" style="margin-top: 50rpx;" v-show="openOp==1">
<view class="shu-container-left-gun"></view>
<view class="shu-container-left-font">周期类型</view>
</view>
<view class="radio-father" v-show="openOp==1">
<view :class="isweek?`radio-circle-target`: `radio-circle`"
@click="isweek=true;cardsumit.monthTime=''"></view>
<view class="radio-font" @click="isweek=true;cardsumit.monthTime=''">每周</view>
<view :class="!isweek?`radio-circle-target`: `radio-circle`"
@click="isweek=false;cardsumit.weekTime=''"></view>
<view class="radio-font" @click="isweek=false;cardsumit.weekTime=''">每月</view>
</view>
<view class="week-father" v-show="isweek&&openOp==1">
<view v-for="(item,index) in weekDays" :key="index">
<view :class="cardsumit.weekTime===item?`week-one-target`:`week-one`"
@click="clickweek(item)">
{{item}}
</view>
</view>
</view>
<view class="month-father" v-show="!isweek&&openOp==1">
<view v-for="(item,index) in days" :key="index">
<view :class="cardsumit.monthTime===item?`month-one-target`:`month-one`"
@click="clickmonth(item)">
{{item}}
</view>
</view>
</view>
<view class="button-father">
<view style="display: flex;">
<view class="button-father-right" @click="movetoruler" v-show="isblue()">
确定
</view>
<view class="button-father-wrong" v-show="!isblue()">
确定
</view>
<view class="button-father-wrong" @click="songisopen=false" style="margin-left: 20rpx;">
取消
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 删除表格的的弹出层 -->
<view v-show="deleteisopen" class="popup-delete" @click="deleteisopen=false">
<view class="popup-delete-content" :style="{ opacity: deleteisopacity ? 1 : 0 }" @click.stop>
<image class="popup-delete-img" src="/static/index/deleteicon.png" />
<view class="popup-delete-text">
确定要删除 {{deletename}} 吗?
</view>
<view class="popup-delete-button">
<view class="popup-delete-button-right" @click="deleteisopen=false">
取消
</view>
<view class="popup-delete-button-left" @click="deleteRuler(deleteindex[0],deleteindex[1])">
确定
</view>
</view>
</view>
</view>
<!-- 删除下方菜单的的弹出层 -->
<view v-show="deletedownisopen" class="popup-delete" @click="deletedownisopen=false">
<view class="popup-delete-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
<image class="popup-delete-img" src="/static/index/deleteicon.png" />
<view class="popup-delete-text">
确定要删除 {{deletename}} 吗?
</view>
<view class="popup-delete-button">
<view class="popup-delete-button-right" @click="deletedownisopen=false">
取消
</view>
<view class="popup-delete-button-left"
@click="bottomItems.splice(deletebottomindex, 1);deletedownisopen=false">
确定
</view>
</view>
</view>
</view>
<!-- 分享的弹出层 -->
<view v-show="shareShow" class="popup-share" @click="shareShow=false">
<view class="popup-share-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
<view class="popup-share-title">
护理日程分享
<image class="popup-share-img" src="/static/index/NU.png" />
</view>
<view class="popup-share-upcontent">
<view class="popup-share-font">久泰护理日程分享测试</view>
</view>
<view class="popup-share-gray"></view>
<view class="popup-share-downcontent">
<view class="popup-share-downcontent-left">
<image class="popup-downcontent-img" src="/static/index/NU.png" />
<view class="popup-downcontent-font">久泰护理</view>
</view>
<view class="popup-share-downcontent-button" @click="clickshare">
分享
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import type { roomBtttonType } from "./index";
import { getServiceTree, getNclist, addBatch } from "./api.js";
import index from '../../request';
const props = defineProps({
isshow: {
type: Boolean,
required: true,
},
darkFans: {
type: Boolean,
required: true,
},
canmove: {
type: Boolean,
required: true,
},
liang: {
type: Object,
}
});
watch(
() => props.canmove,
() => {
bottomisShaking.value = false;
})
watch(
() => props.isshow,
() => {
bottomisShaking.value = false
shakyTable.value = false
})
onMounted(() => {
})
const bottomItems = ref([
{
name: '纸尿裤',
url: "/static/index/niao.png"
},
{
name: '呕吐',
url: "/static/index/tu.png"
},
{
name: '吸痰',
url: "/static/index/ou.png"
},
{
name: '大便',
url: "/static/index/baba.png"
},
{
name: '纸尿裤',
url: "/static/index/niao.png"
},
{
name: '呕吐',
url: "/static/index/tu.png"
},
{
name: '吸痰',
url: "/static/index/ou.png"
},
{
name: '大便',
url: "/static/index/baba.png"
},
{
name: '纸尿裤',
url: "/static/index/niao.png"
},
{
name: '呕吐',
url: "/static/index/tu.png"
},
{
name: '吸痰',
url: "/static/index/ou.png"
},
{
name: '大便',
url: "/static/index/baba.png"
},
{
name: '纸尿裤',
url: "/static/index/niao.png"
},
{
name: '呕吐',
url: "/static/index/tu.png"
},
{
name: '吸痰',
url: "/static/index/ou.png"
},
{
name: '大便',
url: "/static/index/baba.png"
},
])
const timeArray = [
`00`, `05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`
];
const weekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const days = Array.from({ length: 31 }, (_, i) => (i + 1).toString().padStart(2, "0"));
const isweek = ref(true);
//弹窗
// const containerRef = ref(null);
const scrollLeft = ref(0);
//移动表格
const scrollTop = ref(0)
//左下的数组
const downList = ref<any>()
//左下的数组
const rightList = ref<String[]>([
// "三分段",
// "四分段",
])
const bigArray = ref([]);
const isopen = ref(false)
const songisopen = ref(false)
const isopacity = ref(false)
const songisopacity = ref(false)
// 删除表格弹窗
const deleteisopen = ref(false);
const deletename = ref("")
const deleteisopacity = ref(false)
//第几套表格
const currentNumber = ref(1);
const scrollKey = ref(0);
function pseudoRandom(index0, index1) {
const seed = index0 * 55.9898 + index1 * 78.233;
// 产生一个伪随机数,取小数部分
return Math.abs(Math.sin(seed) * 43758.5453) % 1;
}
function computeDelay(index0, index1) {
const range = 2; // 延迟范围 0 ~ 2 秒
return pseudoRandom(index0, index1) * range;
}
const changecurrentNumber = (event : any) => {
currentNumber.value = event.detail.current;
nextTick(() => {
scrollTop.value = moveDownNumber.value;
})
};
//监听拖拽
const dragOffset = ref(0);
const moveDownNumber = ref(0)
function handleScrolltime(e) {
let num = e.detail.scrollTop
let formattedNum = parseFloat(num.toFixed(2));
moveDownNumber.value = formattedNum
}
const changeBug = ref(true);
const nextItems = () => {
currentNumber.value > 2 ? currentNumber.value = 0 : currentNumber.value++
}
// 方法:根据条件返回不同的类名
const getClass = (item, index0, index1) => {
if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1 && (redNameindex0.value.includes(index0 + (currentNumber.value * 6)) || (redNameindex1.value != index1))) {
return 'title-time-border-red';
}
else if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
return 'title-time-border-blue';
}
else if (item.cycleType === '日常') {
if (flyNumber.value.index0 === (index0 + (currentNumber.value * 6)) && flyNumber.value.index1 === index1 && shakyTable.value) {
return 'title-time-border-yellow-active-transparent';
} else if (shakyTable.value) {
return 'title-time-border-yellow-active';
} else {
return 'title-time-border-yellow';
}
} else if (item.cycleType) {
//为啥这么写,是因为动画写行内无效!!!
if (flyNumber.value.index0 === (index0 + (currentNumber.value * 6)) && flyNumber.value.index1 === index1 && shakyTable.value) {
return 'title-time-border-pouple-active-transparent';
}
else if (shakyTable.value) {
return 'title-time-border-pouple-active';
} else {
return 'title-time-border-pouple';
}
}
return 'title-time-border';
}
// 初始化下面侧单列表
const doctorsayList = ref<roomBtttonType[]>([
{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' },
{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },
]);
// 当前选中的菜单索引
const rightListIndex = ref<number>(1);
// const undermenuIndex = ref<number>(0);
const upmenuIndex = ref<number>(0);
const downmenuIndex = ref<number>(999);
// 暗黑模式
// const darkFans = ref<boolean>(false);
const underFans = ref<boolean>(false);
// 当前选中的菜单索引
const roomTar = ref<number[]>([]);
const emit = defineEmits(['darkchange', 'savename', 'saveruler', 'closename', 'changefangkuang']);
// 暗黑模式改变
const darkFanschange = () => {
emit('darkchange', !props.darkFans);
}
//变更左侧菜单
const changLeft = (index : number) => {
upmenuIndex.value = index
downList.value = bigArray.value[index].children
downmenuIndex.value = 999
}
// 变更右部菜单
const rightListClick = (index : number) => {
rightListIndex.value = index;
};
const timer = ref(null);//计时器
const elementsInfo = ref({})//所有表格的信息
const moveX = ref(0)
const moveY = ref(0)
const openX = ref(0)
const openY = ref(0)
const flyNumber = ref({
index0: 999,
index1: 999,
typeName: ''
})
const deletebottomindex = ref(-1);
const deletedownisopen = ref(false);
const deletedownisopacity = ref(false);
const deletebottom = (index : number, name : string) => {
bottomisShaking.value = false;
deletebottomindex.value = index;
shakyTable.value = false;
deletedownisopacity.value = false;
deletedownisopen.value = true;
deletename.value = name;
setTimeout(() => {
deletedownisopacity.value = true
}, 200)
}
const deleteindex = ref([-1, -1])
const deleteId = ref("");
const deleteItems = (item : any, index0 : number, index1 : number) => {
deleteindex.value = [-1, -1];
shakyTable.value = false;
bottomisShaking.value = false;
deleteisopacity.value = false;
deleteisopen.value = true;
deleteindex.value = [index0 + (currentNumber.value * 6), index1]
deletename.value = item.directiveName;
deleteId.value = item.id
setTimeout(() => {
deleteisopacity.value = true
}, 200)
}
const touchindex1 = ref(-1);
// 分享矩阵到微信
const shareShow = ref(false);
const shareToWeixin = () => {
shareShow.value = true;
deletedownisopacity.value = false;
setTimeout(() => {
deletedownisopacity.value = true
}, 100)
}
const clickshare = () => {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: "https://www.baidu.com/",
title: "护理日程分享",
summary: "九泰护理日程测试",
imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
success: function (res) {
console.log("success:");
},
fail: function (err) {
console.log("fail:");
}
});
}
//表格点击开始
const rulerTouchClick = (item : any, index0 : number, index1 : number, e : any) => {
if (item.directiveName) {
touchindex1.value = index1;
const query = uni.createSelectorQuery()
query
.selectAll('.super-card-time-card')
.boundingClientRect((data : any) => {
data.forEach(async (res : any) => {
// 根据你的条件筛选元素
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140 && res.dataset.index0 == index0 && res.dataset.index1 == index1) {
if (res.left > 200 && res.left < 500) {
// 表格太靠左侧,修改到右面
openX.value = Math.floor(res.left) + 520;
} else {
openX.value = Math.floor(res.left)
}
if (res.top > 140 && res.top < 300) {
// 表格太靠上侧,修改到下面
openY.value = Math.floor(res.top) + 250;
} else {
openY.value = Math.floor(res.top)
}
// openY.value = Math.floor(res.top);
await nextTick()
isopen.value = true;
isopacity.value = false;
//加动画
setTimeout(() => {
isopacity.value = true;
}, 100)
}
})
})
.exec()
}
}
const shakyTable = ref(false);
const reldata = ref([]);
//表格长按开始
const rulerTouchStart = (item : any, index0 : number, index1 : number, e : any) => {
scrollTop.value = moveDownNumber.value;
redNameindex0.value = [];
let index1Number = -1
moveX.value = Math.floor(e.touches[0].pageX);
moveY.value = Math.floor(e.touches[0].pageY);
timer.value = setTimeout(() => {
if (item.directiveName) {
timearr.value.forEach((element0 : any, index0 : number) => {
element0.children.forEach((element1 : any) => {
if (element1.typeName === item.typeName && element1.directiveName) {
redNameindex0.value.push(index0)
}
if (element1.directiveName) {
index1Number = index0
}
})
})
if (redNameindex0.value.length) {
redNameindex1.value = index1
} else {
redNameindex1.value = index1Number + 1
}
flyNumber.value.typeName = item.typeName
flyNumber.value.index0 = index0 + (currentNumber.value * 6);
flyNumber.value.index1 = index1;
indexsave.value = [-1, -1]
reldata.value = []
isTuoing.value = true;
const query = uni.createSelectorQuery()
query
.selectAll('.super-card-time-card')
.boundingClientRect((data : any) => {
data.forEach(async (res : any) => {
// 根据你的条件筛选元素
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140) {
shakyTable.value = true;
reldata.value.push(res)
}
})
})
.exec()
emit('saveruler', item, reldata.value);
}
}, 100); // 2秒后触发
}
const rulerTouchMove = (e : any) => {
const moveXa = Math.floor(e.touches[0].pageX);
const moveYa = Math.floor(e.touches[0].pageY);
// 计算移动距离
if (
Math.abs(moveXa - moveX.value) > 0 ||
Math.abs(moveYa - moveY.value) > 0
) {
// 移动时取消长按计时器
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
}
//表格长按结束
const rulerTouchEnd = () => {
isTuoing.value = false;
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
const deleteRuler = (index0 : number, index1 : number) => {
timearr.value[index0].children[index1] = { directiveName: "" };
isopen.value = false;
flyNumber.value.index0 = 999;
flyNumber.value.index1 = 999;
let emptyChildIndices = [];
let emptyChildNumber = 0;
timearr.value.forEach((res : any, rowIndex : number) => {
emptyChildIndices = [];
emptyChildNumber = res.children.length;
// 遍历 res.children 数组中的每个子元素 child
res.children.forEach((child, index) => {
// 检查 child 的 value 属性是否为空
if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {
// 如果是空值,检查其他 res.children 中相同索引的元素
const isEmptyInAllRows = timearr.value.every((otherRes) => {
const otherChild = otherRes.children[index];
return otherChild === undefined || otherChild.directiveName === null || otherChild.directiveName === '' || otherChild.directiveName === undefined;
});
// 如果在所有行中该位置的 value 都为空,记录该索引
if (isEmptyInAllRows) {
emptyChildIndices.push(index);
}
}
});
})
if (emptyChildNumber > 4 && emptyChildIndices.length > 1) {
timearr.value.forEach((res : any, rowIndex : number) => {
res.children.splice(emptyChildIndices[0], 1)
})
} else {
timearr.value.forEach((res : any, rowIndex : number) => {
res.children.splice(emptyChildIndices[0], 1);
res.children.push({ directiveName: '' })
})
}
deleteisopen.value = false;
saveAll()
}
const longPressTimer = ref(null);
const isScrolling = ref(false)
//长按计时器
let scrollTimeout = null
function handleScroll(e) {
isScrolling.value = true
// 清除之前的定时器
if (scrollTimeout) clearTimeout(scrollTimeout)
// 设置新的定时器
scrollTimeout = setTimeout(() => {
isScrolling.value = false;
}, 400)
}
const isBack = ref(false)
const saveX = ref(0);
const saveY = ref(0);
const isTuoing = ref(false);
//给红色表格用
const redNameindex0 = ref([]);
const redNameindex1 = ref(-1);
// 存储菜单的id
const saveId = ref("");
const saveTagName = ref("");
//左下菜单长按开始
const handleTouchStart = (item : any, index : number, e : any) => {
// console.log("????", item)
scrollTop.value = moveDownNumber.value;
shakyTable.value = false
saveX.value = Math.floor(e.touches[0].pageX);
saveY.value = Math.floor(e.touches[0].pageY);
longPressTimer.value = setTimeout(() => {
let noHave = false;
timearr.value[0].children.forEach((element : any, index0 : number) => {
if (element.typeName === item.title) {
scrollTop.value = 0
scrollTop.value = index0 * 104
noHave = true
}
})
if (!noHave) {
scrollTop.value = 0
scrollTop.value = 999
}
}, 190)
//执行方法
longPressTimer.value = setTimeout(() => {
redNameindex0.value = [];
if (isScrolling.value) return
let index1save = -1;
let indexanthersave = -1;
timearr.value.forEach((element0 : any, index0 : number) => {
element0.children.forEach((element1 : any, index1 : number) => {
// console.log("!!!!",element1)
if (element1.typeName === item.title && element1.directiveName) {
redNameindex0.value.push(index0)
index1save = index1
}
if (element1.directiveName) {
if (index1 > indexanthersave) {
indexanthersave = index1
}
}
})
})
if (redNameindex0.value.length) {
redNameindex1.value = index1save
} else {
redNameindex1.value = indexanthersave + 1
}
// redName.value = item;
isBack.value = true;
downmenuIndex.value = index
indexsave.value = [-1, -1]
isTuoing.value = true;
// const reldata = []
reldata.value = []
const query = uni.createSelectorQuery()
query
.selectAll('.super-card-time-card')
.boundingClientRect((data : any) => {
data.forEach((res : any) => {
// 根据你的条件筛选元素
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140) {
reldata.value.push(res)
}
})
})
.exec()
emit('savename', item.title, reldata.value);
}, 200)
}
function isblue() {
if (((!openOp.value) && cardsumit.value.startTime) || (openOp.value === 1 && cardsumit.value.startTime && (cardsumit.value.weekTime || cardsumit.value.monthTime)) || openOp.value === 2) {
return true
} else {
return false
}
}
const handleTouchMove = (e : any) => {
const moveX = Math.floor(e.touches[0].pageX);
const moveY = Math.floor(e.touches[0].pageY);
// 计算移动距离
if (
Math.abs(moveX - saveX.value) > 0 ||
Math.abs(moveY - saveY.value) > 0
) {
if (longPressTimer.value) {
clearTimeout(longPressTimer.value)
longPressTimer.value = null
}
}
}
const handleTouchEnd = () => {
isTuoing.value = false;
if (longPressTimer.value) {
clearTimeout(longPressTimer.value)
longPressTimer.value = null
}
}
const bottomTimer = ref(null);
const bottomisShaking = ref(false);
const bottomTouchStart = (e) => {
saveX.value = Math.floor(e.touches[0].pageX);
saveY.value = Math.floor(e.touches[0].pageY);
// 2秒后触发抖动效果
bottomTimer.value = setTimeout(() => {
bottomisShaking.value = true
}, 500)
}
const bottomTouchMove = (e) => {
const moveX = Math.floor(e.touches[0].pageX);
const moveY = Math.floor(e.touches[0].pageY);
// 计算移动距离
if (
Math.abs(moveX - saveX.value) > 0 ||
Math.abs(moveY - saveY.value) > 0
) {
if (bottomTimer.value) {
clearTimeout(bottomTimer.value)
bottomTimer.value = null
}
}
}
const bottomTouchEnd = () => {
if (bottomTimer.value) {
clearTimeout(bottomTimer.value)
bottomTimer.value = null
}
}
const openValue = ref({
time: "",
array: []
})
const cardsumit = ref({
op: {
name: "",
index: [-1, -1, -1],
},
startTime: "",
monthTime: "",
weekTime: ""
})
const openOp = ref(0);
const clickOp = (index : number, item : any) => {
cardsumit.value.startTime = ""
cardsumit.value.monthTime = ""
cardsumit.value.weekTime = ""
saveId.value = item.id;
saveTagName.value = item.tagName
if (cardsumit.value.op.index[2] === index) {
cardsumit.value.op.index[2] = -1;
cardsumit.value.op.name = ""
openOp.value = -1
} else {
cardsumit.value.op.index[2] = index
cardsumit.value.op.name = item.relName
switch (item.cycleType) {
case `日常护理`:
openOp.value = 0
break;
case `周期护理`:
openOp.value = 1
break;
case `即时护理`:
openOp.value = 2
break;
default:
break;
}
}
}
const clickTime = (index : string) => {
if (cardsumit.value.startTime == index) {
cardsumit.value.startTime = ""
} else {
cardsumit.value.startTime = index
}
}
const clickweek = (index : string) => {
if (cardsumit.value.weekTime == index) {
cardsumit.value.weekTime = ""
} else {
cardsumit.value.weekTime = index
}
}
const clickmonth = (index : string) => {
if (cardsumit.value.monthTime == index) {
cardsumit.value.monthTime = ""
} else {
cardsumit.value.monthTime = index
}
}
const indexsave = ref([-1, -1]);
//表格拖动结束
const rulerEnd = async (res : any) => {
isBack.value = false;
if (props.liang.index0 !== 999 && res) {
//检测拖动是否超出范围和是否不合法
if (redNameindex0.value.includes(props.liang.index0 + (currentNumber.value * 6)) || redNameindex1.value !== props.liang.index1) {
return false;
}
cardsumit.value = {
op: {
name: "",
index: [-1, -1, -1],
},
startTime: "",
monthTime: "",
weekTime: ""
}
songisopacity.value = false;
//虚化的动画
songisopen.value = true;
setTimeout(() => {
songisopacity.value = true
}, 200)
// 存储 两个index
cardsumit.value.op.index[0] = upmenuIndex.value
cardsumit.value.op.index[1] = downmenuIndex.value
// 存储时间和二级数组
openValue.value.time = timearr.value[props.liang.index0 + (currentNumber.value * 6)].positioning;
openValue.value.array = bigArray.value[upmenuIndex.value].children[downmenuIndex.value].children
//将逗号换成()
openValue.value.array.forEach((element : any) => {
element.relName = element.title + (element.tagName ? element.tagName.split(",").map(item => `${item}`).join("") : "")
})
//存储选中表格的坐标
indexsave.value = [props.liang.index0 + (currentNumber.value * 6), props.liang.index1]
//开启弹窗
clickOp(0, openValue.value.array[0])
}
}
// (长按表格后)表格拖动结束
const rulerMoveEnd = (object : any) => {
if (props.liang.index0 !== 999 && object.cycleType) {
if (redNameindex0.value.includes(props.liang.index0 + (currentNumber.value * 6)) || redNameindex1.value !== props.liang.index1) {
return false;
}
indexsave.value = [props.liang.index0 + (currentNumber.value * 6), props.liang.index1]
let savaIndex = -1;
let emptyChildIndices = [];
timearr.value.forEach((res : any, rowIndex : number) => {
// 检测行列空则去除
emptyChildIndices = [];
// 遍历 res.children 数组中的每个子元素 child
res.children.forEach((child, index) => {
// 检查 child 的 value 属性是否为空
if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {
// 如果是空值,检查其他 res.children 中相同索引的元素
const isEmptyInAllRows = timearr.value.every((otherRes) => {
const otherChild = otherRes.children[index];
return otherChild === undefined || otherChild.directiveName === null || otherChild.directiveName === '' || otherChild.directiveName === undefined;
});
// 如果在所有行中该位置的 value 都为空,记录该索引
if (isEmptyInAllRows) {
emptyChildIndices.push(index);
}
}
});
// 检测是否已经没有东西了
res.children.forEach((item : any, index : number) => {
if (item.typeName == object.typeName) {
savaIndex = index
}
})
})
if (savaIndex === -1) {
//如果有东西,则自动顶到下一排空行
savaIndex = emptyChildIndices[0]
}
let haveAnyItem = 0;
let savetypeName = "";
timearr.value.forEach((element : any) => {
if (element.children[0].value) {
haveAnyItem++
savetypeName = element.children[0].typeName
}
})
// 防止覆盖typeName
if (haveAnyItem > 1) {
timearr.value[flyNumber.value.index0].children[flyNumber.value.index1] = { directiveName: '', typeName: savetypeName }
} else {
timearr.value[flyNumber.value.index0].children[flyNumber.value.index1] = { directiveName: '' }
}
let parentHour = 0
timearr.value[indexsave.value[0]].children[savaIndex] = object
let startTime = timearr.value[indexsave.value[0]].children[savaIndex].startTime;
let endTime = timearr.value[indexsave.value[0]].children[savaIndex].endTime;
let positioning = timearr.value[indexsave.value[0]].positioning
const rest = startTime.substring(startTime.indexOf(":")); // ":20"
const rest0 = endTime.substring(endTime.indexOf(":")); // ":20"
// 用 positioning 替换原来的小时部分
timearr.value[indexsave.value[0]].children[savaIndex].startTime = positioning + rest; // "9:20"
timearr.value[indexsave.value[0]].children[savaIndex].endTime = positioning + rest0; // "9:20"
// 检查是否有任意一个对象的 children 数组最后一个对象的 value 有值
const shouldAdd = timearr.value.some(obj => {
const children = obj.children;
return children[children.length - 1].directiveName.trim() !== '';
});
// 如果满足条件,则为每个对象的 children 数组追加一个新对象
if (shouldAdd) {
timearr.value.forEach(obj => {
obj.children.push({ directiveName: '' });
});
// 先将 scrollTop 重置为 0
scrollTop.value = 999
// 等待 DOM 更新完成
// 设置一个足够大的值让 scroll-view 滚动到底部
scrollTop.value = 9999
}
saveAll()
}
}
const scrollContainer = ref(null)
const movetoruler = async () => {
//关闭弹窗
songisopen.value = false;
// 还原成默认选项
isweek.value = true;
let savaIndex = -1;
let emptyChildIndices = [];
//如果是即时指令直接干掉
if (openOp.value === 2) {
scrollLeft.value = 1;
nextTick(() => {
scrollLeft.value = 0;
bottomItems.value.unshift({
name: cardsumit.value.op.name,
url: "/static/index/ou.png",
target: `#00a8ff`
})
// 实现即时指令动画
setTimeout(() => {
bottomItems.value[0].target = `#fff`;
}, 1500)
setTimeout(() => {
bottomItems.value[0].target = "";
}, 3000)
})
return
}
//找空行
timearr.value.forEach((res : any, rowIndex : number) => {
emptyChildIndices = [];
// 遍历 res.children 数组中的每个子元素 child
res.children.forEach((child, index) => {
// 检查 child 的 value 属性是否为空
if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {
// 如果是空值,检查其他 res.children 中相同索引的元素
const isEmptyInAllRows = timearr.value.every((otherRes) => {
const otherChild = otherRes.children[index];
return otherChild === undefined || otherChild.directiveName === null || otherChild.directiveName === '' || otherChild.directiveName === undefined;
});
// 如果在所有行中该位置的 directiveName 都为空,记录该索引
if (isEmptyInAllRows) {
emptyChildIndices.push(index);
}
}
});
//如果选定的左侧菜单,在表格中有同类,则记录同类
res.children.forEach((item : any, index : number) => {
if (item.typeName == bigArray.value[cardsumit.value.op.index[0]].children[cardsumit.value.op.index[1]].title) {
savaIndex = index
}
})
})
// 没同类,则新开一行
if (savaIndex === -1) {
savaIndex = emptyChildIndices[0]
}
//将一行所有的typeName变成新添加的typeName
let savetypeName = bigArray.value[cardsumit.value.op.index[0]].children[cardsumit.value.op.index[1]].title
await nextTick();
timearr.value.forEach((element : any, index : number) => {
element.children[savaIndex].typeName = savetypeName;
})
let cycleType = ""
//看看是啥指令
if (!openOp.value) {
cycleType = "日常";
} else if (openOp.value === 1) {
cycleType = cardsumit.value.weekTime || (cardsumit.value.monthTime + '号');
}
const startHour = Number(openValue.value.time)
const startMinute = Number(cardsumit.value.startTime)
const endMinute = startMinute + 10
const endHour = startHour + Math.floor(endMinute / 60)
const formattedStart = `${String(startHour)}:${String(startMinute).padStart(2, '0')}`
const formattedEnd = `${String(endHour)}:${String(endMinute % 60).padStart(2, '0')}`
//表格的时间
if (savaIndex !== -1) {
timearr.value[indexsave.value[0]].children[savaIndex].startTime = formattedStart
timearr.value[indexsave.value[0]].children[savaIndex].endTime = formattedEnd
} else {
timearr.value[indexsave.value[0]].children[indexsave.value[1]].startTime = formattedStart
timearr.value[indexsave.value[0]].children[indexsave.value[1]].endTime = formattedEnd
}
let param = {
directiveId: saveId.value,
directiveName: cardsumit.value.op.name,
startTime: formattedStart,
endTime: formattedEnd,
positioning: indexsave.value[0].toString(),
positioningLong: indexsave.value[1].toString(),
tagName: saveTagName.value,
cycleType: cycleType,
nuId: "1",
customerId: "1",
id: "",
typeName: savetypeName,
}
//给表格赋值
timearr.value[indexsave.value[0]].children[savaIndex] = param;
let allArray = [];
timearr.value.forEach((element : any) => {
element.children.forEach((res : any) => {
allArray.push(res)
})
})
const shouldAdd = timearr.value.some(obj => {
const children = obj.children;
return children[children.length - 1].directiveName.trim() !== '';
});
// 如果满足条件,则为每个对象的 children 数组追加一个新对象
if (shouldAdd) {
timearr.value.forEach(obj => {
obj.children.push({ directiveName: '' });
});
// 先将 scrollTop 重置为 0
scrollTop.value = 999
// 等待 DOM 更新完成
nextTick()
// 设置一个足够大的值让 scroll-view 滚动到底部
scrollTop.value = 9999
}
saveAll()
}
const saveAll = () =>{
//给后端编译一下
let postArray = [];
timearr.value.forEach((element0, index0) => {
element0.children.forEach((element1, index1) => {
let saveTypeName = ""
if (!element1.directiveName && !element1.id) {
let array = {};
if (element1.typeName) {
saveTypeName = element1.typeName
}
array = JSON.parse(JSON.stringify(moBan.value))
saveTypeName ? array.typeName = saveTypeName : ""
array.positioning = index0
array.positioningLong = index1
postArray.push(array)
} else {
element1.positioning = index0;
element1.positioningLong = index1;
postArray.push(element1)
}
})
})
addBatch(postArray).then((res : any) => {
if (res.code == 200) {
getNclist().then((res : any) => {
timearr.value = res.result
})
}
})
}
const routerPush = () => {
uni.navigateTo({
url: `/pages/timeMatrix/index?currentNumber=${currentNumber.value}`
})
}
// 暂存器
const saveRulerTime = ref({
index0: -1,
index1: -1
})
const targetRuler = ref({
index0: -1,
index1: -1,
current: -1,
bordershow: true
})
const whereEvent = (data : any) => {
scrollTop.value = 0
scrollTop.value = data.index1 * 104
if (currentNumber.value === Math.floor(data.index0 / 6)) {
targetRuler.value.index0 = data.index0 - currentNumber.value * 6;
targetRuler.value.index1 = data.index1;
saveRulerTime.value.index0 = targetRuler.value.index0;
saveRulerTime.value.index1 = targetRuler.value.index1;
targetRuler.value.current = currentNumber.value
targetRuler.value.bordershow = false;
setTimeout(() => {
targetRuler.value.index0 = -1;
targetRuler.value.index1 = -1;
targetRuler.value.current = -1
}, 400)
setTimeout(() => {
targetRuler.value.bordershow = true;
saveRulerTime.value.index0 = -1;
saveRulerTime.value.index1 = -1;
}, 1000)
} else {
setTimeout(() => {
currentNumber.value = Math.floor(data.index0 / 6);
}, 100)
setTimeout(() => {
targetRuler.value.index0 = data.index0 - currentNumber.value * 6;
targetRuler.value.index1 = data.index1;
saveRulerTime.value.index0 = targetRuler.value.index0;
saveRulerTime.value.index1 = targetRuler.value.index1;
targetRuler.value.current = currentNumber.value
targetRuler.value.bordershow = false;
}, 800)
setTimeout(() => {
targetRuler.value.index0 = -1;
targetRuler.value.index1 = -1;
targetRuler.value.current = -1
}, 1400)
setTimeout(() => {
targetRuler.value.bordershow = true;
saveRulerTime.value.index0 = -1;
saveRulerTime.value.index1 = -1;
}, 2200)
}
}
onShow(() => {
getServiceTree().then((res : any) => {
bigArray.value = res.result
downList.value = bigArray.value[0].children
})
getNclist().then((res : any) => {
timearr.value = res.result
})
uni.$on('where', whereEvent);
})
onHide(() => {
uni.$off('where', whereEvent);
});
defineExpose({
rulerEnd,
rulerMoveEnd,
nextItems,
})
const moveNumber = ref({
index0: 999,
index1: 999
})
const moBan = ref({
directiveId: "",
directiveName: "",
startTime: "",
endTime: "",
positioning: "",
positioningLong: "",
tagName: "",
cycleType: "",
nuId: "1",
customerId: "1",
id: "",
typeName: ""
})
const timearr = ref(
Array.from({ length: 24 }, (_, hour) => ({
positioning: hour.toString(),
children: Array.from({ length: 4 }, () => ({ directiveName: '' }))
}))
)
// 切割bigArray
function splitString(str) {
// 使用正则表达式找到所有括号的内容
let result = [];
let remainingStr = str;
// 正则匹配最外层括号(支持全角和半角)
let regex = /([^(]*)[(]([^)]+)[)]/;
while (regex.test(remainingStr)) {
let match = remainingStr.match(regex);
if (match) {
// 添加括号前的部分(去掉空白)
if (match[1].trim()) {
result.push(match[1].trim());
}
// 添加括号内的内容
if (match[2].trim()) {
result.push(match[2].trim());
}
// 更新剩余的字符串
remainingStr = remainingStr.replace(match[0], '').trim();
}
}
// 如果最后还有剩余部分,也加入结果
if (remainingStr.trim()) {
result.push(remainingStr.trim());
}
return result;
}
</script>
<style lang="less" scoped>
// 主页的css
@import './index';
</style>