master
271556543@qq.com 4 years ago
parent 644189921d
commit 6b89623e8d

@ -50,6 +50,65 @@
}
.u-navbar {
border-radius: 0 0 40rpx 40rpx;
border-radius: 0 0 40rpx 40rpx !important;
}
//
.icon1 {
width: 16rpx;
height: 16rpx;
background: #FDB030;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon2 {
width: 16rpx;
height: 16rpx;
background: #1173FF;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon3 {
width: 12rpx;
height: 12rpx;
background: #2EC28B;
border-radius: 100%;
margin-right: 14rpx;
position: relative;
&::after {
content: '';
width: 24rpx;
height: 24rpx;
border: 2rpx solid #2EC28B;
border-radius: 100%;
animation: icon-scale 3s linear infinite;
position: absolute;
top: -10rpx;
left: -10rpx;
}
@keyframes icon-scale {
0%,
30%,
100%,
40% {
transform: scale(0.7, 0.7);
}
70% {
transform: scale(1, 1);
}
}
}
</style>

@ -1,72 +1,77 @@
{
"name" : "uni",
"appid" : "__UNI__3136F4B",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* */
"modules" : {},
/* */
"distribute" : {
/* android */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios" : {},
/* SDK */
"sdkConfigs" : {}
}
},
/* */
"quickapp" : {},
/* */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
"name": "uni",
"appid": "__UNI__3136F4B",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App */
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* */
"modules": {},
/* */
"distribute": {
/* android */
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios": {},
/* SDK */
"sdkConfigs": {}
}
},
/* */
"quickapp": {},
/* */
"mp-weixin": {
"appid": "wx2129de75c4937c40",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "获取位置"
}
}
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
},
"vueVersion": "2"
}

