root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加IonFab和IonFabButton组件，更新聊天功能按钮样式

Browse Source
This commit is contained in:
Seven
2026-01-15 01:02:27 +07:00
parent 87782ad55d
commit deba5e65cd
2 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@@ -29,6 +29,8 @@ declare module 'vue' {
IonContent: typeof import('@ionic/vue')['IonContent'] IonContent: typeof import('@ionic/vue')['IonContent']
IonDatetime: typeof import('@ionic/vue')['IonDatetime'] IonDatetime: typeof import('@ionic/vue')['IonDatetime']
IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton'] IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
IonFab: typeof import('@ionic/vue')['IonFab']
IonFabButton: typeof import('@ionic/vue')['IonFabButton']
IonFooter: typeof import('@ionic/vue')['IonFooter'] IonFooter: typeof import('@ionic/vue')['IonFooter']
IonGrid: typeof import('@ionic/vue')['IonGrid'] IonGrid: typeof import('@ionic/vue')['IonGrid']
IonHeader: typeof import('@ionic/vue')['IonHeader'] IonHeader: typeof import('@ionic/vue')['IonHeader']
@@ -89,6 +91,8 @@ declare global {
const IonContent: typeof import('@ionic/vue')['IonContent'] const IonContent: typeof import('@ionic/vue')['IonContent']
const IonDatetime: typeof import('@ionic/vue')['IonDatetime'] const IonDatetime: typeof import('@ionic/vue')['IonDatetime']
const IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton'] const IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
const IonFab: typeof import('@ionic/vue')['IonFab']
const IonFabButton: typeof import('@ionic/vue')['IonFabButton']
const IonFooter: typeof import('@ionic/vue')['IonFooter'] const IonFooter: typeof import('@ionic/vue')['IonFooter']
const IonGrid: typeof import('@ionic/vue')['IonGrid'] const IonGrid: typeof import('@ionic/vue')['IonGrid']
const IonHeader: typeof import('@ionic/vue')['IonHeader'] const IonHeader: typeof import('@ionic/vue')['IonHeader']

26
src/views/riwa/index.vue
View File

@@ -1,8 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { chatbubbleOutline } from "ionicons/icons";
import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu"; import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
import News from "./components/news.vue"; import News from "./components/news.vue";
import Rwa from "./components/rwa.vue"; import Rwa from "./components/rwa.vue";
function openChat() {
window.open("https://chat.riwsan.com/", "_blank");
}
</script> </script>
<template> <template>
@@ -15,10 +19,30 @@ import Rwa from "./components/rwa.vue";
<ion-title>{{ $t('home.title') }}</ion-title> <ion-title>{{ $t('home.title') }}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content :fullscreen="true" class="ion-padding"> <ion-content :fullscreen="true" class="ion-padding">
<!-- <pwa-install-button class="mb-4" /> --> <!-- <pwa-install-button class="mb-4" /> -->
<Rwa /> <Rwa />
<News /> <News />
</ion-content> </ion-content>
<ion-fab horizontal="end" vertical="bottom" @click="openChat">
<ion-fab-button>
<ion-icon :icon="chatbubbleOutline" />
</ion-fab-button>
</ion-fab>
</ion-page> </ion-page>
</template> </template>
<style lang="css" scoped>
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
ion-fab-button::part(native) {
background: linear-gradient(to right, rgb(93, 230, 83), rgb(22, 119, 255));
border-radius: 20px;
box-shadow:
0px 1px 2px 0px rgba(0, 0, 0, 0.3),
0px 1px 3px 1px rgba(0, 0, 0, 0.15);
color: white;
}
</style>