完成宠物小程序基础功能开发
✨ 新功能: - 创建了4个主要Tab页面:宠物、助手、领养、我的 - 集成uview-ui-next UI框架 - 添加可爱的宠物主题图标 - 实现宠物列表展示和管理功能 - 配置微信小程序登录功能 🎨 界面优化: - 使用uView组件美化界面 - 统一的设计风格和配色方案 - 响应式布局适配 📦 技术栈: - uni-app + Vue3 - uview-ui-next UI框架 - 微信小程序平台
3
App.vue
|
|
@ -12,6 +12,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "uview-ui-next/index.scss";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
# 宠爱小程序
|
||||
|
||||
一个专注于宠物管理的微信小程序,提供宠物档案管理、AI助手、领养专区等功能。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
pet-ai/
|
||||
├── pages/
|
||||
│ ├── pets/ # 宠物管理页面
|
||||
│ ├── assistant/ # AI助手页面
|
||||
│ ├── adoption/ # 领养专区页面
|
||||
│ └── profile/ # 个人中心页面
|
||||
├── static/
|
||||
│ └── tabbar/ # Tab图标文件夹
|
||||
└── uni_modules/ # 插件模块(需要安装)
|
||||
```
|
||||
|
||||
## 当前完成状态
|
||||
|
||||
✅ 基础项目结构搭建
|
||||
✅ Tab导航配置
|
||||
✅ 四个主要页面创建
|
||||
✅ 宠物页面基础功能
|
||||
|
||||
## 待完成任务
|
||||
|
||||
### 1. UI框架安装
|
||||
**推荐方式**:在HBuilderX中打开项目,通过插件市场安装uview-next
|
||||
- 插件市场地址:https://ext.dcloud.net.cn/plugin?id=24021
|
||||
- 插件ID:uview-next
|
||||
- 安装后需要配置main.js和uni.scss
|
||||
|
||||
### 2. Tab图标获取
|
||||
需要为以下4个tab页面添加可爱的宠物主题图标:
|
||||
|
||||
**推荐图标资源**:
|
||||
- [iconfont阿里巴巴矢量图标库](https://www.iconfont.cn/)
|
||||
- [Feather Icons](https://feathericons.com/)
|
||||
- [Heroicons](https://heroicons.com/)
|
||||
|
||||
**所需图标**:
|
||||
- `static/tabbar/pets.png` - 宠物图标(如猫爪、宠物头像)
|
||||
- `static/tabbar/pets-active.png` - 宠物图标激活状态
|
||||
- `static/tabbar/assistant.png` - AI助手图标(如机器人、对话框)
|
||||
- `static/tabbar/assistant-active.png` - AI助手图标激活状态
|
||||
- `static/tabbar/adoption.png` - 领养图标(如爱心、房子)
|
||||
- `static/tabbar/adoption-active.png` - 领养图标激活状态
|
||||
- `static/tabbar/profile.png` - 个人中心图标(如用户头像)
|
||||
- `static/tabbar/profile-active.png` - 个人中心图标激活状态
|
||||
|
||||
**图标规格**:
|
||||
- 尺寸:81px × 81px(推荐)
|
||||
- 格式:PNG
|
||||
- 背景:透明
|
||||
|
||||
### 3. 功能完善
|
||||
- [ ] 宠物详情页面
|
||||
- [ ] 添加宠物页面
|
||||
- [ ] 宠物记录功能
|
||||
- [ ] AI对话功能
|
||||
- [ ] 领养信息发布
|
||||
- [ ] 微信登录集成
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端框架**:uni-app + Vue3
|
||||
- **UI框架**:uview-next(待安装)
|
||||
- **开发工具**:HBuilderX
|
||||
- **部署平台**:微信小程序
|
||||
|
||||
## 开发指南
|
||||
|
||||
1. 使用HBuilderX打开项目
|
||||
2. 安装uview-next插件
|
||||
3. 添加tab图标文件
|
||||
4. 运行到微信开发者工具测试
|
||||
|
||||
## 项目特色
|
||||
|
||||
🐱 **宠物管理**:完整的宠物档案和日常记录系统
|
||||
🤖 **AI助手**:智能宠物问答和健康建议
|
||||
❤️ **领养专区**:宠物领养信息发布平台
|
||||
👤 **个人中心**:用户信息和设置管理
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有问题或建议,请联系开发团队。
|
||||
3
main.js
|
|
@ -1,9 +1,11 @@
|
|||
import App from './App'
|
||||
import uView from 'uview-ui-next'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(uView)
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
|
|
@ -15,6 +17,7 @@ app.$mount()
|
|||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uView)
|
||||
return {
|
||||
app
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "pet-ai",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "pet-ai",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"mitt": "^3.0.1",
|
||||
"uview-ui-next": "^0.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uview-ui-next": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/uview-ui-next/-/uview-ui-next-0.0.1.tgz",
|
||||
"integrity": "sha512-CGK4XPt1lYhCb+7aHgMpp6/VV1owOH67dPz52ypJ9dcVs0Ixgl5/PF0xajlel11R2yRhtRydLu6nIXs9eDZSBw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mitt": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "pet-ai",
|
||||
"version": "1.0.0",
|
||||
"description": "一个专注于宠物管理的微信小程序,提供宠物档案管理、AI助手、领养专区等功能。",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"mitt": "^3.0.1",
|
||||
"uview-ui-next": "^0.0.1"
|
||||
}
|
||||
}
|
||||
78
pages.json
|
|
@ -1,5 +1,37 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/pets/pets",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的宠物",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/assistant/assistant",
|
||||
"style": {
|
||||
"navigationBarTitleText": "AI助手",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/adoption/adoption",
|
||||
"style": {
|
||||
"navigationBarTitleText": "领养专区",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/profile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
|
|
@ -9,9 +41,47 @@
|
|||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
"navigationBarTitleText": "宠爱小程序",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#f8f9fa"
|
||||
},
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#ff6b6b",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "black",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/pets/pets",
|
||||
"text": "宠物",
|
||||
"iconPath": "static/tabbar/pets.png",
|
||||
"selectedIconPath": "static/tabbar/pets-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/assistant/assistant",
|
||||
"text": "助手",
|
||||
"iconPath": "static/tabbar/assistant.png",
|
||||
"selectedIconPath": "static/tabbar/assistant-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/adoption/adoption",
|
||||
"text": "领养",
|
||||
"iconPath": "static/tabbar/adoption.png",
|
||||
"selectedIconPath": "static/tabbar/adoption-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/profile/profile",
|
||||
"text": "我的",
|
||||
"iconPath": "static/tabbar/profile.png",
|
||||
"selectedIconPath": "static/tabbar/profile-active.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">领养专区</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<text class="desc">宠物领养信息发布与浏览</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
padding: 20rpx 0;
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 40rpx 0;
|
||||
.desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<view class="assistant-container">
|
||||
<view class="header">
|
||||
<text class="title">AI助手</text>
|
||||
</view>
|
||||
|
||||
<view class="chat-area">
|
||||
<view class="welcome-message">
|
||||
<text class="welcome-text">您好!我是您的宠物AI助手</text>
|
||||
<text class="welcome-desc">可以为您解答宠物饲养、健康、训练等问题</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-area">
|
||||
<input class="message-input" placeholder="请输入您的问题..." />
|
||||
<view class="send-btn">
|
||||
<text class="send-text">发送</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.assistant-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
|
||||
.welcome-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.welcome-desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
background-color: white;
|
||||
padding: 20rpx 30rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background-color: #4ecdc4;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.send-text {
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<view class="pets-container">
|
||||
<u-navbar title="我的宠物" :border="false" bg-color="#ffffff">
|
||||
<template #right>
|
||||
<u-icon name="plus-circle-fill" color="#ff6b6b" size="24" @click="addPet"></u-icon>
|
||||
</template>
|
||||
</u-navbar>
|
||||
|
||||
<view class="pets-list" v-if="petsList.length > 0">
|
||||
<u-card v-for="pet in petsList" :key="pet.id" :margin="20" :padding="20" @click="viewPetDetail(pet)">
|
||||
<view class="pet-card-content">
|
||||
<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="60" shape="circle"></u-avatar>
|
||||
<view class="pet-info">
|
||||
<u-text :text="pet.name" type="primary" size="16" bold></u-text>
|
||||
<u-text :text="pet.breed" type="info" size="14"></u-text>
|
||||
<u-text :text="`${pet.age}岁 · 陪伴${pet.companionDays}天`" type="tips" size="12"></u-text>
|
||||
</view>
|
||||
<view class="pet-actions">
|
||||
<u-button type="primary" size="mini" @click.stop="addRecord(pet)">记录</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
</view>
|
||||
|
||||
<u-empty v-else mode="data" text="还没有添加宠物哦">
|
||||
<template #bottom>
|
||||
<u-button type="primary" text="添加第一只宠物" @click="addPet"></u-button>
|
||||
</template>
|
||||
</u-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
petsList: [
|
||||
// 示例数据
|
||||
{
|
||||
id: 1,
|
||||
name: '小橘',
|
||||
breed: '橘猫',
|
||||
age: 2,
|
||||
companionDays: 365,
|
||||
avatar: '/static/cat-avatar.jpg',
|
||||
gender: '公',
|
||||
weight: '4.5kg',
|
||||
birthday: '2022-01-15'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小白',
|
||||
breed: '金毛',
|
||||
age: 3,
|
||||
companionDays: 1095,
|
||||
avatar: '/static/dog-avatar.jpg',
|
||||
gender: '母',
|
||||
weight: '25kg',
|
||||
birthday: '2021-03-20'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addPet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pets/add-pet'
|
||||
})
|
||||
},
|
||||
viewPetDetail(pet) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/pets/pet-detail?id=${pet.id}`
|
||||
})
|
||||
},
|
||||
addRecord(pet) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/pets/add-record?petId=${pet.id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pets-container {
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.pet-card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.pet-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
/deep/ .u-text {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pet-actions {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">我的</text>
|
||||
</view>
|
||||
|
||||
<view class="user-info" v-if="userInfo">
|
||||
<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||
<text class="nickname">{{ userInfo.nickName || '未登录' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="login-section" v-if="!userInfo">
|
||||
<button class="login-btn" @click="wxLogin" open-type="getUserInfo" @getuserinfo="getUserInfo">
|
||||
微信登录
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="navigateTo('/pages/profile/settings')">
|
||||
<text class="menu-text">设置</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pages/profile/about')">
|
||||
<text class="menu-text">关于我们</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.checkLogin()
|
||||
},
|
||||
methods: {
|
||||
checkLogin() {
|
||||
// 检查是否已登录
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
this.userInfo = userInfo
|
||||
}
|
||||
},
|
||||
|
||||
wxLogin() {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res) => {
|
||||
console.log('登录成功', res)
|
||||
// 这里应该调用后端接口获取用户信息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('登录失败', err)
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo(e) {
|
||||
if (e.detail.userInfo) {
|
||||
this.userInfo = e.detail.userInfo
|
||||
uni.setStorageSync('userInfo', e.detail.userInfo)
|
||||
}
|
||||
},
|
||||
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
background-color: white;
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.login-section {
|
||||
background-color: white;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.login-btn {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background-color: white;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |