hldy_app/pages/watch/index.vue

1124 lines
25 KiB
Vue
Raw Normal View History

2025-08-13 17:19:40 +08:00
<template>
<view class="view">
<view class="view-left">
<view class="title-father">
<image class="title-img" src="/static/index/watch/uni.png" />
<view class="title-font">
护理单元
</view>
</view>
<view class="zhezhao-top"></view>
<view class="zhezhao-bottom"></view>
<scroll-view class="menus-father" scroll-y :scroll-top="topnum">
<view v-for="(item,index) in filteredMenu" :key="index" class="menu" :class="item.warning? 'warning':''"
:style="index === menuIndex?{backgroundColor:`#fff`}:{} " @click="menuIndex=index">
<view class="menu-img">
<donghua :width="`65rpx`" :height="`65rpx`" :links="item.url" :playing="menuIndex===index" />
</view>
<!-- <image class="menu-img" :src="item.url" /> -->
<view style="margin-left: 10rpx;">
<view style="font-size: 31rpx;overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200rpx;" :style="index === menuIndex?{color:`#017DE9 `}:{} ">
{{item.name}}
</view>
<!-- <view style="font-size: 20rpx;color: #A1A1A1;">
NUID {{item.NUID}}
</view> -->
</view>
</view>
<view style="height: 45rpx;">
</view>
</scroll-view>
</view>
<view class="view-right">
<!-- <view class="right-container-title-nav">
<view class="right-icons">
<view class="right-container-tem">
<image class="right-container-tem-img" src="/static/index/newindex/wendu/0.png" />
<text class="right-container-tem-text">23°C</text>
<image class="right-container-tem-img" src="/static/index/newindex/wendu/1.png" />
<text class="right-container-tem-text">39%</text>
</view>
</view>
</view> -->
<view class="scroll-vi">
<view class="zhezhao-left"></view>
<view class="zhezhao-right"></view>
<scroll-view scroll-x="true" style="width: 66%;height: 100%;">
<view style="display: flex;align-items: center;">
<view v-for="(item,index) in typeArray" :key="index" class="menu" @click="typeNow=index;">
<!-- <image class="menu-img" :src="item.url" v-if="item.url" /> -->
<donghua :links="item.url" :playing="typeNow===index" v-if="item.url" />
<text class="menu-font" :class="{ zoom: typeNow===index }"
:style="typeNow===index?{color:`#008FF5`}:{}" v-if="item.url">
{{item.name}}
</text>
<view v-if="!item.url">
<image style="width: 50rpx;height: 50rpx;" src="/static/index/watch/more.png" />
</view>
</view>
</view>
</scroll-view>
<view class="right-father">
<view style="font-weight: 600;font-size: 90rpx;margin-right: 15rpx;">
10:18
</view>
<view class="" style="font-weight: 600;margin-right: 50rpx;">
<view class="">7-25</view>
<view class="">星期三</view>
</view>
<!-- <view class="">
返回
</view> -->
<image style="width: 65rpx;height: 65rpx;" src="/static/index/newindex/curve/shezhi.png"
@click="goback" />
<view style="font-size: 32rpx;margin-left: 10rpx;" @click="goback">
设置
</view>
</view>
</view>
<view class="big-bgc">
<view
style="width: 100%;position: absolute;top: 0;left: 0;z-index: 1;display: flex;align-items: center;">
<text style="margin-top: 40rpx;font-size: 32rpx;margin-left: 50rpx;">
NUID2508000001
</text>
<text class="new-weight">
护理单元01
</text>
<view class="right-icons">
<view class="right-container-tem">
<image class="right-container-tem-img" src="/static/index/newindex/wendu/0.png" />
<text class="right-container-tem-text">23°C</text>
<image class="right-container-tem-img" src="/static/index/newindex/wendu/1.png" />
<text class="right-container-tem-text">39%</text>
</view>
</view>
</view>
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/bgc.png" />
<image style="width: 100rpx;height: 100rpx;" src="/static/index/watch/play.png" />
</view>
<view style="display: flex;margin-top: 20rpx;">
<view class="card-father">
<view class="up-title">
<view class="">
监控截屏
</view>
<image style="width: 50rpx;height: 50rpx;margin-right: 20rpx;"
src="/static/index/watch/more.png" />
</view>
<view style="display: flex;">
<view class="small-bgc" style="margin-right: 20rpx;">
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/bgc.png" />
<!-- <image style="width: 50rpx;height: 50rpx;" src="/static/index/watch/play.png" /> -->
</view>
<view class="small-bgc">
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/bgc.png" />
<!-- <image style="width: 50rpx;height: 50rpx;" src="/static/index/watch/play.png" /> -->
</view>
</view>
</view>
<view class="card-father">
<view class="up-title">
<view class="">
视频回放
</view>
<image style="width: 50rpx;height: 50rpx;margin-right: 20rpx;"
src="/static/index/watch/more.png" />
</view>
<view style="display: flex;">
<view class="small-bgc" style="margin-right: 20rpx;">
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/bgc.png" />
<image style="width: 50rpx;height: 50rpx;" src="/static/index/watch/play.png" />
</view>
<view class="small-bgc">
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/bgc.png" />
<image style="width: 50rpx;height: 50rpx;" src="/static/index/watch/play.png" />
</view>
</view>
</view>
</view>
<view class="right-right">
<view class="red-kuang" v-if="typeNow===0">
<image style="width: 110rpx;height: 140rpx;margin-left: 40rpx;margin-top: -10rpx;"
src="/static/index/watch/laotai.png" />
<view class="">
<view
style="margin-left: 20rpx;display: flex;align-items: center;margin-bottom: 5rpx;margin-top: 25rpx;">
<view class="font-weight">
王金凤
</view>
<view class="font-small" style="margin-left: 10rpx;">
80
</view>
<view class="blue-bgc">
当日指令
</view>
</view>
<view class="font-small" style="margin-left: 20rpx;margin-top: 25rpx;">
入住时间2025.01.01
</view>
</view>
</view>
<view class="red-kuang" v-if="typeNow===1">
<image style="width: 110rpx;height: 140rpx;margin-left: 40rpx;margin-top: -10rpx;"
src="/static/index/watch/laotou.png" />
<view class="">
<view
style="margin-left: 20rpx;display: flex;align-items: center;margin-bottom: 5rpx;margin-top: 25rpx;height: 60rpx;">
<view class="font-weight">
李树奎
</view>
<view class="font-small" style="margin-left: 10rpx;">
50
</view>
</view>
<view class="font-small" style="margin-left: 20rpx;margin-top: 25rpx;">
入职时间2025.01.15
</view>
</view>
</view>
<view class="states-father" v-if="typeNow===0">
<view class="states" :class="item.error?`warning`:``" v-for="(item,index) in iconArray"
:key="index">
<image style="width: 40rpx;height: 40rpx;" :src="item.url" />
<view style="color: #555555;margin-left: 5rpx;font-size: 25rpx;">
{{ item.name }}
</view>
</view>
</view>
<view class="states-father" v-if="typeNow===1">
<view class="phone-number">
<image class="bgc-image" src="/static/index/watch/phonebgc.png" />
<image style="width: 20rpx;height: 35rpx;margin-left: 40rpx;"
src="/static/index/watch/phone.png" />
<view class="font-phone">15533556676</view>
<image class="phone-ball" src="/static/index/watch/phoneball.png" />
</view>
</view>
<view class="big-view">
<view class="font-weight">
10:00 - 10:10
</view>
<view class="pao">
<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
src="/static/index/watch/pao.png" />
<view style="font-size: 20rpx;z-index: 1;">
待进行
</view>
</view>
<view class="juzhong">
<donghua :width="`600rpx`" :height="`500rpx`" :links="blueArray" :playing="photoplay"
:loop="true" :interval="120" />
</view>
<view class="juzhong" style="z-index: 2;margin-top: 80rpx;">
<donghua :width="`400rpx`" :height="`250rpx`" :links="bluesmallArray" :playing="photoplay"
:loop="true" :interval="120" />
</view>
<image style="width: 480rpx;height: 350rpx;" src="/static/index/newindex/wendu/2.png" />
<view style="font-size: 38rpx;">
一级压疮防护
</view>
<view class="small-button">
<view class="gray-ball">
<image class="laba-img" src="/static/index/video/laba.png" />
</view>
<view class="gray-ball">
<image class="laba-img" src="/static/index/video/video.png" />
</view>
<view class="gray-ball">
<image class="laba-img" src="/static/index/video/txt.png" />
</view>
</view>
</view>
<view class="right-bottom">
<view style="display: flex;margin-left: 50rpx;padding-top: 30rpx;">
<image class="bottom-img" src="/static/index/newindex/rightmenu/2.png" />
<view style="margin-top: 10rpx;margin-left: 5rpx;">
协助执行
</view>
</view>
<view style="display: flex;">
<view class="people-card" v-for="(item,index) in peopleArray" :key="index">
<image style="width: 60rpx;height: 60rpx;" :src="item.url" />
<view style="margin-left: 10rpx;">
{{item.name}}
</view>
</view>
</view>
</view>
</view>
</view>
<specialDrawerVue ref="gobackdrawer">
<bigroll />
</specialDrawerVue>
<arrowkeys @movecard="movecard" :getblue="getblue" :movebottom="180" />
<!-- 自动更新组件 -->
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
:appstoreflag="true" :autocheckupdate="true"></zy-update>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, vShow, computed } from 'vue';
import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
import { onShow } from "@dcloudio/uni-app"
import specialDrawerVue from '../../component/public/specialDrawer.vue';
import bigroll from './drawer/index.vue';
import arrowkeys from '@/component/public/newgame/arrowkeys.vue';
const zyupgrade = ref(null);
const menuIndex = ref(-1);
const typeNow = ref(-1);
const photoplay = ref(false);
const getblue = ref(false);
const gobackdrawer = ref(null);
const topnum = ref(0); // scroll-top (px)
const itemHeight = 100; // 每项高度 (px)
const containerHeight = 400; // scroll-view 高度 (px)
const opendrawer = () => {
gobackdrawer.value.openDrawer();
}
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
// 确保 idx 可见:若在上方/下方不可见则调整 topnum
function ensureVisible(idx) {
// 逐步算数(清晰、稳妥)
const targetTop = idx * itemHeight; // idx乘以每项高度
const viewTop = topnum.value; // 视图当前顶部位置
const viewBottom = viewTop + containerHeight; // 视图底部位置
if (targetTop < viewTop) {
// 目标在上方:把顶部滚到目标的 top
topnum.value = clamp(targetTop, 0, filteredMenu.value.length * itemHeight - containerHeight);
} else if (targetTop + itemHeight > viewBottom) {
// 目标在下方:滚动使目标完全显示在视图底部
const needTop = targetTop + itemHeight - containerHeight;
topnum.value = clamp(needTop, 0, filteredMenu.value.length * itemHeight - containerHeight);
}
// console.log("????",topnum.value,targetTop,viewBottom)
// 否则已可见,无动作
}
// 通用的生成函数
function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
return Array.from({ length: count }, (_, i) => {
const idx = pad
? String(i + startIndex).padStart(2, '0')
: i + startIndex
return `${base}/${prefix}${idx}.${ext}`
})
}
const base = genPaths(
'/static/index/newindex/curve',
'curve_',
9,
'png',
1,
false
)
const blueArray = ref([
...base,
...[...base].reverse() // 先拷贝一份再反转,避免修改原 base
])
const basesmall = genPaths(
'/static/index/newindex/curve',
'breathe_',
9,
'png',
1,
false
)
const bluesmallArray = ref([
...basesmall,
...[...basesmall].reverse() // 先拷贝一份再反转,避免修改原 base
])
const peopleArray = ref([
{
name: "王金福",
url: "/static/index/watch/people0.png"
},
{
name: "李宝田",
url: "/static/index/watch/people1.png"
},
])
const iconArray = ref([
{
name: "省医保",
url: "/static/index/watch/00.png",
error: false
},
{
name: "重度失能",
url: "/static/index/watch/01.png",
error: false
},
{
name: "欠费",
url: "/static/index/watch/03.png",
error: true
},
])
const typeArray = ref(
[
// {
// name: '全部',
// url: genPaths(
// '/static/index/watch',
// 'all_',
// 8, // 张数
// 'png',
// 1, // 起始索引为 1
// false // 不补零
// )
// },
{
name: '护理单元',
url: genPaths(
'/static/index/watch',
'nurs_',
10, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
},
{
name: '仓库',
url: genPaths(
'/static/index/watch',
'warehouse_',
6, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
},
{
name: '配务室',
url: genPaths(
'/static/index/watch',
'delivery_',
5, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
},
{
name: '服务大厅',
url: genPaths(
'/static/index/watch',
'service_',
5, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
},
{
name: '',
url: ""
},
// {
// name: '全部',
// url: "/static/index/newindex/curve/home_1.png"
// },
// {
// name: '全部',
// url: "/static/index/newindex/curve/home_1.png"
// },
// {
// name: '全部',
// url: "/static/index/newindex/curve/home_1.png"
// },
// {
// name: '全部',
// url: "/static/index/newindex/curve/home_1.png"
// },
]
)
const leftMenuArray = ref([
{
name: '护理单元01',
NUID: "2508000001",
url: genPaths(
'/static/index/watch',
'nurs_',
10, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: false, type: 0
},
{
name: '护理单元02',
NUID: "2508000002",
url: genPaths(
'/static/index/watch',
'nurs_',
10, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: false, type: 0
},
{
name: '护理单元03',
NUID: "2508000003",
url: genPaths(
'/static/index/watch',
'nurs_',
10, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: true, type: 0
},
{
name: '仓库01',
NUID: "2508000001",
url: genPaths(
'/static/index/watch',
'warehouse_',
6, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: false, type: 1
},
{
name: '配务室',
NUID: "2508000001",
url: genPaths(
'/static/index/watch',
'delivery_',
5, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: false, type: 2
},
{
name: '服务大厅',
NUID: "2508000001",
url: genPaths(
'/static/index/watch',
'service_',
5, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
warning: false, type: 3
},
])
onMounted(() => {
menuIndex.value = 0;
typeNow.value = 0;
photoplay.value = true;
getblue.value = true;
})
const movecard = (type : number) => {
switch (type) {
case 0:
if (menuIndex.value > 0) {
menuIndex.value--
typeNow.value = 0
ensureVisible(menuIndex.value)
}
break
case 1:
if (typeNow.value < typeArray.value.length - 1) {
typeNow.value++
ensureVisible(menuIndex.value)
}
break
case 2:
if (menuIndex.value < filteredMenu.value.length - 1) {
menuIndex.value++
typeNow.value = 0
ensureVisible(menuIndex.value)
}
break
case 3:
if (typeNow.value > 0) {
typeNow.value--
ensureVisible(menuIndex.value)
}
break
case 4:
if (!typeNow.value) {
uni.navigateTo({
url: '/pages/NursingNew/index'
})
} else if (typeNow.value === 1) {
uni.navigateTo({
url: '/pages/Warehousing/index'
})
}
break
}
}
const filteredMenu = computed(() => {
menuIndex.value = -1
setTimeout(() => menuIndex.value = 0, 50)
return leftMenuArray.value.filter(item => item.type === typeNow.value);
});
const goback = () => {
// uni.navigateBack()
uni.navigateTo({
url: '/pages/Initialization/index?menu=4'
})
}
const goToCeshi = () => {
uni.navigateTo({
url: '/pages/ceshi'
})
}
// 生命周期钩子
onShow(() => {
zyupgrade.value?.check_update();
});
</script>
<style lang="less" scoped>
.view {
background-color: #eff0f4;
width: 100%;
height: 100vh;
display: flex;
.view-left {
height: 100%;
width: 17%;
// background-color: red;
.title-father {
// padding: 100rpx 0rpx;
padding-top: 120rpx;
padding-bottom: 50rpx;
padding-left: 60rpx;
display: flex;
.title-img {
width: 55rpx;
height: 55rpx;
margin-right: 20rpx;
}
.title-font {
font-size: 40rpx;
font-weight: 800;
}
}
.menus-father {
// margin-top: 20rpx;
width: 100%;
height: 800rpx;
.menu {
margin: 45rpx auto;
// margin-left: 10rpx;
height: 110rpx;
width: 300rpx;
border-radius: 60rpx;
overflow: hidden;
display: flex;
// justify-content: center;
align-items: center;
.menu-img {
width: 65rpx;
height: 65rpx;
margin-left: 25rpx;
display: flex;
justify-content: center;
align-items: center;
// background-color: #eff0f4;
border-radius: 50%;
// padding: 5rpx;
// margin-right: 15rpx;
}
}
}
}
.view-right {
height: 100%;
width: 92.5%;
position: relative;
.right-container-title-nav {
margin-top: 60rpx;
display: flex;
align-items: center;
height: 60rpx;
position: relative;
font-size: 28rpx;
.right-icons-img {
width: 60rpx;
height: 60rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
}
.scroll-vi {
height: 100rpx;
width: 100%;
margin-left: 0rpx;
margin-top: 100rpx;
position: relative;
display: flex;
// margin-bottom: 50rpx;
.menu {
flex: 0 0 auto; // 👈 关键点
height: 90rpx;
width: 240rpx;
border-radius: 50rpx;
// margin: 45rpx auto;
margin-left: 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;
}
}
}
}
}
.right-container-tem {
display: flex;
.right-container-tem-text {
font-size: 32rpx;
margin-right: 20rpx;
}
.right-container-tem-img {
width: 38rpx;
height: 38rpx;
}
}
.new-weight {
margin: 0 30rpx;
margin-top: 40rpx;
// font-weight: 600;
font-size: 32rpx;
}
.big-bgc {
// margin-top: -50rpx;
margin-top: 30rpx;
width: 1320rpx;
height: 913rpx;
border-radius: 50rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
// animation: glowFlash 1.2s infinite ease-in-out;
}
.small-bgc {
// margin: 0 20rpx;
width: 315rpx;
height: 220rpx;
border-radius: 25rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.card-father {
margin-right: 20rpx;
.up-title {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10rpx 0;
margin-left: 20rpx;
font-size: 30rpx;
}
}
@keyframes glowFlash {
0%,
100% {
box-shadow:
0 0 4rpx #f1d7da,
0 0 8rpx #f1d7da,
0 0 12rpx #f1d7da;
}
50% {
box-shadow:
0 0 10rpx #f1d7da,
0 0 20rpx #f1d7da,
0 0 30rpx #f1d7da;
}
}
.right-right {
position: absolute;
right: 0;
top: 230rpx;
height: calc(100% - 250rpx);
width: 650rpx;
.red-kuang {
margin-top: 0rpx;
margin-left: 50rpx;
width: 550rpx;
height: 190rpx;
border-radius: 50rpx;
position: relative;
display: flex;
align-items: center;
background-color: rgba(226, 227, 231, 0.5);
.blue-bgc {
width: 140rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-size: 26rpx;
background-color: rgba(248, 249, 250, 0.5);
color: #017DE9;
border-radius: 20rpx;
margin-left: 10rpx;
}
.font-weight {
font-size: 32rpx;
font-weight: 600;
}
.font-small {
font-size: 30rpx;
}
}
}
.states-father {
display: flex;
margin-top: 30rpx;
margin-left: 50rpx;
width: 100%;
.states {
width: 170rpx;
margin-right: 15rpx;
height: 80rpx;
border-radius: 60rpx;
background-color: rgba(226, 227, 231, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.phone-number {
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
position: relative;
}
}
.big-view {
margin-left: 50rpx;
margin-top: 30rpx;
width: 550rpx;
height: 625rpx;
border-radius: 50rpx;
background-color: rgba(226, 227, 231, 0.5);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.font-weight {
font-size: 50rpx;
margin-top: 45rpx;
font-weight: 600;
}
.pao {
position: absolute;
right: 40rpx;
top: 20rpx;
width: 85rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
// background-color: red;
}
}
.small-button {
// width: 70%;
margin-top: 20rpx;
height: 70rpx;
display: flex;
// justify-content: space-between;
.gray-ball {
display: flex;
justify-content: center;
align-items: center;
background-color: #F8F9FA;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin: 0 10rpx;
.laba-img {
width: 35rpx;
height: 35rpx;
}
}
}
.right-bottom {
margin-left: 50rpx;
margin-top: 30rpx;
width: 550rpx;
height: 240rpx;
border-radius: 50rpx;
background-color: rgba(226, 227, 231, 0.5);
position: relative;
.bottom-img {
width: 60rpx;
height: 60rpx;
margin-bottom: 30rpx;
}
.people-card {
width: 245rpx;
height: 100rpx;
border-radius: 25rpx;
background-color: rgba(248, 249, 250, 0.5);
margin-left: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.right-father {
width: 650rpx;
position: absolute;
right: 0rpx;
top: 0;
// height: 100rpx;
// background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.right-icons {
position: absolute;
right: 30rpx;
top: 30rpx;
// transform: translateY(-50%);
display: flex;
align-items: center;
height: 60rpx;
}
.warning {
animation: glowFlash 1.2s infinite ease-in-out;
border: 1rpx solid #ff5757;
background-color: rgba(239, 240, 244, 0.5);
}
.zoom {
transform: scale(1.2);
transform-origin: bottom left;
transition: transform 1s ease;
}
.juzhong {
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
}
.zhezhao-left {
position: absolute;
top: 0rpx;
left: 0%;
height: 100%;
width: 120rpx;
background: linear-gradient(to right,
rgba(239, 240, 244, 1) 0%,
/* #eff0f4 全不透明 */
rgba(239, 240, 244, 0) 100%
/* #eff0f4 完全透明 */
);
z-index: 4;
pointer-events: none;
}
.zhezhao-right {
position: absolute;
top: 0rpx;
right: 34%;
height: 100%;
width: 120rpx;
background: linear-gradient(to left,
rgba(239, 240, 244, 1) 0%,
/* #eff0f4 全不透明 */
rgba(239, 240, 244, 0) 100%
/* #eff0f4 完全透明 */
);
z-index: 4;
pointer-events: none;
}
.zhezhao-top {
position: absolute;
top: 220rpx;
left: 0%;
width: 350rpx;
height: 120rpx;
background: linear-gradient(to bottom,
rgba(239, 240, 244, 1) 0%,
/* #eff0f4 全不透明 */
rgba(239, 240, 244, 0) 100%
/* #eff0f4 完全透明 */
);
z-index: 4;
pointer-events: none;
}
.zhezhao-bottom {
position: absolute;
bottom: 450rpx;
left: 0%;
width: 350rpx;
height: 120rpx;
// background-color: red;
background: linear-gradient(to top,
rgba(239, 240, 244, 1) 0%,
/* #eff0f4 全不透明 */
rgba(239, 240, 244, 0) 100%
/* #eff0f4 完全透明 */
);
z-index: 4;
pointer-events: none;
}
.bgc-image {
width: 500rpx;
height: 200rpx;
position: absolute;
top: -50rpx;
left: 0;
}
.font-phone {
font-size: 35rpx;
font-weight: 600;
margin-left: 30rpx;
}
.phone-ball {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 130rpx;
}
</style>