wangminqi
/
AM-program
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

骑行数据

main
CHINAMI-3V5PQ9A\Administrator 2023-12-15 17:31:40 +08:00
parent 3df17a883d
commit e7c012e658
6 changed files with 293 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/manifest.json
View File

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

8
src/pages.json
View File

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

83
src/pages/IMB/IMB.vue
View File

@ -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>
export default {
data() {
return {
};
}
}
<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
</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;
.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>

112
src/pages/IMB/ridingData/index.vue Normal file
View File

@ -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>

98
src/pages/circle/views/details/details.vue
View File

@ -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>

BIN
src/static/common/gift.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 B