wushenglu/bee-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加静态资源文件和页面基础结构

Browse Source 
本次提交添加了多个静态资源文件（如图片）以及页面基础结构，包括首页、消息页和索引页。同时引入了基础样式和工具函数，用于处理状态栏和标题栏的高度计算。这些改动为后续功能开发奠定了基础。
This commit is contained in:
blaze-z
2025-05-14 09:01:38 +08:00
commit 4af5c00a2d
40 changed files with 581 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/unpackage/

18
App.vue Normal file
View File

@@ -0,0 +1,18 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import 'common/style/base_style.scss'
</style>

14
common/style/base_style.scss Normal file
View File

@@ -0,0 +1,14 @@
view,
swiper,
swiper-item {
box-sizing: border-box;
}
image {
display: block;
}
.safe-view {
height: env(safe-area-inset-bottom);
}
button::after {
border: none;
}

20
index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

22
main.js Normal file
View File

@@ -0,0 +1,22 @@
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

72
manifest.json Normal file
View File

@@ -0,0 +1,72 @@
{
"name" : "bee_adoption_project",
"appid" : "__UNI__6CB7900",
"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" : "wx7baaf4c50569d572",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}

33
pages.json Normal file
View File

@@ -0,0 +1,33 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/homePage/homePage",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path" : "pages/messagePage/messagePage",
"style" :
{
"navigationBarTitleText" : "消息",
"navigationBarBackgroundColor": "#FFFFFF"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}

