hldy_app_mini/pages/NursingNew/component/leftcontent/serveswipe.vue

1735 lines
38 KiB
Vue

<template>
<view>
<view class="swipeservwe">
<view class="btn les" @click="swip(-1)" v-if="plsbuy.length>1">
<image class="pao-img" :src="`/static/index/newindex/states/ris.png`"
style="transform: rotate(180deg);" />
</view>
<view class="btn ris" @click="swip(1)" v-if="plsbuy.length>1">
<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" />
</view>
<view class="bots" v-if="plsbuy.length>1">
<view v-for="(v,i) in plsbuy" :key='i' :class="current==i?'dot':''"></view>
</view>
<swiper class="swiper" :circular="true" :indicator-dots="false" easing-function="easeInOutCubic"
:autoplay="autoplay" :interval="3000" :duration="500" :current="current" @change="change">
<swiper-item v-for="(indexmessage,i) in plsbuy" :key="i" class="swper">
<view class="photo-father">
<!-- {filter: `grayscale(60%)`} -->
<view class="juzhong" :style="indexmessage?.startTime?{}:''">
<donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay"
:loop="true" :interval="120" />
</view>
<view class="timedjs">
<text>服务倒计时</text>
<timeing></timeing>
</view>
<view class="weight-time">
<view>
{{ indexmessage?.startTime.slice(11, 16) }}
<text style="font-size: 1.5vw;font-weight: 400;">|&nbsp; 30分钟</text>
</view>
<view style="height: 4vw;"> </view>
<view class="pao-father">
<image class="pao-img" :src="`/static/index/newindex/states/pao.png`" />
<view style="z-index: 1;" v-if="topbuttontarget==0">
{{indexmessage?.izStart=='N'?'待执行':'执行中'}}
</view>
</view>
</view>
<view class="big-img" v-if="indexmessage.izPackage=='Y'&&indexmessage?.izStart=='N'">
<image :src="`/static/zlb.png`" :style=" 'width: 450rpx' " mode="aspectFill" />
</view>
<view class="cardbox" v-if="indexmessage.izPackage=='Y'&&indexmessage?.izStart=='Y'">
<scroll-view scroll-y="true" class="scrollcard" @touchmove.stop>
<view class="itemcard" v-for="(v,i) in zlarr" :key='i' :class="v.flag?'act':''" @click="zldex(v)">
<image :src="!v.flag?`/static/index/newindex/states/xs.png`:'/static/index/newindex/states/xsz.png'" />
<text>强直屈曲洗手</text>
<view v-if="i>2">(大体重)</view>
<!-- <image :src="fwzldex!=i?v.netImmediateFile:v.netPreviewFileSmall" mode="aspectFill"></image>
<text >{{v.directiveName?.substring(0,4)}}</text>
<view>{{v.directiveName?.substring(4,12)}}</view> -->
</view>
</scroll-view>
</view>
<!-- https://www.focusnu.com/nursingunit101/sys/common/static/temp/1_1760592730764.png -->
<view class="big-img" v-if="indexmessage.izPackage=='N' ">
<image :style="!indexmessage?.previewFile?'width: 450rpx':' '"
:src="indexmessage?.previewFile? serverUrl + indexmessage?.previewFile: `/static/index/newindex/wendu/2.png`"
mode="heightFix" />
<!-- <image :src="`/static/zhiniaoku.png`"
:style="!indexmessage?.previewFile?'width: 450rpx':'width: 650rpx'"
mode="aspectFill"/> -->
</view>
<view style="display: flex;align-items: center; ">
<view class="server-name">
{{ indexmessage?.directiveName }}
</view>
<view style="width: 6.5vw;height: 2vw;margin-left: 1vw;position: relative;"
v-if="indexmessage?.categoryName">
<image src="/static/index/newindex/wendu/bgc.png" mode="aspectFill"
style="width: 100%;height: 100%;position: relative;z-index: 0; margin-top: 0.4vw;">
</image>
<view class="bgc-font"
style="top: 0;left: 0;padding-left:0.65vw;width: 100%;height: 100%;z-index: 2;position: absolute;line-height:2.9vw;font-size: 1.1vw;">
{{indexmessage?.categoryName }}
</view>
</view>
</view>
<view style="display: flex;margin-top: 40rpx;">
<view style="width: 240rpx;height: 90rpx;margin-right: 40rpx;">
<view :class="indexmessage?.izStart=='N'?'start-button':'end-button'"
@click="start(indexmessage)">
开始服务
</view>
</view>
<view style="width: 240rpx;height: 90rpx;">
<view
:class="(indexmessage?.izStart=='Y'&& indexmessage?.izFinish=='N')?'start-button':'end-button'"
@click="end(indexmessage)">
结束服务
</view>
</view>
</view>
<view class="left-menu">
<view style="margin: 30rpx 0;" @click="errmsgclk(0,1,indexmessage)">
<view class="left-ball"
:style="indexmessage?.serviceContent!=''?' ':'opacity: 0.5'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+0+'.png'" />
</view>
</view>
<view style="margin: 30rpx 0;" @click="errmsgclk(1,1,indexmessage)">
<view class="left-ball"
:style="indexmessage?.mp3File!=''?' ':'opacity: 0.5'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+1+'.png'" />
</view>
</view>
<view style="margin: 30rpx 0;" @click="errmsgclk(2,1,indexmessage)" >
<view class="left-ball"
:style="indexmessage?.mp4File!=''?' ':'opacity: 0.5'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+2+'.png'" />
</view>
</view>
<view v-for="(item,index) in [3,4]" :key="index" style="margin: 30rpx 0;"
@click="errmsgclk(item,2,indexmessage)">
<view class="left-ball"
:style="indexmessage?.izStart=='Y'?' ':'opacity: 0.5'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+item+'.png'" />
</view>
</view>
</view>
<view class="right-menu">
<view class="zhezhao-top"></view>
<view class="zhezhao-bottom"></view>
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`" />
<view scroll-y="true" class="right-scroll">
<!-- <view style="height: 1.4vw;"> </view> -->
<view style="margin:1.5vw 0;width: 110rpx;margin-left: 20rpx;" @click="zhixing(1,indexmessage)">
<view class="white-circle"
:style="indexmessage?.izStart=='Y'?'opacity: 0.7' : ''">
<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/1.png'" />
<view class="right-menu-name">
转单执行
</view>
</view>
</view>
<view style="margin:1.5vw 0;width: 110rpx;margin-left: 20rpx;" @click="zhixing(2,indexmessage)">
<view class="white-circle">
<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/2.png'" />
<view class="right-menu-name">
协助执行
</view>
</view>
</view>
<view style="height: 2.9vw;"> </view>
</view>
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`" />
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- <tanchuang :show="zxzd>0" :font="zdcont" @back="zxzd = 0" @right="tijiaozx()"> </tanchuang> -->
<tanchuang :show="open==3" font="是否结束服务指令?" @back="open = 0" @right="ends()"> </tanchuang>
<view class="mengban" v-if="zdxzdex>0" @click="zdxzdex=0"></view>
<view class="photowall" v-show="zdxzdex>0" :style="zdxzdex?{opacity:1}:{opacity:0}" v-if="zdxzdex">
<view class="photowall-title">
<view class="photowall-name">
{{ zdxzdex==1?`转单执行`:`协助执行` }}
</view>
</view>
<scroll-view scroll-y="true" class="photowall-other" scroll-with-animation enable-flex v-if="zdxzdex>0">
<view class="photowall-other">
<view class="bottom-title" v-for="(v,k) in zdxzarr" :key='k' @click="zdwu(v,k)"
style="border: 1px solid #f8f8f8;width: 16vw;margin: 0 0.8vw;;height: 17vw;border-radius: 1.1vw;background: #f8f8f8;display: flex;flex-direction: column;align-items: center;"
:style="v.flag?'border: 1px solid #0385FA;background: #fff !important;':''">
<image style="width: 9vw;height: 9vw;border-radius: 50%;margin: 1vw auto;"
:src="v.headPath?serverpicUrl+v.headPath:'/static/shouye/xd.png'" />
<view class="name-weight">
{{v.name }}
</view>
<view class="message-view" v-if="uni.getStorageSync('NUall').elderInfo?.name">
{{v.sex}}
<view class="message-shu"></view>
<view style="font-weight: 600;">
{{ v.height}}cm
</view>
<view class="message-shu"></view>
{{ v.weight}}Kg
</view>
</view>
</view>
</scroll-view>
<!-- <view style="position: absolute;right: 2vw;bottom: 0.8vw;height: 4vw;" >
<view v-if="flag" class="lanbt" @click="zhixingsub" >确定</view>
<view v-if="!flag" class="huibt">确定</view>
</view> -->
</view>
<view class="mengban" v-if="topbuttontarget>0" @click="topbuttontarget=0"></view>
<view class="photowall" v-show="topbuttontarget>0" :style="donghuaopo?{opacity:1}:{opacity:0}">
<view class="photowall-title">
<view class="photowall-name">
{{ topbuttontarget==1?`照片`:`录像` }}
</view>
</view>
<scroll-view scroll-y="true" class="photowall-other" scroll-with-animation enable-flex
v-if="topbuttontarget>0">
<view class="photowall-other">
<view class="photowall-other-one" v-for="(item,index) in ilanarr" :key="index"
@click="previewImage(item,index,ilanarr)">
<view v-if="topbuttontarget==1"
style="width: 100%;height: 70%;border-radius: 30rpx;position: relative;">
<image style="width: 100%;height: 100%;border-radius: 30rpx;"
:src="item?serverpicUrl + item:'/static/ceshiyaoshan.png'" mode="aspectFill"
:lazy-load="true" />
<view @click.stop="open=1;del(item,index)" class="del" v-if="topbuttontarget>0&&(listobj.izStart=='Y'&& listobj.izFinish=='N')">
<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill" style="width: 1.4vw;
height: 1.4vw;"></image>
</view>
</view>
<view v-if="topbuttontarget==2"
style="width: 100%;height: 70%;border-radius: 30rpx ;position: relative;">
<video style="width: 100%;height: 100%;border-radius: 30rpx;" :id="'myVideo'+index"
:src="servervideoUrl+item" direction="180" mode="aspectFill"></video>
<view @click.stop="ilanarr.splice(index,1)"
v-if="topbuttontarget>0&&(listobj.izStart=='Y'&& listobj.izFinish=='N')" class="shanchu">
<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill" style="width: 1.4vw;
height: 1.4vw;"></image>
</view>
</view>
</view>
<view class="photowall-other-one"
v-if="topbuttontarget>0&&(listobj.izStart=='Y'&& listobj.izFinish=='N')">
<view class="uplods" @click="uplod(1)">
<image style="width: 70rpx;height: 70rpx;margin-bottom: 5rpx;"
src="/static/index/warehouse/procurement/picking/addphoto.png" />
<view style="color: #78B1EB;">
点击上传{{topbuttontarget==1?'图片':'录像'}}
</view>
</view>
</view>
<!-- <view class="noarray" v-if="!ilanarr.length">
<image class="noarray-img" src="/static/index/warehouse/procurement/picking/noarray.png"
mode="aspectFill" />
<view class="noarray-font">
暂无照片
</view>
</view> -->
</view>
</scroll-view>
<view style="position: absolute;right: 2vw;bottom: 0.8vw;height: 4vw;"
v-if="topbuttontarget>0&&(listobj.izStart=='Y'&& listobj.izFinish=='N')">
<view class="subnt" @click="submit">确定</view>
</view>
</view>
<tanchuang :show="open==1" font="是否删除此图片" @back="open = 0" @right="del1()"> </tanchuang>
<severcard ref="severcards" style="display: none;"></severcard>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
import { onBackPress, onShow, onHide } from "@dcloudio/uni-app"
import timeing from '@/component/public/newgame/sxy-Timeing.vue'
import { queryOrderList, queryOrderInfoList, startOrder, endOrder, editSubPicPath, editSubMp4, queryEmpList, transferOrder, assistOrder, generateInstant } from '../../component/doctorask/api/api.js'
const open = ref(0)
const donghuaopo = ref(false);
const topbuttontarget = ref(0);
const ilanarr = ref([]);
const listobj = ref({});
const photoplay = ref(false)
const serverUrl = ref(uni.getStorageSync('imagebase'))
const servervideoUrl = ref(uni.getStorageSync('serverUrl') + '/sys/commonVideo/staticVideo/')
const serverpicUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
const current = ref(0)
const autoplay = ref(false)
const init = (e) => {
firstgetqueryCgdList(e)
}
defineExpose({
init
})
const change = (e) => {
current.value = e.detail.current
}
const swip = (e) => {
if (current.value == 0 && e == -1) {
current.value = 4
return
}
if (current.value == 4 && e == 1) {
current.value = 0
return
}
current.value += e;
}
const form = reactive({
pageNo: 1,
pageSize: 10,
employeeId: uni.getStorageSync('userInfo').employessId,
nuId: uni.getStorageSync('nuId'),
workType: 5
})
onMounted(() => {
setTimeout(() => {
photoplay.value = true;
}, 200)
})
const zdxzdex = ref(0)
const zdxzarr = ref(0)
const zhixing = (e,indexmessage) => {
if (indexmessage.value?.izStart == 'Y' && e == 1) {
uni.showToast({
title: '服务中不能转单!',
icon: 'none'
})
return
}
queryEmpList({ id: uni.getStorageSync('userInfo').id }).then(res => {
console.log(res)
zdxzarr.value = res.result;
zdxzarr.value.forEach(item => {
item.flag = false
console.log(item.headPath)
})
zdxzdex.value = e;
})
}
const plsbuy = ref([])
const flag = ref(false)
const zdwu = (e,k)=>{
if(zdxzdex.value==1){
e.flag = !e.flag;
zdxzarr.value.forEach((item,i)=>{
if(i!=k){
item.flag = false
}
})
flag.value = e.flag
}
if(zdxzdex.value==2){
e.flag = !e.flag;
let arr = [];
zdxzarr.value.forEach((item,i)=>{
if(item.flag){
arr.push(1)
}
})
if(arr.length==0){
flag.value = false;
}else{
flag.value = true;
}
}
}
const zhixingsub = ()=>{
zxzd.value = zdxzdex.value
if(zdxzdex.value==1){
zdcont.value = "确认转单执行?"
}
if(zdxzdex.value==2){
zdcont.value = "确认协助执行?"
}
}
const zxzd = ref(0);
const zdcont = ref('');
const tijiaozx = ()=>{
if(zxzd.value == 1){
let s = {}
zdxzarr.value.forEach((item,i)=>{
if(item.flag){
s = item;
}
})
let obj = {
mainId:indexmessage.value.mainId,
employeeId:s.id,
employeeName:s.name,
beforeBy:indexmessage.value.employeeId,
beforeByName:indexmessage.value.employeeName
}
let nuId = uni.getStorageSync('nuId');
transferOrder(obj).then(res=>{
if(res.success){
firstgetqueryCgdList(nuId);
flag.value = false;
zxzd.value = 0;
zdxzdex.value = 0;
}
})
}
if(zxzd.value == 2){
let userinfo = uni.getStorageSync('userInfo')
let id = userinfo.id+',';
let name = userinfo.realname+',';
zdxzarr.value.forEach((item,i)=>{
if(item.flag){
id+=item.id+','
name+=item.name+','
}
})
id = id.slice(0, -1);
name = name.slice(0, -1);
let obj = {
mainId:indexmessage.value.mainId,
optIds:id,
optNames:name,
beforeBy:indexmessage.value.employeeId,
beforeByName:indexmessage.value.employeeName
}
assistOrder(obj).then(res=>{
if(res.success){
firstgetqueryCgdList(form.nuId)
// clickLeftMenu(0,{id:indexmessage.value.mainId})
flag.value = false;
zxzd.value = 0;
zdxzdex.value = 0;
}
})
}
}
// const indexmessage = ref({});
const firstgetqueryCgdList = (nuId) => {
form.nuId = nuId;
queryOrderList(form).then(res => {
if (res.result.records.length > 0) {
plsbuy.value = res.result.records
// indexmessage.value = res.result.records[0]
// clickLeftMenu(0,res.result.records[0])
} else {
plsbuy.value = [];
}
})
}
const submit = () => {
let sub = "";
ilanarr.value.forEach(item => {
sub += item + ','
})
if (topbuttontarget.value == 1) {
editSubPicPath({ id: listobj.value.id, manuallyPicPath: sub }).then(res => {
if (res.success) {
topbuttontarget.value = 0;
donghuaopo.value = false;
firstgetqueryCgdList(form.nuId)
// clickLeftMenu(0,{id:indexmessage.value.mainId})
}
})
} else {
editSubMp4({ id: listobj.value.id, manuallyMp4Path: sub }).then(res => {
console.log({ id: listobj.value.id, manuallyMp4Path: sub }, res)
if (res.success) {
topbuttontarget.value = 0;
donghuaopo.value = false;
firstgetqueryCgdList(form.nuId)
// clickLeftMenu(0,{id:indexmessage.value.mainId})
}
})
}
}
const previewImage = (v, i, arr) => {
if (topbuttontarget.value == 1) {
let u = []
arr.forEach(e => {
u.push(serverpicUrl.value + e)
})
uni.previewImage({
current: i,
urls: u,
showmenu: false,
longPressActions: {
itemList: [],
}
})
}
}
const videoContext = ref(null)
const play = (e, i) => {
videoContext.value = uni.createVideoContext('myVideo' + i);
videoContext.value.play()
}
const pici = ref(0);
const del = (v,i) =>{
pici.value = i;
}
const del1=()=>{
ilanarr.value.splice(pici.value,1);
open.value = 0
}
const sxdupld = (e) => {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
uni.uploadFile({
url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
filePath: e,
name: 'file',
fileType: topbuttontarget.value == 2 ? 'video' : 'image',
formData: {
biz: year + '/' + month + (topbuttontarget.value == 1 ? '/fwxm/manuallyPicPath' : '/fwxm/manuallyMp4Path')
},
header: {
'X-Access-Token': uni.getStorageSync('token')
},
success: res => {
const data = JSON.parse(res.data);
ilanarr.value.push(data.message)
uni.hideLoading()
},
fail: () => {
uni.hideLoading()
uni.showToast({ title: '上传失败', icon: 'none' })
}
})
}
const uplod = (v) => {
if (topbuttontarget.value == 1) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], //从相册选择
success: (e) => {
let ar = JSON.stringify(e.tempFilePaths)
uni.compressImage({
src: JSON.parse(ar)[0],
quality: 60,
success: res => {
sxdupld(res.tempFilePath)
// v.picPatharr.push(res.tempFilePath);
}
})
}
});
} else {
uni.chooseVideo({
sourceType: ['camera'],
success: (e) => {
uni.showLoading({
title: '正在上传...'
})
uni.compressVideo({
src: e.tempFilePath,
quality: 'medium',
success: res => {
sxdupld(res.tempFilePath)
// v.picPatharr.push(res.tempFilePath);
}
})
// sxdupld(res.tempFilePath )
}
});
}
}
const severcards = ref<InstanceType<typeof ChildComponent>>()
const start = (v) => {
if (v.izStart != 'N') { return }
startOrder({ id: v.id }).then(res => {
console.log(res)
if (res.success) {
v.izStart = "Y";
severcards.value.firstgetqueryCgdList()
} else {
}
})
}
const endobj = ref({})
const end = (v) => {
if (v.izStart == 'Y' && v.izFinish == 'N') {
endobj.value = v;
open.value = 3;
}
}
const ends = () => {
endOrder({ id: endobj.value.id }).then(res => {
if (res.success) {
open.value = 0;
endobj.value = {};
// severcards.value.firstgetqueryCgdList()
firstgetqueryCgdList(uni.getStorageSync('nuId'))
} else {
}
})
}
const errmsg = ref('')
const openerror = ref(false);
const errmsgclk = (e, k, indexmessage) => {
if (k == 1) {
if (indexmessage.value?.izStart == 'Y') {
switch (e) {
case 0:
if (indexmessage?.serviceContent == '') { return }
errmsg.value = indexmessage?.serviceContent
break;
case 1:
if (indexmessage?.mp3File == '') { return }
errmsg.value = indexmessage?.mp3File
break;
case 2:
if (indexmessage?.mp4File == '') { return }
errmsg.value = indexmessage?.mp4File
break;
default:
break;
}
openerror.value = true;
}
} else {
if (indexmessage?.izStart == 'Y') {
switch (e) {
case 3:
ysptp(indexmessage, 0, 1)
break;
case 4:
ysptp(indexmessage, 0, 2)
break;
default:
break;
}
}
}
}
const ysptp = (v, i, r) => {
// v.manuallyPicPath
if (r == 1 && v.manuallyPicPath) {
ilanarr.value = v.manuallyPicPath.split(",");
ilanarr.value = ilanarr.value.filter(item => item !== '');
} else if (r == 2 && v.manuallyMp4Path) {
ilanarr.value = v.manuallyMp4Path.split(",");
ilanarr.value = ilanarr.value.filter(item => item !== '');
} else if (r == 3 && v.tplinkPath) {
ilanarr.value = v.tplinkPath.split(",");
ilanarr.value = ilanarr.value.filter(item => item !== '');
} else {
ilanarr.value = [];
}
listobj.value = v;
topbuttontarget.value = r;
donghuaopo.value = true;
console.log(listobj.value)
console.log(topbuttontarget.value)
}
const fwzlindex = ref(0);
const fwzldex = ref(-1);
const fwzlarr = ref(0);
const zlarr = ref([{ flag: false }, { flag: false }, { flag: false }, { flag: false }, { flag: false }, { flag: false }, { flag: false }, { flag: false }, { flag: false }]);
const zldex = (e) => {
e.flag = !e.flag
}
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
])
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}`
})
}
</script>
<style scoped lang="less">
.shanchu{
width: 1.6vw;
height: 1.6vw;
z-index: 20;
position: absolute;
right: -1vw;
top: -0.7vw;
background: red;
display: flex;
justify-content: center;
border-radius: 50%;
align-items: center;
}
.del{
width: 1.6vw;
height: 1.6vw;
z-index: 20;
position: absolute;
right: -1vw;
top: -0.7vw;
background: red;
display: flex;
justify-content: center;
border-radius: 50%;
align-items: center;
}
.uplods {
width: 100%;
height: 71%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0vw;
left: 0;
background-color: #fafdff;
border: 1rpx solid #78B1EB;
border-radius: 30rpx;
}
.subnt {
width: 8.2vw;
height: 3.3vw;
background: #EDEDEF;
border-radius: 1.6vw;
font-weight: 400;
font-size: 1.6vw;
color: #888888;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #EDEDEF;
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
border: 1px solid rgba(3, 133, 250, 0.34);
color: #0385FA;
}
.swipeservwe {
width: 65.35vw;
height: 46.5vw;
position: relative;
background-color: #fff;
border-radius: 16px;
margin-top: 0.5vw;
padding: 3vw 0 0;
.bots {
width: 60%;
position: absolute;
height: 30rpx;
bottom: 2.2vw;
left: 20%;
display: flex;
justify-content: center;
view {
width: 1.3vw;
height: 0.6vw;
background: #DCDCDC;
border-radius: 0.2vw;
margin: 0.7vw;
}
.dot {
background: #0193F4;
}
}
.btn {
width: 2.4vw;
height: 2.4vw;
background: #E9EAED;
border-radius: 50%;
position: absolute;
top: 32vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
image {
width: 60%;
height: 60%;
}
}
.les {
left: 1.5vw;
}
.ris {
right: 1.5vw;
}
.swiper {
width: 100%;
height: 100%;
.swper {
width: 100%;
height: 100%;
position: relative;
}
}
}
.lanbt {
width: 8.2vw;
height: 3.3vw;
background: #EDEDEF;
border-radius: 1.6vw;
font-weight: 400;
font-size: 1.6vw;
color: #888888;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #EDEDEF;
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
border: 1px solid rgba(3, 133, 250, 0.34);
color: #0385FA;
}
.huibt {
width: 8.2vw;
height: 3.3vw;
background: #EDEDEF;
border-radius: 1.6vw;
font-weight: 400;
font-size: 1.6vw;
color: #888888;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #EDEDEF;
border: 1px solid rgba(3, 133, 250, 0.34);
color: #999;
}
.photo-father {
width: 100%;
height: 1100rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-top: 0rpx;
.timedjs {
position: absolute;
width: 7vw;
right: 4vw;
top: 0vw;
display: flex;
flex-direction: column;
align-items: center;
>text {
font-weight: 400;
font-size: 1.3vw;
color: #666666;
}
}
}
.juzhong {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -20%);
z-index: -1;
}
.cardbox {
width: 40vw;
height: 30vh;
position: relative;
top: -5vh;
z-index: 55;
left: 2vw;
.shadow {
width: 100%;
height: 5.5vw;
position: absolute;
left: 0;
top: -1.5vw;
border-radius: 0 0 25% 25%;
filter: blur(14rpx);
background: linear-gradient(to bottom, RGBA(239, 240, 244, 1), RGBA(239, 240, 244, 1));
z-index: 55;
}
.scrollcard {
width: 42vw;
height: 30vh;
position: relative;
.itemcard {
width: 11.2vw;
height: 8vw;
background: rgba(255,255,255,0.5);
border-radius: 1.6vw;
margin: 1.2vw 1.5vw 0 0vw;
display: inline-block;
border: 2px solid #DCDCDC;
text-align: center;
image {
width: 3.3vw;
height: 3.3vw;
margin: 0.8vw auto 0vw;
}
text {
display: block;
text-align: center;
font-weight: 400;
font-size: 1.3vw;
color: #666666;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
view {
text-align: center;
font-weight: 400;
font-size: 1vw;
color: #555;
width: 100%;
}
}
.act {
background: rgba(255,255,255,0.6);
border: 2px dashed #0089FE;
text,
view {
color: #017DE9;
}
}
}
}
.weight-time {
font-weight: 800;
font-size: 70rpx;
margin-top: 2vw;
position: relative;
margin-left: -50rpx;
}
.big-img {
height: 500rpx;
z-index: 100;
margin-top: -100rpx;
image {
width: 100%;
height: 100%;
}
}
.server-name {
font-size: 35rpx;
margin-right: 10rpx;
font-weight: 600;
margin-top: 1vw;
}
.server-bgc {
width: 160rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.bgc-img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.bgc-font {
color: #fff;
z-index: 1;
}
.states-father {
display: flex;
margin: 0 20rpx;
}
.start-button {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #009DEF, #0076FF);
display: flex;
justify-content: center;
align-items: center;
border-radius: 40rpx;
color: #fff;
font-size: 1.5vw;
}
.end-button {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #FFFFFF, #C8D0D9);
display: flex;
justify-content: center;
align-items: center;
border-radius: 40rpx;
font-size: 1.5vw;
}
.pao-father {
position: absolute;
top: -20rpx;
right: -110rpx;
font-size: 22rpx;
width: 100rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
.pao-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.left-menu {
position: absolute;
top: 40%;
left:6vw;
transform: translateY(-50%);
}
.zoom {
transform: scale(1.2);
transform-origin: bottom left;
transition: transform 1s ease;
}
.left-ball {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #F1F2F3;
.left-menu-img {
width: 40rpx;
height: 40rpx;
}
}
.right-menu {
position: absolute;
top: 40%;
right: 6vw;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 140rpx;
.top-img {
width: 4.9vw;
height:4.9vw;
padding: 0 50rpx;
}
.right-scroll {
width: 100%;
height: 450rpx;
}
.white-circle {
height: 170rpx;
border-radius: 60rpx;
background: #F7F7F9;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
font-size: 25rpx;
width: 100rpx;
.right-menu-img {
width: 50rpx;
height: 50rpx;
}
.right-menu-name {
width: 50rpx;
}
}
}
.zhezhao-top {
position: absolute;
top: 105rpx;
left: 0%;
width: 120%;
height: 120rpx;
z-index: 4;
}
.zhezhao-bottom {
position: absolute;
bottom: 105rpx;
left: 0%;
width: 120%;
height: 120rpx;
z-index: 4;
}
.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;
}
.zhezhao-right {
position: absolute;
top: 0rpx;
right: 0%;
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;
}
.title-card-right {
position: absolute;
right: 0;
top: 0;
width: 10vw;
height: 9.4vw;
border-radius: 2vw;
background-color: #E4EBF4;
padding: 1.6vw;
margin-right: 1.5vw;
border: 2rpx solid #D2DFF0;
}
.title-card {
width: 10vw;
height: 9vw;
border-radius: 2vw;
background-color: #FFFFFF;
padding: 1.6vw;
position: relative;
margin-right: 1.5vw;
}
.card-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3vw;
display: flex;
.bottom-img {
width: 1.6vw;
height: 1.6vw;
margin-left: 1.8vw;
}
.bottom-font {
color: #555555;
font-size: 1.4vw;
margin-left: 0.5vw;
}
}
.card-top {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
.card-top-left {
font-size: 1.8vw;
font-weight: 600;
}
.card-top-right {
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;
position: relative;
}
.name-weight {
font-size: 2vw;
font-weight: 600;
margin: 0.2vw 0;
}
.message-view {
display: flex;
.message-shu {
width: 3rpx;
height: 1.5vw;
background-color: #bcc1c7;
margin: 0 0.4vw;
margin-top: 0.1vw;
}
.message-img {
width: 1.5vw;
height: 1.5vw;
margin-top: 0.1vw;
}
}
.message-bottom {
margin-top: 0.5vh;
width: 100%;
height: 4vh;
display: flex;
justify-content: center;
.bottom-tags {
background-color: #E7F1FF;
color: #0084FA;
height: 100%;
display: flex;
align-items: center;
padding: 0 0.4vw;
border-radius: 0.8vw;
font-size: 1.2vw;
margin: 0 0.2vw;
white-space: nowrap;
flex-wrap: nowrap;
}
}
.fixed-card {
position: fixed;
right: 2.4vw;
top: 5.8vh;
width: 35vw;
height: 28vh;
background-color: rgba(239, 246, 255, 0.95);
border-radius: 1.5vw;
border: 1rpx solid #638DFF;
box-shadow: 0 2rpx 6rpx #A0B9FF;
display: flex;
align-items: center;
transition: all 0.5s ease;
padding: 0 0 0 1.5vw;
.fixed-card-left {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 1.2vw;
.card-left-img {
width: 12vw;
height: 8vw;
}
}
.big-time {
font-weight: 600;
font-size: 2.8vw;
}
.icon-people {
display: flex;
margin: 0.3vw 0;
color: #555555;
.people-img {
width: 1.5vw;
height: 1.5vw;
margin-right: 0.3vw;
margin-top: 0.1vw;
}
}
.icon-button {
display: flex;
margin-top: 1vw;
font-size: 1.5vw;
width: 18.5vw;
justify-content: space-around;
.button-left {
width: 8.5vw;
height: 3.3vw;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.2vw;
border: 1rpx solid #C7D2E4;
color: #333333;
}
.button-right {
width: 8.5vw;
height: 3.3vw;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.2vw;
border: 1rpx solid #5AAEFF;
color: #249BFA;
background: linear-gradient(to bottom, #fff, #D1EAFF);
}
}
}
.left-open {
position: absolute;
left: -1.5vw;
top: 50%;
transform: translateY(-50%);
width: 3vw;
height: 5vw;
border: 1rpx solid #B8C4DA;
background-color: #F2F7FD;
z-index: 999;
border-radius: 3vw;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease;
.open-img {
width: 3vw;
height: 3vw;
}
}
.noarray {
width: 90%;
height: 100%;
// background-color: red;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.noarray-img {
margin-top: -200rpx;
width: 350rpx;
height: 350rpx;
}
}
.noarray-font {
margin-top: -60rpx;
color: #888888;
font-size: 25rpx;
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: RGBA(239, 240, 244, 0.55);
}
.photowall {
position: fixed;
top: 54%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 83%;
border-radius: 30rpx;
background-color: #fff;
transition: all 0.3s;
z-index: 9990;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
padding: 0 90rpx;
.photowall-title {
margin-top: 50rpx;
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 50rpx;
.photowall-name {
font-size: 38rpx;
// font-weight: 600;
}
.photowall-left {
color: #888888;
}
.photowall-right {
font-size: 30rpx;
font-weight: 600;
}
}
.photowall-other {
width: 76vw;
height: 62vh;
display: flex;
margin-top: 20rpx;
flex-wrap: wrap;
.photowall-other-one {
width: 22vw;
height: 430rpx;
margin-right: 3vw;
margin-bottom: 0%;
border-radius: 30rpx;
display: flex;
position: relative;
video {
width: 100%;
height: 100%;
}
}
}
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.jsh0 {
height: 0vw !important;
padding: 0 2vw !important;
top: 9.4vw !important;
}
.jszl {
width: 64.5vw;
height: 44vw;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
border-radius: 2.2vw;
position: absolute;
top: 11vw;
right: 0;
z-index: 200;
padding: 2vw;
overflow: hidden;
.submit {
width: 100%;
height: 3.2vw;
margin-top: 0.4vw;
padding-right: 2vw;
display: flex;
justify-content: flex-end;
view {
display: flex;
justify-content: center;
align-items: center;
&:nth-child(1) {
width: 7.1vw;
height: 3.2vw;
background: #F8F8F8;
border-radius: 1.6vw;
border: 1px solid #E5E5E5;
font-weight: 400;
font-size: 1.4vw;
color: #555555;
}
&:nth-child(2) {
width: 7.1vw;
height: 3.2vw;
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
border-radius: 1.6vw;
border: 1px solid rgba(3, 133, 250, 0.34);
font-weight: 400;
font-size: 1.4vw;
color: #1083F8;
margin-left: 0.7vw;
}
}
}
.scrol {
width: 110%;
height: 29.5vw;
display: flex;
flex-wrap: wrap;
.cdk {
width: 6.1vw;
height: 6.1vw;
background: #F8F8F8;
border-radius: 1.6vw;
margin: 1.5vw 1.5vw 0 0vw;
display: inline-block;
border: 1px solid #F8F8F8;
text-align: center;
image {
width: 2vw;
height: 2vw;
margin: 1.4vw auto 0vw;
}
text {
display: block;
text-align: center;
font-weight: 400;
font-size: 1.1vw;
color: #333333;
width: 100%;
}
view {
text-align: center;
font-weight: 400;
font-size: 0.7vw;
color: #555;
width: 100%;
}
}
.act {
background: #F2F8FF;
border: 1px solid rgba(1, 125, 233, 0.43);
text {
color: #017DE9;
}
}
}
.spiw {
width: 14vw;
height: 2vw;
display: flex;
justify-content: space-around;
margin-top: 2.5vw;
view {
font-weight: 400;
font-size: 1.3vw;
color: #555555;
position: relative;
line-height: 1.5vw;
}
.act {
color: #222222 !important;
font-weight: 500;
}
.act::after {
width: 50%;
height: 0.2vw;
background: #0089FE;
border-radius: 0.1vw;
content: '';
position: absolute;
bottom: 0;
left: 25%;
}
}
.tittop {
height: 2vw;
font-weight: 400;
font-size: 1.4vw;
color: #333333;
display: flex;
align-items: center;
view {
width: 0.4vw;
height: 1.2vw;
background: #017DE9;
border-radius: 0.2vw;
margin-right: 0.8vw;
}
}
}
</style>