uni-app初学

文章目录

  • 1. pages.json 页面路由
  • 2. 图标
  • 3. 全局 CSS
  • 4. 首页
    • 4.1 整体框架
    • 4.2 完整代码
    • 4.3 轮播图 swiper
      • 4.3.1 image
    • 4.4 公告
      • 4.4.1 uni-icons
    • 4.5 分类 uni-row、uni-col
    • 4.6 商品列表

小程序开发网址：

注册小程序账号
微信开发者工具下载
uniapp 官网
HbuilderX 下载
色彩网站
图标网站
Postimage-免费转换图片比例

效果图：

在这里插入图片描述

1. pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/category/category","style" : {"navigationBarTitleText" : "分类"}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "校园小程序","navigationBarBackgroundColor": "#3cb371","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"selectedColor": "#3cb371","list": [{"pagePath": "pages/index/index","iconPath": "/static/icons/首页.png","selectedIconPath": "/static/icons/首页-高亮.png","text": "首页"},{"pagePath": "pages/category/category","iconPath": "/static/icons/分类.png","selectedIconPath": "/static/icons/分类-高亮.png","text": "分类"},{"pagePath": "pages/user/user","iconPath": "/static/icons/我的.png","selectedIconPath": "/static/icons/我的-高亮.png","text": "我的"}]}
}
  • pages：设置页面路径及窗口表现
    • path：配置页面路径
    • style：配置页面窗口表现
      • navigationBarTitleText：导航栏标题文字内容
    • needLogin：是否需要登录才可访问
  • globalStyle：设置默认页面的窗口表现
    • navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    • navigationBarTitleText：导航栏标题文字内容
    • navigationBarBackgroundColor：导航栏背景颜色
    • backgroundColor：窗口的背景色
  • tabBar：设置底部 tab 的表现
    • color：tab 上的文字默认颜色
    • selectedColor：tab 上的文字选中时的颜色
    • list：tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
      • pagePath：页面路径，必须在 pages 中先定义
      • iconPath：图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
      • selectedIconPath：选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
      • text：tab 上按钮文字

2. 图标

1、访问 图标网站，搜索选择喜欢的图标
在这里插入图片描述
在这里插入图片描述

2、点击作者
在这里插入图片描述

3、点击图标集
在这里插入图片描述

4、选择所有需要的图标
在这里插入图片描述

5、加入购物车
在这里插入图片描述

6、添加到个人项目中
在这里插入图片描述

7、个人主页 > 我的项目
在这里插入图片描述

8、下载所需图标
在这里插入图片描述

9、选择颜色，下载灰色图标，做为未选中时图标。
在这里插入图片描述

10、选择绿色，下载绿色图标，做为选中时图标。
在这里插入图片描述

3. 全局 CSS

global.css：

page {background-color: #f2f3f4;min-height: 100vh;
}
* {box-sizing: border-box;
}

设置背景色为灰色。

4. 首页

4.1 整体框架

在这里插入图片描述

4.2 完整代码

<template><view><!-- 轮播图 --><view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper></view><!-- 公告 --><view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view></view><!-- 分类 --><view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('时令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">时令水果</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('品质肉禽')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/品质肉禽.png"></image><text style="font-size: 13px; margin-top: 5px;">品质肉禽</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('新鲜水产')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/新鲜水产.png"></image><text style="font-size: 13px; margin-top: 5px;">新鲜水产</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('蔬菜蛋品')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/蔬菜蛋品.png"></image><text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text></view></uni-col></uni-row></view><!-- 商品列表 --><view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">￥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row></view></view>
</template><script>export default {data() {return {imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',],notices: [{content: "时令水果今日半价"},{content: "百亿补贴限时抢购"},{content: "9块9特卖专场"},],notice: '',goodsList: [{ name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果（单果250g+）', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },]}},onLoad() {this.loadNotice();},methods: {loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)},// 点击分类，跳转页面clickItem(name) {console.log(name)},// 点击添加到购物车addShoppingCart(item) {console.log(item.name)}}}
</script><style>.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;}
</style>

4.3 轮播图 swiper

在这里插入图片描述

详见官网 滑块视图容器

<view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper>
</view>imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
]
  • circular ：是否采用衔接滑动，即播放到末尾后重新回到开头
  • autoplay ：是否自动切换
  • interval：自动切换时间间隔
  • duration：滑动动画时长
  • indicator-dots：是否显示面板指示点
  • indicator-color：指示点颜色
  • indicator-active-color：当前选中的指示点颜色

4.3.1 image

  • src：图片资源地址
  • mode：图片裁剪、缩放的模式。widthFix：宽度不变，高度自动变化，保持原图宽高比不变

4.4 公告

在这里插入图片描述

<view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view>
</view>notices: [{content: "时令水果今日半价"},{content: "百亿补贴限时抢购"},{content: "9块9特卖专场"},
],
notice: '',loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)
}onLoad() {this.loadNotice();
}