215
pages/homePage/homePage.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<view class="container">
<image src="/static/images/背景.png" mode="aspectFill" class="bg-image"></image>
<view :style="{ height: getStatusBarHeight() + 'px' }"></view>
<view class="title-bar" :style="{ height: getTitleBarHeight() + 'px' }">
<image src="/static/images/logo.png" class="logo-image" mode="aspectFill"></image>
</view>
<view class="swiper-content">
<swiper class="swiper" circular indicator-active-color="#ffffff" indicator-dots="true" autoplay="true" interval="2000" duration="500">
<swiper-item class="swiper-item">
<image src="/static/images/轮播图(1).png" class="swiper-image" mode=""></image>
</swiper-item>
<swiper-item class="swiper-item">
<image src="/static/images/轮播图(1).png" class="swiper-image" mode=""></image>
</swiper-item>
<swiper-item class="swiper-item">
<image src="/static/images/轮播图(1).png" class="swiper-image" mode=""></image>
</swiper-item>
</swiper>
</view>
<view class="bee-farm-data">
<image src="/static/images/数据面板背景.png" class="bee-farm-image" mode="aspectFill"></image>
<view class="data-title">
<view class="title-right">
<view>蜂场数据</view>
<image src="/static/images/蜂场数据logo.png" mode="" class="title-image"></image>
</view>
<view class="title-left">
<image src="/static/images/查看更多-btn.png" mode="" class="title-btn"></image>
</view>
</view>
<view class="data-list">
<view class="data-item">
<image src="/static/images/Rectangle 34626840@2x.png" mode="" class="data-bg"></image>
<image src="/static/images/正六边形.png" mode="" class="six-imge"></image>
<view class="data-item-title">国家</view>
<view class="data-item-text">
192
<text>/个</text>
</view>
</view>
<view class="data-item">
<image src="/static/images/Rectangle 34626840@2x.png" mode="" class="data-bg"></image>
<image src="/static/images/正六边形.png" mode="" class="six-imge"></image>
<view class="data-item-title">产量</view>
<view class="data-item-text">
192
<text>/万斤</text>
</view>
</view>
<view class="data-item">
<image src="/static/images/Rectangle 34626840@2x.png" mode="" class="data-bg"></image>
<image src="/static/images/正六边形.png" mode="" class="six-imge"></image>
<view class="data-item-title">领养量</view>
<view class="data-item-text">
192
<text>/万箱</text>
</view>
</view>
<view class="data-item">
<image src="/static/images/Rectangle 34626840@2x.png" mode="" class="data-bg"></image>
<image src="/static/images/正六边形.png" mode="" class="six-imge"></image>
<view class="data-item-title">蜜蜂数量</view>
<view class="data-item-text">
192
<text>/万斤</text>
</view>
</view>
</view>
<view class="scan-content">
<image src="/static/images/扫码1.png" mode="" class="scan-image"></image>
</view>
</view>
</view>
</template>
<script setup>
import { getStatusBarHeight, getTitleBarHeight } from '../../utils/system';
</script>
<style lang="scss" scoped>
.container {
background-color: #f7f7f7;
height: 100vh;
position: relative;
z-index: 1;
.bg-image {
width: 100%;
height: 374rpx;
position: absolute;
z-index: -1;
}
.title-bar {
.logo-image {
width: 205rpx;
height: 70rpx;
margin-left: 40rpx;
}
}
.swiper-content {
height: 340rpx;
width: 704rpx;
border-radius: 24rpx;
overflow: hidden;
margin: auto;
margin-top: 5rpx;
.swiper {
width: 100%;
height: 100%;
.swiper-image {
height: 100%;
width: 100%;
}
}
}
.bee-farm-data {
height: 464rpx;
width: 702rpx;
margin: auto;
margin-top: 30rpx;
position: relative;
.bee-farm-image {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
.data-title {
display: flex;
justify-content: space-between;
height: 76rpx;
.title-right {
position: relative;
display: flex;
view {
margin-top: 21rpx;
margin-left: 30rpx;
font-weight: bold;
font-size: 38rpx;
color: #010022;
}
.title-image {
width: 109rpx;
height: 37rpx;
position: absolute;
left: 124rpx;
top: 34rpx;
z-index: -1;
}
}
.title-btn {
margin-top: 30rpx;
margin-right: 30rpx;
width: 125rpx;
height: 46rpx;
}
}
}
.data-list {
margin-top: 30rpx;
display: flex;
padding: 0 30rpx;
flex-wrap: wrap;
justify-content: space-between;
.data-item {
display: flex;
flex-direction: column;
width: 310rpx;
height: 157rpx;
position: relative;
margin-bottom: 20rpx;
.data-bg {
position: absolute;
width: 310rpx;
height: 157rpx;
z-index: -1;
}
.six-imge {
position: absolute;
width: 98rpx;
height: 89rpx;
top: 5rpx;
left: 191rpx;
}
.data-item-title {
margin-top: 24rpx;
margin-left: 24rpx;
font-weight: 500;
font-size: 32rpx;
color: #666666;
}
.data-item-text {
margin-top: 20rpx;
margin-left: 24rpx;
font-weight: bold;
font-size: 38rpx;
color: #010022;
text {
font-weight: 500;
font-size: 22rpx;
color: #999999;
}
}
}
}
.scan-content {
width: 698rpx;
height: 110rpx;
.scan-image {
width: 698rpx;
height: 110rpx;
}
}
}
</style>

42
pages/index/index.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const title = ref('测试');
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

39
pages/messagePage/messagePage.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<view class="container">
<scroll-view scroll-y="true" class="scroll-content">
<view class="message-item">
<view class="item-left">
</view>
<view class="item-right">
</view>
</view>
</scroll-view>
<view class="safe-view"></view>
</view>
</template>
<script setup></script>
<style lang="scss" scoped>
.container {
height: 100vh;
display: flex;
flex-direction: column;
background: #F6F6F6;
.scroll-content {
margin-top: 24rpx;
flex: 1;
height: 720rpx;
.message-item {
width: 702rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin: auto;
margin-bottom: 16rpx;
}
}
}
</style>

BIN
static/images/Group 1000009018.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
static/images/Rectangle 34626840@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
static/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/images/r-lt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
static/images/底部导航栏@2x(1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/images/底部导航栏@2x(2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/images/底部导航栏@2x(3).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/images/底部导航栏@2x(4).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/images/底部导航栏@2x(5).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/images/底部导航栏@2x(6).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/images/底部导航栏@2x(7).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/images/底部导航栏@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/images/我的蜂箱logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/images/扫码.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
static/images/扫码1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

BIN
static/images/数据面板背景.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
static/images/无数据.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/images/极蜜部落底部导航栏@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
static/images/查看更多-btn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/images/正六边形.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/images/背景.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
static/images/蜂场数据logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/images/蜂箱logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
static/images/蜂箱背景.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/images/轮播图(1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
static/images/轮播图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

13
uni.promisify.adaptor.js Normal file
View File

@@ -0,0 +1,13 @@
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});

76
uni.scss Normal file
View File

@@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

16
utils/system.js Normal file
View File

@@ -0,0 +1,16 @@
let SYSTEM_INFO = uni.getWindowInfo();
//状态栏高度
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15;
//标题栏/胶囊按钮高度
export const getTitleBarHeight = () => {
if (uni.getMenuButtonBoundingClientRect) {
let { top , height } = uni.getMenuButtonBoundingClientRect()
return (top - getStatusBarHeight()) * 2 + height
}
else{
return 50
}
}
//导航栏高度（状态栏+标题栏)
export const getNarBarHeight = ()=> getStatusBarHeight()+getTitleBarHeight()