feature: 新增nav-bar, tab-bar
This commit is contained in:
leonmin
commit
9d16957ebc
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
20
index.html
Normal file
20
index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<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="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10270
package-lock.json
generated
Normal file
10270
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
68
package.json
Normal file
68
package.json
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
{
|
||||||
|
"name": "uni-preset-vue",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev:custom": "uni -p",
|
||||||
|
"dev:h5": "uni",
|
||||||
|
"dev:h5:ssr": "uni --ssr",
|
||||||
|
"dev:mp-alipay": "uni -p mp-alipay",
|
||||||
|
"dev:mp-baidu": "uni -p mp-baidu",
|
||||||
|
"dev:mp-jd": "uni -p mp-jd",
|
||||||
|
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||||
|
"dev:mp-lark": "uni -p mp-lark",
|
||||||
|
"dev:mp-qq": "uni -p mp-qq",
|
||||||
|
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||||
|
"dev:mp-weixin": "uni -p mp-weixin",
|
||||||
|
"dev:mp-xhs": "uni -p mp-xhs",
|
||||||
|
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||||
|
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||||
|
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||||
|
"build:custom": "uni build -p",
|
||||||
|
"build:h5": "uni build",
|
||||||
|
"build:h5:ssr": "uni build --ssr",
|
||||||
|
"build:mp-alipay": "uni build -p mp-alipay",
|
||||||
|
"build:mp-baidu": "uni build -p mp-baidu",
|
||||||
|
"build:mp-jd": "uni build -p mp-jd",
|
||||||
|
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||||
|
"build:mp-lark": "uni build -p mp-lark",
|
||||||
|
"build:mp-qq": "uni build -p mp-qq",
|
||||||
|
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||||
|
"build:mp-weixin": "uni build -p mp-weixin",
|
||||||
|
"build:mp-xhs": "uni build -p mp-xhs",
|
||||||
|
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||||
|
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||||
|
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||||
|
"type-check": "vue-tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dcloudio/uni-app": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-components": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-h5": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-i18n": "^9.1.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@dcloudio/types": "^3.4.8",
|
||||||
|
"@dcloudio/uni-automator": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
|
||||||
|
"@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"@vue/runtime-core": "^3.4.21",
|
||||||
|
"typescript": "^4.9.4",
|
||||||
|
"vite": "5.2.8",
|
||||||
|
"vue-tsc": "^1.0.24"
|
||||||
|
}
|
||||||
|
}
|
||||||
10
shims-uni.d.ts
vendored
Normal file
10
shims-uni.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
/// <reference types='@dcloudio/types' />
|
||||||
|
import 'vue'
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
type Hooks = App.AppInstance & Page.PageInstance;
|
||||||
|
|
||||||
|
interface ComponentCustomOptions extends Hooks {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/App.vue
Normal file
13
src/App.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
|
onLaunch(() => {
|
||||||
|
console.log("App Launch");
|
||||||
|
});
|
||||||
|
onShow(() => {
|
||||||
|
console.log("App Show");
|
||||||
|
});
|
||||||
|
onHide(() => {
|
||||||
|
console.log("App Hide");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
135
src/components/nav_bar.vue
Normal file
135
src/components/nav_bar.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
<template>
|
||||||
|
<view class="nav-bar flex flex-column flex-space" :style="navBarStyle">
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<view class="status-bar"></view>
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<view class="header-bar flex flex-space" :style="headerBarStyle">
|
||||||
|
<view class="header-leader">
|
||||||
|
<view v-if="showBack || needBack" @on-click="handleBack">返回</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-center flex flex-grow" :style="headerCenterStyle">
|
||||||
|
{{ props.title }}
|
||||||
|
</view>
|
||||||
|
<view class="header-action"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-bar-padding" :style="navBarPaddingStyle"></view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useSafeArea } from '@/mixins/safe_area';
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
interface NavBarProps {
|
||||||
|
scrolled?: boolean // 是否滚动超过navbar
|
||||||
|
shadow?: boolean // 是否显示阴影
|
||||||
|
title?: string // 标题
|
||||||
|
isCustom?: boolean // 自定义时, navbar高度为 0
|
||||||
|
bgColor?: string // 背景色
|
||||||
|
customBack?: boolean // 自定义返回按钮
|
||||||
|
needBack?: boolean // 是否需要返回按钮
|
||||||
|
}
|
||||||
|
const safeArea = useSafeArea()
|
||||||
|
const showBack = ref(false) // 是否显示返回按钮
|
||||||
|
const props = withDefaults(defineProps<NavBarProps>(), {
|
||||||
|
scrolled: false,
|
||||||
|
title: '',
|
||||||
|
isCustom: false,
|
||||||
|
bgColor: '#fff',
|
||||||
|
customBack: false,
|
||||||
|
needBack: true
|
||||||
|
})
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'on-back'): void
|
||||||
|
}>()
|
||||||
|
const navBarStyle = computed(() => {
|
||||||
|
let bgColor = props.bgColor
|
||||||
|
let boxShadow = ''
|
||||||
|
if (props.isCustom && !props.scrolled) {
|
||||||
|
bgColor = 'transparent'
|
||||||
|
} else {
|
||||||
|
boxShadow = 'box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);'
|
||||||
|
}
|
||||||
|
return `height: ${safeArea.navbarBottom.value}rpx; background: ${bgColor};${boxShadow}`
|
||||||
|
})
|
||||||
|
const headerCenterStyle = computed(() => {
|
||||||
|
if (props.isCustom && !props.scrolled) {
|
||||||
|
return 'color: #fff'
|
||||||
|
}
|
||||||
|
return 'color: #333'
|
||||||
|
})
|
||||||
|
const headerBarStyle = computed(() => {
|
||||||
|
return `height: ${safeArea.navbarHeight.value}rpx;`
|
||||||
|
})
|
||||||
|
const navBarPaddingStyle = computed(() => {
|
||||||
|
return props.isCustom ? 'height: 0; min-height: 0;' : `height: ${safeArea.navbarBottom.value}rpx;`
|
||||||
|
})
|
||||||
|
const backColor = computed(() => {
|
||||||
|
if (props.isCustom && !props.scrolled) {
|
||||||
|
return '#fff'
|
||||||
|
}
|
||||||
|
return '#333'
|
||||||
|
})
|
||||||
|
const backBgColor = computed(() => {
|
||||||
|
if (props.isCustom && !props.scrolled) {
|
||||||
|
return 'rgba(0, 0, 0, 0.2)'
|
||||||
|
}
|
||||||
|
return 'transparent'
|
||||||
|
})
|
||||||
|
const handleBack = () => {
|
||||||
|
if (props.customBack) {
|
||||||
|
emit('on-back')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (showBack.value) {
|
||||||
|
uni.navigateBack()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.switchTab({
|
||||||
|
url: 'pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
showBack.value = getCurrentPages().length > 1
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.nav-bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 112rpx;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
min-height: 72rpx;
|
||||||
|
/* #endif */
|
||||||
|
z-index: 999;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
transition: background 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bar {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-leader {
|
||||||
|
min-width: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-action {
|
||||||
|
min-width: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar-padding {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 112rpx;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
min-height: 72rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/components/tab_bar.vue
Normal file
86
src/components/tab_bar.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<view class="tab-bar" :style="tabBarStyle">
|
||||||
|
<view class="footer-bar flex flex-space" :style="footBarStyle">
|
||||||
|
<view :class="['footer-item flex flex-1 cursor', footer.key === props.active ? 'footer-active' : '']"
|
||||||
|
v-for="(footer, idx) in props.list" :key="idx" @click="handleLink(footer.jumpValue)">
|
||||||
|
<view class="footer-icon">{{ footer.icon }}</view>
|
||||||
|
<view class="footer-text">{{ footer.name }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="spacer-bar"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useSafeArea } from '@/mixins/safe_area'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { TabbarKey } from '@/helpers/constants'
|
||||||
|
|
||||||
|
|
||||||
|
const safeArea = useSafeArea()
|
||||||
|
const tabBarStyle = computed(() => {
|
||||||
|
return `height: ${safeArea.tabbarTop.value}rpx;`
|
||||||
|
})
|
||||||
|
const footBarStyle = computed(() => {
|
||||||
|
return `height: ${safeArea.tabbarHeight.value}rpx;`
|
||||||
|
})
|
||||||
|
|
||||||
|
enum ROUTE {
|
||||||
|
HOME = '/pages/index/index',
|
||||||
|
EXPLORE = '/pages/explore/index',
|
||||||
|
MINE = '/pages/mine/index'
|
||||||
|
}
|
||||||
|
interface TabBarItem {
|
||||||
|
icon: string
|
||||||
|
name: string
|
||||||
|
key: TabbarKey
|
||||||
|
jumpType: number
|
||||||
|
jumpValue: string
|
||||||
|
activeImg: string
|
||||||
|
inactiveImg: string
|
||||||
|
}
|
||||||
|
interface TabBarProps {
|
||||||
|
active: TabbarKey
|
||||||
|
list: TabBarItem[]
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<TabBarProps>(), {
|
||||||
|
active: TabbarKey.Home,
|
||||||
|
list: () => [
|
||||||
|
{ icon: '', name: '首页', key: TabbarKey.Home, jumpValue: ROUTE.HOME },
|
||||||
|
{ icon: '', name: '发现', key: TabbarKey.Explore, jumpValue: ROUTE.EXPLORE },
|
||||||
|
{ icon: '', name: '我的', key: TabbarKey.User, jumpValue: ROUTE.MINE }
|
||||||
|
] as TabBarItem[]
|
||||||
|
})
|
||||||
|
const handleLink = (path: string) => {
|
||||||
|
uni.switchTab({
|
||||||
|
url: path
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.tab-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100rpx;
|
||||||
|
z-index: 999;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
box-shadow: 0rpx -8rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bar {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 1200rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-active {
|
||||||
|
color: #960405;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
8
src/env.d.ts
vendored
Normal file
8
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import { DefineComponent } from 'vue'
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
5
src/helpers/constants.ts
Normal file
5
src/helpers/constants.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
export enum TabbarKey {
|
||||||
|
Home = 'home',
|
||||||
|
Explore = 'explore',
|
||||||
|
User = 'user',
|
||||||
|
}
|
||||||
9
src/main.ts
Normal file
9
src/main.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createSSRApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import '@/styles/index.css';
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App);
|
||||||
|
return {
|
||||||
|
app,
|
||||||
|
};
|
||||||
|
}
|
||||||
72
src/manifest.json
Normal file
72
src/manifest.json
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
{
|
||||||
|
"name" : "",
|
||||||
|
"appid" : "",
|
||||||
|
"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" : "3"
|
||||||
|
}
|
||||||
20
src/mixins/page_scroll.ts
Normal file
20
src/mixins/page_scroll.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { onPageScroll } from "@dcloudio/uni-app";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useSafeArea } from "./safe_area";
|
||||||
|
|
||||||
|
export function usePageScroll() {
|
||||||
|
const scrolled = ref(false)
|
||||||
|
const safeArea = useSafeArea()
|
||||||
|
// 需在页面中定义, 否则无法生效
|
||||||
|
onPageScroll((e) => {
|
||||||
|
if (scrolled.value && e.scrollTop > safeArea.navbarBottom.value) { return }
|
||||||
|
if (e.scrollTop > safeArea.navbarBottom.value) {
|
||||||
|
scrolled.value = true
|
||||||
|
} else {
|
||||||
|
scrolled.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
scrolled
|
||||||
|
}
|
||||||
|
}
|
||||||
104
src/mixins/safe_area.ts
Normal file
104
src/mixins/safe_area.ts
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
|
||||||
|
export function useSafeArea() {
|
||||||
|
const TABBAR = 50 // 底部tabbar高度
|
||||||
|
const MENU_PADDING = 8 // 菜单按钮上下padding
|
||||||
|
const radio = ref(2);
|
||||||
|
let safeBottom = 0; // 安全区底部高度
|
||||||
|
let menuWidth = 0; // 胶囊按钮宽度
|
||||||
|
let menuButtom = 0; // 胶囊按钮底部高度
|
||||||
|
let menuHeight = 0; // 胶囊按钮高度
|
||||||
|
const navBarRight = ref(0); // 导航栏宽度
|
||||||
|
const navbarHeight = ref(0); // 导航栏高度
|
||||||
|
const navbarBottom = ref(0); // 导航栏底部高度
|
||||||
|
const tabbarHeight = ref(50); // tabbar高度
|
||||||
|
const tabbarTop = ref(0); // tabbar顶部高度(tabbar + 安全区)
|
||||||
|
const tabbarSafe = ref(0); // 安全区底部高度
|
||||||
|
onMounted(async () => {
|
||||||
|
radio.value = getRadio()
|
||||||
|
menuWidth = getMenuButtonWidth()
|
||||||
|
menuHeight = getMenuButtonHeight()
|
||||||
|
menuButtom = getMenuButtonBottom()
|
||||||
|
safeBottom = getSafeBottom()
|
||||||
|
navBarRight.value = menuWidth * radio.value
|
||||||
|
navbarHeight.value = (menuHeight + 2 * MENU_PADDING) * radio.value
|
||||||
|
navbarBottom.value = (menuButtom + MENU_PADDING) * radio.value
|
||||||
|
|
||||||
|
tabbarTop.value = (TABBAR + safeBottom) * radio.value
|
||||||
|
tabbarHeight.value = TABBAR * radio.value
|
||||||
|
tabbarSafe.value = safeBottom * radio.value
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
navBarRight,
|
||||||
|
navbarHeight,
|
||||||
|
navbarBottom,
|
||||||
|
tabbarTop,
|
||||||
|
tabbarHeight,
|
||||||
|
tabbarSafe
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMenuButtonInfo() {
|
||||||
|
let canUseMenuButtonRect = true
|
||||||
|
let rect = {
|
||||||
|
bottom: 36,
|
||||||
|
height: 32,
|
||||||
|
left: 281,
|
||||||
|
right: 368,
|
||||||
|
top: 24,
|
||||||
|
width: 87,
|
||||||
|
}
|
||||||
|
// 兼容h5端
|
||||||
|
// #ifdef MP-H5
|
||||||
|
canUseMenuButtonRect = false
|
||||||
|
// #endif
|
||||||
|
if (!canUseMenuButtonRect) {
|
||||||
|
return rect
|
||||||
|
}
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||||
|
rect = uni.getMenuButtonBoundingClientRect()
|
||||||
|
const { bottom } = rect
|
||||||
|
// 兼容支付宝模拟器数据不准确
|
||||||
|
const isInvalid = bottom > 100
|
||||||
|
if (isInvalid) {
|
||||||
|
return {
|
||||||
|
...rect,
|
||||||
|
top: 57,
|
||||||
|
width: 87,
|
||||||
|
bottom: 83,
|
||||||
|
height: 32
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
return rect
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWindowInfo() {
|
||||||
|
return uni.getWindowInfo()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRadio() {
|
||||||
|
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
|
||||||
|
const systemInfo = getWindowInfo()
|
||||||
|
if (systemInfo && systemInfo.windowWidth) {
|
||||||
|
return 750 / systemInfo.windowWidth
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
function getMenuButtonWidth() {
|
||||||
|
const menuButtonInfo = getMenuButtonInfo()
|
||||||
|
return menuButtonInfo.width || 87
|
||||||
|
}
|
||||||
|
function getMenuButtonHeight() {
|
||||||
|
const menuButtonInfo = getMenuButtonInfo()
|
||||||
|
return menuButtonInfo.height || 32
|
||||||
|
}
|
||||||
|
function getMenuButtonBottom() {
|
||||||
|
const menuButtonInfo = getMenuButtonInfo()
|
||||||
|
return menuButtonInfo.bottom || 83
|
||||||
|
}
|
||||||
|
function getSafeBottom() {
|
||||||
|
const systemInfo = getWindowInfo()
|
||||||
|
return systemInfo.safeAreaInsets?.bottom || 0
|
||||||
|
}
|
||||||
49
src/pages.json
Normal file
49
src/pages.json
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/explore/index"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/index"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "example",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8",
|
||||||
|
"mp-weixin": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "black"
|
||||||
|
},
|
||||||
|
"h5": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "black"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"custom": true,
|
||||||
|
"customize": true,
|
||||||
|
"color": "#666",
|
||||||
|
"selectedColor": "#333",
|
||||||
|
"fontSize": "14px",
|
||||||
|
"backgroundColor": "#fff",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "首页"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/explore/index",
|
||||||
|
"text": "发现"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/mine/index",
|
||||||
|
"text": "我的"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/pages/explore/index.vue
Normal file
12
src/pages/explore/index.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<nav-bar title="发现" :need-back="false" />
|
||||||
|
<tab-bar :active="TabbarKey.Explore" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import NavBar from '@/components/nav_bar.vue'
|
||||||
|
import TabBar from '@/components/tab_bar.vue'
|
||||||
|
import { TabbarKey } from '@/helpers/constants'
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
12
src/pages/index/index.vue
Normal file
12
src/pages/index/index.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<nav-bar title="首页" :need-back="false" />
|
||||||
|
<tab-bar :active="TabbarKey.Home" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import NavBar from '@/components/nav_bar.vue'
|
||||||
|
import TabBar from '@/components/tab_bar.vue'
|
||||||
|
import { TabbarKey } from '@/helpers/constants'
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
47
src/pages/mine/index.vue
Normal file
47
src/pages/mine/index.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<nav-bar title="我的" :need-back="false" is-custom :scrolled="pageScrolled" />
|
||||||
|
<view class="page">
|
||||||
|
<view class="head">
|
||||||
|
<image class="head-bg" src="https://gallery-1253855811.cos.ap-chengdu.myqcloud.com/gallery-8/2.JPG"></image>
|
||||||
|
</view>
|
||||||
|
<view class="body">
|
||||||
|
<view class="body-card card-padding border" v-for="(c, i) in mockList">
|
||||||
|
{{ i }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<tab-bar :active="TabbarKey.User" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import NavBar from '@/components/nav_bar.vue'
|
||||||
|
import TabBar from '@/components/tab_bar.vue'
|
||||||
|
import { TabbarKey } from '@/helpers/constants'
|
||||||
|
import { usePageScroll } from '@/mixins/page_scroll';
|
||||||
|
import { onPageScroll } from '@dcloudio/uni-app';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
const pageScroll = usePageScroll()
|
||||||
|
const pageScrolled = computed(() => {
|
||||||
|
return pageScroll.scrolled.value
|
||||||
|
})
|
||||||
|
const mockList = Array.from({ length: 10 }, (_, i) => i)
|
||||||
|
onPageScroll(() => { })
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.head {
|
||||||
|
height: 300rpx;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
min-height: 200vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
src/shime-uni.d.ts
vendored
Normal file
6
src/shime-uni.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module "vue" {
|
||||||
|
type Hooks = App.AppInstance & Page.PageInstance;
|
||||||
|
interface ComponentCustomOptions extends Hooks {}
|
||||||
|
}
|
||||||
BIN
src/static/logo.png
Normal file
BIN
src/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
235
src/styles/common.css
Normal file
235
src/styles/common.css
Normal file
|
|
@ -0,0 +1,235 @@
|
||||||
|
body,
|
||||||
|
page {
|
||||||
|
background: #f0f0f0;
|
||||||
|
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-start {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column,
|
||||||
|
.column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-space,
|
||||||
|
.flex-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-wrap,
|
||||||
|
.wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-grow,
|
||||||
|
.grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-shrink,
|
||||||
|
.shrink {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-end {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor,
|
||||||
|
.pointer,
|
||||||
|
.cur_p {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 间距 */
|
||||||
|
.ml-5 {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-10 {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-5 {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-10 {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-20 {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-10 {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-20 {
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-10 {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 字体颜色 */
|
||||||
|
.main-theme-color {
|
||||||
|
color: var(--main-theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 字体大小 */
|
||||||
|
.font-12 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-14 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-16 {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-20 {
|
||||||
|
font-size: 40rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 字体样式 */
|
||||||
|
.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-space {
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-wrap {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis-2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小组件 */
|
||||||
|
.head-padding {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #999;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-padding {
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片列表项 */
|
||||||
|
.card-list-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 宽度 */
|
||||||
|
.w-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景色 */
|
||||||
|
.white-bg {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面 */
|
||||||
|
.page-bottom-button {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
1
src/styles/index.css
Normal file
1
src/styles/index.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@import './common.css';
|
||||||
76
src/uni.scss
Normal file
76
src/uni.scss
Normal 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: #fff;
|
||||||
|
$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: 16;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$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: #555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle: 18px;
|
||||||
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph: 15px;
|
||||||
13
tsconfig.json
Normal file
13
tsconfig.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"lib": ["esnext", "dom"],
|
||||||
|
"types": ["@dcloudio/types"]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import uni from "@dcloudio/vite-plugin-uni";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [uni()],
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user