骑行数据

src/manifest.json

@@ -73,7 +73,12 @@
 		"setting": {
 			"urlCheck": false
 		},
-		"usingComponents": true
+		"usingComponents": true,
+		"permission": {
+			"scope.userLocation": {
+				"desc": "需要获取您的位置用于定位车辆"
+			}
+		}
 	},
 	"mp-alipay": {
 		"usingComponents": true

src/pages.json

@@ -67,6 +67,14 @@
 				"navigationStyle": "custom"
 			}
 
+		}, {
+			"path": "pages/IMB/ridingData/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
 		}
 	],
 	"tabBar": {

src/pages/IMB/IMB.vue

@@ -1,19 +1,82 @@
 <template>
-	<view>
+	<view class="container">
-		
+		<view class="imb-header" :style="{'paddingTop':menuButtonTop?menuButtonTop+'rpx':0}">
+			<view class="imb-car-info">
+				<view class="imb-car-info-left">
+					<image src="../../static/mine/avater.png" mode="aspectFit" class="iamge-logo"></image>
+					<view class="imb-car-info-left-text">
+						<text>欢迎来到爱摩保</text>
+						<text style="color: rgba(43,43,53,0.6);font-size: 24rpx;">登录/注册享受更多优质服务</text>
+					</view>
+				</view>
+				<view class="imb-car-info-right">
+					<view class="imb-car-info-right-text">
+						<text>注册/登录</text>
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<view class="imb-map">
+			<map name="amap"></map>
+		</view>
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
-	export default {
+	import { getMenuButton, rpxTopx } from "@/utils/common.js"
-		data() {
+	import { ref } from "vue";
-			return {
+	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-				
+	let menuButtonTop = ref(0)
-			};
+	// #ifdef MP-WEIXIN
-		}
+	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-	}
+	menuButtonTop.value = rpxTopx(menuButtonInfo.top) + rpxTopx(menuButtonInfo.height)
+	// #endif
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.container {
+		.imb-header {
+			background-image: url(../../../src/static/common/top-bg.png);
+			// height: 240rpx;
+			background-size: 100% 106%;
+			background-repeat: no-repeat;
 
-</style>
+			.imb-car-info {
+				display: flex;
+				padding: 24rpx;
+				justify-content: space-between;
+
+				.imb-car-info-left {
+					display: flex;
+
+					.imb-car-info-left-text {
+						display: flex;
+						flex-direction: column;
+						color: #08080D;
+					}
+
+					.iamge-logo {
+						width: 96rpx;
+						height: 112rpx;
+						padding-right: 6rpx;
+					}
+				}
+
+				.imb-car-info-right {
+					.imb-car-info-right-text {
+						width: 176rpx;
+						height: 64rpx;
+						border-radius: 8rpx;
+						border: 1rpx solid;
+						line-height: 64rpx;
+						text-align: center;
+						color: #20519C;
+						font-size: 28rpx;
+						border-image: linear-gradient(90deg, rgba(30, 80, 153, 1), rgba(60, 109, 198, 1)) 1 1;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/IMB/ridingData/index.vue

@@ -0,0 +1,112 @@
+<template>
+	<view>
+		<view class="nav-bar" :style="{'paddingTop':menuButtonTop?menuButtonTop+'rpx':0}">
+			<uni-nav-bar>
+				<template v-slot:left>
+					<image src="../../../static/common/back.png" mode="aspectFit" class="image"></image>
+				</template>
+				<view class="nav-bar-center">
+					<view class="text" style="padding-right: 44rpx;" :class="{'nav-select':true}">APP</view>
+					<view class="text">设备</view>
+				</view>
+				<template v-slot:right>
+					<view class="nav-bar-right">设备管理</view>
+				</template>
+			</uni-nav-bar>
+		</view>
+		<view class="calendar">
+			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
+				@monthSwitch="monthSwitch" />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { getMenuButton, rpxTopx } from "@/utils/common.js"
+	import { ref } from "vue";
+	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	let menuButtonTop = ref(0)
+	// #ifdef MP-WEIXIN
+	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	menuButtonTop.value = rpxTopx(menuButtonInfo.top) + rpxTopx(menuButtonInfo.height)
+	// #endif
+
+	const info = ref<any>({
+		selected: [{ date: '2023-12-27', info: '0.0km' }, { date: '2023-12-23', info: '0.0km' }]
+	})
+	for (let i = 1; i <= 31; i++) {
+		// info.value.selected.push({ data: `2023-12-${i}`, info: '0.0km' })
+		info.value.selected.push({ date: `2023-12-${i}`, info: '0.0km' })
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav-bar {
+		.image {
+			width: 48rpx;
+			height: 48rpx;
+		}
+
+		::v-deep .uni-navbar--border {
+			border: none !important;
+		}
+
+		.nav-bar-center {
+			display: flex;
+			justify-content: center;
+			flex: 1;
+			align-items: center;
+			font-size: 28rpx;
+			color: rgba(43, 43, 53, 0.4);
+
+			.nav-select {
+				font-size: 28rpx;
+				font-weight: 600;
+				color: #08080D;
+				padding-right: 15rpx;
+			}
+
+			.nav-select::after {
+				display: inline-block;
+				width: 28rpx;
+				height: 24rpx;
+				content: '';
+				background-image: url(../../../static/common/icon-halving.png);
+				background-size: 100% 100%;
+
+			}
+		}
+
+		.nav-bar-right {
+			font-size: 28rpx;
+			color: #08080D;
+			font-weight: 600;
+		}
+	}
+
+	.calendar {
+		padding: 28rpx;
+		box-sizing: border-box;
+
+		::v-deep .uni-calendar-item__weeks-box-circle {
+			display: none;
+		}
+
+		::v-deep .uni-calendar-item--extra {
+			color: rgba(43, 43, 53, 0.4);
+		}
+
+		::v-deep .uni-calendar-item__weeks-box {
+			border-radius: 50%;
+		}
+
+		::v-deep .uni-calendar-item--checked {
+			color: #fff !important;
+		}
+
+		::v-deep .uni-calendar-item--isDay {
+			color: #fff !important;
+		}
+
+	}
+</style>

src/pages/circle/views/details/details.vue

@@ -5,12 +5,9 @@
 			<template v-slot:left>
 				<image src="../../../../static/common/back.png" mode="aspectFit" class="image"></image>
 			</template>
-			<!-- 	<template v-slot:right>
-				<image src="../../../../static/common/icon-more.png" mode="aspectFit" class="image"></image>
-			</template> -->
 		</uni-nav-bar>
 		<view class="details-main">
-			<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
+			<scroll-view scroll-y="true" style="height: 100%;" class="scroll-Y" refresher-enabled scroll-with-animation
 				refresher-background="#F8F8FA">
 				<view class="article-content">
 					<view class="article-item-head">
@@ -35,7 +32,9 @@
 							<image src="../../../../static/logo.png" mode="scaleToFill" class="image"></image>
 						</swiper-item>
 						<swiper-item>
-							<image src="../../../../static/common/112.webp" mode="scaleToFill" class="image"></image>
+							<image src="../../../../static/common/112.webp" mode="scaleToFill" class="image"
+								@click="handPreviewImage(['https://ts1.cn.mm.bing.net/th?id=OIP-C.7pldmOaHsIlsAGsWmA4SawHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'])">
+							</image>
 						</swiper-item>
 						<swiper-item>
 							<image
@@ -86,23 +85,62 @@
 				</view>
 			</scroll-view>
 		</view>
+		<view class="details-footer">
+			<input type="text" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…" class="input" />
+			<view class="details-footer-nav">
+				<view class="details-footer-nav-item">
+					<image src="../../../../static/common/icon-share.png" mode="aspectFit" class="image"></image>
+					<text>分享</text>
+				</view>
+				<view class="details-footer-nav-item">
+					<image src="../../../../static/common/icon-upvote.png" mode="aspectFit" class="image"></image>
+					<text>点赞</text>
+				</view>
+				<view class="details-footer-nav-item">
+					<image src="../../../../static/common/icon-review.png" mode="aspectFit" class="image"></image>
+					<text>评论</text>
+				</view>
+				<view class="details-footer-nav-item">
+					<image src="../../../../static/common/gift.png" mode="aspectFit" class="image"></image>
+					<text>送礼</text>
+				</view>
+
+			</view>
+		</view>
 	</view>
 </template>
 
 <script lang="ts" setup>
 	import { getMenuButton, rpxTopx } from "@/utils/common.js"
+	import { ref } from "vue";
+	import {
+		userData
+	} from '../../hook/userData'
+	const {
+		handPreviewImage
+	} = userData()
+	const firstFocus = ref(false)
 	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 	// #ifdef MP-WEIXIN
 	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 	let menuButtonTop = rpxTopx(menuButtonInfo.top)
 	// #endif
 </script>
-
+<style>
+	page {
+		height: 100%;
+	}
+</style>
 <style lang="scss" scoped>
 	.container {
 		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		overflow: hidden;
 
 		.nav-bar {
+			position: sticky;
+
 			.text {
 				display: flex;
 				align-items: center;
@@ -129,6 +167,8 @@
 		.details-main {
 			width: 100%;
 			background: #F8F8FA;
+			height: calc(100% - 320rpx);
+			overflow-y: scroll;
 
 			.article-content {
 				background-color: #FFFFFF;
@@ -315,5 +355,51 @@
 			}
 		}
 
+		.details-footer {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 226rpx;
+			margin-top: 32rpx;
+			background-color: #FFFFFF;
+			padding: 40rpx 32rpx;
+			box-sizing: border-box;
+			display: flex;
+
+			.input {
+				width: 294rpx;
+				height: 80rpx;
+				background: #F7F8FC;
+				border-radius: 9rpx;
+				padding: 18rpx 16rpx;
+				box-sizing: border-box;
+
+				.input-placeholder {
+					color: rgba(43, 43, 53, 0.4);
+					font-size: 28rpx;
+				}
+			}
+
+			.details-footer-nav {
+				flex: 1;
+				display: flex;
+				height: 80rpx;
+
+				.details-footer-nav-item {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					font-size: 28rpx;
+					color: #08080D;
+
+					.image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+			}
+		}
 	}
 </style>