This commit is contained in:
parent
73c0a60c2a
commit
3dc64c826e
|
|
@ -1,49 +1,93 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
||||||
<view class="right-container-title-nav">
|
<view class="right-container-title-nav">
|
||||||
<text style="margin-left: 30rpx;">
|
<view class="title-card">
|
||||||
NUID：{{ uni.getStorageSync('nuId')}}
|
<view class="card-top">
|
||||||
</text>
|
<view class="card-top-left">
|
||||||
<text class="new-weight">
|
50
|
||||||
{{ uni.getStorageSync('nuName')}}
|
</view>
|
||||||
</text>
|
<view class="card-top-right">
|
||||||
<view class="right-icons">
|
<image class="right-img" src="/static/index/card/arrow.png" />
|
||||||
|
</view>
|
||||||
|
<view class="card-spec">
|
||||||
|
<view class="line">
|
||||||
|
</view>
|
||||||
|
<view class="line-gray">
|
||||||
|
80
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="card-bottom">
|
||||||
|
<image class="bottom-img" src="/static/index/card/help.png" />
|
||||||
|
<view class="bottom-font">
|
||||||
|
护理
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title-card">
|
||||||
|
<view class="card-top">
|
||||||
|
<view class="card-top-left">
|
||||||
|
32
|
||||||
|
</view>
|
||||||
|
<view class="card-top-right">
|
||||||
|
<image class="right-img" src="/static/index/card/arrow.png" />
|
||||||
|
</view>
|
||||||
|
<view class="card-spec">
|
||||||
|
<view class="line">
|
||||||
|
</view>
|
||||||
|
<view class="line-gray">
|
||||||
|
60
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="card-bottom">
|
||||||
|
<image class="bottom-img" src="/static/index/card/doctor.png" />
|
||||||
|
<view class="bottom-font">
|
||||||
|
医疗
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title-card">
|
||||||
|
<view class="card-top">
|
||||||
|
<view class="card-top-left">
|
||||||
|
65
|
||||||
|
</view>
|
||||||
|
<view class="card-top-right">
|
||||||
|
<image class="right-img" src="/static/index/card/arrow.png" />
|
||||||
|
</view>
|
||||||
|
<view class="card-spec">
|
||||||
|
<view class="line">
|
||||||
|
</view>
|
||||||
|
<view class="line-gray">
|
||||||
|
70
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="card-bottom">
|
||||||
|
<image class="bottom-img" src="/static/index/card/work.png" />
|
||||||
|
<view class="bottom-font">
|
||||||
|
行政
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title-time">
|
||||||
|
<view class="time-title">
|
||||||
|
{{ currentTime }}
|
||||||
|
</view>
|
||||||
|
<view class="time-date">
|
||||||
|
{{ fullDate }}
|
||||||
|
</view>
|
||||||
<view class="right-container-tem">
|
<view class="right-container-tem">
|
||||||
<image class="right-container-tem-img" src="/static/index/newindex/wendu/0.png" />
|
<image class="right-container-tem-img" src="/static/index/newindex/wendu/0.png" />
|
||||||
<text class="right-container-tem-text">{{ (uni.getStorageSync('NUall').humidDeviceList && uni.getStorageSync('NUall').humidDeviceList[0])? uni.getStorageSync('NUall').humidDeviceList[0].temperature: '-' }}°C</text>
|
<text class="right-container-tem-text">{{ (uni.getStorageSync('NUall').humidDeviceList && uni.getStorageSync('NUall').humidDeviceList[0])? uni.getStorageSync('NUall').humidDeviceList[0].temperature: '-' }}°C</text>
|
||||||
<image class="right-container-tem-img" src="/static/index/newindex/wendu/1.png" />
|
<image class="right-container-tem-img" src="/static/index/newindex/wendu/1.png" />
|
||||||
<text class="right-container-tem-text">{{ (uni.getStorageSync('NUall').humidDeviceList && uni.getStorageSync('NUall').humidDeviceList[0])? uni.getStorageSync('NUall').humidDeviceList[0].humidity: '-' }}%</text>
|
<text class="right-container-tem-text">{{ (uni.getStorageSync('NUall').humidDeviceList && uni.getStorageSync('NUall').humidDeviceList[0])? uni.getStorageSync('NUall').humidDeviceList[0].humidity: '-' }}%</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
|
|
||||||
<view>{{name}}</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll-vi">
|
|
||||||
<view class="zhezhao-left"></view>
|
|
||||||
<view class="zhezhao-right"></view>
|
|
||||||
<scroll-view scroll-x="true" style="width: 100%;height: 100%;">
|
|
||||||
<view style="display: flex;align-items: center;">
|
|
||||||
<view style="width: 30rpx;"></view>
|
|
||||||
<view v-for="(item,index) in typeArray" :key="index"
|
|
||||||
:class="{zerotarget: movetype===0 && zeroIndex===index}" class="menu"
|
|
||||||
:style="{backgroundColor: movetype===0 && zeroIndex===index?`#ddf0ff`:``}"
|
|
||||||
@click="typeNow=index;zeroIndex=index;clean();movetype=0;">
|
|
||||||
|
|
||||||
<donghua :links="item.url" :playing="typeNow===index" />
|
|
||||||
<text class="menu-font" :class="{ zoom: typeNow===index }"
|
|
||||||
:style="typeNow===index?{color:`#008FF5`}:{}">
|
|
||||||
{{item.name}}
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
<view style="width: 100rpx;">
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="photo-father">
|
<view class="photo-father">
|
||||||
<view class="juzhong" style="margin-left: -30rpx;">
|
<view class="juzhong" style="margin-left: -30rpx;">
|
||||||
<donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay" :loop="true"
|
<donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay" :loop="true"
|
||||||
|
|
@ -81,13 +125,12 @@
|
||||||
<image class="down-img" :src="`/static/index/newindex/states/right.png`" />
|
<image class="down-img" :src="`/static/index/newindex/states/right.png`" />
|
||||||
</view>
|
</view>
|
||||||
<view style="display: flex;margin-top: 40rpx;">
|
<view style="display: flex;margin-top: 40rpx;">
|
||||||
<view :class="{thirdtarget: movetype===3 && zeroIndex===0}"
|
<view style="width: 240rpx;height: 90rpx;margin-right: 40rpx;">
|
||||||
style="width: 240rpx;height: 90rpx;margin-right: 40rpx;">
|
|
||||||
<view class="start-button">
|
<view class="start-button">
|
||||||
开始服务
|
开始服务
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view :class="{thirdtarget: movetype===3 && zeroIndex===1}" style="width: 240rpx;height: 90rpx;">
|
<view style="width: 240rpx;height: 90rpx;">
|
||||||
<view class="end-button">
|
<view class="end-button">
|
||||||
结束服务
|
结束服务
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -96,9 +139,8 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left-menu">
|
<view class="left-menu">
|
||||||
<view v-for="(item,index) in leftArray" :key="index" style="margin: 30rpx 0;"
|
<view v-for="(item,index) in leftArray" :key="index" style="margin: 30rpx 0;">
|
||||||
:class="{firsttarget: movetype===1 && zeroIndex===index}">
|
<view class="left-ball">
|
||||||
<view class="left-ball" :style="{backgroundColor: movetype===1 && zeroIndex===index?`#ddf0ff`:``}">
|
|
||||||
<image class="left-menu-img" :src="item" />
|
<image class="left-menu-img" :src="item" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
@ -110,13 +152,11 @@
|
||||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`"
|
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`"
|
||||||
@click="scrollTop>0? scrollTop -= 115:scrollTop=0" />
|
@click="scrollTop>0? scrollTop -= 115:scrollTop=0" />
|
||||||
<scroll-view scroll-y="true" class="right-scroll" :scroll-top="scrollTop" @scroll="onScroll">
|
<scroll-view scroll-y="true" class="right-scroll" :scroll-top="scrollTop" @scroll="onScroll">
|
||||||
<view style="height: 30rpx;">
|
<view style="height: 20rpx;">
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view v-for="(item,index) in rightMenu" :class="{secondtarget: movetype===2 && zeroIndex===index}"
|
<view v-for="(item,index) in rightMenu" style="margin: 20rpx 0;width: 110rpx;margin-left: 20rpx;">
|
||||||
style="margin: 20rpx auto;width: 110rpx;">
|
<view class="white-circle">
|
||||||
<view class="white-circle"
|
|
||||||
:style="{backgroundColor: movetype===2 && zeroIndex===index?`#ddf0ff`:``}">
|
|
||||||
<image class="right-menu-img" :src="item.url" />
|
<image class="right-menu-img" :src="item.url" />
|
||||||
<view class="right-menu-name">
|
<view class="right-menu-name">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|
@ -132,15 +172,30 @@
|
||||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`"
|
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`"
|
||||||
@click="scrollTop > (55* rightMenu.length) ? scrollTop = (55* rightMenu.length) : scrollTop += 115 " />
|
@click="scrollTop > (55* rightMenu.length) ? scrollTop = (55* rightMenu.length) : scrollTop += 115 " />
|
||||||
</view>
|
</view>
|
||||||
<!-- 轮盘 -->
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="index-content-right" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
||||||
|
<view class="right-top">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="right-bottom">
|
||||||
|
<view class="bottom-title">
|
||||||
|
<image class="bottom-carmera" src="/static/index/newindex/leftmenu/carmera.png" />
|
||||||
|
<view class="blue-button">
|
||||||
|
长者标签
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<image class="big-older" src="/static/index/newindex/leftmenu/older.png" />
|
||||||
|
<view class="name-weight">
|
||||||
|
{{ uni.getStorageSync('NUall').elderInfo?.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -204,8 +259,8 @@
|
||||||
])
|
])
|
||||||
const leftArray = ref(genPaths(
|
const leftArray = ref(genPaths(
|
||||||
'/static/index/newindex/leftmenu',
|
'/static/index/newindex/leftmenu',
|
||||||
'',
|
'left',
|
||||||
3, // 张数
|
5, // 张数
|
||||||
'png',
|
'png',
|
||||||
0, // 起始索引
|
0, // 起始索引
|
||||||
false // 不补零
|
false // 不补零
|
||||||
|
|
@ -257,6 +312,7 @@
|
||||||
// console.log("????",transition.value)
|
// console.log("????",transition.value)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
transition.value = true;
|
transition.value = true;
|
||||||
|
// console.log("看看",uni.getStorageSync('NUall'))
|
||||||
}, 50)
|
}, 50)
|
||||||
} else {
|
} else {
|
||||||
transition.value = false;
|
transition.value = false;
|
||||||
|
|
@ -267,52 +323,87 @@
|
||||||
const name = ref("");
|
const name = ref("");
|
||||||
|
|
||||||
// 定义响应式数据现在时间
|
// 定义响应式数据现在时间
|
||||||
// const currentTime = ref('');
|
const currentTime = ref('');
|
||||||
// const fullDate = ref('');
|
const fullDate = ref('');
|
||||||
// const weekDay = ref('');
|
const weekDay = ref('');
|
||||||
// let timerId = null;
|
let timerId = null;
|
||||||
// // 更新时间、日期和星期的方法
|
// 更新时间、日期和星期的方法
|
||||||
// const updateTime = () => {
|
const updateTime = () => {
|
||||||
// const now = new Date();
|
const now = new Date();
|
||||||
|
|
||||||
// // 获取当前时间的时分
|
// 获取当前时间的时分
|
||||||
// const hours = now.getHours().toString().padStart(2, '0');
|
const hours = now.getHours().toString().padStart(2, '0');
|
||||||
// const minutes = now.getMinutes().toString().padStart(2, '0');
|
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||||||
// currentTime.value = `${hours}:${minutes}`;
|
currentTime.value = `${hours}:${minutes}`;
|
||||||
|
|
||||||
// // 获取完整的日期（年/月/日）
|
// 获取星期几
|
||||||
// const year = now.getFullYear();
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||||
// const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
const week = weekDays[now.getDay()];
|
||||||
// const day = now.getDate().toString().padStart(2, '0');
|
weekDay.value = week;
|
||||||
// fullDate.value = `${month}-${day}`;
|
|
||||||
|
// 获取完整的日期（年/月/日）
|
||||||
// // 获取星期几
|
const year = now.getFullYear();
|
||||||
// const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
||||||
// const week = weekDays[now.getDay()];
|
const day = now.getDate().toString().padStart(2, '0');
|
||||||
// weekDay.value = week;
|
fullDate.value = `${year}.${month}.${day} ${weekDay.value}`;
|
||||||
// };
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
name.value = uni.getStorageSync('realname')
|
name.value = uni.getStorageSync('realname')
|
||||||
typeNow.value = 0;
|
typeNow.value = 0;
|
||||||
// timerId = updateTime();
|
timerId = updateTime();
|
||||||
// // 每秒更新一次时间
|
// 每秒更新一次时间
|
||||||
// setInterval(updateTime, 1000);
|
setInterval(updateTime, 1000);
|
||||||
photoplay.value = true;
|
photoplay.value = true;
|
||||||
})
|
})
|
||||||
const lanjie = ref(false);
|
const lanjie = ref(false);
|
||||||
// const clean = () => {
|
|
||||||
// if (movetype.value == -1) {
|
|
||||||
// lanjie.value = true;
|
|
||||||
// emit("cleanmain")
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
.index-content-right{
|
||||||
|
width: 19.5vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
height: 100%;
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
.right-top{
|
||||||
|
margin-top: 8vh;
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4vh;
|
||||||
|
}
|
||||||
|
.right-bottom{
|
||||||
|
margin-top: 2vh;
|
||||||
|
width: 100%;
|
||||||
|
height: 38vh;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 3vh;
|
||||||
|
padding-top: 1vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.bottom-title{
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 8%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.bottom-carmera{
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.big-older{
|
||||||
|
margin-top: 0.5vw;
|
||||||
|
width: 10vw;
|
||||||
|
height: 10vw;
|
||||||
|
border: 1rpx solid #DCDCDC;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.index-content-other {
|
.index-content-other {
|
||||||
width: calc(100% - 260rpx);
|
width: 65vw;
|
||||||
// background-color: red;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: opacity 1s ease;
|
transition: opacity 1s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -334,81 +425,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-title-nav {
|
.right-container-title-nav {
|
||||||
margin-top: 60rpx;
|
margin-top: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
height: 20vh;
|
||||||
height: 60rpx;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|
||||||
.new-weight {
|
|
||||||
margin-left: 30rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-icons {
|
|
||||||
position: absolute;
|
|
||||||
right: 30rpx;
|
|
||||||
top: 0;
|
|
||||||
// transform: translateY(-50%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-icons-img {
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-vi {
|
|
||||||
height: 120rpx;
|
|
||||||
width: 95%;
|
|
||||||
margin-left: 0rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 80rpx;
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
margin-top: 15rpx;
|
|
||||||
flex: 0 0 auto; // 👈 关键点
|
|
||||||
height: 90rpx;
|
|
||||||
width: 240rpx;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
// margin: 45rpx auto;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 9rpx;
|
|
||||||
|
|
||||||
.menu-img {
|
|
||||||
width: 55rpx;
|
|
||||||
height: 55rpx;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-font {
|
|
||||||
margin-top: 18rpx;
|
|
||||||
font-size: 25rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin-top: 10rpx;
|
margin-top: 0.8vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-tem {
|
.right-container-tem {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-top: 0.8vw;
|
||||||
|
|
||||||
.right-container-tem-text {
|
.right-container-tem-text {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
|
@ -447,7 +479,6 @@
|
||||||
margin-bottom: 0rpx;
|
margin-bottom: 0rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: -50rpx;
|
margin-left: -50rpx;
|
||||||
// z-index: 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.big-img {
|
.big-img {
|
||||||
|
|
@ -520,7 +551,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
// color: #fff;
|
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -548,8 +578,8 @@
|
||||||
|
|
||||||
.left-menu {
|
.left-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 55%;
|
||||||
left: 30rpx;
|
left: 100rpx;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -561,8 +591,8 @@
|
||||||
|
|
||||||
.left-ball {
|
.left-ball {
|
||||||
|
|
||||||
width: 100rpx;
|
width: 80rpx;
|
||||||
height: 100rpx;
|
height: 80rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -571,14 +601,14 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
.left-menu-img {
|
.left-menu-img {
|
||||||
width: 50rpx;
|
width: 40rpx;
|
||||||
height: 50rpx;
|
height: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-menu {
|
.right-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 60%;
|
||||||
right: 80rpx;
|
right: 80rpx;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -592,29 +622,13 @@
|
||||||
padding: 0 50rpx;
|
padding: 0 50rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .top-img ::before {
|
|
||||||
// content: "";
|
|
||||||
// position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// left: 0;
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
// background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
|
||||||
// filter: blur(10px);
|
|
||||||
// /* 模糊强度 */
|
|
||||||
// z-index: 1;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.right-scroll {
|
.right-scroll {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 750rpx;
|
height: 650rpx;
|
||||||
// background-color: red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.white-circle {
|
.white-circle {
|
||||||
|
height: 170rpx;
|
||||||
height: 200rpx;
|
|
||||||
|
|
||||||
border-radius: 60rpx;
|
border-radius: 60rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -622,14 +636,16 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 25rpx;
|
||||||
|
width: 100rpx;
|
||||||
|
|
||||||
.right-menu-img {
|
.right-menu-img {
|
||||||
width: 80rpx;
|
width: 50rpx;
|
||||||
height: 80rpx;
|
height: 50rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-menu-name {
|
.right-menu-name {
|
||||||
width: 80rpx;
|
width: 50rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -694,106 +710,124 @@
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zerotarget {
|
.title-card {
|
||||||
--color: #99C9FD;
|
width: 10vw;
|
||||||
--thick: 2px;
|
height: 9vw;
|
||||||
--radius: 50rpx;
|
border-radius: 2vw;
|
||||||
--outline-offset: 0rpx;
|
background-color: #FFFFFF;
|
||||||
/* 外扩多少 */
|
padding: 1.6vw;
|
||||||
/* 内层虚线（你现在用的） */
|
|
||||||
border-radius: var(--radius);
|
|
||||||
background-color: white;
|
|
||||||
/* 内部背景 */
|
|
||||||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
|
||||||
/* 外层虚线：放在 outline（不会影响元素尺寸） */
|
|
||||||
outline: var(--thick) dashed var(--color);
|
|
||||||
outline-offset: var(--outline-offset);
|
|
||||||
|
|
||||||
/* 保证文本 / 子元素在最上层 */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
margin-right: 1.5vw;
|
||||||
}
|
|
||||||
|
.card-bottom{
|
||||||
.firsttarget {
|
position: absolute;
|
||||||
--color: #99C9FD;
|
left: 0;
|
||||||
--thick: 2px;
|
bottom: 0;
|
||||||
--radius: 50%;
|
width: 100%;
|
||||||
--outline-offset: 0rpx;
|
height: 3vw;
|
||||||
/* 外扩多少 */
|
display: flex;
|
||||||
|
.bottom-img{
|
||||||
/* 内层虚线（你现在用的） */
|
width: 1.6vw;
|
||||||
border-radius: var(--radius);
|
height: 1.6vw;
|
||||||
background-color: white;
|
margin-left: 1.8vw;
|
||||||
/* 内部背景 */
|
}
|
||||||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
.bottom-font{
|
||||||
/* 外层虚线：放在 outline（不会影响元素尺寸） */
|
color: #555555;
|
||||||
outline: var(--thick) dashed var(--color);
|
font-size: 1.4vw;
|
||||||
outline-offset: var(--outline-offset);
|
margin-left: 0.5vw;
|
||||||
|
}
|
||||||
/* 保证文本 / 子元素在最上层 */
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondtarget {
|
|
||||||
--color: #99C9FD;
|
|
||||||
--thick: 2px;
|
|
||||||
--radius: 60rpx;
|
|
||||||
--outline-offset: 0rpx;
|
|
||||||
/* 外扩多少 */
|
|
||||||
|
|
||||||
/* 内层虚线（你现在用的） */
|
|
||||||
border-radius: var(--radius);
|
|
||||||
background-color: white;
|
|
||||||
/* 内部背景 */
|
|
||||||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
|
||||||
/* 外层虚线：放在 outline（不会影响元素尺寸） */
|
|
||||||
outline: var(--thick) dashed var(--color);
|
|
||||||
outline-offset: var(--outline-offset);
|
|
||||||
|
|
||||||
/* 保证文本 / 子元素在最上层 */
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thirdtarget {
|
|
||||||
--color: #99C9FD;
|
|
||||||
--thick: 2px;
|
|
||||||
--radius: 40rpx;
|
|
||||||
--outline-offset: 0rpx;
|
|
||||||
/* 外扩多少 */
|
|
||||||
|
|
||||||
/* 内层虚线（你现在用的） */
|
|
||||||
border-radius: var(--radius);
|
|
||||||
background-color: white;
|
|
||||||
/* 内部背景 */
|
|
||||||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
|
||||||
/* 外层虚线：放在 outline（不会影响元素尺寸） */
|
|
||||||
outline: var(--thick) dashed var(--color);
|
|
||||||
outline-offset: var(--outline-offset);
|
|
||||||
|
|
||||||
/* 保证文本 / 子元素在最上层 */
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scalePulse {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
25% {
|
.card-top {
|
||||||
/* 先收缩一点点 */
|
width: 100%;
|
||||||
transform: scale(0.94);
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
65% {
|
.card-top-left {
|
||||||
/* 再放大到略超出的感觉 */
|
font-size: 1.8vw;
|
||||||
transform: scale(1.08);
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
.card-top-right {
|
||||||
transform: scale(1);
|
width: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #F1F2F3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.right-img {
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 0.8vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-spec {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.1vw;
|
||||||
|
left: 1.6vw;
|
||||||
|
width: 1.5vw;
|
||||||
|
height: 2vw;
|
||||||
|
// background-color: #0076FF;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to bottom right,
|
||||||
|
transparent calc(50% - 1px),
|
||||||
|
#d5d5d5 50%,
|
||||||
|
transparent calc(50% + 1px))
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-gray {
|
||||||
|
position: absolute;
|
||||||
|
right: -1.1vw;
|
||||||
|
bottom: -0.6vw;
|
||||||
|
color: #888888;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.title-time{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 15vw;
|
||||||
|
height: 9.5vw;
|
||||||
|
border-radius: 2vw;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.time-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 3vw;
|
||||||
|
margin-top: 0.4vw;
|
||||||
|
}
|
||||||
|
.time-date{
|
||||||
|
margin-top: 0.2vw;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blue-button{
|
||||||
|
margin-top: 0.5vw;
|
||||||
|
width: 7vw;
|
||||||
|
height: 2.5vw;
|
||||||
|
background: linear-gradient(to bottom, #009DEF, #0076FF);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.name-weight{
|
||||||
|
font-size: 2vw;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0.2vw 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -2120,7 +2120,7 @@
|
||||||
bodyTagListLook.value.push(res.netPic)
|
bodyTagListLook.value.push(res.netPic)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log("res11111",res)
|
// console.log("res11111",res)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2164,7 +2164,7 @@
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
bigArray.value = res.result;
|
bigArray.value = res.result;
|
||||||
console.log("右侧",bigArray.value)
|
// console.log("右侧",bigArray.value)
|
||||||
}
|
}
|
||||||
downList.value = bigArray.value[0].children
|
downList.value = bigArray.value[0].children
|
||||||
upmenuIndex.value = -1;
|
upmenuIndex.value = -1;
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,10 @@
|
||||||
<image class="small-imge" src="/static/index/warehouse/t2.png" mode=""></image>
|
<image class="small-imge" src="/static/index/warehouse/t2.png" mode=""></image>
|
||||||
医疗矩阵
|
医疗矩阵
|
||||||
</view>
|
</view>
|
||||||
|
<view class="one-button">
|
||||||
|
<image class="small-imge" src="/static/index/warehouse/t5.png" mode=""></image>
|
||||||
|
库房矩阵
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="openmore-button">
|
<view class="openmore-button">
|
||||||
<view class="one-button">
|
<view class="one-button">
|
||||||
|
|
@ -813,7 +817,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 30vh;
|
top: 30vh;
|
||||||
left: 33.5vw;
|
left: 33.5vw;
|
||||||
width: 22vw;
|
width: 27.7vw;
|
||||||
height: 22.5vh;
|
height: 22.5vh;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 53;
|
z-index: 53;
|
||||||
|
|
@ -847,10 +851,10 @@
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
.one-button{
|
.one-button{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 1vw;
|
height: 1vw;
|
||||||
width: 10vw;
|
width: 8vw;
|
||||||
font-size: 1.2vw;
|
font-size: 1.2vw;
|
||||||
.small-imge{
|
.small-imge{
|
||||||
width: 1.5vw;
|
width: 1.5vw;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue