Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 9f7375bb 作者: 陈楚尹
操作

feat: 更新首页

上级 b0086031
正在显示 包含 161 行增加 和 42 行删除
package.json
{ {
"name": "basic-app", "name": "hntq-app-v5",
"version": "0.0.2", "version": "0.0.2",
"description": "湖南天气app v5", "description": "湖南天气app v5",
"keywords": [ "keywords": [
......
src/App.vue
<script setup lang="ts"> <script setup lang="ts">
import { checkUpgrade } from '@/utils/upgrade' import { checkUpgrade } from '@/utils/upgrade'
import './static/iconfont.css'
// import * as Push from '@/utils/push' // import * as Push from '@/utils/push'
......
src/components/Icon/index.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.icon { .icon {
width: v-bind(size); width: v-bind(size);
height: v-bind(size);
color: v-bind(color); color: v-bind(color);
height: v-bind(size);
} }
</style> </style>
src/pages.json
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "首页",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
// #ifdef H5 // #ifdef H5
"navigationStyle": "custom", "navigationStyle": "custom",
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
"enableReachBottom": false "enableReachBottom": false
} }
}, },
// === PDF 文件预览 === // === PDF 文件预览 ===
{ {
"path": "pages/common/viewer/pdf", "path": "pages/common/viewer/pdf",
...@@ -74,5 +73,23 @@ ...@@ -74,5 +73,23 @@
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
}, },
"resizable": true "resizable": true,
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#1890FF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "60px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "6px",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/icons/home.png.png",
"selectedIconPath": "static/icons/homeSelect.png",
"text": "首页"
}
]
}
} }
src/pages/index/index.vue
<script setup lang="ts"> <script setup lang="ts">
import Header from './modules/header.vue' import Header from './modules/header.vue'
import Weather from './modules/weather.vue' import Warning from './modules/warning.vue'
import MeteService from './modules/meteService.vue'
// const title = ref('Hello World') // const title = ref('Hello World')
...@@ -34,8 +33,11 @@ ...@@ -34,8 +33,11 @@
<template> <template>
<view class="content"> <view class="content">
<Header /> <Header />
<Weather /> <view class="p-3 pt-4 pb-5">
<MeteService /> <Warning />
</view>
<!-- <Weather /> -->
<!-- <MeteService /> -->
<!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> --> <!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> -->
<!-- <view class="info"> <!-- <view class="info">
<text class="title">{{ title }}</text> <text class="title">{{ title }}</text>
......
src/pages/index/modules/header.vue
<script setup lang="ts"> <script setup lang="ts">
const url = ref<string>('/static/images/navBg/nav-bx.jpg') const city = ref<string>('长沙市')
const warn = ref<string>('长沙天气（暴雨Ⅲ级相应）')
const county = ref<string>('天心区')
const path = ref<string>('/static/header.png')
onMounted(() => {})
</script> </script>
<template> <template>
<view class="header-container"> <view class="text-c0 bg-cover h-372 pos-relative p-4 pt-13 pb-0" :style="`background-image: url(${path})`">
<image :src="url" /> <fui-row>
<text class="header-text">{{ warn }}</text> <!-- 定位 -->
<FuiIcon name="setup" class="setup" /> <fui-col :span="12">
<view class="flex">
<FuiIcon custom-prefix="font_family" name="icon-location" color="#fff" size="42" />
<text class="ml-2 text-30">{{ city }} &nbsp;{{ county }}</text>
</view>
</fui-col>
<!-- 应急响应 -->
<fui-col :span="12">
<view class="flex flex-justify-end b-rd-0.7 text-24 lh-7 h-56">
<view class="pl-3 pr-4 inline-block pr-2 bg-[#f6f7fb] b-rd-l-0.7 bg-[#FF9A03]">暴雨</view>
<view class="pos-relative pr-1.3 pl-2 inline-block bg-[#fff] text-c2 font-650 b-rd-r-0.7 triangle">
|| 响应
</view>
</view>
</fui-col>
</fui-row>
<!-- 天气温度监测及天气类型 -->
<fui-row class="pt-6 pb-5 pl-0.5">
<!-- 天气监测 -->
<fui-col :span="9" class="h-128">
<view>
<text class="text-112">26°</text>
<text class="text-32">多云</text>
</view>
</fui-col>
<!-- 天气类型 -->
<fui-col :span="15">
<fui-row class="h-128" :isFlex="true" justify="end" align="middle">
<fui-col :span="8" v-for="item in 2" :key="item">
<view class="h-40 lh-5 text-27 mr-1 p-1 pr-2 mb-1 bg-amber b-rd-10">
<FuiIcon custom-prefix="font_family" name="icon-gw" color="#fff" size="36" />
高温
</view>
</fui-col>
</fui-row>
</fui-col>
</fui-row>
<!-- 空气质量及预报 -->
<fui-row>
<fui-col :span="12">
<view>
<text class="mr-4 text-32"> 18° ~ 29° </text>
<FuiIcon class="mt-1" custom-prefix="font_family" name="icon-bianzu" color="#fff" size="42" />
<text> 20 优</text>
</view>
</fui-col>
<fui-col :span="12">
<view class="flex-1 flex flex-justify-end">
<text class="bg-[rgba(0,7,17,0.3)] text-28 pt-1.5 pb-1.5 pl-3 pr-1 b-rd-4">
城市预报
<fui-icon name="arrowright" :size="28" color="#fff" />
</text>
</view>
</fui-col>
</fui-row>
</view> </view>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.header-container { .triangle {
width: 100%; &::after {
height: 162rpx; content: '';
position: relative; width: 0;
height: 0;
image {
width: 100%;
height: 100%;
display: block;
}
.header-text {
position: absolute;
left: 50%;
bottom: 15%;
color: #fff;
font-size: 30rpx;
transform: translateX(-50%);
}
.setup {
position: absolute; position: absolute;
right: 20rpx; border-style: solid;
bottom: 16rpx; border-color: #fff transparent;
font-size: 55rpx !important; border-width: 0 0 56rpx 20rpx;
top: 0;
left: -20rpx;
z-index: 99;
} }
} }
</style> </style>
src/pages/index/modules/warning.vue 0 → 100644
<script setup lang="ts"></script>
<template>
<view class="h-80 bg-[#FFFBE6] b-rd-5" />
</template>
<style lang="less" scoped></style>
src/static/iconfont.css 0 → 100644
@font-face {
font-family: "font_family"; /* Project id 4105118 */
src: url('iconfont.woff2?t=1686122265823') format('woff2'),
url('iconfont.woff?t=1686122265823') format('woff'),
url('iconfont.ttf?t=1686122265823') format('truetype');
}
.font_family {
font-family: "font_family" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gw:before {
content: "\e615";
}
.icon-bianzu:before {
content: "\e611";
}
.icon-location:before {
content: "\e610";
}
src/static/svg/location.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>定位备份</title>
<g id="375" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" transform="translate(-12.000000, -52.000000)" fill-rule="nonzero">
<g id="天气" transform="translate(0.000000, -289.000000)">
<g id="编组-4备份" transform="translate(12.000000, 340.000000)">
<g id="定位备份" transform="translate(0.000000, 1.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
<path d="M10.4240177,1.81824782 C6.66472819,1.8347257 3.6198159,4.83084352 3.63643131,8.49758116 C3.65217645,11.938067 9.26953694,18.1386002 9.91013207,18.8340474 C10.0609944,18.9983708 10.2767606,19.0918596 10.5029186,19.0909018 C10.7290767,19.0899292 10.9439957,18.9946025 11.0933777,18.8289978 C11.7276446,18.1279399 17.2883381,11.8788741 17.2726943,8.43824793 C17.2559776,4.77165056 14.1835948,1.80204333 10.4240177,1.81824782 Z M10.4677404,11.386842 C8.94521231,11.3934076 7.70055353,10.1906122 7.69376612,8.70559814 C7.68703402,7.22058413 8.92061829,6.00698808 10.4430025,6.00050764 C11.9661059,5.99380293 13.210477,7.19659835 13.2172644,8.6814721 C13.2239965,10.1666264 11.9906999,11.3800822 10.4677404,11.386842 Z" id="形状" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
stylelint.config.js
...@@ -63,9 +63,9 @@ module.exports = { ...@@ -63,9 +63,9 @@ module.exports = {
], ],
{ severity: 'warning' }, { severity: 'warning' },
], ],
'function-no-unknown': null,
'selector-type-no-unknown': null, 'selector-type-no-unknown': null,
'comment-empty-line-before': null, 'comment-empty-line-before': null,
'function-no-unknown': null,
}, },
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'], ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
overrides: [ overrides: [
......
types/components.d.ts
...@@ -133,6 +133,7 @@ declare module '@vue/runtime-core' { ...@@ -133,6 +133,7 @@ declare module '@vue/runtime-core' {
Icon: typeof import('./../src/components/Icon/index.vue')['default'] Icon: typeof import('./../src/components/Icon/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./../src/components/Icon/svgIcon.vue')['default']
ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default'] ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
} }
} }
unocss.config.ts
...@@ -27,13 +27,14 @@ export default defineConfig({ ...@@ -27,13 +27,14 @@ export default defineConfig({
], ],
shortcuts: [ shortcuts: [
{ {
bg: 'bg-[#f6f7fb]',
'border-base': 'border border-[#eee]', 'border-base': 'border border-[#eee]',
'flex-center': 'flex justify-center items-center', 'flex-center': 'flex justify-center items-center',
'text-c0': 'text-[#ffffff]',
'text-c1': 'text-[#181818]', 'text-c1': 'text-[#181818]',
'text-c2': 'text-[#333333]', 'text-c2': 'text-[#333333]',
'text-c3': 'text-[#B2B2B2]', 'text-c3': 'text-[#B2B2B2]',
'text-c4': 'text-[#CCCCCC]', 'text-c4': 'text-[#CCCCCC]',
bg: 'bg-[#f6f7fb]',
}, },
], ],
transformers: [ transformers: [
...@@ -41,7 +42,7 @@ export default defineConfig({ ...@@ -41,7 +42,7 @@ export default defineConfig({
transformerAttributify({ transformerAttributify({
attributes: [...defaultAttributes, 'icon'], attributes: [...defaultAttributes, 'icon'],
transformRules, transformRules,
}), }) as any,
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
transformerClass({ transformerClass({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论