1210 lines
31 KiB
Vue
1210 lines
31 KiB
Vue
<template>
|
||
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" >
|
||
<view class="left-container">
|
||
<view class="left-head">
|
||
<image class="left-head-img" src="/static/index/oldman.png" />
|
||
<text class="left-head-font" :style="darkFans ? { color: '#fff' } : {}">
|
||
王金凤
|
||
</text>
|
||
</view>
|
||
<view class="left-img-container">
|
||
<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
|
||
<view class="blue-circle" v-show="index === menuIndex">
|
||
<image class="blue-circle-size" :src="`/static/index/ray.png`" />
|
||
</view>
|
||
<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url" @click="changeMenu(index)" />
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right-container">
|
||
<view class="right-container-title">
|
||
<text class="right-container-title-no" :style="darkFans ? { color: '#fff' } : {}">
|
||
N00123456
|
||
</text>
|
||
<text class="right-container-title-class" :style="darkFans ? { color: '#fff' } : {}">
|
||
护理单元01
|
||
</text>
|
||
<view class="right-container-title-class-anhei-button" @click="darkFans=!darkFans" 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="darkFans=!darkFans" v-show="darkFans">
|
||
<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
|
||
取消暗黑模式
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="right-container-fir">
|
||
<view class="right-container-fir-left">
|
||
<view class="right-container-fir-left-card">
|
||
<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
|
||
<font class="right-container-fir-left-card-hulilei-font">护理类</font>
|
||
|
||
<view class="right-container-fir-left-card-main">
|
||
<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`" />
|
||
<view class="right-container-fir-left-card-card">
|
||
<view class="right-container-fir-left-card-zhixing">
|
||
<image class="right-container-fir-left-card-zhixing-img"
|
||
:src="`/static/index/daizhixing.png`" />
|
||
<font class="right-container-fir-left-card-zhixing-font">待执行</font>
|
||
</view>
|
||
<image class="right-container-fir-left-card-img" :src="`/static/index/yiliao/project.png`" />
|
||
<view class="">
|
||
<image class="right-container-fir-left-card-main-laba"
|
||
:src="`/static/index/project.png`" />
|
||
<text class="right-container-fir-left-card-main-font">
|
||
准备洁具（口腔）
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="split-line"></view>
|
||
<view class="time-tra">
|
||
<view class="time-font">
|
||
10:00 - 10:10
|
||
</view>
|
||
<view class="time-text">
|
||
为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
|
||
</view>
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/cardicons/zhixing.png`" />
|
||
<text class="time-people-font">
|
||
单人执行
|
||
</text>
|
||
</view>
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/cardicons/zhifa.png`" />
|
||
<text class="time-people-font">
|
||
--
|
||
</text>
|
||
</view>
|
||
<view class="time-button-view">
|
||
<view class="time-button-start">
|
||
开始服务
|
||
</view>
|
||
<view class="time-button-end">
|
||
服务结束
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`" />
|
||
<view class="split-line-white"></view>
|
||
<view class="right-huli">
|
||
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
|
||
<view class="right-huli-view">
|
||
<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
|
||
<image class="right-huli-img" :src="item.url" />
|
||
<text class="right-huli-text">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="right-container-fir-right">
|
||
<view class="right-container-card">
|
||
<text class="right-container-title">
|
||
10:18
|
||
</text>
|
||
<text class="right-container-date">
|
||
2025年1月1日
|
||
</text>
|
||
<text class="right-container-day">
|
||
星期三
|
||
</text>
|
||
<view class="right-container-tem">
|
||
<image class="right-container-tem-img" :src="`/static/index/roomicons/wendu.png`" />
|
||
<text class="right-container-tem-text">23°C</text>
|
||
<image class="right-container-tem-img" :src="`/static/index/roomicons/shidu.png`" />
|
||
<text class="right-container-tem-text">39%</text>
|
||
</view>
|
||
<!-- 分割线 -->
|
||
<view class="right-container-fenge"></view>
|
||
<view class="right-container-button">
|
||
<view v-for="(item,index) in roomBtttonList" :key="index"
|
||
class="right-container-button-any">
|
||
<image v-show="roomTar.includes(index)" class="right-container-button-ray"
|
||
:src="`/static/index/cardicons/ray2.png`" />
|
||
<image class="right-container-button-img"
|
||
:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
|
||
<text class="right-container-button-text"
|
||
:style="roomTar.includes(index)?{color: '#167ED7'}:{}">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right-container-sec">
|
||
|
||
<view class="right-container-left">
|
||
<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
|
||
<font class="right-container-left-font">医疗类</font>
|
||
<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`" />
|
||
<view class="time-tra">
|
||
|
||
<view class="time-font">
|
||
10:00 - 10:10
|
||
</view>
|
||
<view class="time-text">
|
||
<text>静脉注射</text>
|
||
<image class="time-text-img" :src="`/static/index/yiliao/project4.png`" />
|
||
</view>
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/yiliao/doctorW.png`" />
|
||
<text class="time-people-font">
|
||
李医生
|
||
</text>
|
||
<image class="time-people-img" :src="`/static/index/yiliao/yizhu.png`" />
|
||
<text class="time-people-font">
|
||
临时医嘱
|
||
</text>
|
||
</view>
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/yiliao/nurseW.png`" />
|
||
<text class="time-people-font">
|
||
王护士
|
||
</text>
|
||
<image class="time-people-img" :src="`/static/index/yiliao/yizhudown.png`" />
|
||
<text class="time-people-font">
|
||
医嘱开立
|
||
</text>
|
||
</view>
|
||
<view class="time-button-view">
|
||
<view class="time-button-start">
|
||
开始服务
|
||
</view>
|
||
<view class="time-button-end">
|
||
服务结束
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right-container-photo">
|
||
<image class="right-container-photo-img" :src="`/static/index/yiliao/project2.png`" />
|
||
<text class="right-container-photo-text">
|
||
脑膜炎(1/2)
|
||
</text>
|
||
</view>
|
||
<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`" />
|
||
<view class="split-line-white"></view>
|
||
<view class="right-huli">
|
||
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
|
||
<view class="right-huli-view">
|
||
<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
|
||
<image class="right-huli-img" :src="item.url" />
|
||
<text class="right-huli-text">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="right-container-right">
|
||
<view class="right-container-right-title">
|
||
<text class="right-container-right-text">服务指令</text>
|
||
<image class="right-container-right-img" :src="`/static/index/medium/whitedian.png`" />
|
||
</view>
|
||
<view class="right-container-right-down">
|
||
<image class="right-container-right-down-left" :src="`/static/index/arrow2.png`" />
|
||
<view class="right-container-right-down-card">
|
||
<view class="right-container-right-down-card-card">
|
||
|
||
<image class="right-container-right-down-card-img" :src="`/static/index/project3.png`" />
|
||
<view class="">
|
||
<text class="right-container-right-down-card-font">
|
||
更换纸尿裤
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="right-container-right-down-card-line"></view>
|
||
<view class="time-tra">
|
||
<view class="time-font">
|
||
10:00 - 10:10
|
||
</view>
|
||
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/cardicons/zhixing.png`" />
|
||
<text class="time-people-font">
|
||
协作执行
|
||
</text>
|
||
</view>
|
||
<view class="time-people">
|
||
<image class="time-people-img" :src="`/static/index/cardicons/zhifa.png`" />
|
||
<text class="time-people-font">
|
||
王金福 / 李贵田
|
||
</text>
|
||
</view>
|
||
<view class="time-button-view">
|
||
<view class="time-button-start">
|
||
开始服务
|
||
</view>
|
||
<view class="time-button-end">
|
||
服务结束
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<image class="right-container-right-down-right" :src="`/static/index/arrow.png`" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
|
||
// 定义 Link 类型
|
||
type Link = {
|
||
url : string;
|
||
targetUrl : string;
|
||
}
|
||
|
||
// 初始化左侧菜单列表
|
||
const iconList = ref<Link[]>([
|
||
{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
|
||
{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
|
||
{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png' },
|
||
{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
|
||
{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
|
||
]);
|
||
// 定义 Link 类型
|
||
type huliListType = {
|
||
url : string;
|
||
name : string
|
||
}
|
||
|
||
// 初始化第一个卡片列表
|
||
const huliList = ref<huliListType[]>([
|
||
{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
|
||
{ url: '/static/index/hulilist/xiezhu.png', name: "协助执行" },
|
||
{ url: '/static/index/hulilist/zhongdian.png', name: "重点" },
|
||
{ url: '/static/index/hulilist/genzong.png', name: "跟踪" },
|
||
]);
|
||
// 初始化第二排第一个卡片列表
|
||
const mediumList = ref<huliListType[]>([
|
||
{ url: '/static/index/medium/yaopin.png', name: "药品信息" },
|
||
{ url: '/static/index/medium/qingling.png', name: "请领指令" },
|
||
{ url: '/static/index/medium/peiyao.png', name: "配药指令" },
|
||
{ url: '/static/index/medium/xinxi.png', name: "信息反馈" },
|
||
]);
|
||
// 定义 Link 类型
|
||
type roomBtttonType = {
|
||
url : string;
|
||
targetUrl : string;
|
||
name : string
|
||
}
|
||
|
||
// 初始化第二个卡片列表
|
||
const roomBtttonList = ref<roomBtttonType[]>([
|
||
{ url: '/static/index/roomicons/zhaoming.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
|
||
{ url: '/static/index/roomicons/kongtiao.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
|
||
{ url: '/static/index/roomicons/nuanfeng.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
|
||
{ url: '/static/index/roomicons/dianqi.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
|
||
]);
|
||
// 当前选中的菜单索引
|
||
const menuIndex = ref<number>(0);
|
||
// 暗黑模式
|
||
const darkFans = ref<boolean>(false);
|
||
// 当前选中的菜单索引
|
||
const roomTar = ref<number[]>([]);
|
||
// 变更菜单
|
||
const changeMenu = (index : number) => {
|
||
menuIndex.value = index;
|
||
};
|
||
const saveItem = (index : number) => {
|
||
if (roomTar.value.includes(index)) {
|
||
let array = []
|
||
roomTar.value.forEach((res : number) => {
|
||
if (res !== index) {
|
||
array.push(res)
|
||
}
|
||
})
|
||
roomTar.value = array
|
||
} else {
|
||
roomTar.value.push(index)
|
||
}
|
||
}
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
// 页面初始化的逻辑
|
||
// uni.redirectTo({
|
||
// url: '/pages/login/login'
|
||
// });
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.backgroundContainer {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-image: url('/static/index/lightbgc.png');
|
||
background-size: cover;
|
||
background-position: center center;
|
||
overflow: hidden;
|
||
// background-repeat: no-repeat;
|
||
}
|
||
//暗黑模式
|
||
.darkbackgroundContainer{
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-image: url('/static/index/background.png');
|
||
background-size: cover;
|
||
background-position: center center;
|
||
overflow: hidden;
|
||
}
|
||
.right-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
|
||
.right-container-sec {
|
||
width: 100%;
|
||
height: 900rpx;
|
||
margin-top: 50rpx;
|
||
display: flex;
|
||
.right-container-right{
|
||
margin-left: 2%;
|
||
width: 40%;
|
||
height: 900rpx;
|
||
border-radius: 80rpx;
|
||
border: 1rpx solid #fff;
|
||
background-color: rgba(200, 216, 238, 0.8);
|
||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||
position: relative;
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
.time-tra {
|
||
// margin-left: 150rpx;
|
||
margin-top: 80rpx;
|
||
height: 100%;
|
||
width: 700rpx;
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-top: 50rpx;
|
||
margin-left: -30rpx;
|
||
|
||
.time-button-start {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background: linear-gradient(to top, #047ADB, #0EA7DD);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.time-people {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
.time-people-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 5rpx;
|
||
// margin-left: 50rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
color: #586787;
|
||
font-size: 42rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 100rpx;
|
||
text-shadow: 0 -5rpx 5rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
color: #364464;
|
||
font-size: 70rpx;
|
||
font-weight: 700;
|
||
width: 800rpx;
|
||
margin-bottom: 50rpx;
|
||
line-height: 70rpx;
|
||
position: relative;
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
.right-container-right-down{
|
||
width: 100%;
|
||
height: 560rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.right-container-right-down-left{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
}
|
||
.right-container-right-down-card{
|
||
margin-top: 80rpx;
|
||
width: 84%;
|
||
height: 650rpx;
|
||
border-radius: 80rpx;
|
||
// border: 1rpx solid ;
|
||
background-color: rgba(200, 216, 238, 0.8);
|
||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||
position: relative;
|
||
display: flex;
|
||
// justify-content: center;
|
||
// flex-direction: column;
|
||
box-shadow: 2rpx 0 0 2rpx;
|
||
.right-container-right-down-card-line{
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 300rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: -20rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 150rpx;
|
||
}
|
||
.right-container-right-down-card-card{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 450rpx;
|
||
.right-container-right-down-card-img{
|
||
width: 400rpx;
|
||
height: 350rpx;
|
||
}
|
||
.right-container-right-down-card-font{
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
.right-container-right-down-right{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
}
|
||
}
|
||
// align-items: center;
|
||
.right-container-right-title{
|
||
width: 100%;
|
||
height: 170rpx;
|
||
position: relative;
|
||
// background-color: red;
|
||
.right-container-right-text{
|
||
line-height: 170rpx;
|
||
font-size: 58rpx;
|
||
font-weight: 600;
|
||
margin-left: 120rpx;
|
||
}
|
||
.right-container-right-img{
|
||
position: absolute;
|
||
top: 80rpx;
|
||
right: 80rpx;
|
||
width: 80rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.right-container-left {
|
||
width: 55%;
|
||
height: 900rpx;
|
||
border-radius: 80rpx;
|
||
border: 1rpx solid #fff;
|
||
background-color: rgba(203, 219, 238, 0.8);
|
||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.right-container-fir-left-card-main-right {
|
||
margin-left: 10rpx;
|
||
margin-right: 5rpx;
|
||
width: 70rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.right-huli {
|
||
width: 250rpx;
|
||
height: 100%;
|
||
// background-color: #047ADB;
|
||
margin-top: 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-view::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.right-huli-view {
|
||
height: 700rpx;
|
||
// background-color: #047ADB;
|
||
overflow: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-view-dis {
|
||
// flex-direction: column;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.right-huli-text {
|
||
width: 100%;
|
||
height: 20rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-huli-shang {
|
||
width: 50rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.right-huli-xia {
|
||
margin-top: 10rpx;
|
||
width: 50rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
.right-container-photo{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.right-container-photo-img{
|
||
width: 500rpx;
|
||
height: 550rpx;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.right-container-photo-text{
|
||
font-size: 50rpx;
|
||
color: #324160 ;
|
||
}
|
||
}
|
||
.right-container-fir-left-card-main-left {
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
margin-right: 0rpx;
|
||
margin-left: 0rpx;
|
||
}
|
||
|
||
.right-container-left-type {
|
||
position: absolute;
|
||
top: 70rpx;
|
||
left: -15rpx;
|
||
width: 315rpx;
|
||
height: 104rpx;
|
||
}
|
||
|
||
.right-container-left-font {
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 55rpx;
|
||
font-size: 50rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.time-tra {
|
||
// margin-left: 150rpx;
|
||
margin-top: 450rpx;
|
||
height: 100%;
|
||
width: 700rpx;
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-top: 50rpx;
|
||
margin-left: -30rpx;
|
||
|
||
.time-button-start {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background: linear-gradient(to top, #0DA0B1, #04D3AF);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.time-people {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
.time-people-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 5rpx;
|
||
// margin-left: 50rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
color: #586787;
|
||
font-size: 42rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 100rpx;
|
||
text-shadow: 0 -5rpx 5rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
color: #364464;
|
||
font-size: 70rpx;
|
||
font-weight: 700;
|
||
width: 800rpx;
|
||
margin-bottom: 50rpx;
|
||
line-height: 70rpx;
|
||
position: relative;
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-fir {
|
||
width: 100%;
|
||
height: 900rpx;
|
||
display: flex;
|
||
|
||
// background-color: red;
|
||
.right-container-fir-left {
|
||
width: 65%;
|
||
height: 900rpx;
|
||
border-radius: 80rpx;
|
||
/* 圆角 */
|
||
position: relative;
|
||
|
||
/* 使用背景来模拟边框 */
|
||
background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
|
||
background-origin: border-box;
|
||
/* 背景从边框开始 */
|
||
background-clip: content-box;
|
||
/* 使背景只填充在边框内，而不覆盖内容区域 */
|
||
padding: 5rpx;
|
||
/* 留出足够的空间来呈现渐变边框 */
|
||
|
||
/* 增加背景色确保视觉效果 */
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
/* 内部背景色 */
|
||
box-sizing: border-box;
|
||
|
||
/* 包括边框在内计算宽高 */
|
||
.right-container-fir-left-card {
|
||
position: absolute;
|
||
top: 1%;
|
||
left: 0.5%;
|
||
width: 99%;
|
||
height: 98%;
|
||
border-radius: 80rpx;
|
||
background-color: rgb(195, 211, 233);
|
||
|
||
.right-container-fir-left-card-main {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 60rpx;
|
||
|
||
.right-container-fir-left-card-main-right {
|
||
margin-left: 50rpx;
|
||
margin-right: 30rpx;
|
||
width: 70rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.right-huli {
|
||
width: 250rpx;
|
||
height: 100%;
|
||
// background-color: #047ADB;
|
||
margin-top: -100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-view::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.right-huli-view {
|
||
height: 700rpx;
|
||
// background-color: #047ADB;
|
||
overflow: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-view-dis {
|
||
// flex-direction: column;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.right-huli-text {
|
||
width: 100%;
|
||
height: 20rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-huli-shang {
|
||
width: 50rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.right-huli-xia {
|
||
margin-top: 10rpx;
|
||
width: 50rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.time-tra {
|
||
margin-left: 30rpx;
|
||
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-top: 50rpx;
|
||
margin-left: -30rpx;
|
||
|
||
.time-button-start {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background: linear-gradient(to top, #047ADB, #0EA7DD);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.time-people {
|
||
display: flex;
|
||
|
||
.time-people-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
color: #586787;
|
||
font-size: 42rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 100rpx;
|
||
text-shadow: 0 -5rpx 5rpx;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
color: #586787;
|
||
font-size: 42rpx;
|
||
width: 800rpx;
|
||
margin-bottom: 50rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.right-container-fir-left-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.right-container-fir-left-card-zhixing {
|
||
position: absolute;
|
||
top: 25rpx;
|
||
left: 450rpx;
|
||
}
|
||
|
||
.right-container-fir-left-card-zhixing-font {
|
||
position: absolute;
|
||
top: 5rpx;
|
||
|
||
left: 30rpx;
|
||
width: 200rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-fir-left-card-zhixing-img {
|
||
width: 149rpx;
|
||
height: 57rpx;
|
||
z-index: 9;
|
||
|
||
}
|
||
|
||
.right-container-fir-left-card-main-font {
|
||
font-size: 50rpx;
|
||
font-weight: 350;
|
||
|
||
}
|
||
|
||
.right-container-fir-left-card-main-laba {
|
||
width: 70rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
top: 460rpx;
|
||
left: 20rpx;
|
||
|
||
}
|
||
|
||
.right-container-fir-left-card-img {
|
||
width: 588rpx;
|
||
height: 466rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-main-left {
|
||
height: 100rpx;
|
||
width: 70rpx;
|
||
margin-right: 10rpx;
|
||
// height: ;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-hulilei {
|
||
position: absolute;
|
||
top: 70rpx;
|
||
left: -15rpx;
|
||
width: 315rpx;
|
||
height: 104rpx;
|
||
|
||
}
|
||
|
||
.right-container-fir-left-card-hulilei-font {
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 55rpx;
|
||
font-size: 50rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-fir-right {
|
||
margin-top: 6rpx;
|
||
margin-left: 2%;
|
||
margin-right: 3%;
|
||
width: 30%;
|
||
height: 880rpx;
|
||
border-radius: 80rpx;
|
||
border: 1rpx solid #fff;
|
||
|
||
background: url(/static/index/rightbgi.png) no-repeat;
|
||
background-size: contain;
|
||
|
||
.right-container-card {
|
||
margin-top: 80rpx;
|
||
margin-left: 100rpx;
|
||
height: 800rpx;
|
||
|
||
.right-container-button {
|
||
display: flex;
|
||
margin-left: -20rpx;
|
||
margin-top: 40rpx;
|
||
|
||
.right-container-button-any {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 180rpx;
|
||
position: relative;
|
||
|
||
.right-container-button-ray {
|
||
position: absolute;
|
||
top: -25rpx;
|
||
left: 10rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.right-container-button-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fenge {
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
/* 可根据需求调整容器的高度 */
|
||
background: linear-gradient(to right,
|
||
rgba(255, 255, 255, 1) 50%,
|
||
/* 白色中心 */
|
||
rgba(255, 255, 255, 0) 80%);
|
||
/* 渐变至透明 */
|
||
}
|
||
|
||
.right-container-tem {
|
||
display: flex;
|
||
margin-top: 50rpx;
|
||
|
||
.right-container-tem-text {
|
||
font-size: 70rpx;
|
||
margin-right: 70rpx;
|
||
}
|
||
|
||
.right-container-tem-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-title {
|
||
font-size: 150rpx;
|
||
text-shadow: 0 -5rpx 5rpx;
|
||
display: block;
|
||
margin: 0;
|
||
}
|
||
|
||
.right-container-date {
|
||
font-size: 50rpx;
|
||
color: #7080A1;
|
||
display: block;
|
||
margin: 0;
|
||
margin-left: 18rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.right-container-day {
|
||
font-size: 55rpx;
|
||
font-weight: 600;
|
||
// color: #7080A1;
|
||
margin-left: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-title {
|
||
margin-top: 127rpx;
|
||
margin-bottom: 73rpx;
|
||
|
||
.right-container-title-no {
|
||
font-size: 58rpx;
|
||
}
|
||
|
||
.right-container-title-class {
|
||
font-size: 58rpx;
|
||
font-weight: 800;
|
||
margin-left: 20rpx;
|
||
}
|
||
.right-container-title-class-anhei-button{
|
||
float: right;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
margin-right: 100rpx;
|
||
width: 500rpx;
|
||
height: 100rpx;
|
||
background-color: black;
|
||
border: 2rpx solid;
|
||
.right-container-title-class-anhei {
|
||
font-size: 58rpx;
|
||
font-weight: 800;
|
||
color: white;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.left-container {
|
||
width: 562rpx;
|
||
height: 100%;
|
||
|
||
.blue-circle-pos {
|
||
position: relative;
|
||
|
||
.blue-circle {
|
||
position: absolute;
|
||
top: -175rpx;
|
||
left: -200rpx;
|
||
|
||
.blue-circle-size {
|
||
width: 350rpx;
|
||
height: 600rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-head {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.left-head-img {
|
||
width: 266rpx;
|
||
height: 266rpx;
|
||
margin-top: 126rpx;
|
||
}
|
||
|
||
.left-head-font {
|
||
font-weight: 700;
|
||
font-size: 73rpx;
|
||
}
|
||
}
|
||
|
||
.left-img-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-top: 75rpx;
|
||
|
||
.left-img {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-top: 75rpx;
|
||
margin-bottom: 75rpx;
|
||
z-index: 100;
|
||
}
|
||
}
|
||
}
|
||
|
||
//分割线
|
||
.split-line {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 300rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: 40rpx;
|
||
margin-right: 40rpx;
|
||
/* 上面到下面的渐变效果：
|
||
- 从透明到黑色，再从黑色到透明
|
||
- 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
|
||
}
|
||
|
||
.split-line-white {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 800rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: 20rpx;
|
||
/* 上面到下面的渐变效果：
|
||
- 从透明到黑色，再从黑色到透明
|
||
- 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
|
||
}
|
||
</style> |