@ -4,11 +4,18 @@
"^cpn-(.*)": "@/components/cpn-$1.vue"
},
"pages": [{
"path": "pages/home/home",
"path": "pages/enter/enter",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/home/home",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/list/list",
"style": {
@ -56,7 +63,7 @@
}]
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"

@ -39,8 +39,79 @@
<view>158****5455</view>
</view>
</view>
<view class="re-location">
<view class="text">更新定位</view>
<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
</view>
</view>
<!-- 今日护理 -->
<view class="today-nursing">
<view class="title">
今日护理
</view>
<view class="line"></view>
<view class="content">
<view class="content-item">
<view class="checkbox">
<u-checkbox v-model="form.handClean.isSelect" shape="circle"></u-checkbox>
<view>足部清洁</view>
</view>
<view class="input">
<u-input v-model="form.handClean.time" :custom-style="inputStyle" placeholder="请输入"
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
height="40">
</u-input>
<view>分钟</view>
</view>
</view>
<view class="content-item">
<view class="checkbox">
<u-checkbox v-model="form.mouthClean.isSelect" shape="circle"></u-checkbox>
<view>口腔清洁</view>
</view>
<view class="input">
<u-input v-model="form.mouthClean.time" :custom-style="inputStyle" placeholder="请输入"
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
height="40">
</u-input>
<view>分钟</view>
</view>
</view>
<view class="content-item">
<view class="checkbox">
<u-checkbox v-model="form.bedClean.isSelect" shape="circle"></u-checkbox>
<view>整理床单元</view>
</view>
<view class="input">
<u-input v-model="form.bedClean.time" :custom-style="inputStyle" placeholder="请输入"
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
height="40">
</u-input>
<view>分钟</view>
</view>
</view>
</view>
</view>
<!-- 打卡 -->
<view class="clock">
<view class="btn">
<view class="text1">过程打卡</view>
<view class="text2">1</view>
</view>
<view class="btn">
<view class="text1">更新定位</view>
<view class="text2">05:19:34</view>
</view>
</view>
<!-- 打卡信息 -->
<view class="clock-info">
定位时间05:19:49 江苏省常州市天宁雕庄街道清扬中路辅路彩铃公寓
</view>
</view>
</view>
</template>
@ -49,7 +120,26 @@
export default {
data() {
return {
inputStyle: {
fontSize: "24rpx",
color: "#36596A",
width: "140rpx",
background: "#F9F9F9"
},
form: {
handClean: {
isSelect: false,
time: null
},
mouthClean: {
isSelect: false,
time: null
},
bedClean: {
isSelect: false,
time: null
}
}
}
},
methods: {
@ -62,6 +152,10 @@
</script>
<style scoped lang="scss">
/deep/.u-checkbox {
display: inline !important;
}
//
.icon1 {
width: 16rpx;
@ -126,6 +220,7 @@
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
margin: 40rpx auto 0 auto;
position: relative;
.top {
display: flex;
@ -218,6 +313,7 @@
.bottom {
padding: 26rpx 0 34rpx 24rpx;
position: relative;
.bottom-item {
display: flex;
@ -248,5 +344,155 @@
padding-top: 18rpx;
}
}
.re-location {
display: flex;
align-items: center;
position: absolute;
bottom: 36rpx;
right: 20rpx;
.text {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #A7AFBC;
line-height: 34rpx;
padding-right: 8rpx;
}
}
}
.today-nursing {
width: 710rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
margin: 20rpx auto 0 auto;
.title {
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #333333;
padding: 24rpx 20rpx;
}
.line {
width: 670rpx;
height: 2rpx;
border: 2rpx solid #EEEFF5;
margin: 0 auto;
}
.content {
padding: 14rpx 20rpx 24rpx 20rpx;
.content-item {
height: 70rpx;
display: flex;
justify-content: space-between;
align-items: center;
.checkbox {
display: flex;
align-items: center;
&>view {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
padding-left: 16rpx;
}
}
.input {
display: flex;
align-items: center;
&>view {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
padding-left: 20rpx;
}
}
}
}
}
.clock {
display: flex;
justify-content: space-evenly;
margin-top: 48rpx;
.btn {
width: 190rpx;
height: 190rpx;
background: #1479FF;
border-radius: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&::before {
content: '';
height: 220rpx;
width: 220rpx;
border-radius: 100%;
background-color: rgba(20, 121, 255, 0.15);
position: absolute;
top: calc(50% - 110rpx);
left: calc(50% - 110rpx);
}
.text-class {
height: 46rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFFFFF;
line-height: 46rpx;
}
.text1 {
@extend .text-class;
}
.text2 {
@extend .text-class;
}
}
}
.clock-info {
width: 650rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
margin: 46rpx auto;
}
</style>

@ -0,0 +1,49 @@
<template>
<view class="enter">
<view class="logo">
<u-image src="/static/enter/logo.png" width="646rpx" height="646rpx"></u-image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
computed: {
},
onShow() {
setTimeout(() => {
uni.switchTab({
url: "/pages/home/home",
complete: (res) => {
console.log(res);
}
})
}, 3000)
}
}
</script>
<style scoped lang="scss">
.enter {
width: 100vw;
height: 100vh;
background-color: #197DFB;
.logo {
transform: translateX(-50%) translateY(-50%);
position: fixed;
top: 50%;
left: 50%;
}
}
</style>

@ -14,7 +14,7 @@
<!-- 搜索 -->
<view class="search">
<view class="input-content">
<u-input height="40" :custom-style="inputStyle"></u-input>
<u-input placeholder="请输入要搜索的内容" height="40" :custom-style="inputStyle"></u-input>
</view>
<view class="icon">
<u-icon name="search" size="46" color="#ABAEBE"></u-icon>
@ -23,10 +23,12 @@
<!-- 轮播图 -->
<view class="swiper">
<swiper indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFFF">
<swiper :indicator-dots="false" @change="swiperChange">
<swiper-item v-for="(item,index) in 3" :key="index">
<view class="swiper-content"
style="background-image: url('../../static/home/swiper-pic.png');background-size: 100% 100%;">
<view class="bkg">
<u-image src="/static/home/swiper-pic.png" width="710" height="324"></u-image>
</view>
<view class="swiper-content">
<view class="swiper-title">
四世同堂服务管理
</view>
@ -37,6 +39,10 @@
<view class="cir2"></view>
<view class="cir3"></view>
</view>
<view class="dots">
<view v-for="(dot,index1) in 3" :key="index1" class="dot"
:class="{activeDot:swiperIndex === index1}"></view>
</view>
</swiper-item>
</swiper>
</view>
@ -57,7 +63,8 @@
</view>
<view class="data-content">
<view v-for="(item,index) in dataList" :key="index" class="data-item">
<view v-for="(item,index) in dataList" :key="index" class="data-item"
:style="index%2==0?'padding-left:20rpx;':'padding-right:104rpx;'">
<view class="data-title">
{{item.title}}
</view>
@ -146,6 +153,7 @@
export default {
data() {
return {
swiperIndex: 0,
inputStyle: {
width: "468rpx",
fontSize: "28rpx",
@ -180,7 +188,9 @@
}
},
methods: {
swiperChange(e) {
this.swiperIndex = e.detail.current
}
},
computed: {
@ -243,15 +253,53 @@
.swiper {
margin: 30rpx 20rpx 0 20rpx;
swiper {
width: 710rpx;
height: 324rpx;
}
swiper-item {
width: 710rpx;
height: 324rpx;
border-radius: 16rpx;
position: relative;
}
.dots {
display: flex;
transform: translateX(-50%);
position: absolute;
left: 50%;
bottom: 20rpx;
.dot {
width: 20rpx;
height: 10rpx;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, 0.4);
margin: 0 6rpx;
}
.activeDot {
width: 36rpx;
background-color: #fff;
}
}
.bkg {
width: 710rpx;
height: 324rpx;
position: absolute;
top: 0;
left: 0;
}
.swiper-content {
width: 710rpx;
height: 322rpx;
background: #1479FF;
height: 324rpx;
position: relative;
.cir1 {
@ -295,7 +343,7 @@
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFFFFF;
line-height: 26rpx;
line-height: 50rpx;
position: absolute;
top: 94rpx;
@ -309,7 +357,7 @@
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFFFFF;
line-height: 18rpx;
line-height: 40rpx;
position: absolute;
top: 164rpx;
@ -418,9 +466,8 @@
justify-content: space-between;
.data-item {
flex-basis: 50%;
padding: 24rpx 0 0 20rpx;
padding: 24rpx 0 0 0rpx;
.data-title {
width: 200rpx;
@ -487,64 +534,6 @@
display: flex;
align-items: center;
//
.icon1 {
width: 16rpx;
height: 16rpx;
background: #FDB030;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon2 {
width: 16rpx;
height: 16rpx;
background: #1173FF;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon3 {
width: 12rpx;
height: 12rpx;
background: #2EC28B;
border-radius: 100%;
margin-right: 14rpx;
position: relative;
&::after {
content: '';
width: 24rpx;
height: 24rpx;
border: 2rpx solid #2EC28B;
border-radius: 100%;
animation: icon-scale 3s linear infinite;
position: absolute;
top: -8rpx;
left: -8rpx;
}
@keyframes icon-scale {
0%,
30%,
100%,
40% {
transform: scale(0.7, 0.7);
}
70% {
transform: scale(1, 1);
}
}
}
.text {
width: 84rpx;
height: 40rpx;
@ -614,7 +603,6 @@
.info-title {
width: 480rpx;
height: 46rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;

@ -6,7 +6,7 @@
<!-- 搜索 -->
<view class="search">
<view class="input-content">
<u-input height="30" :custom-style="inputStyle"></u-input>
<u-input placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"></u-input>
</view>
<view class="icon">
<u-icon name="search" size="46" color="#ABAEBE"></u-icon>
@ -91,7 +91,7 @@
data() {
return {
inputStyle: {
width: "468rpx",
width: "600rpx",
fontSize: "28rpx",
fontWeight: "500"
},

@ -1,34 +1,41 @@
<template>
<view class="login" style="background-image: url('/static/login/bkg-login.png');background-size: 100% 100%;">
<view class="title">
<view class="top-word">HELLO</view>
<view class="bottom-word">欢迎使用四世同堂管理系统</view>
<view class="login">
<view class="bkg">
<u-image src="/static/login/bkg-login.png" width="100vw" height="100vh"></u-image>
</view>
<view class="content">
<view class="title">
<view class="top-word">HELLO</view>
<view class="bottom-word">欢迎使用四世同堂管理系统</view>
</view>
<view class="username">
<view class="left-name">账户名</view>
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle"></u-input>
</view>
<view class="username">
<view class="left-name">账户名</view>
<u-input placeholder="请输入账户名" :custom-style="inputStyle" :placeholder-style="placeholderStyle">
</u-input>
</view>
<view class="password">
<view class="left-name">密码</view>
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle"></u-input>
</view>
<view class="password">
<view class="left-name">密码</view>
<u-input placeholder="请输入密码" type="password" :custom-style="inputStyle"
:placeholder-style="placeholderStyle"></u-input>
</view>
<view class="save-state">
<view class="radio" @click="isRemeber =! isRemeber">
<u-icon name="checkbox-mark" color="#fff" size="28" v-show="isRemeber">
</u-icon>
<view class="save-state">
<view class="radio" @click="isRemeber =! isRemeber">
<u-icon name="checkbox-mark" color="#fff" size="28" v-show="isRemeber">
</u-icon>
</view>
<view class="radio-text">记住当前状态</view>
</view>
<view class="radio-text">记住当前状态</view>
</view>
<view class="btn">
<u-button :custom-style="btnStyle" :ripple="true" :hair-line="false">登陆</u-button>
</view>
<view class="btn">
<u-button :custom-style="btnStyle" :ripple="true" :hair-line="false">登陆</u-button>
</view>
<view class="bottom">
2022四世同堂服务有限公司
<view class="bottom">
2022四世同堂服务有限公司
</view>
</view>
</view>
</template>
@ -42,7 +49,7 @@
color: "#999",
minHeight: "40rpx",
height: "40rpx",
width: "168rpx",
flex: "1",
lineHeight: "40rpx",
fontSize: "28rpx",
fontWeight: "500"
@ -69,113 +76,130 @@
</script>
<style scoped lang="scss">
/deep/.u-input__right-icon {
display: none !important;
}
.login {
width: 100vw;
height: 100vh;
background: #187BFA;
.bkg {
z-index: 0;
position: fixed;
top: 0;
left: 0;
}
}
.title {
color: #FFF;
.content {
padding: 414rpx 0 60rpx 76rpx;
z-index: 1;
position: relative;
.top-word {
width: 400rpx;
height: 168rpx;
font-size: 120rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 168rpx;
}
.title {
color: #FFF;
.bottom-word {
width: 384rpx;
height: 46rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
line-height: 46rpx;
padding: 414rpx 0 60rpx 76rpx;
padding-top: calc(576 - 414)rpx;
}
}
.top-word {
width: 400rpx;
height: 168rpx;
font-size: 120rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 168rpx;
}
.input {
height: 90rpx;
width: 600rpx;
border-radius: 6rpx;
display: flex;
align-items: center;
background: #fff;
border: 2rpx solid #FFFEFE;
margin: 0 auto;
.left-name {
width: 84rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #666666;
line-height: 40rpx;
text-align-last: justify;
.bottom-word {
width: 384rpx;
height: 46rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
line-height: 46rpx;
margin: 0 34rpx 0 32rpx;
padding-top: calc(576 - 414)rpx;
}
}
}
.username {
@extend .input;
}
.input {
height: 90rpx;
width: 600rpx;
border-radius: 6rpx;
display: flex;
align-items: center;
background: #fff;
border: 2rpx solid #FFFEFE;
margin: 0 auto;
.left-name {
width: 84rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #666666;
line-height: 40rpx;
text-align-last: justify;
margin: 0 34rpx 0 32rpx;
}
}
.password {
@extend .input;
.username {
@extend .input;
margin-top: 40rpx;
}
}
.save-state {
display: flex;
align-items: center;
.password {
@extend .input;
margin-top: 40rpx;
margin-left: 76rpx;
margin-top: 40rpx;
}
.radio {
width: 28rpx;
height: 28rpx;
border-radius: 6rpx;
border: 2rpx solid #FFFFFF;
.save-state {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40rpx;
margin-left: 76rpx;
.radio {
width: 28rpx;
height: 28rpx;
border-radius: 6rpx;
border: 2rpx solid #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
.radio-text {
width: 144rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFF;
line-height: 34rpx;
margin-left: 30rpx;
}
}
.radio-text {
width: 144rpx;
.bottom {
width: 298rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFF;
color: #FFFFFF;
line-height: 34rpx;
margin-left: 30rpx;
margin: 418rpx auto 0 auto;
}
}
.bottom {
width: 298rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFFFFF;
line-height: 34rpx;
margin: 418rpx auto 0 auto;
}
</style>

@ -66,8 +66,20 @@
methods: {
async markertap(e) {
let marker = this.covers[e.detail.markerId - 1]
this.covers[e.detail.markerId - 1].height = 39
this.covers[e.detail.markerId - 1].width = 30
this.covers.map(item => {
if (item.id != marker.id) {
item.width = 20
item.height = 24
}
})
this.mapCtx.addMarkers({
markers: this.covers,
clear: true,
complete: (res) => {}
})
this.selectMarker = marker
console.log(marker);
this.isShowPopup = true
this.mapCtx.moveToLocation({
@ -102,10 +114,10 @@
color: '#36596A',
width: 50,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -10,
anchorY: 0,
}
}
@ -132,10 +144,10 @@
color: '#36596A',
width: 54,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -7,
anchorY: 0,
}
},
@ -153,10 +165,10 @@
color: '#36596A',
width: 54,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -7,
anchorY: 0,
}
},
@ -174,10 +186,10 @@
color: '#36596A',
width: 54,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -7,
anchorY: 0,
}
},
@ -195,10 +207,10 @@
color: '#36596A',
width: 54,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -7,
anchorY: 0,
}
},
@ -216,10 +228,10 @@
color: '#36596A',
width: 54,
height: 25,
bgColor: 'rgba(255, 255, 255, 0.95)',
bgColor: '#FFFFFF',
borderRadius: 5,
textAlign: 'center',
anchorX: 0,
anchorX: -7,
anchorY: 0,
}
}
@ -254,64 +266,6 @@
</script>
<style scoped lang="scss">
//
.icon1 {
width: 16rpx;
height: 16rpx;
background: #FDB030;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon2 {
width: 16rpx;
height: 16rpx;
background: #1173FF;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon3 {
width: 12rpx;
height: 12rpx;
background: #2EC28B;
border-radius: 100%;
margin-right: 14rpx;
position: relative;
&::after {
content: '';
width: 24rpx;
height: 24rpx;
border: 2rpx solid #2EC28B;
border-radius: 100%;
animation: icon-scale 3s linear infinite;
position: absolute;
top: -8rpx;
left: -8rpx;
}
@keyframes icon-scale {
0%,
30%,
100%,
40% {
transform: scale(0.7, 0.7);
}
70% {
transform: scale(1, 1);
}
}
}
map {
width: 100vw;
height: 100vh;

@ -44,6 +44,9 @@
<view v-for="(date,index1) in row" :key="index1" @click="dateClick(date,index1)" class="item"
:class="{itemOver:date.type === -1||date.type === 1||date.type === 2,itemActive:date.date === dateIndex&&date.type === 0}">
{{date.date}}
<view class="icon icon1" v-if="dateIn(date.date) === 0&&date.type === 0"></view>
<view class="icon icon2" v-if="dateIn(date.date) === 2&&date.type === 0"></view>
<view class="icon icon3" v-if="dateIn(date.date) === 1&&date.type === 0"></view>
</view>
</view>
</view>
@ -104,6 +107,24 @@
export default {
data() {
return {
testDay: [{
date: 1,
status: 2
},
{
date: 6,
status: 1
}, {
date: 9,
status: 0
}, {
date: 14,
status: 0
}, {
date: 16,
status: 2
}
],
opsionts: (() => {
let res = []
for (let i = 0; i < 20; i++) {
@ -147,6 +168,13 @@
}
},
methods: {
//
dateIn(date) {
let res = this.testDay.filter(item => {
return item.date === date
})
return res[0] ? res[0].status : false
},
monthPlus() {
this.$u.throttle(() => {
if (this.select.month < 12) {
@ -292,65 +320,6 @@
</script>
<style scoped lang="scss">
//
//
.icon1 {
width: 16rpx;
height: 16rpx;
background: #FDB030;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon2 {
width: 16rpx;
height: 16rpx;
background: #1173FF;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon3 {
width: 12rpx;
height: 12rpx;
background: #2EC28B;
border-radius: 100%;
margin-right: 14rpx;
position: relative;
&::after {
content: '';
width: 24rpx;
height: 24rpx;
border: 2rpx solid #2EC28B;
border-radius: 100%;
animation: icon-scale 3s linear infinite;
position: absolute;
top: -8rpx;
left: -8rpx;
}
@keyframes icon-scale {
0%,
30%,
100%,
40% {
transform: scale(0.7, 0.7);
}
70% {
transform: scale(1, 1);
}
}
}
.selecter {
display: flex;
justify-content: space-between;
@ -456,9 +425,13 @@
.year-options {
.mask {
opacity: 0;
width: 100vw;
height: 100vh;
opacity: 1;
z-index: 9;
position: fixed;
inset: 0 0 0 0;
top: 0;
left: 0;
}
.options {
@ -469,6 +442,7 @@
box-shadow: 2rpx 6rpx 10rpx 10rpx rgba(206, 204, 204, 0.5);
animation: enter 500ms forwards;
z-index: 10;
position: absolute;
top: 350rpx;
left: 34rpx;
@ -523,7 +497,15 @@
line-height: 64rpx;
border-radius: 10rpx;
position: relative;
margin: 10rpx;
.icon {
transform: translateX(-50%);
position: absolute;
top: calc(50% + 22rpx);
left: 50%;
}
}
//
@ -583,6 +565,7 @@
border-radius: 10rpx;
margin: 18rpx auto;
padding-bottom: 18rpx;
.user-item {
display: flex;

@ -124,64 +124,6 @@
</script>
<style scoped lang="scss">
//
.icon1 {
width: 16rpx;
height: 16rpx;
background: #FDB030;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon2 {
width: 16rpx;
height: 16rpx;
background: #1173FF;
border-radius: 100%;
margin-right: 14rpx;
}
//
.icon3 {
width: 12rpx;
height: 12rpx;
background: #2EC28B;
border-radius: 100%;
margin-right: 14rpx;
position: relative;
&::after {
content: '';
width: 24rpx;
height: 24rpx;
border: 2rpx solid #2EC28B;
border-radius: 100%;
animation: icon-scale 3s linear infinite;
position: absolute;
top: -8rpx;
left: -8rpx;
}
@keyframes icon-scale {
0%,
30%,
100%,
40% {
transform: scale(0.7, 0.7);
}
70% {
transform: scale(1, 1);
}
}
}
.map {
display: flex;
align-items: center;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 452 KiB

After

Width:  |  Height:  |  Size: 567 KiB

Loading…
Cancel
Save