4.4.1 uni-icons

下载安装 扩展组件 uni-icons
在这里插入图片描述

在这里插入图片描述

4.5 分类 uni-row、uni-col

在这里插入图片描述

<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('时令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">时令水果</text></view></uni-col>... 省略</uni-row>
</view>clickItem(name) {console.log(name)
}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
  • uni-row：流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局
  • span：栅格占据的列数
  • display: flex; ：使图片和文字垂直居中。
  • width: 50%; ：图片排版更好看。
  • @click=“clickItem(‘时令水果’)”：点击事件可以用于跳转页面。

4.6 商品列表

在这里插入图片描述

<view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">￥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row>
</view>goodsList: [{ name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果（单果250g+）', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
]addShoppingCart(item) {console.log(item.name)
}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;
}
  • gutter：栅格间隔
  • width: 100%;：图片填充整个栅格
  • .lineEllipsis ：文字超出 2 行进行省略处理
  • addShoppingCart：点击添加到购物车

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/76396.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VBA将Word文档内容逐行写入Excel

VBA将Word文档内容逐行写入Excel

如果你需要将Word文档的内容导入Excel工作表来进行数据加工&#xff0c;使用下面的代码可以实现&#xff1a; Sub ImportWordToExcel()Dim wordApp As Word.ApplicationDim wordDoc As Word.DocumentDim excelSheet As WorksheetDim filePath As VariantDim i As LongDim para…
阅读更多...
MySQL运行一段时间后磁盘出现100%读写

MySQL运行一段时间后磁盘出现100%读写

MySQL运行一段时间后磁盘出现100%读写的情况&#xff0c;可能是由多种原因导致的&#xff0c;以下是一些常见原因及解决方法&#xff1a; 可能的原因 1. 磁盘I/O压力过大[^0^]&#xff1a;数据量过大&#xff0c;数据库查询和写入操作消耗大量I/O资源。索引效率低&#xff0c…
阅读更多...
【RabbitMQ】延迟队列

【RabbitMQ】延迟队列

1.概述 延迟队列其实就是队列里的消息是希望在指定时间到了以后或之前取出和处理&#xff0c;简单来说&#xff0c;延时队列就是用来存放需要在指定时间被处理的元素的队列。 延时队列的使用场景&#xff1a; 1.订单在十分钟之内未支付则自动取消 2.新创建的店铺&#xff0c;…
阅读更多...
Linux笔记之Ubuntu系统设置自动登录tty1界面

Linux笔记之Ubuntu系统设置自动登录tty1界面

Ubuntu22.04系统 编辑getty配置文件 vim /etc/systemd/system/gettytty1.service.d/override.conf如果该目录或者文件不存在&#xff0c;进行创建。 在override.conf文件中进行编辑&#xff1a; [Service] ExecStart ExecStart-/sbin/agetty --autologin yourusername --no…
阅读更多...
C++程序诗篇的灵动赋形：多态

C++程序诗篇的灵动赋形：多态

文章目录 1.什么是多态&#xff1f;2.多态的语法实现2.1 虚函数2.2 多态的构成2.3 虚函数的重写2.3.1 协变2.3.2 析构函数的重写 2.4 override 和 final 3.抽象类4.多态原理4.1 虚函数表4.2 多态原理实现4.3 动态绑定与静态绑定 5.继承和多态常见的面试问题希望读者们多多三连支…
阅读更多...
算法训练之动态规划（三）

算法训练之动态规划（三）

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…
阅读更多...
$_GET变量

$_GET变量

$_GET 是一个超级全局变量&#xff0c;在 PHP 中用于收集通过 URL 查询字符串传递的参数。它是一个关联数组&#xff0c;包含了所有通过 HTTP GET 方法发送到当前脚本的变量。 预定义的 $_GET 变量用于收集来自 method"get" 的表单中的值。 从带有 GET 方法的表单发…
阅读更多...
jQuery多库共存

jQuery多库共存

在现代Web开发中&#xff0c;项目往往需要集成多种JavaScript库或框架来满足不同的功能需求。然而&#xff0c;当多个库同时使用时&#xff0c;可能会出现命名冲突、功能覆盖等问题。幸运的是&#xff0c;jQuery提供了一些机制来确保其可以与其他库和谐共存。本文将探讨如何实现…
阅读更多...
MySQL 中的聚簇索引和非聚簇索引有什么区别？

MySQL 中的聚簇索引和非聚簇索引有什么区别？

MySQL 中的聚簇索引和非聚簇索引有什么区别&#xff1f; 1. 从不同存储引擎去考虑 在MySIAM存储引擎中&#xff0c;索引和数据是分开存储的&#xff0c;包括主键索引在内的所有索引都是“非聚簇”的&#xff0c;每个索引的叶子节点存储的是数据记录的物理地址&#xff08;指针…
阅读更多...
Java从入门到“放弃”（精通）之旅——启航①

Java从入门到“放弃”（精通）之旅——启航①

&#x1f31f;Java从入门到“放弃 ”精通之旅&#x1f680; 今天我将要带大家一起探索神奇的Java世界&#xff01;希望能帮助到同样初学Java的你~ (๑•̀ㅂ•́)و✧ &#x1f525; Java是什么&#xff1f;为什么这么火&#xff1f; Java不仅仅是一门编程语言&#xff0c;更…
阅读更多...
三相电为什么没零线也能通电

三相电为什么没零线也能通电

要理解三相电为什么没零线也能通电&#xff0c;就要从发电的原理说起 1、弧形磁铁中加入电枢&#xff0c;旋转切割磁感线会产生电流 随着电枢旋转的角度变化&#xff0c;电枢垂直切割磁感线 电枢垂直切割磁感线&#xff0c;此时会产生最大电压 当转到与磁感线平行时&#xf…
阅读更多...
文件上传做题记录

文件上传做题记录

1&#xff0c;[SWPUCTF 2021 新生赛]easyupload2.0 直接上传php 再试一下phtml 用蚁剑连发现连不上 那就只要命令执行了 2&#xff0c;[SWPUCTF 2021 新生赛]easyupload1.0 当然&#xff0c;直接上传一个php是不行的 phtml也不行&#xff0c;看下是不是前端验证&#xff0c;…
阅读更多...
【Pandas】pandas DataFrame head

【Pandas】pandas DataFrame head

Pandas2.2 DataFrame Indexing, iteration 方法描述DataFrame.head([n])用于返回 DataFrame 的前几行 pandas.DataFrame.head pandas.DataFrame.head 是一个方法&#xff0c;用于返回 DataFrame 的前几行。这个方法非常有用&#xff0c;特别是在需要快速查看 DataFrame 的前…
阅读更多...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（1）：承上启下，继续上路

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（1）：承上启下，继续上路

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（1）：承上启下，继续上路 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）普通形（ふつうけい）と思います（２）辞書形ことができます（３）Vたことがあります。（４）Vた　とき　＆　Vる　とき3、单词（1）日语单词（2…
阅读更多...
码率自适应（ABR）相关论文阅读简报

码率自适应（ABR）相关论文阅读简报

标题&#xff1a;Quality Enhanced Multimedia Content Delivery for Mobile Cloud with Deep Reinforcement Learning 作者&#xff1a;Muhammad Saleem , Yasir Saleem, H. M. Shahzad Asif, and M. Saleem Mian 单位: 巴基斯坦拉合尔54890工程技术大学计算机科学与工程系 …
阅读更多...
汇编语言：指令详解

汇编语言：指令详解

零、前置知识 1、数据类型修饰符 名称解释byte一个字节&#xff0c;8bitword单字&#xff0c;占2个字节&#xff0c;16bitdword双字&#xff0c;占4个字节&#xff0c;32bitqword四字&#xff0c;占8个字节&#xff0c;64bit 2、关键词解释 ptr&#xff1a;它代表 pointer&a…
阅读更多...
蓝桥杯c ++笔记(含算法 贪心+动态规划+dp+进制转化+便利等)

蓝桥杯c ++笔记(含算法 贪心+动态规划+dp+进制转化+便利等)

蓝桥杯 #include <iostream> #include <vector> #include <algorithm> #include <string> using namespace std; //常使用的头文件动态规划 小蓝在黑板上连续写下从 11 到 20232023 之间所有的整数&#xff0c;得到了一个数字序列&#xff1a; S12345…
阅读更多...
【C++算法】54.链表_合并 K 个升序链表

【C++算法】54.链表_合并 K 个升序链表

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a; 题目链接&#xff1a; 23. 合并 K 个升序链表 题目描述&#xff1a; 解法 解法一&#xff1a;暴力解法 每个链表的平均长度为n&#xff0c;有k个链表&#xff0c;时间复杂度O(nk^2) 合并两个有序…
阅读更多...
Java中的注解技术讲解

Java中的注解技术讲解

Java中的注解&#xff08;Annotation&#xff09;是一种在代码中嵌入元数据的机制&#xff0c;不直接参与业务逻辑&#xff0c;而是为编译器、开发工具以及运行时提供额外的信息和指导。下面我们将由浅入深地讲解Java注解的概念、实现原理、各种应用场景&#xff0c;并通过代码…
阅读更多...
京东与喜茶关系破裂：切断所有合作 禁止进入办公场所

京东与喜茶关系破裂：切断所有合作 禁止进入办公场所

快科技4月10日消息&#xff0c;据报道&#xff0c;京东集团近日被曝出内部下发全员禁令&#xff0c;全面封杀喜茶产品进入办公区域。 据知情人士透露&#xff0c;京东人力行政部门发布的通知明确规定&#xff1a;全国各职场禁止与喜茶品牌开展任何形式的合作&#xff1b;员工不…
阅读更多...
最新文章

Copyright @ 2022~2023