999999
|
|
@ -139,10 +139,7 @@
|
|||
for (let i = 0; i < n; i++) {
|
||||
cumulative += intervals[i]
|
||||
setTimeout(async () => {
|
||||
// const menuCopy = JSON.parse(JSON.stringify(rightbutton.value))
|
||||
cardarray.value.push(relArray.value[i])
|
||||
// console.log("???",cardarray.value)
|
||||
// cardarray.value.push({ menu: menuCopy, name: `未命名${i}`, isNew: true })
|
||||
// 当卡片总数为 5,7,9,... 时滚动到底部
|
||||
const len = cardarray.value.length
|
||||
if (len >= 5 && len % 2 === 1) {
|
||||
|
|
@ -333,7 +330,7 @@
|
|||
}
|
||||
|
||||
.other {
|
||||
width: 65%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,9 +15,6 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="index-content-down">
|
||||
长春市朝阳区久泰开运养老服务有限公司
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,11 +43,8 @@
|
|||
uni.scanCode({
|
||||
// 仅使用相机扫码,设置为 false 则可以从相册选择图片扫码(部分平台可能不支持)
|
||||
onlyFromCamera: true,
|
||||
// 指定扫码类型,可选:'barCode'、'qrCode'、'datamatrix'、'pdf417'、'all'
|
||||
scanType: ['qrCode', 'barCode'],
|
||||
success(res) {
|
||||
// res.code 结果字符串,res.scanType 类型
|
||||
// scanResult.value = res.result || res.code
|
||||
},
|
||||
fail(err) {
|
||||
uni.showToast({ title: '扫码失败:' + err.errMsg, icon: 'none' })
|
||||
|
|
@ -185,9 +179,6 @@
|
|||
top: 10%;
|
||||
}
|
||||
|
||||
// 50% {
|
||||
// top: 100%;
|
||||
// }
|
||||
|
||||
100% {
|
||||
top: 80%;
|
||||
|
|
|
|||
|
|
@ -96,21 +96,25 @@
|
|||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url('https://www.focusnu.com/media/directive/index/whitepeople.png');
|
||||
// background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// background-image: url('https://www.focusnu.com/media/directive/index/whitepeople.png');
|
||||
// // background-size: 100% auto;
|
||||
// background-position: top center;
|
||||
// background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 47%;
|
||||
background: linear-gradient(to left, #00C9FF, #0076FF);
|
||||
// background: linear-gradient(to left, #00C9FF, #0076FF);
|
||||
background-color: #ddf0ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
color: #007CFF;
|
||||
border: 1rpx solid #007CFF;
|
||||
font-size: 25rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,39 +3,52 @@
|
|||
@touchcancel="onLongPressEnd">
|
||||
|
||||
<!-- 返回 -->
|
||||
<view :class="beblue === 5 ? 'click-box-target' : 'click-box'" @tap="onTap(5)"
|
||||
<view :class="beblue === 5 ? 'click-box-target' : 'click-box'" @tap="onTap(5)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(5, e)">
|
||||
<span :class="beblue === 5 ? 'grad-text' : ''">返回</span>
|
||||
<image :src="`/static/index/newruler/${beblue === 5 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<span style="z-index: 1;font-size: 30rpx;" :class="beblue === 5 ? 'grad-text' : ''">{{leftbuttonname}}</span>
|
||||
</view>
|
||||
|
||||
<!-- 上 -->
|
||||
<view :class="beblue === 0 ? 'click-box-target' : 'click-box'" @tap="onTap(0)"
|
||||
<view :class="beblue === 0 ? 'click-box-target' : 'click-box'" @tap="onTap(0)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(0, e)">
|
||||
<image :src="`/static/index/newruler/arrow_1${beblue===0 ? '_1' : ''}.png`" class="image-photo" />
|
||||
<image :src="`/static/index/newruler/${beblue === 0 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<image :src="`/static/index/newruler/fangxiang${beblue===0 ? 'target' : ''}.png`" class="image-photo" />
|
||||
</view>
|
||||
|
||||
<!-- 确定 -->
|
||||
<view :class="beblue === 4 ? 'click-box-target' : 'click-box'" @tap="onTap(4)"
|
||||
<view :class="beblue === 4 ? 'click-box-target' : 'click-box'" @tap="onTap(4)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(4, e)">
|
||||
<span :class="beblue === 4 ? 'grad-text' : ''">确定</span>
|
||||
</view>
|
||||
|
||||
<!-- 右 -->
|
||||
<view :class="beblue === 3 ? 'click-box-target' : 'click-box'" @tap="onTap(3)"
|
||||
@longpress="(e) => onLongPressStart(3, e)">
|
||||
<image :src="`/static/index/newruler/arrow_3${beblue===3 ? '_3' : ''}.png`" class="image-photo" />
|
||||
</view>
|
||||
|
||||
<!-- 下 -->
|
||||
<view :class="beblue === 2 ? 'click-box-target' : 'click-box'" @tap="onTap(2)"
|
||||
@longpress="(e) => onLongPressStart(2, e)">
|
||||
<image :src="`/static/index/newruler/arrow_2${beblue===2 ? '_2' : ''}.png`" class="image-photo" />
|
||||
<image :src="`/static/index/newruler/${beblue === 4 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<span style="z-index: 1;font-size: 30rpx;" :class="beblue === 4 ? 'grad-text' : ''">{{rightbuttonname}}</span>
|
||||
</view>
|
||||
|
||||
<!-- 左 -->
|
||||
<view :class="beblue === 1 ? 'click-box-target' : 'click-box'" @tap="onTap(1)"
|
||||
<view :class="beblue === 3 ? 'click-box-target' : 'click-box'" @tap="onTap(3)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(3, e)">
|
||||
<image :src="`/static/index/newruler/${beblue === 3 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<image style="transform: rotate(270deg);transform-origin: center;" :src="`/static/index/newruler/fangxiang${beblue===3 ? 'target' : ''}.png`"
|
||||
class="image-photo" />
|
||||
</view>
|
||||
|
||||
<!-- 下 -->
|
||||
<view :class="beblue === 2 ? 'click-box-target' : 'click-box'" @tap="onTap(2)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(2, e)">
|
||||
<image :src="`/static/index/newruler/${beblue === 2 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<image style="transform: rotate(180deg);transform-origin: center;" :src="`/static/index/newruler/fangxiang${beblue===2 ? 'target' : ''}.png`" class="image-photo" />
|
||||
</view>
|
||||
|
||||
<!-- 右 -->
|
||||
<view :class="beblue === 1 ? 'click-box-target' : 'click-box'" @tap="onTap(1)" style="position: relative;"
|
||||
@longpress="(e) => onLongPressStart(1, e)">
|
||||
<image :src="`/static/index/newruler/arrow_4${beblue===1 ? '_4' : ''}.png`" class="image-photo" />
|
||||
<image :src="`/static/index/newruler/${beblue === 1 ? 1:0}.png`" style="position: absolute;width: 100%;
|
||||
height: 100%;" />
|
||||
<image style="transform: rotate(90deg);transform-origin: center;" :src="`/static/index/newruler/fangxiang${beblue===1 ? 'target' : ''}.png`" class="image-photo" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -54,11 +67,19 @@
|
|||
const props = defineProps({
|
||||
movebottom: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 30,
|
||||
},
|
||||
moveleft: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 10,
|
||||
},
|
||||
leftbuttonname: {
|
||||
type: String,
|
||||
default: "返回"
|
||||
},
|
||||
rightbuttonname: {
|
||||
type: String,
|
||||
default: "确定"
|
||||
},
|
||||
})
|
||||
|
||||
|
|
@ -138,7 +159,7 @@
|
|||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
width: 400rpx;
|
||||
width: 500rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
z-index: 99;
|
||||
|
|
@ -147,31 +168,26 @@
|
|||
|
||||
.click-box,
|
||||
.click-box-target {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-bottom: 15rpx;
|
||||
// background-color: red;
|
||||
width: 150rpx;
|
||||
height: 137rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 0rpx;
|
||||
// border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.click-box {
|
||||
background-color: #f6f6f9;
|
||||
box-shadow: 0 4px 12px #e5e7ea;
|
||||
border: 2rpx solid #e6e7eb;
|
||||
color: #888d99;
|
||||
}
|
||||
|
||||
/* 选中态:背景径向渐变 + 中心缩放动画(从中间放大再回到原样) */
|
||||
.click-box-target {
|
||||
background: radial-gradient(circle at 30% 30%, #f2f7fd 0%, #deeaf9 100%);
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
|
||||
border: 2rpx solid #c3ccd9;
|
||||
color: transparent;
|
||||
/* 文字使用渐变填充 */
|
||||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
||||
|
|
@ -182,14 +198,17 @@
|
|||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
/* 先收缩一点点 */
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
65% {
|
||||
/* 再放大到略超出的感觉 */
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
@ -212,8 +231,8 @@
|
|||
}
|
||||
|
||||
.image-photo {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
transition: transform 0.18s ease, filter 0.18s ease;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@
|
|||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
/* 显示时透明度过渡到 1,可接受点击 */
|
||||
|
|
@ -154,7 +155,8 @@
|
|||
.neuro-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(1rpx);
|
||||
background-color: rgba(236, 237, 241, 0.4);
|
||||
}
|
||||
|
||||
/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
|
||||
|
|
@ -168,17 +170,13 @@
|
|||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url('https://www.focusnu.com/media/directive/index/whitepeople.png');
|
||||
// background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
background: linear-gradient(to left, #00C9FF, #0076FF);
|
||||
// background: linear-gradient(to left, #00C9FF, #0076FF);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -186,6 +184,22 @@
|
|||
font-size: 25rpx;
|
||||
border-radius: 35rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #007CFF;
|
||||
font-size: 30rpx;
|
||||
background-color: #ddf0ff;
|
||||
border: 1rpx solid #007CFF;
|
||||
|
||||
// margin-left: 30rpx;
|
||||
// width: 170rpx;
|
||||
// height: 90rpx;
|
||||
// border-radius: 40rpx;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// color: #007CFF;
|
||||
// font-size: 30rpx;
|
||||
// background-color: #ddf0ff;
|
||||
// border: 1rpx solid #007CFF;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -232,7 +246,7 @@
|
|||
|
||||
.password {
|
||||
width: 100%;
|
||||
background-color: #edf0f9;
|
||||
background-color: rgba(239, 240, 244, 0.5);
|
||||
border-radius: 23rpx;
|
||||
height: 80rpx;
|
||||
padding-left: 20rpx;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
const props = defineProps({
|
||||
widNumber: {
|
||||
type: Number,
|
||||
default: 26
|
||||
default: 25
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
|
||||
.drawer-content-circle {
|
||||
position: absolute;
|
||||
bottom: 270rpx;
|
||||
bottom: 240rpx;
|
||||
left: -60rpx;
|
||||
width: 150rpx;
|
||||
height: 160rpx;
|
||||
|
|
@ -167,6 +167,6 @@
|
|||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 25rpx;
|
||||
transform: rotate(180deg);
|
||||
// transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
2
main.js
|
|
@ -19,12 +19,14 @@ import {
|
|||
createSSRApp
|
||||
} from 'vue'
|
||||
import donghua from '@/component/public/donghua.vue'
|
||||
import arrowkeys from '@/component/public/newgame/arrowkeys.vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
|
||||
// 使用 uView UI
|
||||
app.use(uView)
|
||||
app.component('donghua', donghua)
|
||||
app.component('arrowkeys', arrowkeys)
|
||||
return {
|
||||
app
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "护理单元",
|
||||
"appid" : "__UNI__FB2D473",
|
||||
"description" : "护理单元",
|
||||
"versionName" : "1.4.5",
|
||||
"versionCode" : 145,
|
||||
"versionName" : "1.5.3",
|
||||
"versionCode" : 153,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
32
pages.json
|
|
@ -40,6 +40,38 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
// 设置
|
||||
{
|
||||
"path": "pages/watch/settings/settings",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
// 手动录入
|
||||
{
|
||||
"path": "pages/watch/settings/input",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
// 扫码添加
|
||||
{
|
||||
"path": "pages/watch/settings/saoma",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
// 雷达
|
||||
{
|
||||
"path": "pages/watch/settings/leida",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "pages/NursingNew/index",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@
|
|||
<view style="width: 100rpx;">
|
||||
|
||||
</view>
|
||||
<view v-for="(item,index) in typeArray" :key="index" class="menu" @click="typeNow=index;">
|
||||
<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">
|
||||
|
||||
<donghua :links="item.url" :playing="typeNow===index" />
|
||||
<text class="menu-font" :class="{ zoom: typeNow===index }"
|
||||
|
|
@ -67,12 +68,6 @@
|
|||
<view class="server-name">
|
||||
一级压疮防护
|
||||
</view>
|
||||
<!-- <view class="server-bgc">
|
||||
<image class="bgc-img" :src="`/static/index/newindex/wendu/bgc.png`" />
|
||||
<view class="bgc-font">
|
||||
日常防护
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;margin-top: 40rpx;">
|
||||
<image class="down-img" :src="`/static/index/newindex/states/left.png`" />
|
||||
|
|
@ -86,61 +81,55 @@
|
|||
<image class="down-img" :src="`/static/index/newindex/states/right.png`" />
|
||||
</view>
|
||||
<view style="display: flex;margin-top: 60rpx;">
|
||||
<view :class="{thirdtarget: movetype===3 && zeroIndex===0}"
|
||||
style="width: 240rpx;height: 90rpx;margin-right: 40rpx;">
|
||||
<view class="start-button">
|
||||
开始服务
|
||||
</view>
|
||||
</view>
|
||||
<view :class="{thirdtarget: movetype===3 && zeroIndex===1}" style="width: 240rpx;height: 90rpx;">
|
||||
<view class="end-button">
|
||||
结束服务
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- <view class="abs-time">
|
||||
<view class="big-time">
|
||||
{{currentTime}}
|
||||
</view>
|
||||
<view class="date">
|
||||
<view class="">
|
||||
{{fullDate}}
|
||||
</view>
|
||||
<view class="">
|
||||
{{weekDay}}
|
||||
</view>
|
||||
</view>
|
||||
<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 class="left-menu">
|
||||
<view v-for="(item,index) in leftArray" :key="index" class="left-ball">
|
||||
<view v-for="(item,index) in leftArray" :key="index" style="margin: 30rpx 0;"
|
||||
:class="{firsttarget: movetype===1 && zeroIndex===index}">
|
||||
<view class="left-ball" :style="{backgroundColor: movetype===1 && zeroIndex===index?`#ddf0ff`:``}">
|
||||
<image class="left-menu-img" :src="item" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-menu">
|
||||
<view class="zhezhao-top" @click="scrollTop -= 115"></view>
|
||||
<view class="zhezhao-bottom" @click="scrollTop += 115"></view>
|
||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`" @click="scrollTop>0? scrollTop -= 115:scrollTop=0" />
|
||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`"
|
||||
@click="scrollTop>0? scrollTop -= 115:scrollTop=0" />
|
||||
<scroll-view scroll-y="true" class="right-scroll" :scroll-top="scrollTop" @scroll="onScroll">
|
||||
<view style="height: 30rpx;">
|
||||
|
||||
</view>
|
||||
<view v-for="(item,index) in rightMenu" class="white-circle">
|
||||
<view v-for="(item,index) in rightMenu" :class="{secondtarget: movetype===2 && zeroIndex===index}"
|
||||
style="margin: 20rpx auto;width: 110rpx;">
|
||||
<view class="white-circle" :style="{backgroundColor: movetype===2 && zeroIndex===index?`#ddf0ff`:``}">
|
||||
<image class="right-menu-img" :src="item.url" />
|
||||
<view class="right-menu-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view style="height: 30rpx;">
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`" @click="scrollTop > (55* rightMenu.length) ? scrollTop = (55* rightMenu.length) : scrollTop += 115 "/>
|
||||
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`"
|
||||
@click="scrollTop > (55* rightMenu.length) ? scrollTop = (55* rightMenu.length) : scrollTop += 115 " />
|
||||
</view>
|
||||
<!-- 轮盘 -->
|
||||
|
||||
|
|
@ -158,8 +147,194 @@
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
propsmove: {
|
||||
type: Number
|
||||
},
|
||||
isMain: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
const movetype = ref(-1);
|
||||
// 监听 isMain 的变化,但只在 isShow 为 true 时响应
|
||||
watch(
|
||||
() => props.isMain,
|
||||
(newVal, oldVal) => {
|
||||
// 如果不是从一个明确的布尔值变到另一个(例如首次 undefined -> 布尔),可以按需忽略
|
||||
if (typeof oldVal !== 'boolean') return
|
||||
// 仅在 isShow 为 true 时生效
|
||||
if (!props.isShow) return
|
||||
|
||||
if (oldVal === true && newVal === false) {
|
||||
movetype.value = 0;
|
||||
zeroIndex.value = 0;
|
||||
typeNow.value = zeroIndex.value;
|
||||
// console.log("isActive?")
|
||||
} else if (oldVal === false && newVal === true) {
|
||||
movetype.value = -1
|
||||
zeroIndex.value = -1
|
||||
typeNow.value = 0
|
||||
}
|
||||
}
|
||||
)
|
||||
const zeroIndex = ref(-1)
|
||||
const emit = defineEmits(['back'])
|
||||
watch(
|
||||
() => props.propsmove,
|
||||
() => {
|
||||
if (movetype.value != -1) {
|
||||
switch (movetype.value) {
|
||||
case 0:
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
movetype.value = -1
|
||||
zeroIndex.value = -1
|
||||
|
||||
emit("back")
|
||||
|
||||
break;
|
||||
case 1:
|
||||
|
||||
if (zeroIndex.value < typeArray.value.length - 1) {
|
||||
zeroIndex.value++
|
||||
typeNow.value = zeroIndex.value;
|
||||
}
|
||||
|
||||
break;
|
||||
case 2:
|
||||
movetype.value = 1
|
||||
zeroIndex.value = 0
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (zeroIndex.value) {
|
||||
zeroIndex.value--
|
||||
typeNow.value = zeroIndex.value;
|
||||
} else {
|
||||
movetype.value = -1
|
||||
zeroIndex.value = -1
|
||||
emit("back")
|
||||
}
|
||||
|
||||
break;
|
||||
case 4:
|
||||
typeNow.value = zeroIndex.value;
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
|
||||
break;
|
||||
case 1:
|
||||
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
if (zeroIndex.value) {
|
||||
zeroIndex.value--
|
||||
} else {
|
||||
movetype.value = 0
|
||||
zeroIndex.value = 0
|
||||
typeNow.value = zeroIndex.value;
|
||||
}
|
||||
|
||||
break;
|
||||
case 1:
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 2
|
||||
|
||||
break;
|
||||
case 2:
|
||||
if (zeroIndex.value < 2) {
|
||||
zeroIndex.value++
|
||||
} else {
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 3
|
||||
}
|
||||
break;
|
||||
|
||||
case 3:
|
||||
movetype.value = -1
|
||||
zeroIndex.value = -1
|
||||
emit("back")
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
if (zeroIndex.value) {
|
||||
zeroIndex.value--
|
||||
} else {
|
||||
movetype.value = 0
|
||||
zeroIndex.value = 0
|
||||
typeNow.value = zeroIndex.value;
|
||||
}
|
||||
|
||||
break;
|
||||
case 1:
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 3
|
||||
|
||||
break;
|
||||
case 2:
|
||||
if (zeroIndex.value < 2) {
|
||||
zeroIndex.value++
|
||||
} else {
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 3
|
||||
}
|
||||
break;
|
||||
|
||||
case 3:
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 1
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
zeroIndex.value = 0
|
||||
movetype.value = 1
|
||||
|
||||
break;
|
||||
case 1:
|
||||
|
||||
if (zeroIndex.value === 0) {
|
||||
zeroIndex.value++
|
||||
} else {
|
||||
zeroIndex.value = 2
|
||||
movetype.value = 2
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (zeroIndex.value === 1) {
|
||||
zeroIndex.value--
|
||||
} else {
|
||||
zeroIndex.value = 2
|
||||
movetype.value = 1
|
||||
}
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
const typeNow = ref(-1);
|
||||
const photoplay = ref(false)
|
||||
const downArray = ref()
|
||||
|
|
@ -394,7 +569,7 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.index-content-other {
|
||||
width: calc(100% - 330rpx);
|
||||
width: calc(100% - 407rpx);
|
||||
height: 100%;
|
||||
transition: opacity 1s ease;
|
||||
position: relative;
|
||||
|
|
@ -447,14 +622,15 @@
|
|||
}
|
||||
|
||||
.scroll-vi {
|
||||
height: 100rpx;
|
||||
height: 120rpx;
|
||||
width: 95%;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
.menu {
|
||||
margin-top: 15rpx;
|
||||
flex: 0 0 auto; // 👈 关键点
|
||||
height: 90rpx;
|
||||
width: 240rpx;
|
||||
|
|
@ -504,8 +680,8 @@
|
|||
}
|
||||
|
||||
.photo-father {
|
||||
width:100%;
|
||||
height: 1200rpx;
|
||||
width: 100%;
|
||||
height: 1100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -580,8 +756,8 @@
|
|||
}
|
||||
|
||||
.start-button {
|
||||
width: 240rpx;
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #009DEF, #0076FF);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -589,12 +765,12 @@
|
|||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
margin-right: 40rpx;
|
||||
|
||||
}
|
||||
|
||||
.end-button {
|
||||
width: 240rpx;
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #FFFFFF, #C8D0D9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -647,7 +823,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 30rpx 0;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.left-menu-img {
|
||||
|
|
@ -692,9 +868,9 @@
|
|||
}
|
||||
|
||||
.white-circle {
|
||||
width: 80%;
|
||||
|
||||
height: 200rpx;
|
||||
margin: 20rpx auto;
|
||||
|
||||
border-radius: 60rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
|
@ -728,6 +904,7 @@
|
|||
);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.zhezhao-bottom {
|
||||
position: absolute;
|
||||
bottom: 105rpx;
|
||||
|
|
@ -742,7 +919,8 @@
|
|||
);
|
||||
z-index: 4;
|
||||
}
|
||||
.zhezhao-left{
|
||||
|
||||
.zhezhao-left {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 0%;
|
||||
|
|
@ -756,7 +934,8 @@
|
|||
);
|
||||
z-index: 4;
|
||||
}
|
||||
.zhezhao-right{
|
||||
|
||||
.zhezhao-right {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0%;
|
||||
|
|
@ -770,4 +949,107 @@
|
|||
);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.zerotarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 50rpx;
|
||||
--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;
|
||||
}
|
||||
|
||||
.firsttarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 50%;
|
||||
--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;
|
||||
}
|
||||
|
||||
.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% {
|
||||
/* 先收缩一点点 */
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
65% {
|
||||
/* 再放大到略超出的感觉 */
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -185,35 +185,48 @@
|
|||
}
|
||||
}
|
||||
|
||||
.white-circle-click-father-spec {
|
||||
position: absolute;
|
||||
top: -130rpx;
|
||||
left: 0;
|
||||
background-color: #e6f4ff;
|
||||
/* position: absolute; */
|
||||
/* top:0;
|
||||
left: 0; */
|
||||
overflow: hidden;
|
||||
/* 重要:让伪元素在圆角内显示 */
|
||||
margin-left: 10rpx;
|
||||
height: 110rpx;
|
||||
width: 150rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
/* 你原来的背景 */
|
||||
border: 2rpx solid #9AD1FF;
|
||||
color: #007CFF;
|
||||
.other-father {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.white-circle-click-father-spec {
|
||||
position: absolute;
|
||||
top: -160rpx;
|
||||
right: 15rpx;
|
||||
overflow: hidden;
|
||||
/* background-color: #fff; */
|
||||
/* 重要:让伪元素在圆角内显示 */
|
||||
margin-left: 10rpx;
|
||||
height: 130rpx;
|
||||
width: 130rpx;
|
||||
border-radius: 50%;
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 50%;
|
||||
border: var(--thick) dashed var(--color);
|
||||
border-radius: var(--radius);
|
||||
|
||||
background:
|
||||
/* 上边 */
|
||||
repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / 100% var(--thick) no-repeat,
|
||||
/* 下边 */
|
||||
repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom left / 100% var(--thick) no-repeat,
|
||||
/* 左边 */
|
||||
repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / var(--thick) 100% no-repeat,
|
||||
/* 右边 */
|
||||
repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.white-circle-click-father {
|
||||
/* position: absolute; */
|
||||
/* top:0;
|
||||
left: 0; */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 重要:让伪元素在圆角内显示 */
|
||||
margin-left: 10rpx;
|
||||
|
|
@ -246,19 +259,16 @@
|
|||
background: linear-gradient(to bottom, #bfe9ff, #4aa8ff);
|
||||
/* 点击后的渐变(可替换) */
|
||||
opacity: 0;
|
||||
transform: scale(1.02);
|
||||
/* transform: scale(1.02); */
|
||||
}
|
||||
|
||||
/* anim 类触发 1s 动画(淡入→停留→淡出) */
|
||||
.white-circle-click-father.anim::before {
|
||||
|
||||
animation: coverFade 1s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* 可选:动画期间文字变色 */
|
||||
/* .white-circle-click-father.anim .label {
|
||||
color: #fff ;
|
||||
|
||||
} */
|
||||
|
||||
/* keyframes:0-20% 淡入,20-80% 保持,80-100% 淡出 */
|
||||
@keyframes coverFade {
|
||||
|
|
@ -540,7 +550,7 @@
|
|||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
margin-left: 60rpx;
|
||||
width: 1405rpx;
|
||||
width: 1300rpx;
|
||||
height: 1350rpx;
|
||||
/* border-top-right-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx; */
|
||||
|
|
@ -556,7 +566,7 @@
|
|||
align-items: center;
|
||||
|
||||
height: 80rpx;
|
||||
width: 280rpx;
|
||||
width: 259rpx;
|
||||
border-bottom: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
/* font-weight: 700; */
|
||||
|
|
@ -569,7 +579,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 280rpx;
|
||||
width: 259rpx;
|
||||
flex-direction: column;
|
||||
border-right: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
|
|
@ -615,7 +625,7 @@
|
|||
}
|
||||
|
||||
.right-container {
|
||||
width: calc(100% - 310rpx);
|
||||
width: calc(100% - 410rpx);
|
||||
height: 100vh;
|
||||
transition: opacity 1s ease;
|
||||
position: relative;
|
||||
|
|
@ -918,41 +928,19 @@
|
|||
|
||||
.popup-say-content {
|
||||
position: absolute;
|
||||
right: 105rpx;
|
||||
right: 65rpx;
|
||||
bottom: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: center; */
|
||||
width: 450rpx;
|
||||
height: 700rpx;
|
||||
height: 800rpx;
|
||||
background-color: #fff;
|
||||
/* background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
|
||||
background-blend-mode: screen;*/
|
||||
border: 2rpx solid #fff;
|
||||
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.4s ease;
|
||||
|
||||
.tags-father {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 23rpx;
|
||||
margin-top: 15rpx;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
|
||||
.tags-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tags-font {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-say-content-flex {
|
||||
display: flex;
|
||||
|
|
@ -1960,23 +1948,47 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(1rpx);
|
||||
background-color: rgba(89, 109, 154, 0.4);
|
||||
background-color: rgba(236, 237, 241, 0.4);
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
|
||||
|
||||
.share-other {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.share-title{
|
||||
padding-left: 50rpx;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.share-others{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.other-img{
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-left: 100rpx;
|
||||
}
|
||||
}
|
||||
.popup-share-content {
|
||||
position: absolute;
|
||||
/* right: 515rpx; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 800rpx;
|
||||
height: 380rpx;
|
||||
background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
background-blend-mode: screen;
|
||||
border: 2rpx solid #fff;
|
||||
height: 450rpx;
|
||||
background-color: #fff;
|
||||
/* background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
background-blend-mode: screen; */
|
||||
/* border: 2rpx solid #fff; */
|
||||
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
/* box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1); */
|
||||
transition: opacity 0.4s ease;
|
||||
|
||||
.popup-share-title {
|
||||
|
|
@ -2049,3 +2061,26 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.tags-father {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* margin-left: 23rpx; */
|
||||
margin: 10rpx 14rpx;
|
||||
margin-left: 30rpx;
|
||||
/* margin-top: 15rpx; */
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
height: 110rpx;
|
||||
|
||||
|
||||
.tags-font {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.tags-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}"
|
||||
@click="bottomisShaking=false;shakyTable = false">
|
||||
<!-- 轮盘 -->
|
||||
<joystick @movecard="movecard" :getblue="getblue" :moveleft="-300" />
|
||||
<!-- <joystick @movecard="movecard" :getblue="getblue" :moveleft="-300" /> -->
|
||||
<view class="right-container-title-nav">
|
||||
<text style="margin-left: 30rpx;">
|
||||
NUID:2508000001
|
||||
|
|
@ -13,17 +13,88 @@
|
|||
护理单元01
|
||||
</text>
|
||||
<view class="right-icons">
|
||||
<view v-for="(item,index) in [0,1,9,10]" :key="item">
|
||||
<image class="balck-icon" :src="`/static/index/tagNames/${item}.png`" />
|
||||
<view style="display: flex;align-items: center;margin-right: 25rpx;padding: 0 15rpx;"
|
||||
:class="!topindex&&!bodystatus&&!facestatus?'firsttarget':''">
|
||||
<view class="mark">
|
||||
<view style="margin-right: 15rpx;">
|
||||
体型标签:
|
||||
</view>
|
||||
<view class="white-button" @click="routerPush">
|
||||
|
||||
<view class="mark-bgc" v-show="openbody" :style="{opacity:bodydonghua?1:0}">
|
||||
<view style="margin-top: 40rpx;margin-bottom: 30rpx;;margin-left: 50rpx;font-size: 32rpx;">
|
||||
<view>
|
||||
体型标签
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view v-for="(item,index) in nameArray.slice(0,5)" :key="index" @click="addbody(index)">
|
||||
<view class="tags-father" :class="bodystatustarget===index?'secondtarget':''">
|
||||
<image class="tags-img"
|
||||
:src="bodytarget.includes(index)?`/static/index/tagNames/${index}1.png`: `/static/index/tagNames/${index}0.png`" />
|
||||
<view class="tags-font"
|
||||
:style="bodytarget.includes(index)?{color:`rgb(54, 159, 239)`}:{}">{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="marknone" @click="openbody=!openbody;openface=false">
|
||||
<view v-if="!bodytarget.length" style="margin-top: -3rpx;">
|
||||
未选择
|
||||
</view>
|
||||
<view v-for="(item,index) in bodytarget" :key="index">
|
||||
<image class="tags-img" style="width: 40rpx;height: 40rpx;margin: 0 10rpx;"
|
||||
:src="`/static/index/tagNames/${item}0.png`" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="tri-down" @click="openbody=!openbody;openface=false"></view>
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;margin-right: 15rpx;padding: 0 15rpx;"
|
||||
:class="topindex===1&&!bodystatus&&!facestatus?'firsttarget':''">
|
||||
<view class="mark">
|
||||
情绪标签:
|
||||
<view class="mark-bgc" v-show="openface" :style="{opacity:facedonghua?1:0}">
|
||||
<view style="margin-top: 40rpx;margin-bottom: 30rpx;;margin-left: 50rpx;font-size: 32rpx;">
|
||||
<view>
|
||||
情绪标签
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view v-for="(item,index) in nameArray.slice(5,12)" :key="index"
|
||||
@click="addface(index)">
|
||||
<view class="tags-father" :class="facestatustarget===index?'secondtarget':''">
|
||||
<image class="tags-img"
|
||||
:src="facetarget.includes(index)?`/static/index/tagNames/${index+5}1.png`: `/static/index/tagNames/${index+5}0.png`" />
|
||||
<view class="tags-font"
|
||||
:style="facetarget.includes(index)?{color:`rgb(54, 159, 239)`}:{}">{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="marknone" @click="openface=!openface;openbody=false">
|
||||
<view v-if="!facetarget.length" style="margin-top: -3rpx;">
|
||||
未选择
|
||||
</view>
|
||||
<view v-for="(item,index) in facetarget" :key="index">
|
||||
<image class="tags-img" style="width: 40rpx;height: 40rpx;margin: 0 10rpx;"
|
||||
:src="`/static/index/tagNames/${item+5}0.png`" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tri-down" @click="openface=!openface;openbody=false"></view>
|
||||
</view>
|
||||
<view class="white-button" :class="topindex===2?'firsttarget':''" @click="routerPush">
|
||||
<image class="white-img" :src="`/static/index/newruler/yulan.png`" />
|
||||
预览
|
||||
</view>
|
||||
<view class="white-button" @click="shareToWeixin">
|
||||
<view class="white-button" :class="topindex===3?'firsttarget':''" @click="shareToWeixin">
|
||||
<image class="white-img" :src="`/static/index/newruler/fenxiang.png`" />
|
||||
分享
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-view">
|
||||
|
|
@ -54,8 +125,8 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;height: calc(100% - 80rpx);">
|
||||
|
||||
<view style="display: flex;height: calc(100% - 80rpx);position: relative;">
|
||||
<view class="xian-bian"></view>
|
||||
<scroll-view style="height: 100%;width:6744rpx;" :scroll-top="scrollTop"
|
||||
:scroll-y="true" @scroll="handleScrolltime" :show-scrollbar="false">
|
||||
<view style="display: flex;height: 100%;">
|
||||
|
|
@ -71,29 +142,34 @@
|
|||
@touchstart="rulerTouchStart(item1,index0,index1,$event)"
|
||||
@touchmove="rulerTouchMove" @touchend="rulerTouchEnd()"
|
||||
:data-index0="index0" :data-index1="index1">
|
||||
<view class="time-button-orange-spe" :style="{left:flyNumber.index0?`-130rpx`:`0`}"
|
||||
<view class="time-button-orange-spe"
|
||||
:style="{left:flyNumber.index0?`-130rpx`:`0`}"
|
||||
v-if="flyNumber.index0 === index0 && flyNumber.index1 === index1 && index1==0">
|
||||
请选择服务指令迁移的目标单元格
|
||||
<!-- <view class="under-button-three"></view> -->
|
||||
</view>
|
||||
<view class="time-button-orange" :style="{left:flyNumber.index0?`-130rpx`:`0`}"
|
||||
<view class="time-button-orange"
|
||||
:style="{left:flyNumber.index0?`-130rpx`:`0`}"
|
||||
v-if="flyNumber.index0 === index0 && flyNumber.index1 === index1 && index1">
|
||||
请选择服务指令迁移的目标单元格
|
||||
<!-- <view class="under-button-three"></view> -->
|
||||
</view>
|
||||
<view class="time-button-black-spe" :style="{left:saveEditIndex.index0?`-220rpx`:`0`}"
|
||||
<view class="time-button-black-spe"
|
||||
:style="{left:saveEditIndex.index0?`-220rpx`:`0`}"
|
||||
v-if="saveEditIndex.index0 == index0 && saveEditIndex.index1 == index1 && index1==0 && isDelete">
|
||||
是否确认删除该服务指令
|
||||
<!-- <view class="under-button-three"></view> -->
|
||||
</view>
|
||||
<view class="time-button-black" :style="{left:saveEditIndex.index0?`-220rpx`:`0`}"
|
||||
<view class="time-button-black"
|
||||
:style="{left:saveEditIndex.index0?`-220rpx`:`0`}"
|
||||
v-if="saveEditIndex.index0 == index0 && saveEditIndex.index1 == index1 && index1 && isDelete">
|
||||
是否确认删除该服务指令
|
||||
<!-- <view class="under-button-three"></view> -->
|
||||
</view>
|
||||
<view class="title-time-blue"
|
||||
v-show="saveEditIndex.index0 == index0 && saveEditIndex.index1 == index1">
|
||||
v-show="saveEditIndex.index0 == index0 && saveEditIndex.index1 == index1 && isRule">
|
||||
</view>
|
||||
|
||||
<view :class="getClass(item1,index0,index1)"
|
||||
style="font-size: 30rpx;overflow: hidden;"
|
||||
:style="{ animationDelay:`-${computeDelay(index0, index1).toFixed(2)}s` }">
|
||||
|
|
@ -253,7 +329,7 @@
|
|||
</view>
|
||||
<view class="middle-right-box">
|
||||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
||||
<view class="doctorsay-container-card" >
|
||||
<view class="doctorsay-container-card">
|
||||
<donghua :width="`55rpx`" :height="`55rpx`" :links="item.url"
|
||||
:playing="index === upmenuIndex" :interval="120" />
|
||||
<view
|
||||
|
|
@ -286,19 +362,23 @@
|
|||
:src="`/static/index/keyimg/open${open ? 'blue' : ''}.png`" />
|
||||
</view>
|
||||
<view style="position: relative;">
|
||||
<view ref="btnRef" class="white-circle-click-father" :style="{color:buttonBlue?`#fff`:``}"
|
||||
:class="{ anim: buttonBlue }" @click="addnewbutton">
|
||||
<view ref="btnRef" class="white-circle-click-father"
|
||||
:style="{color:buttonBlue?`#fff`:``}" :class="{ anim: buttonBlue }"
|
||||
@click="addnewbutton">
|
||||
<view style="z-index: 999;">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<view ref="btnRef" class="white-circle-click-father-spec"
|
||||
@click="changLeft(5)">
|
||||
<image style="width: 55rpx;height: 55rpx;" src="/static/index/newruler/monitor_4.png" />
|
||||
<view class="white-circle-click-father-spec" @click="changLeft(5)">
|
||||
<view class="other-father">
|
||||
<image style="width: 55rpx;height: 55rpx;"
|
||||
src="/static/index/newruler/monitor_1.png" />
|
||||
<view style="z-index: 999;font-size: 25rpx;">
|
||||
监控
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -334,18 +414,13 @@
|
|||
@click.stop>
|
||||
<view style="margin-top: 20rpx;margin-bottom: 20rpx;;margin-left: 30rpx;font-size: 32rpx;">
|
||||
<view>
|
||||
|
||||
体型标签
|
||||
</view>
|
||||
<!-- <view
|
||||
style="width: 30rpx;height: 6rpx;background-color: black;margin-left: 40rpx;margin-top: 3rpx;border-radius: 20rpx;">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view v-for="(item,index) in nameArray.slice(0,8)" :key="index">
|
||||
<view v-for="(item,index) in nameArray.slice(0,5)" :key="index">
|
||||
<view class="tags-father">
|
||||
<image class="tags-img" :src="`/static/index/tagNames/${index}.png`" />
|
||||
<image class="tags-img" :src="`/static/index/tagNames/${index}0.png`" />
|
||||
<view class="tags-font">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -354,15 +429,11 @@
|
|||
<view>
|
||||
情绪标签
|
||||
</view>
|
||||
<!-- <view
|
||||
style="width: 30rpx;height: 6rpx;background-color: black;margin-left: 40rpx;margin-top: 3rpx;border-radius: 20rpx;">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view v-for="(item,index) in nameArray.slice(8,11)" :key="index">
|
||||
<view v-for="(item,index) in nameArray.slice(5,12)" :key="index">
|
||||
<view class="tags-father">
|
||||
<image class="tags-img" :src="`/static/index/tagNames/${index+9}.png`" />
|
||||
<image class="tags-img" :src="`/static/index/tagNames/${index+5}0.png`" />
|
||||
<view class="tags-font">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -373,7 +444,43 @@
|
|||
<!-- 分享的弹出层 -->
|
||||
<view v-show="shareShow" class="popup-share" @click="shareShow=false">
|
||||
<view class="popup-share-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
|
||||
<view class="popup-share-title">
|
||||
<!-- <view class="share-button" @click="clickshare">
|
||||
分享
|
||||
</view> -->
|
||||
<!-- <image class="share-bgc" src="/static/index/sharebgc.png" /> -->
|
||||
<view class="share-other">
|
||||
<view class="share-title">
|
||||
<image style="width: 50rpx;height: 50rpx;" src="/static/index/sharelogo.png" />
|
||||
<view style="font-weight: 600;margin-left: 15rpx;">
|
||||
护理单元
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-others">
|
||||
<!-- <image class="other-img" src="/static/index/blue.png" />
|
||||
<view style="margin-left: 50rpx;">
|
||||
<view style="font-weight: 600;margin-bottom: 20rpx;font-size: 33rpx;">
|
||||
护理日程分享
|
||||
</view>
|
||||
<view style="color: #999999;font-size: 32rpx;">
|
||||
久泰护理日程分享测试
|
||||
</view>
|
||||
</view> -->
|
||||
<view style="font-weight: 600;font-size: 45rpx;">
|
||||
护理流程
|
||||
</view>
|
||||
<view style="margin-top: 30rpx;">
|
||||
护理单元01
|
||||
<text style="color: #1083F8;">
|
||||
王金凤
|
||||
</text>
|
||||
</view>
|
||||
<view class="blue-button">
|
||||
分享
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="popup-share-title">
|
||||
护理日程分享
|
||||
<image class="popup-share-img" src="/static/index/NU.png" />
|
||||
</view>
|
||||
|
|
@ -389,7 +496,7 @@
|
|||
<view class="popup-share-downcontent-button" @click="clickshare">
|
||||
分享
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -401,7 +508,7 @@
|
|||
import type { roomBtttonType } from "./index";
|
||||
import { getServiceTree, getNclist, addBatch } from "./api.js";
|
||||
import { myArray } from './yaoshandiao.js';
|
||||
import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
// import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isshow: {
|
||||
|
|
@ -420,20 +527,42 @@
|
|||
isold: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
propsmove: {
|
||||
type: Number
|
||||
},
|
||||
isMain: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => props.isMain,
|
||||
(newVal, oldVal) => {
|
||||
// 仅在 isShow 为 true 时生效
|
||||
if (!props.isshow) return
|
||||
|
||||
if (oldVal === true && newVal === false) {
|
||||
saveEditIndex.value.index0 = 8
|
||||
saveEditIndex.value.index1 = 0
|
||||
isRule.value = true
|
||||
} else if (oldVal === false && newVal === true) {
|
||||
saveEditIndex.value.index0 = -1
|
||||
saveEditIndex.value.index1 = -1
|
||||
}
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.isold,
|
||||
() => {
|
||||
if (props.isold) {
|
||||
saveEditIndex.value.index0 = 9;
|
||||
saveEditIndex.value.index1 = 0;
|
||||
// saveEditIndex.value.index0 = 9;
|
||||
// saveEditIndex.value.index1 = 0;
|
||||
centerCell();
|
||||
cardLeft.value = 1;
|
||||
scrollTop.value = 1;
|
||||
nextTick(() => {
|
||||
scrollTop.value = 0;
|
||||
cardLeft.value = 839
|
||||
cardLeft.value = 700
|
||||
|
||||
})
|
||||
}
|
||||
|
|
@ -453,15 +582,15 @@
|
|||
if (solveWatch.value) {
|
||||
solveWatch.value--
|
||||
} else {
|
||||
saveEditIndex.value.index0 = 8
|
||||
saveEditIndex.value.index1 = 0
|
||||
// saveEditIndex.value.index0 = 8
|
||||
// saveEditIndex.value.index1 = 0
|
||||
centerCell();
|
||||
cardLeft.value = 1
|
||||
scrollTop.value = 1
|
||||
|
||||
nextTick(() => {
|
||||
scrollTop.value = 0
|
||||
cardLeft.value = 839
|
||||
cardLeft.value = 775
|
||||
})
|
||||
}
|
||||
upmenuIndex.value = 0
|
||||
|
|
@ -469,10 +598,208 @@
|
|||
}
|
||||
}
|
||||
)
|
||||
const bodystatus = ref(false);
|
||||
const bodystatustarget = ref(-1);
|
||||
const facestatus = ref(false);
|
||||
const facestatustarget = ref(-1);
|
||||
watch(
|
||||
() => props.propsmove,
|
||||
() => {
|
||||
|
||||
if (facestatus.value) {
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
if (facestatustarget.value - 3 > 0) {
|
||||
facestatustarget.value = facestatustarget.value - 3
|
||||
} else {
|
||||
facestatustarget.value = 0
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (facestatustarget.value > 5) {
|
||||
|
||||
} else {
|
||||
facestatustarget.value++
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (facestatustarget.value + 3 > 5) {
|
||||
facestatustarget.value = 6
|
||||
} else {
|
||||
facestatustarget.value = facestatustarget.value + 3
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (facestatustarget.value) {
|
||||
facestatustarget.value--
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
addface(facestatustarget.value)
|
||||
break;
|
||||
case 5:
|
||||
openbody.value = false;
|
||||
openface.value = false;
|
||||
facestatus.value = false;
|
||||
bodystatus.value = false;
|
||||
topindex.value = 1
|
||||
break;
|
||||
}
|
||||
return
|
||||
}
|
||||
if (bodystatus.value) {
|
||||
switch (props.propsmove) {
|
||||
case 0:
|
||||
if (bodystatustarget.value - 3 > 0) {
|
||||
bodystatustarget.value = bodystatustarget.value - 3
|
||||
} else {
|
||||
bodystatustarget.value = 0
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (bodystatustarget.value > 3) {
|
||||
|
||||
} else {
|
||||
bodystatustarget.value++
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (bodystatustarget.value + 3 > 3) {
|
||||
bodystatustarget.value = 4
|
||||
} else {
|
||||
bodystatustarget.value = bodystatustarget.value + 3
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (bodystatustarget.value) {
|
||||
bodystatustarget.value--
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
addbody(bodystatustarget.value)
|
||||
break;
|
||||
case 5:
|
||||
openbody.value = false;
|
||||
openface.value = false;
|
||||
facestatus.value = false;
|
||||
bodystatus.value = false;
|
||||
topindex.value = 0
|
||||
break;
|
||||
}
|
||||
return
|
||||
}
|
||||
if (props.propsmove === 4) {
|
||||
|
||||
// if(facestatus.value){
|
||||
// addface(facestatustarget.value)
|
||||
// return
|
||||
// }
|
||||
|
||||
// if(bodystatus.value){
|
||||
// addbody(bodystatustarget.value)
|
||||
// return
|
||||
// }
|
||||
|
||||
if (!isRule.value) {
|
||||
switch (topindex.value) {
|
||||
case 0:
|
||||
openface.value = false
|
||||
openbody.value = !openbody.value
|
||||
bodystatus.value = true;
|
||||
bodystatustarget.value = 0
|
||||
break;
|
||||
case 1:
|
||||
openbody.value = false
|
||||
openface.value = !openface.value
|
||||
facestatus.value = true;
|
||||
facestatustarget.value = 0
|
||||
break;
|
||||
case 2:
|
||||
routerPush()
|
||||
break;
|
||||
default:
|
||||
shareToWeixin()
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
addnewbutton()
|
||||
}
|
||||
|
||||
} else {
|
||||
if (isRule.value) {
|
||||
movecard(props.propsmove)
|
||||
} else {
|
||||
movetop(props.propsmove)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
const bodydonghua = ref(false)
|
||||
const openbody = ref(false)
|
||||
const openface = ref(false)
|
||||
watch(
|
||||
() => openbody.value,
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
bodydonghua.value = openbody.value
|
||||
emit('vip', bodydonghua.value)
|
||||
}, 50)
|
||||
}
|
||||
)
|
||||
const facedonghua = ref(false)
|
||||
watch(
|
||||
() => openface.value,
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
facedonghua.value = openface.value
|
||||
emit('vip', facedonghua.value)
|
||||
}, 50)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const bodytarget = ref([]);
|
||||
const facetarget = ref([]);
|
||||
const addbody = (index : number) => {
|
||||
if (bodytarget.value.includes(index)) {
|
||||
bodytarget.value = bodytarget.value.filter(item => item !== index)
|
||||
} else {
|
||||
if (bodytarget.value.length > 1) {
|
||||
uni.showToast({
|
||||
title: "标签最多只能添加两个",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
// return
|
||||
} else {
|
||||
bodytarget.value.push(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
const addface = (index : number) => {
|
||||
if (facetarget.value.includes(index)) {
|
||||
facetarget.value = facetarget.value.filter(item => item !== index)
|
||||
} else {
|
||||
if (facetarget.value.length > 1) {
|
||||
uni.showToast({
|
||||
title: "标签最多只能添加两个",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
// return
|
||||
} else {
|
||||
facetarget.value.push(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const open = ref(false);
|
||||
const getblue = ref(false);
|
||||
|
||||
|
||||
|
||||
const bottomItems = ref([
|
||||
{
|
||||
name: '纸尿裤',
|
||||
|
|
@ -524,17 +851,19 @@
|
|||
},
|
||||
])
|
||||
const nameArray = [
|
||||
`四肢`,
|
||||
`大体重`,
|
||||
`小体重`,
|
||||
`面部`,
|
||||
`颅骨缺损`,
|
||||
`口腔`,
|
||||
`头部`,
|
||||
`躯干`,
|
||||
`狂躁`,
|
||||
`标准`,
|
||||
`超重`,
|
||||
`强直`,
|
||||
`偏瘫`,
|
||||
`佝偻`,
|
||||
`稳定`,
|
||||
`焦虑`,
|
||||
`抑郁`,
|
||||
`暴力`,
|
||||
`恐惧`,
|
||||
`烦躁`,
|
||||
`易怒`,
|
||||
`正常`
|
||||
`臆想`,
|
||||
]
|
||||
const timeArray = [
|
||||
`00`, `05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`
|
||||
|
|
@ -583,13 +912,13 @@
|
|||
const isMove = ref(false);
|
||||
|
||||
const getjiao = computed(() => {
|
||||
if(jiao.value[0] && jiao.value[1]){
|
||||
if (jiao.value[0] && jiao.value[1]) {
|
||||
return "left-bottom"
|
||||
}else if(!jiao.value[0] && jiao.value[1]){
|
||||
} else if (!jiao.value[0] && jiao.value[1]) {
|
||||
return "right-bottom"
|
||||
}else if(jiao.value[0] && !jiao.value[1]){
|
||||
} else if (jiao.value[0] && !jiao.value[1]) {
|
||||
return "left-top"
|
||||
}else{
|
||||
} else {
|
||||
return "right-top"
|
||||
}
|
||||
|
||||
|
|
@ -712,7 +1041,8 @@
|
|||
}
|
||||
const selectType = ref(true);
|
||||
const deleteButton = ref(false);
|
||||
|
||||
const isRule = ref(false);
|
||||
const savemoved = ref(-1);
|
||||
const movecard = (where : number) => {
|
||||
isDelete.value = false;
|
||||
switch (where) {
|
||||
|
|
@ -726,6 +1056,10 @@
|
|||
rulerTouchClick(timearr.value[saveEditIndex.value.index0].children[saveEditIndex.value.index1], saveEditIndex.value.index0, saveEditIndex.value.index1)
|
||||
}, 50)
|
||||
}
|
||||
} else {
|
||||
topindex.value = 0
|
||||
savemoved.value = saveEditIndex.value.index0
|
||||
isRule.value = false;
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
|
|
@ -769,6 +1103,33 @@
|
|||
break
|
||||
}
|
||||
}
|
||||
const topindex = ref(-1)
|
||||
const movetop = (where : number) => {
|
||||
isDelete.value = false;
|
||||
switch (where) {
|
||||
case 0:
|
||||
// savemoved.value
|
||||
break
|
||||
case 1:
|
||||
if (topindex.value < 3) {
|
||||
topindex.value++
|
||||
}
|
||||
|
||||
break
|
||||
case 2:
|
||||
openbody.value = false
|
||||
openface.value = false
|
||||
topindex.value = -1
|
||||
saveEditIndex.value.index0 = savemoved.value
|
||||
isRule.value = true;
|
||||
break
|
||||
case 3:
|
||||
if (topindex.value) {
|
||||
topindex.value--
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const weekValue = ref("");
|
||||
const weekIndex = ref(-1);
|
||||
const monthValue = ref("");
|
||||
|
|
@ -980,12 +1341,12 @@
|
|||
const underFans = ref<boolean>(false);
|
||||
// 当前选中的菜单索引
|
||||
const roomTar = ref<number[]>([]);
|
||||
const emit = defineEmits(['darkchange', 'savename', 'saveruler', 'closename', 'changefangkuang', 'changeold']);
|
||||
const emit = defineEmits(['vip', 'changeold']);
|
||||
const isEdit = ref(false);
|
||||
// const isLunpan = ref(false);
|
||||
const saveEditIndex = ref({
|
||||
index0: 9,
|
||||
index1: 0
|
||||
index0: -1,
|
||||
index1: -1
|
||||
})
|
||||
const clickstauts = ref(0)
|
||||
const secondopenValue = ref([]);
|
||||
|
|
@ -1064,7 +1425,7 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
const jiao = ref([false,false])
|
||||
const jiao = ref([false, false])
|
||||
//表格点击开始
|
||||
const rulerTouchClick = (item : any, index0 : number, index1 : number) => {
|
||||
if (item.directiveName) {
|
||||
|
|
@ -1078,13 +1439,13 @@
|
|||
if (res.left > 100 && res.left < 1067 && res.top < 670 && res.top > 50 && res.dataset.index0 == index0 && res.dataset.index1 == index1) {
|
||||
if (res.left > 100 && res.left < 500) {
|
||||
// 表格太靠左侧,修改到右面
|
||||
openX.value = Math.floor(res.left) + 540;
|
||||
openX.value = Math.floor(res.left) + 528;
|
||||
jiao.value[0] = true
|
||||
} else {
|
||||
openX.value = Math.floor(res.left) - 20
|
||||
openX.value = Math.floor(res.left) - 18
|
||||
jiao.value[0] = false
|
||||
}
|
||||
if ( res.top > 500) {
|
||||
if (res.top > 500) {
|
||||
// 表格太靠上侧,修改到下面
|
||||
openY.value = Math.floor(res.top) + 100;
|
||||
jiao.value[1] = true
|
||||
|
|
@ -1298,6 +1659,9 @@
|
|||
if (animTimer) clearTimeout(animTimer)
|
||||
})
|
||||
const addnew = () => {
|
||||
if (saveEditIndex.value.index1 === -1 && saveEditIndex.value.index0 === -1) {
|
||||
return
|
||||
}
|
||||
if (isDelete.value) {
|
||||
isDelete.value = false;
|
||||
deleteRuler(saveEditIndex.value.index0, saveEditIndex.value.index1);
|
||||
|
|
@ -1551,18 +1915,18 @@
|
|||
|
||||
const totalColumns = 24; // 总列数
|
||||
const totalRows = 11; // 总行数
|
||||
const visibleWidth = 1405; // 可视区域宽度 (rpx),基于 scalcType * widthType ≈ 2220
|
||||
const visibleWidth = 1300; // 可视区域宽度 (rpx),基于 scalcType * widthType ≈ 2220
|
||||
const visibleHeight = 500; // 可视区域高度 (rpx),假设显示约5行时 heightType = 102.5
|
||||
function centerCell() {
|
||||
if (saveEditIndex.value.index0 >= 0 && saveEditIndex.value.index0 <= totalColumns && saveEditIndex.value.index1 >= 0 && saveEditIndex.value.index1 <= totalRows) {
|
||||
// 计算点击格子的中心位置 (rpx)
|
||||
const cellCenterX = (saveEditIndex.value.index0 + 0.5) * 280;
|
||||
const cellCenterX = (saveEditIndex.value.index0 + 0.5) * 259;
|
||||
const cellCenterY = (saveEditIndex.value.index1 - 1) * 250.5;
|
||||
// 计算 scrollLeft 和 scrollTop,使格子中心位于可视区域中心
|
||||
cardLeft.value = cellCenterX - visibleWidth / 2;
|
||||
scrollTop.value = cellCenterY - visibleHeight / 2;
|
||||
// 计算网格总宽高
|
||||
const totalWidth = totalColumns * 280;
|
||||
const totalWidth = totalColumns * 259;
|
||||
const totalHeight = totalRows * 250.5;
|
||||
// 限制 scrollLeft 和 scrollTop 在有效范围内
|
||||
cardLeft.value = Math.max(0, Math.min(cardLeft.value, totalWidth - visibleWidth)) / 2;
|
||||
|
|
@ -1650,16 +2014,146 @@
|
|||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.left-top{
|
||||
border-top-left-radius: 0!important;
|
||||
|
||||
.left-top {
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
.right-top{
|
||||
border-top-right-radius: 0!important;
|
||||
|
||||
.right-top {
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
.left-bottom{
|
||||
border-bottom-left-radius: 0!important
|
||||
|
||||
.left-bottom {
|
||||
border-bottom-left-radius: 0 !important
|
||||
}
|
||||
.right-bottom{
|
||||
border-bottom-right-radius: 0!important;
|
||||
|
||||
.right-bottom {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.mark {
|
||||
font-size: 29rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.marknone {
|
||||
font-size: 29rpx;
|
||||
// margin-top: 8rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.tri-down {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10rpx solid transparent;
|
||||
/* s/2 */
|
||||
border-right: 10rpx solid transparent;
|
||||
/* s/2 */
|
||||
border-top: 17.32rpx solid #999;
|
||||
/* 0.866 * s */
|
||||
margin: 0rpx 0rpx 0 15rpx;
|
||||
}
|
||||
|
||||
.mark-bgc {
|
||||
position: absolute;
|
||||
top: 50rpx;
|
||||
left: 0;
|
||||
width: 450rpx;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
border-radius: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
margin-top: 60rpx;
|
||||
width: 150rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007CFF;
|
||||
font-size: 30rpx;
|
||||
background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
|
||||
border: 2rpx solid #9AD1FF;
|
||||
}
|
||||
|
||||
.zerotarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 50rpx;
|
||||
--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;
|
||||
}
|
||||
|
||||
.firsttarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 50rpx;
|
||||
--outline-offset: 10rpx;
|
||||
/* 外扩多少 */
|
||||
/* 内层虚线(你现在用的) */
|
||||
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;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.secondtarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 10rpx;
|
||||
--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;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.xian-bian {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
border-right: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -311,7 +311,7 @@ export const myArray = [{
|
|||
"url": genPaths(
|
||||
'/static/index/diet',
|
||||
'massage_',
|
||||
3, // 张数
|
||||
5, // 张数
|
||||
'png',
|
||||
1, // 起始索引
|
||||
false // 不补零
|
||||
|
|
@ -778,7 +778,7 @@ export const myArray = [{
|
|||
"url": genPaths(
|
||||
'/static/index/diet',
|
||||
'limbs_',
|
||||
2, // 张数
|
||||
4, // 张数
|
||||
'png',
|
||||
1, // 起始索引
|
||||
false // 不补零
|
||||
|
|
@ -878,7 +878,7 @@ export const myArray = [{
|
|||
"url": genPaths(
|
||||
'/static/index/diet',
|
||||
'perianal_',
|
||||
2, // 张数
|
||||
7, // 张数
|
||||
'png',
|
||||
1, // 起始索引
|
||||
false // 不补零
|
||||
|
|
@ -1821,8 +1821,8 @@ export const myArray = [{
|
|||
"parentId": "1902560510768549889",
|
||||
"url": genPaths(
|
||||
'/static/index/diet',
|
||||
'sputum_',
|
||||
4, // 张数
|
||||
'Sputuma_',
|
||||
7, // 张数
|
||||
'png',
|
||||
1, // 起始索引
|
||||
false // 不补零
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</view>
|
||||
<view class="menus-father">
|
||||
<view v-for="(item,index) in leftMenuArray" :key="index" class="menu"
|
||||
:style="index === menuIndex?{backgroundColor:`#fff`}:{} " @click="changeMenu(index)">
|
||||
:class="targetIndex===index?'target':''" :style="targetIndex === index ? { backgroundColor: '#ddf0ff' }: (index === menuIndex ? { backgroundColor: '#fff' } : {})" @click="changeMenu(index)">
|
||||
<!-- <image class="menu-img" :src="item.url" /> -->
|
||||
<donghua :width="`65rpx`" :height="`65rpx`" :links="item.url" :playing="index === menuIndex" />
|
||||
|
||||
|
|
@ -59,10 +59,11 @@
|
|||
</view> -->
|
||||
</view>
|
||||
<!-- 主页 -->
|
||||
<index :isShow="menuIndexshow" v-show="!menuIndex" />
|
||||
<index :isShow="menuIndexshow" v-if="!menuIndex" :propsmove="propsmove" :isMain="isMain" @back="movecard(5)" />
|
||||
|
||||
<nurse :isold="isOld===2" :liang="indexNumber" :isshow="menuIndexshowsecond" v-show="menuIndex==1&&isOld===2" />
|
||||
<!-- <arrowkeys @movecard="" /> -->
|
||||
<nurse :isold="isOld===2" :liang="indexNumber" :isshow="menuIndexshowsecond" v-if="menuIndex==1&&isOld===2"
|
||||
:propsmove="propsmove" :isMain="isMain" @vip="canmoveit" />
|
||||
<arrowkeys @movecard="movecard" />
|
||||
<!-- 超凶表格 -->
|
||||
<!-- 旧表格 -->
|
||||
<!-- <rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
|
|
@ -84,7 +85,6 @@
|
|||
import type { Link } from "./index";
|
||||
import index from "./component/index.vue"
|
||||
import nurse from "./component/nurse/index.vue"
|
||||
import arrowkeys from '@/component/public/newgame/arrowkeys.vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -159,16 +159,16 @@
|
|||
false // 不补零
|
||||
), name: '设备'
|
||||
},
|
||||
{
|
||||
url: genPaths(
|
||||
'/static/index/newindex/curve',
|
||||
'return_',
|
||||
8, // 张数
|
||||
'png',
|
||||
1, // 起始索引为 1
|
||||
false // 不补零
|
||||
), name: '返回'
|
||||
},
|
||||
// {
|
||||
// url: genPaths(
|
||||
// '/static/index/newindex/curve',
|
||||
// 'return_',
|
||||
// 8, // 张数
|
||||
// 'png',
|
||||
// 1, // 起始索引为 1
|
||||
// false // 不补零
|
||||
// ), name: '返回'
|
||||
// },
|
||||
])
|
||||
const menuArray = ref([
|
||||
{ url: '/static/index/lefticon/index.png', name: '首页' },
|
||||
|
|
@ -213,28 +213,36 @@
|
|||
const isOldchange = (res : number) => {
|
||||
isOld.value = res;
|
||||
}
|
||||
// 变更菜单
|
||||
const changeMenu = (index : number) => {
|
||||
// if (index === 3) {
|
||||
// menuIndexshow.value = false;
|
||||
// menuIndexshowsecond.value = false;
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/somethingmove/index?darkFans=${darkFans.value}`,
|
||||
// animationType: 'slide-in-right',
|
||||
// animationDuration: 400// 设置动画时长为300毫秒, // 动画持续时间,单位为毫秒
|
||||
// });
|
||||
// return
|
||||
// }
|
||||
// else if (index === 5) {
|
||||
// uni.navigateBack()
|
||||
// return
|
||||
// }
|
||||
const changesdonghua = (index : number) => {
|
||||
if (menuIndex.value === index) {
|
||||
return
|
||||
}
|
||||
menuIndex.value = index;
|
||||
menuIndexshow.value = false
|
||||
menuIndexshowsecond.value = false
|
||||
setTimeout(() => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
menuIndexshow.value = true
|
||||
break;
|
||||
case 1:
|
||||
menuIndexshowsecond.value = true
|
||||
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}, 50)
|
||||
}
|
||||
// 变更菜单
|
||||
const changeMenu = (index : number) => {
|
||||
// if (menuIndex.value === index) {
|
||||
// return
|
||||
// }
|
||||
isMain.value = true;
|
||||
targetIndex.value = index
|
||||
menuIndex.value = index;
|
||||
menuIndexshow.value = false
|
||||
menuIndexshowsecond.value = false
|
||||
if (index === 5) {
|
||||
uni.navigateBack()
|
||||
return
|
||||
|
|
@ -434,6 +442,77 @@
|
|||
}, 50)
|
||||
|
||||
});
|
||||
//切换为主要模式
|
||||
const isMain = ref(true);
|
||||
//切换为右侧模式
|
||||
// const isright = ref(false);
|
||||
const targetIndex = ref(0);
|
||||
const propsmove = ref(-1);
|
||||
|
||||
const canback = ref(false);
|
||||
|
||||
const canmoveit = (boolean:boolean) => {
|
||||
canback.value = boolean
|
||||
}
|
||||
const movecard = (where : number) => {
|
||||
if (where === 5) {
|
||||
if(canback.value){
|
||||
propsmove.value = -1
|
||||
nextTick(() => propsmove.value = where)
|
||||
return
|
||||
}else{
|
||||
if(!isMain.value){
|
||||
isMain.value = true;
|
||||
targetIndex.value = menuIndex.value
|
||||
}else{
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (isMain.value) {
|
||||
switch (where) {
|
||||
case 0:
|
||||
if (targetIndex.value) {
|
||||
targetIndex.value--
|
||||
changesdonghua(targetIndex.value)
|
||||
}
|
||||
|
||||
break
|
||||
case 1:
|
||||
isMain.value = false;
|
||||
targetIndex.value = -1;
|
||||
break
|
||||
case 2:
|
||||
if (targetIndex.value < leftMenuArray.value.length - 1) {
|
||||
targetIndex.value++
|
||||
changesdonghua(targetIndex.value)
|
||||
}
|
||||
|
||||
break
|
||||
case 3:
|
||||
|
||||
|
||||
break
|
||||
case 4:
|
||||
if (targetIndex.value === 5) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
changesdonghua(targetIndex.value)
|
||||
|
||||
break
|
||||
|
||||
}
|
||||
} else {
|
||||
propsmove.value = -1
|
||||
nextTick(() => propsmove.value = where)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -506,7 +585,7 @@
|
|||
}
|
||||
|
||||
.left-container {
|
||||
width: 320rpx;
|
||||
width: 420rpx;
|
||||
height: 100%;
|
||||
|
||||
.blue-circle-pos {
|
||||
|
|
@ -639,4 +718,45 @@
|
|||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
--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;
|
||||
}
|
||||
|
||||
@keyframes scalePulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
/* 先收缩一点点 */
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
65% {
|
||||
/* 再放大到略超出的感觉 */
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
```vue
|
||||
<!-- 轮盘(一级圆盘 + 二级左半弧滚动盘)-->
|
||||
<template>
|
||||
<view class="draw-all">
|
||||
<view class="button-father">
|
||||
<view v-for="(item,index) in ballarray" :key="index" class="white-ball" @click="clickball(index)">
|
||||
<image style="width: 50%;height: 50%;" v-if="item.url" :src="item.url" />
|
||||
<view v-else >
|
||||
{{ index===5? changerightbottom : item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed, nextTick, watch, onBeforeUnmount,defineProps } from 'vue'
|
||||
|
||||
|
||||
// 接收父组件传入的宽度百分比
|
||||
const props = defineProps({
|
||||
changerightbottom: {
|
||||
type: String,
|
||||
default: "标准"
|
||||
}
|
||||
})
|
||||
const ballarray = ref([
|
||||
{
|
||||
name:'周期',
|
||||
url:""
|
||||
},
|
||||
{
|
||||
name:'放大',
|
||||
url:"/static/index/getbig.png"
|
||||
},
|
||||
{
|
||||
name:'日常',
|
||||
url:""
|
||||
},
|
||||
{
|
||||
name:'缩小',
|
||||
url:"/static/index/getsmall.png"
|
||||
},
|
||||
{
|
||||
name:'全部',
|
||||
url:""
|
||||
},
|
||||
{
|
||||
name:'标准',
|
||||
url:""
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const emit = defineEmits(["clickball"])
|
||||
|
||||
const clickball = (index:number) => {
|
||||
emit("clickball",index)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.draw-all {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #eff0f4;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.button-father{
|
||||
position: absolute;
|
||||
bottom: 150rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
// background-color: red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.white-ball{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 30rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<view>
|
||||
<view :class="['drawer', { 'drawer-open': isVisible }]" :style="drawerStyle">
|
||||
<view class="drawer-content" @touchstart.passive="onTouchStart" @touchmove.passive="onTouchMove"
|
||||
@touchend="onTouchEnd" @touchcancel="onTouchEnd">
|
||||
<!-- 抽屉中间的半圆 -->
|
||||
<view class="drawer-content-circle" :style="isVisible?{background:`linear-gradient(to bottom,#62E8FF,#0097FF)`}:{background:`linear-gradient(to bottom,#62E8FF,#0097FF)`}" @click="whiteDrawer">
|
||||
<image class="drawer-img" :style="{transform:isVisible?`rotate(180deg)`:``}" :src="isVisible?'/static/index/watch/arrow.png':'/static/index/watch/arrow.png' " />
|
||||
</view>
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
computed,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
|
||||
// 控制抽屉显示隐藏
|
||||
const isVisible = ref(false)
|
||||
|
||||
// 接收父组件传入的宽度百分比
|
||||
const props = defineProps({
|
||||
widNumber: {
|
||||
type: Number,
|
||||
default: 17
|
||||
}
|
||||
})
|
||||
|
||||
// 获取屏幕宽度,用于拖拽计算
|
||||
const screenWidth = ref(0)
|
||||
onMounted(() => {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
screenWidth.value = sys.screenWidth
|
||||
})
|
||||
|
||||
// 拖拽状态
|
||||
const startX = ref(0)
|
||||
const dragging = ref(false)
|
||||
const currentOffset = ref(0)
|
||||
|
||||
// 计算样式:宽度 + 拖拽或开关 transform
|
||||
const drawerStyle = computed(() => {
|
||||
const widthPct = `${props.widNumber}%`
|
||||
if (dragging.value) {
|
||||
// 拖动时,X 方向正值向右移动抽屉
|
||||
const offset = currentOffset.value
|
||||
return {
|
||||
width: widthPct,
|
||||
transform: `translateX(${offset}px)`,
|
||||
transition: 'none'
|
||||
}
|
||||
} else {
|
||||
// 非拖动交由 class 控制开关状态
|
||||
return {
|
||||
width: widthPct
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 打开/关闭
|
||||
function openDrawer() {
|
||||
isVisible.value = true
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
isVisible.value = false
|
||||
}
|
||||
|
||||
function whiteDrawer() {
|
||||
// 点击半圆:切换 & 旋转
|
||||
isVisible.value = !isVisible.value
|
||||
rotate180()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openDrawer,
|
||||
closeDrawer
|
||||
})
|
||||
|
||||
// 拖拽事件
|
||||
function onTouchStart(e) {
|
||||
if (!isVisible.value) return
|
||||
dragging.value = true
|
||||
currentOffset.value = 0
|
||||
startX.value = e.touches[0].pageX
|
||||
}
|
||||
|
||||
function onTouchMove(e) {
|
||||
if (!dragging.value) return
|
||||
const delta = e.touches[0].pageX - startX.value
|
||||
currentOffset.value = delta > 0 ? delta : 0
|
||||
}
|
||||
|
||||
function onTouchEnd() {
|
||||
if (!dragging.value) return
|
||||
dragging.value = false
|
||||
const halfPx = screenWidth.value * (props.widNumber / 100) / 2
|
||||
if (currentOffset.value > halfPx) {
|
||||
closeDrawer()
|
||||
rotate180()
|
||||
}
|
||||
currentOffset.value = 0
|
||||
}
|
||||
|
||||
// 半圆旋转
|
||||
const angle = ref(0)
|
||||
const boxStyle = computed(() => ({
|
||||
transform: `rotate(${angle.value}deg)`,
|
||||
transition: 'transform 0.6s ease'
|
||||
}))
|
||||
|
||||
function rotate180() {
|
||||
angle.value += 180
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.drawer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 85vh;
|
||||
// background: #eff0f4;
|
||||
z-index: 1000;
|
||||
border-top-left-radius: 80rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
/* 初始隐藏 */
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.drawer-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer-content-circle {
|
||||
position: absolute;
|
||||
bottom: 240rpx;
|
||||
left: -60rpx;
|
||||
width: 150rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
// background: #fff;
|
||||
// background: linear-gradient(to right,
|
||||
// #fff 0rpx,
|
||||
// #eff0f4 60rpx,
|
||||
// #eff0f4 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
clip-path: inset(0 60% 0 0);
|
||||
}
|
||||
|
||||
.drawer-img {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 25rpx;
|
||||
// transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<view class="doctorsay-container-container">
|
||||
<view class="doctorsay-container-title">
|
||||
<!-- <view class="doctorsay-container-title">
|
||||
<view class="doctorsay-container-left">
|
||||
<!-- <view class="doctorsay-container-left-gun"></view>
|
||||
<view class="doctorsay-container-left-font">时间矩阵</view> -->
|
||||
<view class="doctorsay-container-left-gun"></view>
|
||||
<view class="doctorsay-container-left-font">时间矩阵</view>
|
||||
</view>
|
||||
|
||||
<view class="doctorsay-container-right">
|
||||
|
|
@ -30,13 +30,14 @@
|
|||
返回
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="super-card">
|
||||
<view class="super-card-container">
|
||||
|
||||
<scroll-view style="height: 100%;width: 100%;" :scroll-left="scrollLeft" scroll-x
|
||||
:show-scrollbar="false">
|
||||
<view :style="{width:widthType * 24 + `rpx`}"
|
||||
style="display: flex;">
|
||||
|
||||
<view :style="{width:widthType * 24 + `rpx`}" style="display: flex;">
|
||||
<view v-for="(item0,index0) in changetimearr" :key="index0">
|
||||
<view class="super-card-time" :style="{width:widthType + `rpx`}">
|
||||
{{(item0.positioning.length == 1 ? ('0' + item0.positioning) : item0.positioning) + ":00"}}
|
||||
|
|
@ -44,24 +45,51 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex;height: calc(100% - 80rpx);" :style="{width:widthType * 24 + `rpx`}">
|
||||
<view style="display: flex;height: calc(100% - 80rpx);position: relative;"
|
||||
:style="{width:widthType * 24 + `rpx`}">
|
||||
<view class="xian-bian"></view>
|
||||
<scroll-view scroll-y :show-scrollbar="false" :scroll-top="scrollTop">
|
||||
<view style="display: flex;height: 100%;">
|
||||
<view v-for="(item0,index0) in changetimearr" :key="index0">
|
||||
<view class="super-card-time-und" :style="{width:widthType + `rpx`}">
|
||||
<view class="bottom-bian"></view>
|
||||
<view v-for="(item1,index1) in item0.children" style="width: 100%;"
|
||||
:key="index1">
|
||||
<view
|
||||
:style="{height:heightType + `rpx`}"
|
||||
class="super-card-time-card" style="position: relative;"
|
||||
<view :style="{height:heightType + `rpx`}" class="super-card-time-card"
|
||||
@touchend="handleTap(item1,index0,index1,$event)" :data-index0="index0"
|
||||
:data-index1="index1">
|
||||
|
||||
|
||||
<view :class="getClass(item1,index0,index1)"
|
||||
style="font-size: 30rpx;position: relative;">
|
||||
<view class="title-time-blue"
|
||||
v-show="clickX == index0 && clickY == index1">
|
||||
</view>
|
||||
<view :class="getClass(item1,index0,index1)"
|
||||
style="font-size: 30rpx;overflow: hidden;">
|
||||
<view class="title-time" v-if="item1.startTime"
|
||||
style="flex-direction: column;overflow: hidden;">
|
||||
<image v-show="item1.startTime"
|
||||
style="width: 50rpx;height: 50rpx;margin: 0 auto;"
|
||||
src="/static/index/tu.png" />
|
||||
<view class="title-time-time" style="font-size: 30rpx;"
|
||||
v-show="scalcType<10">
|
||||
{{item1.startTime + `-` + item1.endTime}}
|
||||
</view>
|
||||
<image class="title-time-button"
|
||||
style="width: 80rpx;height: 48rpx;"
|
||||
v-if="item1.cycleType!='日常'"
|
||||
src="/static/index/newruler/jiao.png"
|
||||
v-show="scalcType<14" />
|
||||
<view class="title-time-font"
|
||||
style="right: 10rpx;top: 5rpx;font-size: 20rpx;"
|
||||
v-show="scalcType<14" v-if="item1.cycleType!='日常'">
|
||||
{{item1.cycleType}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.startTime" class="title-time-font-rel"
|
||||
v-show="scalcType<15">
|
||||
{{splitString(item1.directiveName)[0]}}
|
||||
</view>
|
||||
<!-- <view class="title-time" v-if="item1.startTime"
|
||||
style="margin-top: 0rpx;">
|
||||
<view class="title-time-time" style="font-size: 25rpx;"
|
||||
v-show="scalcType<10">
|
||||
|
|
@ -72,8 +100,9 @@
|
|||
<view class="title-time-font" v-show="scalcType<10">
|
||||
{{item1.cycleType}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="scalcType>=10" style="margin: auto;" :style="{fontSize: cardFont + `rpx`}">
|
||||
</view> -->
|
||||
<!-- <view v-show="scalcType>=10" style="margin: auto;"
|
||||
:style="{fontSize: cardFont + `rpx`}">
|
||||
{{item1.cycleType}}
|
||||
</view>
|
||||
<view v-show="scalcType<10"
|
||||
|
|
@ -92,7 +121,7 @@
|
|||
{{splitString(item1.directiveName)[index + 1]}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -106,10 +135,14 @@
|
|||
</view>
|
||||
<!-- <addball :isShow="true" @clickBall="changeType(0)" />
|
||||
<decball :isShow="true" @clickBall="changeType(1)" /> -->
|
||||
<max :isShow="true" :isZhengti="scalcType!==6" @clickBall="changeRuler" />
|
||||
<!-- <max :isShow="true" :isZhengti="scalcType!==6" @clickBall="changeRuler" /> -->
|
||||
<!-- <min :isShow="true" @clickBall="scalcType=24" /> -->
|
||||
<specialDrawerVue ref="gobackdrawer">
|
||||
<rightroll @clickball="clickball" :changerightbottom="scalcType===7?'缩略图':'标准'" />
|
||||
</specialDrawerVue>
|
||||
<!-- 轮盘 -->
|
||||
<joystick @movecard="movecard" />
|
||||
<!-- <joystick @movecard="movecard" /> -->
|
||||
<arrowkeys @movecard="movecard" />
|
||||
<!-- 长按的弹出层` -->
|
||||
<!-- <view v-show="isopen" class="popup-overlay" @click="isopen=false"> -->
|
||||
<view class="popup-overlay-content" v-show="isopen"
|
||||
|
|
@ -138,11 +171,13 @@
|
|||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive, watch } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { getNclist } from "@/component/rightItemssecond/api.js";
|
||||
import addball from "./addball.vue"
|
||||
import decball from "./decball.vue"
|
||||
import max from "./max.vue"
|
||||
import min from "./min.vue"
|
||||
import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
import specialDrawerVue from './drawer/specialDrawer.vue';
|
||||
import rightroll from './drawer/index.vue';
|
||||
// import addball from "./addball.vue"
|
||||
// import decball from "./decball.vue"
|
||||
// import max from "./max.vue"
|
||||
// import min from "./min.vue"
|
||||
// import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
// 暗黑模式
|
||||
const darkFans = ref(false);
|
||||
const timearr = ref([]);
|
||||
|
|
@ -181,6 +216,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clickball = (index : number) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
changeTarget(2)
|
||||
break
|
||||
case 1:
|
||||
changeType(0)
|
||||
break
|
||||
case 2:
|
||||
changeTarget(1)
|
||||
break
|
||||
case 3:
|
||||
changeType(1)
|
||||
break
|
||||
case 4:
|
||||
changeTarget(0)
|
||||
break
|
||||
case 5:
|
||||
if (scalcType.value ===7) {
|
||||
changeRuler(false)
|
||||
} else {
|
||||
changeRuler(true)
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
// 切割bigArray
|
||||
function splitString(str : any) {
|
||||
if (str) {
|
||||
|
|
@ -221,7 +284,7 @@
|
|||
const scrollTop = ref(0);
|
||||
|
||||
const changetimearr = ref([]);
|
||||
const scalcType = ref(9);
|
||||
const scalcType = ref(0);
|
||||
const widthType = ref(247);
|
||||
const heightType = ref(180);
|
||||
const cardFont = ref(0);
|
||||
|
|
@ -240,10 +303,12 @@
|
|||
}
|
||||
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
||||
// scrollLeft.value = 740
|
||||
scalcType.value = 9
|
||||
widthType.value = 247;
|
||||
scrollLeft.value = 740;
|
||||
heightType.value = 140
|
||||
|
||||
scalcType.value = 7
|
||||
centerCell()
|
||||
// widthType.value = 247;
|
||||
// scrollLeft.value = 740;
|
||||
// heightType.value = 140
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -261,12 +326,12 @@
|
|||
const totalColumns = 24; // 总列数
|
||||
const totalRows = 11; // 总行数
|
||||
const visibleWidth = 2220; // 可视区域宽度 (rpx),基于 scalcType * widthType ≈ 2220
|
||||
const visibleHeight = 512.5; // 可视区域高度 (rpx),假设显示约5行时 heightType = 102.5
|
||||
const visibleHeight = 562.5; // 可视区域高度 (rpx),假设显示约5行时 heightType = 102.5
|
||||
function centerCell() {
|
||||
if (clickX.value >= 0 && clickX.value <= totalColumns && clickY.value >= 0 && clickY.value <= totalRows) {
|
||||
// 计算点击格子的中心位置 (rpx)
|
||||
const cellCenterX = (clickX.value+0.5) * widthType.value;
|
||||
const cellCenterY = (clickY.value-2) * heightType.value;
|
||||
const cellCenterX = (clickX.value + 0.5) * widthType.value;
|
||||
const cellCenterY = (clickY.value - 0.5) * heightType.value;
|
||||
|
||||
// 计算 scrollLeft 和 scrollTop,使格子中心位于可视区域中心
|
||||
scrollLeft.value = cellCenterX - visibleWidth / 2;
|
||||
|
|
@ -277,10 +342,10 @@
|
|||
const totalHeight = totalRows * heightType.value;
|
||||
|
||||
// 限制 scrollLeft 和 scrollTop 在有效范围内
|
||||
scrollLeft.value = Math.max(0, Math.min(scrollLeft.value, totalWidth - visibleWidth)) /2;
|
||||
scrollLeft.value = Math.max(0, Math.min(scrollLeft.value, totalWidth - visibleWidth)) / 2;
|
||||
// scrollTop.value = 0// scrollTop.value = 0
|
||||
scrollTop.value = Math.max(0, Math.min(scrollTop.value, totalHeight - visibleHeight)) /2;
|
||||
setTimeout(()=>rulerTouchClick(setTimeout(()=>rulerTouchClick(changetimearr.value[clickX.value].children[clickY.value],clickX.value,clickY.value) ,50),clickX.value,clickY.value) ,50)
|
||||
scrollTop.value = Math.max(0, Math.min(scrollTop.value, totalHeight - visibleHeight)) / 2;
|
||||
// setTimeout(() => rulerTouchClick(setTimeout(() => rulerTouchClick(changetimearr.value[clickX.value].children[clickY.value], clickX.value, clickY.value), 50), clickX.value, clickY.value), 50)
|
||||
}
|
||||
}
|
||||
const clickX = ref(10);
|
||||
|
|
@ -293,123 +358,105 @@
|
|||
scalcType,
|
||||
(newVal, oldVal) => {
|
||||
if (oldVal !== newVal) {
|
||||
// 基准与视口设置
|
||||
const BASE_WIDTH = 92.5;
|
||||
const BASE_HEIGHT = 102.5;
|
||||
const VIEW_ROWS = 11;
|
||||
const VIEWPORT_HEIGHT = BASE_HEIGHT * VIEW_ROWS; // 11 * 102.5
|
||||
|
||||
// 只设置宽度和字体,height 由后面按比例并保证整数行计算
|
||||
switch (newVal) {
|
||||
case 24:
|
||||
widthType.value = 92.5;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 18
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 18;
|
||||
break;
|
||||
case 23:
|
||||
widthType.value = 96.5;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 18
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 18;
|
||||
break;
|
||||
case 22:
|
||||
widthType.value = 101;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 18
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 18;
|
||||
break;
|
||||
case 21:
|
||||
widthType.value = 106;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 19
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 19;
|
||||
break;
|
||||
case 20:
|
||||
widthType.value = 112;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 20
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 20;
|
||||
break;
|
||||
case 19:
|
||||
widthType.value = 117;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 21
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 21;
|
||||
break;
|
||||
case 18:
|
||||
widthType.value = 124;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 22
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 22;
|
||||
break;
|
||||
case 17:
|
||||
widthType.value = 131;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 23
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 23;
|
||||
break;
|
||||
case 16:
|
||||
widthType.value = 139;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 24
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 24;
|
||||
break;
|
||||
case 15:
|
||||
widthType.value = 148;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 25
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 25;
|
||||
break;
|
||||
case 14:
|
||||
widthType.value = 159;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 26
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 26;
|
||||
break;
|
||||
case 13:
|
||||
widthType.value = 171;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 27
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 27;
|
||||
break;
|
||||
case 12:
|
||||
widthType.value = 185;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 28
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 28;
|
||||
break;
|
||||
case 11:
|
||||
widthType.value = 202;
|
||||
heightType.value = 102.5
|
||||
cardFont.value = 29
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 29;
|
||||
break;
|
||||
case 10:
|
||||
widthType.value = 222;
|
||||
heightType.value = 102.5;
|
||||
cardFont.value = 30
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 30;
|
||||
break;
|
||||
case 9:
|
||||
widthType.value = 247;
|
||||
heightType.value = 140
|
||||
cardFont.value = 30
|
||||
centerCell();
|
||||
return
|
||||
|
||||
cardFont.value = 30;
|
||||
break;
|
||||
case 8:
|
||||
widthType.value = 280;
|
||||
heightType.value = 150
|
||||
cardFont.value = 30
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 30;
|
||||
break;
|
||||
case 7:
|
||||
widthType.value = 320;
|
||||
heightType.value = 160
|
||||
cardFont.value = 30
|
||||
centerCell();
|
||||
return
|
||||
case 6:
|
||||
widthType.value = 380;
|
||||
heightType.value = 170
|
||||
cardFont.value = 30
|
||||
centerCell();
|
||||
return
|
||||
cardFont.value = 30;
|
||||
break;
|
||||
default:
|
||||
widthType.value = BASE_WIDTH;
|
||||
cardFont.value = 18;
|
||||
break;
|
||||
}
|
||||
|
||||
// 按宽度比例计算期望高度
|
||||
const tentativeHeight = BASE_HEIGHT * (widthType.value / BASE_WIDTH);
|
||||
|
||||
// 计算在视口内能完整显示的行数(取整),并限制在 1..VIEW_ROWS 之间
|
||||
let rows = Math.floor(VIEWPORT_HEIGHT / tentativeHeight);
|
||||
if (rows < 1) rows = 1;
|
||||
if (rows > VIEW_ROWS) rows = VIEW_ROWS;
|
||||
|
||||
// 最终高度使得视口内恰好显示整数行,避免半个格子
|
||||
heightType.value = VIEWPORT_HEIGHT / rows;
|
||||
|
||||
centerCell();
|
||||
return;
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
@ -428,7 +475,7 @@
|
|||
if (now - lastTap.value < 250) {
|
||||
// message.value = '检测到双击事件'
|
||||
// console.log('双击逻辑执行')
|
||||
if(item.startTime){
|
||||
if (item.startTime) {
|
||||
closeIsOpen(index0, index1)
|
||||
}
|
||||
|
||||
|
|
@ -438,7 +485,7 @@
|
|||
// clickTimer.value = setTimeout(() => {
|
||||
// rulerTouchClick(item, index0, index1, e)
|
||||
// }, 250)
|
||||
if(item.directiveName){
|
||||
if (item.directiveName) {
|
||||
clickX.value = index0;
|
||||
clickY.value = index1;
|
||||
}
|
||||
|
|
@ -457,7 +504,7 @@
|
|||
const rulerTouchClick = (item : any, index0 : number, index1 : number) => {
|
||||
if (item.directiveName) {
|
||||
|
||||
nextTick(()=>{
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery()
|
||||
query
|
||||
.selectAll('.super-card-time-card')
|
||||
|
|
@ -490,7 +537,7 @@
|
|||
.exec()
|
||||
})
|
||||
|
||||
}else{
|
||||
} else {
|
||||
// clickX.value = index0;
|
||||
// clickY.value = index1;
|
||||
}
|
||||
|
|
@ -591,40 +638,48 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
const movecard = (type:number) => {
|
||||
const movecard = (type : number) => {
|
||||
isopen.value = false
|
||||
switch (type) {
|
||||
case 0:
|
||||
if(clickY.value>0){
|
||||
if (clickY.value > 0) {
|
||||
clickY.value--
|
||||
}
|
||||
|
||||
break
|
||||
case 1:
|
||||
if(clickX.value<23){
|
||||
if (clickX.value < 23) {
|
||||
clickX.value++
|
||||
}
|
||||
|
||||
|
||||
break
|
||||
case 2:
|
||||
if(clickY.value<11){
|
||||
if (clickY.value < 11) {
|
||||
clickY.value++
|
||||
}
|
||||
|
||||
break
|
||||
case 3:
|
||||
if(clickX.value>0){
|
||||
if (clickX.value > 0) {
|
||||
clickX.value--
|
||||
}
|
||||
|
||||
break
|
||||
case 4:
|
||||
rulerTouchClick(changetimearr.value[clickX.value].children[clickY.value], clickX.value, clickY.value)
|
||||
|
||||
break
|
||||
case 5:
|
||||
|
||||
routerBack()
|
||||
break
|
||||
}
|
||||
}
|
||||
function changeRuler(type:boolean){
|
||||
if(type){
|
||||
scalcType.value = 6
|
||||
}else{
|
||||
function changeRuler(type : boolean) {
|
||||
if (type) {
|
||||
scalcType.value = 11
|
||||
} else {
|
||||
scalcType.value = 24
|
||||
}
|
||||
}
|
||||
|
|
@ -887,7 +942,8 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 200rpx);
|
||||
height: calc(100% - 150rpx);
|
||||
margin-top: 100rpx;
|
||||
|
||||
.scroll-x {
|
||||
height: 100%;
|
||||
|
|
@ -906,7 +962,7 @@
|
|||
// border-radius: 20rpx;
|
||||
// border: 2rpx solid #fff;
|
||||
// box-shadow: 10rpx 10rpx 20px rgba(0, 0, 0, 0.1);
|
||||
color: #A9ACB1;
|
||||
// color: #A9ACB1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -916,6 +972,7 @@
|
|||
align-items: center;
|
||||
height: 80rpx;
|
||||
width: 380rpx;
|
||||
color: #A9ACB1;
|
||||
// border-right: 1rpx solid transparent;
|
||||
// border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
// font-weight: 700;
|
||||
|
|
@ -926,7 +983,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 380rpx;
|
||||
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
border-right: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
|
|
@ -937,88 +994,83 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
// height: 180rpx;
|
||||
|
||||
width: calc(100%);
|
||||
border-top: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.title-time-border-blue {
|
||||
z-index: 999;
|
||||
background:
|
||||
/* 左上角水平 */
|
||||
linear-gradient(to right, #A9ACB1, #A9ACB1) top left / 60rpx 8rpx no-repeat,
|
||||
/* 左上角垂直 */
|
||||
linear-gradient(to bottom, #A9ACB1, #A9ACB1) top left / 8rpx 60rpx no-repeat,
|
||||
|
||||
/* 右上角水平 */
|
||||
linear-gradient(to left, #A9ACB1, #A9ACB1) top right / 60rpx 8rpx no-repeat,
|
||||
/* 右上角垂直 */
|
||||
linear-gradient(to bottom, #A9ACB1, #A9ACB1) top right / 8rpx 60rpx no-repeat,
|
||||
|
||||
/* 左下角水平 */
|
||||
linear-gradient(to right, #A9ACB1, #A9ACB1) bottom left / 60rpx 8rpx no-repeat,
|
||||
/* 左下角垂直 */
|
||||
linear-gradient(to top, #A9ACB1, #A9ACB1) bottom left / 8rpx 60rpx no-repeat,
|
||||
|
||||
/* 右下角水平 */
|
||||
linear-gradient(to left, #A9ACB1, #A9ACB1) bottom right / 60rpx 8rpx no-repeat,
|
||||
/* 右下角垂直 */
|
||||
linear-gradient(to top, #A9ACB1, #A9ACB1) bottom right / 8rpx 60rpx no-repeat;
|
||||
}
|
||||
|
||||
.title-time-border-yellow {
|
||||
margin: 10rpx;
|
||||
border: 2rpx solid #d0d8e0;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
width: calc(100% - 20rpx);
|
||||
height: calc(100% - 20rpx);
|
||||
// border: 2rpx solid #d0d8e0;
|
||||
background-color: #fff;
|
||||
// background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
width: calc(100% - 40rpx);
|
||||
height: calc(100% - 40rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-shadow: 6rpx 6rpx 12rpx rgba(255, 138, 0, 0.7);
|
||||
// opacity: 0.3;
|
||||
// box-shadow: 6rpx 6rpx 12rpx rgba(255, 138, 0, 0.7);
|
||||
}
|
||||
|
||||
.title-time-border-pouple {
|
||||
margin: 10rpx;
|
||||
border: 1rpx solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
width: calc(100% - 20rpx);
|
||||
height: calc(100% - 20rpx);
|
||||
background-color: #fff;
|
||||
// opacity: 0.3;
|
||||
// border: 1rpx solid #dae8fa;
|
||||
// background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
width: calc(100% - 40rpx);
|
||||
height: calc(100% - 40rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-shadow: 6rpx 6rpx 12rpx rgba(123, 97, 255, 0.7);
|
||||
// box-shadow: 6rpx 6rpx 12rpx rgba(123, 97, 255, 0.7);
|
||||
}
|
||||
|
||||
.title-time-border {
|
||||
margin-top: 4rpx;
|
||||
margin-left: 4rpx;
|
||||
// border: 1rpx solid black;
|
||||
width: calc(100% - 8rpx);
|
||||
height: calc(100% - 8rpx);
|
||||
// margin-top: 4rpx;
|
||||
// margin-left: 4rpx;
|
||||
// // border: 1rpx solid black;
|
||||
// width: calc(100% - 8rpx);
|
||||
// height: calc(100% - 8rpx);
|
||||
// border-radius: 20rpx;
|
||||
// display: flex;
|
||||
// // justify-content: center;
|
||||
// align-items: center;
|
||||
// flex-direction: column;
|
||||
margin: 10rpx;
|
||||
// background-color: #fff;
|
||||
// opacity: 0.3;
|
||||
// border: 1rpx solid #dae8fa;
|
||||
// background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
width: calc(100% - 40rpx);
|
||||
height: calc(100% - 40rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title-time {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
// position: relative;
|
||||
|
||||
.title-time-time {
|
||||
font-size: 32rpx;
|
||||
margin-left: 40rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 12rpx;
|
||||
|
||||
}
|
||||
|
||||
.title-time-button {
|
||||
|
|
@ -1161,6 +1213,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
|
||||
.titlebutton-father {
|
||||
|
|
@ -1258,14 +1311,15 @@
|
|||
border-top-right-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-time-blue {
|
||||
/* 你的定位与尺寸保持不变 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
width: 105%;
|
||||
height: 105%;
|
||||
z-index: 10;
|
||||
|
||||
--color: #99C9FD;
|
||||
|
|
@ -1285,4 +1339,33 @@
|
|||
/* 右边 */
|
||||
repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat;
|
||||
}
|
||||
|
||||
.title-time-font-rel {
|
||||
min-width: 0;
|
||||
/* 关键:允许在 flex 中收缩以触发 overflow */
|
||||
// white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
// text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.xian-bian {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
border-right: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
}
|
||||
|
||||
.bottom-bian {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
border-bottom: 1rpx solid transparent;
|
||||
border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -129,13 +129,13 @@
|
|||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #3FBBFE, #A541FF);
|
||||
background: #fff;
|
||||
border: 2rpx solid #fff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
font-size: 30rpx;
|
||||
/* 可根据需要添加阴影或其他样式 */
|
||||
// .floating-ball-img{
|
||||
|
|
|
|||
|
|
@ -50,9 +50,9 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-show="target===5">
|
||||
<!-- <view class="" v-show="target===5">
|
||||
<joystick @movecard="" :movebottom="44" :moveleft="-5" :pao="false" :notext="true" />
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 一级手势蒙层 -->
|
||||
<view v-if="dragging==='first'" class="gesture-mask" @touchmove.stop.prevent="onTouchMove"
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed, nextTick, watch, onBeforeUnmount } from 'vue'
|
||||
import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
// import joystick from '@/component/public/newgame/joysticknew.vue';
|
||||
|
||||
const emit = defineEmits([])
|
||||
const props = defineProps({})
|
||||
|
|
@ -412,7 +412,7 @@
|
|||
height: 380px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -60%;
|
||||
right: -65%;
|
||||
transform: translateY(-60%);
|
||||
bottom: 270rpx;
|
||||
margin: auto;
|
||||
|
|
@ -500,7 +500,7 @@
|
|||
height: 480px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -70%;
|
||||
right: -75%;
|
||||
transform: translateY(-70%);
|
||||
bottom: 172rpx;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -18,10 +18,7 @@
|
|||
|
||||
<!-- <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 `}:{} ">
|
||||
<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;">
|
||||
|
|
@ -274,7 +271,7 @@
|
|||
<specialDrawerVue ref="gobackdrawer">
|
||||
<bigroll />
|
||||
</specialDrawerVue>
|
||||
<arrowkeys @movecard="movecard" :getblue="getblue" :movebottom="180" />
|
||||
<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="5" />
|
||||
<!-- 自动更新组件 -->
|
||||
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
|
||||
:appstoreflag="true" :autocheckupdate="true"></zy-update>
|
||||
|
|
@ -288,7 +285,6 @@
|
|||
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);
|
||||
|
|
@ -613,7 +609,7 @@
|
|||
const goback = () => {
|
||||
// uni.navigateBack()
|
||||
uni.navigateTo({
|
||||
url: '/pages/Initialization/index?menu=4'
|
||||
url: '/pages/watch/settings/settings'
|
||||
})
|
||||
}
|
||||
const goToCeshi = () => {
|
||||
|
|
@ -637,7 +633,7 @@
|
|||
|
||||
.view-left {
|
||||
height: 100%;
|
||||
width: 17%;
|
||||
width: 23%;
|
||||
// background-color: red;
|
||||
|
||||
.title-father {
|
||||
|
|
@ -666,8 +662,8 @@
|
|||
height: 800rpx;
|
||||
|
||||
.menu {
|
||||
margin: 45rpx auto;
|
||||
// margin-left: 10rpx;
|
||||
margin: 45rpx 0;
|
||||
margin-left: 30rpx;
|
||||
|
||||
height: 110rpx;
|
||||
width: 300rpx;
|
||||
|
|
@ -697,7 +693,7 @@
|
|||
|
||||
.view-right {
|
||||
height: 100%;
|
||||
width: 92.5%;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
|
||||
.right-container-title-nav {
|
||||
|
|
@ -781,7 +777,7 @@
|
|||
.big-bgc {
|
||||
// margin-top: -50rpx;
|
||||
margin-top: 30rpx;
|
||||
width: 1320rpx;
|
||||
width: 1250rpx;
|
||||
height: 913rpx;
|
||||
border-radius: 50rpx;
|
||||
overflow: hidden;
|
||||
|
|
@ -794,7 +790,7 @@
|
|||
|
||||
.small-bgc {
|
||||
// margin: 0 20rpx;
|
||||
width: 315rpx;
|
||||
width: 298rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 25rpx;
|
||||
overflow: hidden;
|
||||
|
|
@ -838,7 +834,7 @@
|
|||
|
||||
.right-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: -20rpx;
|
||||
top: 230rpx;
|
||||
height: calc(100% - 250rpx);
|
||||
width: 650rpx;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<view class="index-content-other">
|
||||
<view class="index-content-right" @click="goback">
|
||||
<image class="back-img" :src="`/static/index/settings/back.png`"/>
|
||||
返回
|
||||
</view>
|
||||
<view class="saomiao">
|
||||
<view class="big-ball">
|
||||
<view class="ball"></view>
|
||||
</view>
|
||||
<image class="left-img" src="@/static/click.png" />
|
||||
<input class="saoma-input" :password="false" v-model="uuid" placeholder="请手动录入NUID" />
|
||||
<image v-show="uuid" class="right-img" src="@/static/x.png" @click="uuid=''" />
|
||||
<view class="blue-button">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<image class="big-bgc" src="@/static/bgc.png" />
|
||||
<image class="big-img" src="@/static/qiu.png" />
|
||||
<view class="index-content-down">
|
||||
长春市朝阳区久泰开运养老服务有限公司
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
const goback = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const uuid = ref("")
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.index-content-other {
|
||||
width: 100% ;
|
||||
height: 100%;
|
||||
transition: opacity 1s ease;
|
||||
position: relative;
|
||||
background-color: #EFF0F4;
|
||||
}
|
||||
|
||||
.index-content-down {
|
||||
// width: calc(100% - 60rpx);
|
||||
// height: 100rpx;
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.index-content-right {
|
||||
width: 100%;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 100rpx;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.index-content-title {
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.shu {
|
||||
width: 20rpx;
|
||||
height: 50rpx;
|
||||
background: linear-gradient(to right, #0052C2, #00B4FF);
|
||||
border-radius: 20rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.shu-font {
|
||||
color: #415273;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.saomiao {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
|
||||
.saoma-input {
|
||||
background-color: #fff;
|
||||
width: 550rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 30rpx;
|
||||
padding-left: 100rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.left-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30rpx;
|
||||
transform: translateY(-50%);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.right-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 220rpx;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
margin-left: 30rpx;
|
||||
width: 170rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007CFF;
|
||||
font-size: 30rpx;
|
||||
background-color: #ddf0ff;
|
||||
border: 1rpx solid #007CFF;
|
||||
}
|
||||
|
||||
.big-ball {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -55rpx;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(219, 228, 246);
|
||||
|
||||
.ball {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(207,221,241);
|
||||
}
|
||||
}
|
||||
.back-img{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.big-bgc{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 1100rpx;
|
||||
height: 1100rpx;
|
||||
}
|
||||
.big-img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 900rpx;
|
||||
height: 900rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,907 @@
|
|||
<template>
|
||||
<view class="index-content-other">
|
||||
<view class="index-content-right" @click="goback">
|
||||
<image class="back-img" :src="`/static/index/settings/back.png`" />
|
||||
返回
|
||||
</view>
|
||||
<view class="left-contain">
|
||||
<view class="blue-bgc">
|
||||
<image class="all-img" src="/static/index/leida/leftbgc.png" />
|
||||
<image class="all-img" style="width: 90%;height: 90%;margin-top: 5%;margin-left: 5%;"
|
||||
src="/static/index/leida/bigball.png" />
|
||||
|
||||
<!-- 旋转雷达部分 -->
|
||||
<view class="inset-img" :style="insetStyle">
|
||||
<image class="all-img" style="z-index: 2;" src="/static/index/leida/biao.png" />
|
||||
<image class="all-img" style="z-index: 1;" src="/static/index/leida/ball.png" />
|
||||
<image class="all-img" src="/static/index/leida/shallow.png" />
|
||||
</view>
|
||||
|
||||
<!-- 小球层 -->
|
||||
<view class="ball-layer">
|
||||
<view v-for="ball in balls" :key="ball.id" class="ball" :style="{
|
||||
width: ball.size + 'px',
|
||||
height: ball.size + 'px',
|
||||
top: ball.top + 'px',
|
||||
left: ball.left + 'px',
|
||||
backgroundColor: ball.color,
|
||||
opacity: ball.opacity
|
||||
}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度条 -->
|
||||
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
|
||||
<view class="blue-button" style="margin-top: 0;" :class="targetNumber==-1?'zerotarget':''" @click="cantoggleRun">
|
||||
{{ count===100?`扫描`: `扫描` }}
|
||||
</view>
|
||||
<view class="progress-wrap">
|
||||
<view class="progress-inner" :style="{ width: count + '%' }"></view>
|
||||
</view>
|
||||
<view class="progress-text">{{ count }}%</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="other">
|
||||
<scroll-view ref="scrollViewRef" scroll-y class="other-father" :scroll-top="scrollTop">
|
||||
<view class="card-father">
|
||||
<view class="card" v-for="(allitem, allindex) in cardarray" :key="allindex"
|
||||
:class="[ targetNumber===allindex &&infoNumber===-1 ? 'zerotarget' : '', { 'fade-in': allitem.isNew } ]"
|
||||
@animationend="onAnimEnd(allitem)">
|
||||
<!-- <view class="card-title">
|
||||
<view style="font-size: 25rpx;">NUID:{{allitem.nuId}}</view>
|
||||
<view class="right-box">护理单元</view>
|
||||
</view> -->
|
||||
<!-- <view class="card-bottom">
|
||||
{{allitem.nuName}}
|
||||
<image class="bottom-img" src="@/static/index/leida/rename.png"
|
||||
@click="renamenummber=allindex;savevalue=allitem.nuName" />
|
||||
</view> -->
|
||||
|
||||
|
||||
<view class="main-title">
|
||||
<view class="main-title-font" style="font-weight: 600;font-size: 40rpx;">
|
||||
{{allitem.nuName}}
|
||||
</view>
|
||||
<view class="video-father" :class="targetNumber===allindex && infoNumber===0 ? 'zerotarget' : ''">
|
||||
<image class="edit-img" @click=""
|
||||
src="/static/index/leida/play.png" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;"
|
||||
:class="targetNumber===allindex && infoNumber===1 ? 'zerotarget' : ''"
|
||||
@click="rename(allindex,allitem) ">
|
||||
重命名
|
||||
</view>
|
||||
<!-- <view class="main-title">
|
||||
<view class="main-title-font" style="margin-top: 20rpx;">
|
||||
NUID:{{allitem.nuId}}
|
||||
</view>
|
||||
|
||||
</view> -->
|
||||
<view class="card-tags">
|
||||
<view style="margin-left: 80rpx;">
|
||||
NUID:{{allitem.nuId}}
|
||||
<!-- {{ allitem.areaFlagName?allitem.areaFlagName:"护理单元" }} -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="play-img">
|
||||
护理单元
|
||||
</view>
|
||||
<!-- <image class="play-img" src="/static/index/leida/play.png" /> -->
|
||||
</view>
|
||||
<!-- 弹出层 -->
|
||||
<view v-if="renamenummber!==-1" class="popup-any" :style="isdonghua?{opacity:1}:{opacity:0}">
|
||||
<view class="mask" @click="renamenummber=-1"></view>
|
||||
<view class="rename-father">
|
||||
<view class="rename-title">
|
||||
重命名
|
||||
</view>
|
||||
<view style="width: 100%;margin-left: 5rpx;margin-bottom: 20rpx;">
|
||||
NUID:{{savenuId}}
|
||||
<!-- {{ allitem.areaFlagName?allitem.areaFlagName:"护理单元" }} -->
|
||||
</view>
|
||||
<view class="rename-input">
|
||||
<!-- <image class="left-img" src="@/static/index/click.png" /> -->
|
||||
<input class="uni-input" placeholder="请重新命名" v-model="savevalue" />
|
||||
<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png"
|
||||
@click="savevalue=``" />
|
||||
</view>
|
||||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 40rpx;"
|
||||
@click="changename(savevalue,renamenummber)">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="index-content-down">
|
||||
长春市朝阳区久泰开运养老服务有限公司
|
||||
</view>
|
||||
<arrowkeys @movecard="movecard" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { getCardList } from "@/component/Initialization/api.js"
|
||||
|
||||
const goback = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
/* ------------------ 旋转逻辑 ------------------ */
|
||||
const running = ref(true)
|
||||
const centerAngle = ref(0)
|
||||
const speed = ref(100)
|
||||
const renamenummber = ref(-1)
|
||||
const savevalue = ref("");
|
||||
const savenuId = ref();
|
||||
const isdonghua = ref(false)
|
||||
// const status = ref(0);
|
||||
const rightbutton = ref([
|
||||
{ url: '/static/index/leida/00.png', targetUrl: '/static/index/leida/01.png', target: false },
|
||||
{ url: '/static/index/leida/10.png', targetUrl: '/static/index/leida/11.png', target: false },
|
||||
{ url: '/static/index/leida/20.png', targetUrl: '/static/index/leida/21.png', target: false },
|
||||
{ url: '/static/index/leida/30.png', targetUrl: '/static/index/leida/31.png', target: false }
|
||||
])
|
||||
const cardarray = ref<Array<{ menu : any; isNew : boolean; nuName : string }>>([])
|
||||
const relArray = ref([]);
|
||||
const scrollTop = ref(0);
|
||||
|
||||
let rafId : any = null
|
||||
function raf(cb : FrameRequestCallback) {
|
||||
if (typeof (globalThis as any).requestAnimationFrame === 'function') {
|
||||
return (globalThis as any).requestAnimationFrame(cb)
|
||||
} else {
|
||||
return setTimeout(() => cb(Date.now() as unknown as DOMHighResTimeStamp), 16)
|
||||
}
|
||||
}
|
||||
function caf(id : any) {
|
||||
if (typeof (globalThis as any).cancelAnimationFrame === 'function') {
|
||||
(globalThis as any).cancelAnimationFrame(id)
|
||||
} else {
|
||||
clearTimeout(id)
|
||||
}
|
||||
}
|
||||
function nowTime(ts ?: number) {
|
||||
if (typeof ts === 'number') return ts
|
||||
if ((globalThis as any).performance?.now) {
|
||||
return (globalThis as any).performance.now()
|
||||
}
|
||||
return Date.now()
|
||||
}
|
||||
|
||||
let lastT : number | null = null
|
||||
function loop(ts ?: number) {
|
||||
const now = nowTime(ts)
|
||||
if (!lastT) lastT = now
|
||||
const dt = (now - lastT) / 1000
|
||||
lastT = now
|
||||
|
||||
if (running.value) {
|
||||
centerAngle.value = (centerAngle.value + speed.value * dt) % 360
|
||||
}
|
||||
|
||||
rafId = raf(loop)
|
||||
}
|
||||
// 监听动画结束,清除标记
|
||||
function onAnimEnd(item : { isNew : boolean }) {
|
||||
item.isNew = false
|
||||
}
|
||||
function cantoggleRun() {
|
||||
if (count.value === 100) {
|
||||
startCounter()
|
||||
toggleRun()
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRun() {
|
||||
running.value = !running.value
|
||||
if (running.value) {
|
||||
lastT = nowTime()
|
||||
startBallGeneration()
|
||||
} else {
|
||||
stopBallGeneration()
|
||||
}
|
||||
}
|
||||
const changename = (name, index) => {
|
||||
if (name) {
|
||||
cardarray.value[index].nuName = name;
|
||||
}
|
||||
renamenummber.value = -1
|
||||
|
||||
}
|
||||
const insetStyle = computed(() => ({
|
||||
transform: `rotate(${centerAngle.value}deg)`
|
||||
}))
|
||||
|
||||
/* ------------------ 小球逻辑 ------------------ */
|
||||
interface Ball {
|
||||
id : number
|
||||
size : number
|
||||
top : number
|
||||
left : number
|
||||
color : string
|
||||
opacity : number
|
||||
}
|
||||
const balls = ref<Ball[]>([])
|
||||
let ballTimer : any = null
|
||||
let ballId = 0
|
||||
|
||||
function createBall() {
|
||||
const size = Math.random() * 1 + 5
|
||||
const left = Math.random() * (200 - size)
|
||||
const top = Math.random() * (200 - size)
|
||||
const id = ballId++
|
||||
const ball : Ball = {
|
||||
id,
|
||||
size,
|
||||
left,
|
||||
top,
|
||||
color: "#02a9ff",
|
||||
opacity: 0
|
||||
}
|
||||
balls.value.push(ball)
|
||||
setTimeout(() => {
|
||||
ball.opacity = 1
|
||||
}, 20)
|
||||
setTimeout(() => {
|
||||
ball.opacity = 0
|
||||
setTimeout(() => {
|
||||
balls.value = balls.value.filter(b => b.id !== id)
|
||||
}, 500)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function startBallGeneration() {
|
||||
if (ballTimer) return
|
||||
ballTimer = setInterval(() => {
|
||||
createBall()
|
||||
}, 500)
|
||||
}
|
||||
function stopBallGeneration() {
|
||||
clearInterval(ballTimer)
|
||||
ballTimer = null
|
||||
}
|
||||
|
||||
/* ------------------ 进度条逻辑 ------------------ */
|
||||
const count = ref(0)
|
||||
function startCounter() {
|
||||
let start = Date.now()
|
||||
let totalTime = 4000
|
||||
let pausePoint = Math.floor(Math.random() * 30) + 30 // 30~60
|
||||
let paused = false
|
||||
let pauseDuration = Math.floor(Math.random() * 500) + 300 // 300~800ms
|
||||
let pauseStart = 0
|
||||
|
||||
function update() {
|
||||
let elapsed = Date.now() - start
|
||||
|
||||
// 到停顿点
|
||||
if (!paused && count.value >= pausePoint) {
|
||||
paused = true
|
||||
pauseStart = Date.now()
|
||||
}
|
||||
|
||||
// 停顿中
|
||||
if (paused) {
|
||||
if (Date.now() - pauseStart >= pauseDuration) {
|
||||
paused = false
|
||||
} else {
|
||||
setTimeout(update, 16)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let progress = Math.min(elapsed / totalTime, 1)
|
||||
count.value = Math.floor(progress * 100)
|
||||
|
||||
if (count.value === 100) {
|
||||
toggleRun()
|
||||
}
|
||||
if (count.value < 100) {
|
||||
setTimeout(update, 16)
|
||||
}
|
||||
}
|
||||
getCardList().then(res => {
|
||||
res.result.records.forEach((element : any) => {
|
||||
element.menu = JSON.parse(JSON.stringify(rightbutton.value))
|
||||
element.isNew = true
|
||||
})
|
||||
relArray.value = []
|
||||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||||
|
||||
suiji()
|
||||
})
|
||||
setTimeout(update, 16)
|
||||
}
|
||||
// 随机生成并逐个添加卡片
|
||||
function suiji() {
|
||||
const n = relArray.value.length
|
||||
cardarray.value = []
|
||||
const randomWeights = Array.from({ length: n }, () => Math.random())
|
||||
const totalWeight = randomWeights.reduce((a, b) => a + b, 0)
|
||||
const intervals = randomWeights.map((w) => (w / totalWeight) * 4000)
|
||||
let cumulative = 0
|
||||
for (let i = 0; i < n; i++) {
|
||||
cumulative += intervals[i]
|
||||
setTimeout(async () => {
|
||||
cardarray.value.push(relArray.value[i])
|
||||
// 当卡片总数为 5,7,9,... 时滚动到底部
|
||||
const len = cardarray.value.length
|
||||
}, cumulative)
|
||||
}
|
||||
}
|
||||
const rename = (index : number, item : any) => {
|
||||
renamenummber.value = index;
|
||||
savevalue.value = item.nuName;
|
||||
savenuId.value = item.nuId
|
||||
isdonghua.value = false;
|
||||
setTimeout(() => {
|
||||
isdonghua.value = true;
|
||||
}, 50)
|
||||
}
|
||||
/* ------------------ 生命周期 ------------------ */
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
lastT = nowTime()
|
||||
rafId = raf(loop)
|
||||
startBallGeneration()
|
||||
startCounter()
|
||||
}
|
||||
const targetNumber = ref(-1)
|
||||
const infoNumber = ref(-1)
|
||||
const movecard = (where : number) => {
|
||||
if (count.value !== 100) {
|
||||
return
|
||||
}
|
||||
switch (where) {
|
||||
case 0:
|
||||
|
||||
if (infoNumber.value === 0) {
|
||||
infoNumber.value = 1
|
||||
return
|
||||
} else if (infoNumber.value === 1) {
|
||||
infoNumber.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
if (targetNumber.value - 2 < -1) {
|
||||
targetNumber.value = -1
|
||||
} else {
|
||||
targetNumber.value = targetNumber.value - 2
|
||||
ensureVisible(targetNumber.value)
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
if (infoNumber.value === 0) {
|
||||
infoNumber.value = 1
|
||||
return
|
||||
} else if (infoNumber.value === 1) {
|
||||
infoNumber.value = 0
|
||||
return
|
||||
}
|
||||
if (targetNumber.value + 1 > cardarray.value.length - 1) {
|
||||
|
||||
} else {
|
||||
targetNumber.value++
|
||||
ensureVisible(targetNumber.value)
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
if (infoNumber.value === 0) {
|
||||
infoNumber.value = 1
|
||||
return
|
||||
} else if (infoNumber.value === 1) {
|
||||
infoNumber.value = 0
|
||||
return
|
||||
}
|
||||
if (targetNumber.value + 1 === cardarray.value.length - 1 || targetNumber.value === -1) {
|
||||
targetNumber.value++
|
||||
ensureVisible(targetNumber.value)
|
||||
}
|
||||
else if (targetNumber.value + 2 > cardarray.value.length - 1) {
|
||||
|
||||
} else {
|
||||
targetNumber.value = targetNumber.value + 2
|
||||
ensureVisible(targetNumber.value)
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
if (infoNumber.value === 0) {
|
||||
infoNumber.value = 1
|
||||
return
|
||||
} else if (infoNumber.value === 1) {
|
||||
infoNumber.value = 0
|
||||
return
|
||||
}
|
||||
if (targetNumber.value !== -1) {
|
||||
targetNumber.value--
|
||||
ensureVisible(targetNumber.value)
|
||||
}
|
||||
break
|
||||
case 4:
|
||||
if(infoNumber.value ===1){
|
||||
rename(targetNumber.value,cardarray.value[targetNumber.value])
|
||||
return
|
||||
}
|
||||
if (targetNumber.value === -1) {
|
||||
cantoggleRun()
|
||||
} else {
|
||||
infoNumber.value = 0;
|
||||
}
|
||||
|
||||
break
|
||||
case 5:
|
||||
if(infoNumber.value !==-1){
|
||||
infoNumber.value = -1
|
||||
}else{
|
||||
goback()
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
if (rafId != null) caf(rafId)
|
||||
stopBallGeneration()
|
||||
})
|
||||
function ensureVisible(index : number) {
|
||||
const count = cardarray.value.length
|
||||
const COLS = 2
|
||||
const ROW_HEIGHT = 245
|
||||
const SCROLL_HEIGHT = 475 // scroll-view 固定高度
|
||||
if (index < 0) index = 0
|
||||
if (index >= count) index = count - 1
|
||||
|
||||
nextTick(() => {
|
||||
const rowIndex = Math.floor(index / COLS)
|
||||
const rowTop = rowIndex * ROW_HEIGHT
|
||||
const rowBottom = rowTop + ROW_HEIGHT
|
||||
|
||||
const visibleTop = scrollTop.value
|
||||
const visibleBottom = visibleTop + SCROLL_HEIGHT
|
||||
|
||||
let newTop = scrollTop.value
|
||||
|
||||
if (rowTop < visibleTop) {
|
||||
// 目标行在可视区上方 -> 向上滚到该行顶部
|
||||
newTop = rowTop
|
||||
} else if (rowBottom > visibleBottom) {
|
||||
// 目标行在可视区下方 -> 向下滚到让该行显示在底部可见
|
||||
newTop = rowBottom - SCROLL_HEIGHT
|
||||
} // 否则已经可见,不变
|
||||
|
||||
// 限制范围,避免越界
|
||||
const totalRows = Math.ceil(count / COLS)
|
||||
const totalHeight = totalRows * ROW_HEIGHT
|
||||
const maxTop = Math.max(0, totalHeight - SCROLL_HEIGHT)
|
||||
|
||||
if (newTop < 0) newTop = 0
|
||||
if (newTop > maxTop) newTop = maxTop
|
||||
|
||||
scrollTop.value = Math.round(newTop)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.index-content-other {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #EFF0F4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.index-content-down {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.index-content-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.back-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.all-img {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.blue-bgc {
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inset-img {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ball-layer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-wrap {
|
||||
width: 60%;
|
||||
height: 13px;
|
||||
background-color: #E6E9EE;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
background-image: linear-gradient(90deg, #0097FF 0%, #007CFF 100%);
|
||||
border-radius: inherit;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
margin-top: 8px;
|
||||
font-size: 28rpx;
|
||||
color: #007CFF;
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
margin-top: 30rpx;
|
||||
width: 250rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007CFF;
|
||||
font-size: 30rpx;
|
||||
background-color: #ddf0ff;
|
||||
border: 1rpx solid #007CFF;
|
||||
}
|
||||
|
||||
.other {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-left: 100rpx;
|
||||
}
|
||||
|
||||
.other-father {
|
||||
margin-top: 200rpx;
|
||||
height: 950rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-father {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 45%;
|
||||
margin-left: 4%;
|
||||
height: 450rpx;
|
||||
box-shadow: 3rpx 6rpx 12rpx 3rpx rgba(206, 206, 206, 0.5);
|
||||
background-color: #f4f5f7;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 5rpx;
|
||||
margin-bottom: 35rpx;
|
||||
padding: 0 25rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-title {
|
||||
width: 100%;
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 旋转动画 */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinx {
|
||||
from {
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(290deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 新卡片淡入动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.shu {
|
||||
width: 20rpx;
|
||||
height: 50rpx;
|
||||
background: linear-gradient(to right, #0052C2, #00B4FF);
|
||||
border-radius: 20rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.shu-font {
|
||||
color: #415273;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right-box {
|
||||
background: rgb(0, 171, 255);
|
||||
width: 160rpx;
|
||||
height: 65rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
margin-top: 17rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
|
||||
.bottom-img {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left-contain {
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 70rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.edit-img {
|
||||
width: 40rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
position: absolute;
|
||||
top: 50rpx;
|
||||
left: 0rpx;
|
||||
// background: linear-gradient(to right,#57B8FF,#0097FF);
|
||||
width: 200rpx;
|
||||
height: 65rpx;
|
||||
font-size: 25rpx;
|
||||
// color: #fff;
|
||||
// border-radius: 35rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-img {
|
||||
position: absolute;
|
||||
top: 50rpx;
|
||||
right: 30rpx;
|
||||
width: 130rpx;
|
||||
height: 55rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 35rpx;
|
||||
border: 2rpx solid #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rename-father {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600rpx;
|
||||
height: 420rpx;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
z-index: 999;
|
||||
|
||||
.rename-title {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
// border-bottom: 2rpx solid rgb(245, 245, 245);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// margin: 30rpx 0;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.rename-gray {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
color: rgb(167, 167, 167);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
background-color: rgb(245, 246, 250);
|
||||
border-radius: 20rpx;
|
||||
color: rgb(167, 167, 167);
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
|
||||
.uni-input {
|
||||
font-size: 25rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.right-img {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-any {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
/* 初始透明度 */
|
||||
opacity: 0;
|
||||
/* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */
|
||||
transition: opacity 0.5s ease;
|
||||
backdrop-filter: blur(1rpx);
|
||||
background-color: rgba(236, 237, 241, 0.4);
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.video-father{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
.zerotarget {
|
||||
--color: #99C9FD;
|
||||
--thick: 2px;
|
||||
--radius: 30rpx;
|
||||
--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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
<template>
|
||||
<view class="index-content-other">
|
||||
<view class="index-content-right" @click="goback">
|
||||
<image class="back-img" :src="`/static/index/settings/back.png`" />
|
||||
返回
|
||||
</view>
|
||||
<view class="saomiao">
|
||||
<!-- <view class="big-ball">
|
||||
<view class="ball"></view>
|
||||
</view>
|
||||
<image class="left-img" src="@/static/click.png" />
|
||||
<input class="saoma-input" :password="false" v-model="uuid" placeholder="请手动录入NUID" />
|
||||
<image v-show="uuid" class="right-img" src="@/static/x.png" @click="uuid=''" />
|
||||
<view class="blue-button">
|
||||
确定
|
||||
</view> -->
|
||||
</view>
|
||||
<image class="big-bgc" src="@/static/kuai.png" />
|
||||
<view class="big-img" @click="onScan">
|
||||
<image style="width: 100%;height: 100%;" src="@/static/sao.png" />
|
||||
<view class="big-font">
|
||||
点击扫描区域二维码
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="big-QR" src="@/static/qr.png" @click="onScan" />
|
||||
<view class="index-content-down">
|
||||
长春市朝阳区久泰开运养老服务有限公司
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
const goback = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
function onScan() {
|
||||
uni.scanCode({
|
||||
// 仅使用相机扫码,设置为 false 则可以从相册选择图片扫码(部分平台可能不支持)
|
||||
onlyFromCamera: true,
|
||||
scanType: ['qrCode', 'barCode'],
|
||||
success(res) {
|
||||
},
|
||||
fail(err) {
|
||||
// uni.showToast({ title: '扫码失败:' + err.errMsg, icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
const uuid = ref("")
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.index-content-other {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s ease;
|
||||
position: relative;
|
||||
background-color: #EFF0F4;
|
||||
}
|
||||
|
||||
.index-content-down {
|
||||
// width: calc(100% - 60rpx);
|
||||
// height: 100rpx;
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.index-content-right {
|
||||
width: 100%;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 100rpx;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.index-content-title {
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.shu {
|
||||
width: 20rpx;
|
||||
height: 50rpx;
|
||||
background: linear-gradient(to right, #0052C2, #00B4FF);
|
||||
border-radius: 20rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.shu-font {
|
||||
color: #415273;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.saomiao {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
|
||||
// .saoma-input {
|
||||
// background-color: #fff;
|
||||
// width: 550rpx;
|
||||
// height: 90rpx;
|
||||
// border-radius: 30rpx;
|
||||
// padding-left: 100rpx;
|
||||
// z-index: 2;
|
||||
// }
|
||||
|
||||
// .left-img {
|
||||
// width: 50rpx;
|
||||
// height: 50rpx;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 30rpx;
|
||||
// transform: translateY(-50%);
|
||||
// z-index: 3;
|
||||
// }
|
||||
|
||||
// .right-img {
|
||||
// width: 50rpx;
|
||||
// height: 50rpx;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: 220rpx;
|
||||
// transform: translateY(-50%);
|
||||
// z-index: 2;
|
||||
// }
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
// margin-top: 20rpx;
|
||||
margin-left: 30rpx;
|
||||
width: 170rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007CFF;
|
||||
font-size: 30rpx;
|
||||
background-color: #ddf0ff;
|
||||
border: 1rpx solid #007CFF;
|
||||
}
|
||||
|
||||
.big-ball {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -55rpx;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(219, 228, 246);
|
||||
|
||||
.ball {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(207, 221, 241);
|
||||
}
|
||||
}
|
||||
|
||||
.back-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.big-bgc {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1800rpx;
|
||||
height: 900rpx;
|
||||
|
||||
}
|
||||
|
||||
.big-img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 350rpx;
|
||||
height: 350rpx;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
animation: scanMove 1.3s ease-in-out infinite;
|
||||
z-index: 1001;
|
||||
height: 80rpx; // 尾巴长度
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(5, 170, 254, 0.6),
|
||||
rgba(5, 170, 254, 0.1),
|
||||
transparent);
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.big-QR {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
.big-font{
|
||||
position: absolute;
|
||||
// bottom: -50rpx;
|
||||
color: #888A8B;
|
||||
left: 0;
|
||||
bottom: -80rpx;
|
||||
// width: 300rpx;
|
||||
font-size: 32rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// transform: translateX(-50%);
|
||||
}
|
||||
// 扫描动画关键帧
|
||||
@keyframes scanMove {
|
||||
0% {
|
||||
top: 5%;
|
||||
}
|
||||
100% {
|
||||
top: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
<template>
|
||||
<view class="index-content-other">
|
||||
<view class="index-content-right" @click="goback">
|
||||
<image class="back-img" :src="`/static/index/settings/back.png`" />
|
||||
返回
|
||||
</view>
|
||||
<view class="array-father">
|
||||
<view v-for="(item,index) in iconsArray.slice(0,3)" :key="index" class="item" @click="jumpToTarget(index)">
|
||||
<view class="left-item">
|
||||
<image class="left-icon" :src="`/static/index/settings/${index}.png`" />
|
||||
<view class="left-font">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-item">
|
||||
<image class="right-icon" :src="`/static/index/settings/00.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="array-father">
|
||||
<view v-for="(item,index) in iconsArray.slice(3,5)" :key="index" class="item"
|
||||
@click="jumpToTarget(index+3)">
|
||||
<view class="left-item">
|
||||
<image class="left-icon" :src="`/static/index/settings/${index+3}.png`" />
|
||||
<view class="left-font">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-item">
|
||||
<image class="right-icon" :src="`/static/index/settings/00.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="array-father">
|
||||
<view v-for="(item,index) in iconsArray.slice(5,8)" :key="index" class="item"
|
||||
@click="jumpToTarget(index+5)">
|
||||
<view class="left-item">
|
||||
<image class="left-icon" :src="`/static/index/settings/${index+5}.png`" />
|
||||
<view class="left-font">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-item">
|
||||
<image class="right-icon" :src="`/static/index/settings/00.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-button" @click="exitshow=true">
|
||||
注销登录
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<view>长春市朝阳区久泰开运养老服务有限公司</view>
|
||||
</view>
|
||||
|
||||
<exit :show="exitshow" @close="exitshow=false" />
|
||||
<reset :show="resetshow" @close="resetshow=false" />
|
||||
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
|
||||
:appstoreflag="true" :autocheckupdate="true" @showupdateTips="noNeed"></zy-update>
|
||||
<!-- 弹出层 -->
|
||||
<view v-if="openany" class="popup-any" :style="animation?{opacity:1}:{opacity:0}">
|
||||
<view class="mask" @click="openany=false"></view>
|
||||
<view class="box-any">
|
||||
<view class="title-left">
|
||||
<!-- <image class="back-img" src="/static/left.png" @click="openany=false"></image> -->
|
||||
<view v-if="!opentype" class="back-font">NU护理单元隐私信息保护政策</view>
|
||||
<view v-if="opentype" class="back-font">NU护理单元用户服务协议</view>
|
||||
</view>
|
||||
<twoseven v-if="!opentype" />
|
||||
<oneseven v-if="opentype" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
import exit from "@/component/public/exit.vue"
|
||||
import reset from "@/component/public/reset.vue"
|
||||
import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
|
||||
import oneseven from '@/pages/login/oneseven.vue'
|
||||
import twoseven from '@/pages/login/twoseven.vue'
|
||||
|
||||
const zyupgrade = ref(null);
|
||||
const issay = ref(false)
|
||||
const openany = ref(false);
|
||||
const opentype = ref(false);
|
||||
const exitshow = ref(false);
|
||||
const resetshow = ref(false);
|
||||
const emit = defineEmits(['jump'])
|
||||
// const props = defineProps({ isShow: { type: Boolean, required: true } })
|
||||
const iconsArray = ref(["雷达扫描", "扫码添加", "手动录入", "修改密码", "切换机构", "检查更新", "用户协议", "隐私政策"])
|
||||
|
||||
const transition = ref(true)
|
||||
const uuid = ref("")
|
||||
|
||||
// 区分首次渲染与动态添加
|
||||
// watch(
|
||||
// () => props.isShow,
|
||||
// (newVal, oldVal) => {
|
||||
// if (!oldVal && newVal) {
|
||||
// transition.value = false
|
||||
// setTimeout(() => (transition.value = true), 50)
|
||||
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
const animation = ref(false)
|
||||
const jumpToTarget = (index : number) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
uni.navigateTo({
|
||||
url: '/pages/watch/settings/leida'
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
url: '/pages/watch/settings/saoma'
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: '/pages/watch/settings/input'
|
||||
})
|
||||
break
|
||||
case 3:
|
||||
resetshow.value = true
|
||||
break
|
||||
case 4:
|
||||
|
||||
break
|
||||
case 5:
|
||||
issay.value = true;
|
||||
zyupgrade.value?.check_update()
|
||||
break
|
||||
case 6:
|
||||
openany.value = true;
|
||||
opentype.value = true;
|
||||
animation.value = false;
|
||||
setTimeout(() => {
|
||||
animation.value = true;
|
||||
}, 50)
|
||||
break
|
||||
case 7:
|
||||
openany.value = true;
|
||||
opentype.value = false;
|
||||
animation.value = false;
|
||||
setTimeout(() => {
|
||||
animation.value = true;
|
||||
}, 50)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const noNeed = () => {
|
||||
if (issay.value) {
|
||||
uni.showToast({
|
||||
title: '已经是最新版了',
|
||||
icon: 'none', // 无图标,仅文字
|
||||
duration: 2000 // 显示时长,单位毫秒
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
const goback = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.index-content-other {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s ease;
|
||||
position: relative;
|
||||
background-color: #EFF0F4;
|
||||
}
|
||||
|
||||
.index-content-right {
|
||||
width: 100%;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 130rpx;
|
||||
|
||||
.left-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.left-icon {
|
||||
margin: 0 20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.left-item {}
|
||||
}
|
||||
|
||||
.right-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 50rpx;
|
||||
|
||||
.right-icon {
|
||||
// margin: 0 20rpx;
|
||||
width: 15rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.array-father {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
width: 76%;
|
||||
margin-left: 12%;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
margin-top: 30rpx;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
width: 76%;
|
||||
margin-left: 12%;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
height: 100rpx;
|
||||
color: #0174D3;
|
||||
}
|
||||
|
||||
.popup-any {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
/* 初始透明度 */
|
||||
opacity: 0;
|
||||
/* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */
|
||||
transition: opacity 0.5s ease;
|
||||
backdrop-filter: blur(1rpx);
|
||||
background-color: rgba(236, 237, 241, 0.4);
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.box-any {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1000rpx;
|
||||
height: 1500rpx;
|
||||
background: #fff;
|
||||
border-radius: 50rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 65rpx 60rpx;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.back-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.back-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.back-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
margin-top: 40rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 262 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 512 B |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.9 KiB |