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",
"description": "湖南天气app v5",
"keywords": [
......
src/App.vue
<script setup lang="ts">
import { checkUpgrade } from '@/utils/upgrade'
import './static/iconfont.css'
// import * as Push from '@/utils/push'
......
src/components/Icon/index.vue
......@@ -25,7 +25,7 @@
<style lang="less" scoped>
.icon {
width: v-bind(size);
height: v-bind(size);
color: v-bind(color);
height: v-bind(size);
}
</style>
src/pages.json
......@@ -4,7 +4,7 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false,
// #ifdef H5
"navigationStyle": "custom",
......@@ -15,7 +15,6 @@
"enableReachBottom": false
}
},
// === PDF 文件预览 ===
{
"path": "pages/common/viewer/pdf",
......@@ -74,5 +73,23 @@
"navigationBarBackgroundColor": "#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">
import Header from './modules/header.vue'
import Weather from './modules/weather.vue'
import MeteService from './modules/meteService.vue'
import Warning from './modules/warning.vue'
// const title = ref('Hello World')
......@@ -34,8 +33,11 @@
<template>
<view class="content">
<Header />
<Weather />
<MeteService />
<view class="p-3 pt-4 pb-5">
<Warning />
</view>
<!-- <Weather /> -->
<!-- <MeteService /> -->
<!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> -->
<!-- <view class="info">
<text class="title">{{ title }}</text>
......
src/pages/index/modules/header.vue
<script setup lang="ts">
const url = ref<string>('/static/images/navBg/nav-bx.jpg')
const warn = ref<string>('长沙天气（暴雨Ⅲ级相应）')
const city = ref<string>('长沙市')
const county = ref<string>('天心区')
const path = ref<string>('/static/header.png')
onMounted(() => {})
</script>
<template>
<view class="header-container">
<image :src="url" />
<text class="header-text">{{ warn }}</text>
<FuiIcon name="setup" class="setup" />
<view class="text-c0 bg-cover h-372 pos-relative p-4 pt-13 pb-0" :style="`background-image: url(${path})`">
<fui-row>
<!-- 定位 -->
<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>
</template>
<style lang="less" scoped>
.header-container {
width: 100%;
height: 162rpx;
position: relative;
image {
width: 100%;
height: 100%;
display: block;
}
.header-text {
position: absolute;
left: 50%;
bottom: 15%;
color: #fff;
font-size: 30rpx;
transform: translateX(-50%);
}
.setup {
.triangle {
&::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 20rpx;
bottom: 16rpx;
font-size: 55rpx !important;
border-style: solid;
border-color: #fff transparent;
border-width: 0 0 56rpx 20rpx;
top: 0;
left: -20rpx;
z-index: 99;
}
}
</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 = {
],
{ severity: 'warning' },
],
'function-no-unknown': null,
'selector-type-no-unknown': null,
'comment-empty-line-before': null,
'function-no-unknown': null,
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
overrides: [
......
types/components.d.ts
......@@ -133,6 +133,7 @@ declare module '@vue/runtime-core' {
Icon: typeof import('./../src/components/Icon/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./../src/components/Icon/svgIcon.vue')['default']
ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
}
}
unocss.config.ts
......@@ -27,13 +27,14 @@ export default defineConfig({
],
shortcuts: [
{
bg: 'bg-[#f6f7fb]',
'border-base': 'border border-[#eee]',
'flex-center': 'flex justify-center items-center',
'text-c0': 'text-[#ffffff]',
'text-c1': 'text-[#181818]',
'text-c2': 'text-[#333333]',
'text-c3': 'text-[#B2B2B2]',
'text-c4': 'text-[#CCCCCC]',
bg: 'bg-[#f6f7fb]',
},
],
transformers: [
......@@ -41,7 +42,7 @@ export default defineConfig({
transformerAttributify({
attributes: [...defaultAttributes, 'icon'],
transformRules,
}),
}) as any,
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
transformerClass({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论