Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 3cda3a62 作者: 陈楚尹
操作

feat: 增加我的

上级 9656fda5
正在显示 包含 285 行增加 和 53 行删除
index.html
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_4105118_8gdcfjv45sh.css" /> -->
<script>
const coverSupport =
'CSS' in window &&
......
src/App.vue
<script setup lang="ts">
import { checkUpgrade } from '@/utils/upgrade'
// 本地
import './static/iconfont.css'
// import * as Push from '@/utils/push'
......
src/common/public.less
......@@ -9,6 +9,23 @@
box-shadow: 0rpx 0rpx 12rpx 0rpx rgb(3 21 37 / 15%);
}
.box-shadow-bottom {
background: #fff;
box-shadow: 0 0 6px 0 rgb(3 21 37 / 15%);
}
.translateX(-50%) {
transform: translateX(-50%);
}
.letter-spacing-1 {
letter-spacing: 1px;
}
.border-bottom {
border-bottom: 2rpx solid #eee;
}
.line-blue {
position: relative;
padding-left: 20rpx;
......
src/components/Layout/Grid.vue
......@@ -33,8 +33,14 @@
size="100"
:color="getColor(lastString(item.value))"
/>
<text class="text-12 mt-2">{{ item.label }}</text>
<text class="text-30 mt-2">{{ item.label }}</text>
</view>
</fui-grid-item>
</fui-grid>
</template>
<style lang="less">
.fui-grid__cell {
border: none;
}
</style>
src/components/Layout/Header.vue
<script setup lang="ts">
import { has } from 'lodash-es'
import { useSlots } from 'vue'
defineProps({
title: {
type: String,
default: '监测预报',
},
url: {
type: String,
default: '/static/warnforecast.png',
},
myStyle: {
type: String,
default: '',
},
bgColor: {
type: String,
default: '#1F8BF6',
},
})
const isSlot = computed(() => has(toRaw(useSlots()), 'content'))
</script>
<template>
<!-- 头部 -->
<view
class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
:style="`background:${bgColor} url(${url}) no-repeat center bottom;background-size:100% 100%;${myStyle}`"
class="h-171 bg-[url(/static/warnforecast.png)] text-c0 lh-32 text-center text-36 font-500 pos-relative"
>
监测预报
<slot name="content"></slot>
<text v-if="!isSlot"> {{ title }}</text>
</view>
</template>
src/components/Layout/MenuHeader.vue
......@@ -8,6 +8,10 @@
type: String,
default: '查看全部',
},
otherTitleVis: {
type: Boolean,
default: true,
},
})
</script>
......@@ -15,9 +19,10 @@
<!-- 头部 -->
<view class="flex lh-7 justify-between pb-3 b-#EEEEEE b-b-2 b-b-solid">
<view class="text-black text-35 font-600 line-blue">{{ title }}</view>
<view class="b-2 b-#3E8FFD b-solid b-rd-4 pl-3 pr-1 text-#3E8FFD flex align-center">
<view class="b-2 b-#3E8FFD b-solid b-rd-4 pl-3 pr-1 text-#3E8FFD flex align-center" v-if="otherTitleVis">
<text class="text-28 font-500">{{ otherTitle }}</text>
<fui-icon name="arrowright" size="36" color="#3E8FFD" />
</view>
<slot name="content"></slot>
</view>
</template>
src/components/Layout/View.vue 0 → 100644
<script setup lang="ts"></script>
<template>
<view class="pb-18">
<slot name="container"></slot>
</view>
</template>
src/pages.json
......@@ -43,6 +43,20 @@
"enableReachBottom": false
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false,
// #ifdef H5
"navigationStyle": "custom",
// #endif
"app-plus": {
"titleNView": false
},
"enableReachBottom": false
}
},
// === PDF 文件预览 ===
{
"path": "pages/common/viewer/pdf",
......@@ -129,6 +143,12 @@
"iconPath": "static/icons/message.png",
"selectedIconPath": "static/icons/messageSelect.png",
"text": "消息"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/icons/mine.png",
"selectedIconPath": "static/icons/mineSelect.png",
"text": "我的"
}
]
}
......
src/pages/business/index.vue
<script setup lang="ts">
import Header from '@/components/Layout/Header.vue'
import { climateModules, forecastModules, liveModules, weatherModules } from '@/utils/const/Navigation'
const navs = [
......@@ -14,13 +16,9 @@
<template>
<view class="">
<!-- 头部 -->
<view
class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
>
监测预报
</view>
<Header title="监测预报" />
<!-- 内容 -->
<view class="p-2 pt-3 pb-18">
<view class="p-2 pt-3 pb-1">
<view class="box-shadow-def p-2 pt-3 b-rd-2 mb-3" v-for="(item, index) in navs" :key="index">
<MenuHeader :title="item.title" otherTitle="展开更多" />
<Grid :dataSouce="item.dataSouce" />
......
src/pages/index/index.vue
......@@ -43,18 +43,12 @@
<CommonFunction />
</view>
<!-- <Weather /> -->
<!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> -->
<!-- <view class="info">
<text class="title">{{ title }}</text>
<text class="title">{{ $t('app.hello') }}</text>
<uni-icons type="hand-up" size="30" />
</view> -->
</view>
</template>
<style lang="less">
.content {
height: calc(100vh - 100rpx);
height: calc(100vh);
overflow: auto;
background-color: #f2f2f2;
letter-spacing: 3rpx;
......
src/pages/index/modules/header.vue
......@@ -9,7 +9,7 @@
</script>
<template>
<view class="text-c0 bg-cover h-372 pos-relative p-4 pt-13 pb-0" :style="`background-image: url(${path})`">
<view class="text-c0 bg-cover h-362 pos-relative p-4 pt-13 pb-0" :style="`background-image: url(${path})`">
<fui-row>
<!-- 定位 -->
<fui-col :span="12">
......@@ -41,9 +41,9 @@
<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">
<view class="h-40 text-27 mr-1 p-1 pr-2 mb-1 bg-amber b-rd-10 flex-center">
<FuiIcon custom-prefix="font_family" name="icon-gw" color="#fff" size="36" />
高温
<text class="ml-1">高温</text>
</view>
</fui-col>
</fui-row>
......
src/pages/index/modules/meteService.vue
......@@ -13,10 +13,10 @@
>
<view class="text-#333333 font-550 text-30"> 湖南省未来三天天气预报 </view>
<view class="pt-4 pb-4">
<text class="text-28 font-500 w-132 b-2 b-#1890FF b-solid b-rd-4 p-1 pl-2 pr-1 text-#3E8FFD">
<text class="text-24 font-500 w-132 b-2 b-#1890FF b-solid b-rd-4 p-1 pl-2 pr-1 text-#3E8FFD">
决策服务
</text>
<text class="text-#999999 ml-2"> 2023/02/28 17:00 </text>
<text class="text-#999999 ml-2 text-24"> 2023/02/28 17:00 </text>
</view>
</view>
</view>
......
src/pages/index/modules/warning.vue
......@@ -3,11 +3,11 @@
<template>
<view class="h-80 bg-[#FFFBE6] b-rd-5 pl-3 lh-10 flex box-shadow-def">
<view>
<img src="/static/images/earlyWarningIcon/by-1.svg" alt="by" class="h-50 mt-2 shadow-yellow" />
<image src="/static/images/earlyWarningIcon/by-1.svg" alt="by" class="w-54 h-50 mt-2 shadow-yellow" />
</view>
<view class="ml-2 overflow-hidden">
<text class="text-28 text[#000000]"> 湖南省气象台5月15日14:00发布 </text>
<text class="text-red text-28"> 暴雨红色预警 </text>
<text class="text-28 text-red">暴雨红色预警</text>
</view>
</view>
</template>
src/pages/message/index.vue
<script setup lang="ts">
import Header from '@/components/Layout/Header.vue'
import MenuHeader from '@/components/Layout/MenuHeader.vue'
const options = ['全部消息', '应急响应', '预警信号', '临灾警报', '服务材料', '重要天气']
const value = ref<string>('全部消息')
onMounted(() => {})
</script>
<template>
<view class="">
<view class="bg-#fff">
<!-- 头部 -->
<view
class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
>
消息
<Header title="消息" />
<!-- tab -->
<view class="bg-#fff box-shadow-bottom pt-3.5 pl-3.2 pb-2.5">
<fui-data-tag
:modelValue="value"
:options="options"
background="#F9FAFD"
activeColor="#fff"
defaultBorderColor="#1890FF"
activeBgColor="linear-gradient(94deg, #1890FF 0%, #377ED9 100%)"
width="216"
gap="25"
/>
</view>
<!-- 内容 -->
<view class="p-2 pt-3 pb-18">
<view />
<view class="bg-#fff p-3.5 pt-0 mt-3">
<MenuHeader title="全部消息" :otherTitleVis="false">
<template #content>
<text class="font-500 text-28 text-#1890FF">
<FuiIcon custom-prefix="font_family" name="icon-read" size="36" color="#1890FF" />
全部阅毕
</text>
</template>
</MenuHeader>
<view v-for="item in 6" :key="item" class="flex-center pt-3 pb-2 b-#EEEEEE b-solid b-0 b-b-2">
<view class="pr-5 text-left">
<text class="text-28 font-550 text-#333333"> 湖南省长沙市启动洪涝灾害 II 级 应急响应 </text>
<view class="lh-10">
<text class="b-rd-20 p-1 pl-2 pr-2 bg-#1890FF1A text-#1890FFFF text-24">未阅</text>
<text class="text-#999999FF text-24 ml-2">2023/05/23 14:00</text>
</view>
</view>
<view>
<image src="/static/images/message/fireHazard.png" class="w-204 h-154" />
</view>
</view>
</view>
</view>
</template>
src/pages/mine/constant/index.ts 0 → 100644
export const lists = [
{
title: '应急状态管理',
icon: 'emergencyManage',
},
{
title: '用户默认层级',
icon: 'user',
},
{
title: '常用功能设置',
icon: 'common',
},
{
title: '消息推送设置',
icon: 'push',
},
{
title: '问卷调查填写',
icon: 'survey',
},
{
title: '问题意见反馈',
icon: 'feedback',
},
{
title: '关于湖南天气',
icon: 'about',
},
{
title: '值班电话号码',
icon: 'phone',
suffix: '0731-85600016',
},
{
title: '系统缓存清除',
icon: 'clear',
},
{
title: '系统检查更新',
icon: 'update',
},
]
src/pages/mine/index.vue 0 → 100644
<script setup lang="ts">
import { lists } from './constant/index'
import View from '@/components/Layout/View.vue'
const url = '/static/images/mine/provincial.png'
const bgUrl = '/static/header/mine.png'
</script>
<template>
<View>
<template #container>
<Header title="我的" class="h-405" :url="bgUrl">
<template #content>
<view
class="w-200 h-250 pos-absolute left-50% z-1 bottom-0% transform lh-8"
style="transform: translateX(-50%)"
>
<image :src="url" class="w-144 h-144" />
<text class="letter-spacing-1">18771683288</text>
</view>
</template>
</Header>
<view class="bg-#F0F2F5">
<fui-list>
<fui-list-cell arrow v-for="(item, index) in lists.slice(0, 4)" :key="index" class="border-bottom">
<FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
<text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
</fui-list-cell>
</fui-list>
<fui-list style="margin-top: 20rpx">
<fui-list-cell arrow v-for="(item, index) in lists.slice(4, 6)" :key="index" class="border-bottom">
<FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
<text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
</fui-list-cell>
</fui-list>
<fui-list style="margin-top: 20rpx">
<fui-list-cell
arrow
v-for="(item, index) in lists.slice(6, 10)"
:key="index"
class="border-bottom pos-relative"
>
<FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
<text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
<text v-if="item.suffix" class="text-#1890FF pos-absolute right-70">
{{ item.suffix }}
</text>
</fui-list-cell>
</fui-list>
</view>
<view class="p-6 pt-5 pb-2">
<fui-button background="#fff" radius="50rpx" color="#1890FF">退出当前账号</fui-button>
</view>
</template>
</View>
</template>
src/static/iconfont.css
@font-face {
font-family: "font_family"; /* Project id 4105118 */
src: url('iconfont.woff2?t=1686818547722') format('woff2'),
url('iconfont.woff?t=1686818547722') format('woff'),
url('iconfont.ttf?t=1686818547722') format('truetype');
src: url('//at.alicdn.com/t/c/font_4105118_j7v7r42023c.woff2?t=1687340820798') format('woff2'),
url('//at.alicdn.com/t/c/font_4105118_j7v7r42023c.woff?t=1687340820798') format('woff'),
url('//at.alicdn.com/t/c/font_4105118_j7v7r42023c.ttf?t=1687340820798') format('truetype');
}
.font_family {
......@@ -13,6 +14,50 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-about:before {
content: "\e639";
}
.icon-feedback:before {
content: "\e63a";
}
.icon-clear:before {
content: "\e63b";
}
.icon-common:before {
content: "\e63c";
}
.icon-update:before {
content: "\e63d";
}
.icon-user:before {
content: "\e63e";
}
.icon-phone:before {
content: "\e63f";
}
.icon-emergencyManage:before {
content: "\e640";
}
.icon-survey:before {
content: "\e641";
}
.icon-push:before {
content: "\e642";
}
.icon-read:before {
content: "\e638";
}
.icon-areal-rainfall-m:before {
content: "\e616";
}
......@@ -160,4 +205,3 @@
.icon-location:before {
content: "\e610";
}
src/static/svg/location.svg deleted 100644 → 0
<?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
types/components.d.ts
......@@ -136,7 +136,7 @@ declare module '@vue/runtime-core' {
MenuHeader: typeof import('./../src/components/Layout/MenuHeader.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']
View: typeof import('./../src/components/Layout/View.vue')['default']
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论