您的当前位置:首页正文

在vue项目中正确使用iconfont的方法

2023-12-07 来源:站点网
导读前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢?iconfont阿里巴巴矢量图标库将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标,此处我们选第三个ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot文件,小程序中则有

1、打开 iconFont官网 选择自己喜欢的图标,并且添加购物车

2、点击购物车,添加至项目

3、下载至本地

vue使用iconfont

4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件)

5、在main.js中引入iconfont.css样式

import './assets/iconfont/iconfont.css'

6、在在vue文件中引用<i class="iconfont

icon-zitigui-xianxing"></i>

7、假如报错,需要下载css-loader依赖包

npm install css-loader --save

以上这篇在vue项目中正确使用iconfont的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

详解mpvue小程序中怎么引入iconfont字体图标

前言

iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢?

iconfont阿里巴巴矢量图标库

将图标加入购物车

搜索关键词可以是中文也可以是英文

下载素材

点击网站右上角的购物车图标,此处我们选第三个

ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码

文件解压

一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot文件,小程序中则有自己的规则,此处我们留下css和ttf文件,关于怎么处理请继续阅读

方法一、本地引入

由于小程序不支持处理ttf/woff/eot等文件,~~我们必须将子图文件转为base64格式再引入,~~直接使用源文件会提示几种字体文件没有上传,导致打包上传后字体无法显示。将引入eot/ttf/svg的几行删除,在base64那一行前加上src即可。

ttf转base64(iconfont下载的文件已有base64转码,此步跳过)

transfonter

用stylesheet.css内容替换iconfont.css引入部分(上同

替换结果:

方法二、cdn引入

按项目需求,可选择cdn方式引入字体图标。优点:本地文件小;缺点:网络不好的情况下页面可能会暂时缺失图标。

在“我的项目”中,点击查看在线链接,:

将iconfont.css的@font-face部分换成之前复制的带有alicdn的代码。

引入css

App.vue style开头引入:

@import '../static/iconfont.css' // 若css在static中,要加..,不然会报错

使用字符图标

<i class="iconfont icon-fangdajing"></i>

注意事项

1.多个图标1次下载,也只需要一个ttf文件,同样的,如果有新增或修改的图标文件,需要全部下载1遍再转为base64,

2.强烈建议新建一个项目保存你的字体文件,永久记录且可编辑(缩放、旋转),项目入库在网站上方-图标管理-我的项目。

3.使用css预处理如scss的大体流程一样,就是将iconfont.css换为你的css预处理文件格式,在App.vue中引入

4.有问题或流程不清楚的欢迎反馈~

vue.js里面怎么引入font-icon

font-icon是用css来引入的 而vue.js是js框架 你应该在css中引入font-icon 在vue的html文件中引入css就可以了

vue的确认弹框加格式

vue的确认弹框加格式

亦有五星光耀辰

1。自定义确认框和提示框

根据传入的type来判断是确认框或提示框

<template>

<transition name="confirm-fade">

<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">

<div class="confirm-content-wrap" @click.stop>

<h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>

<p class="my-confirm-content">{{ content }}</p>

<div class="my-operation">

<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">

<p class="my-btn-text my-border-right">{{ cancelText }}</p>

</div>

<div class="confirm-btn" @click="clickFun('clickConfirm')">

<p class="my-btn-text">{{ confirmText }}</p>

</div>

</div>

</div>

</div>

</transition>

</template>

<script type="text/ecmascript-6">

export default {

data () {

return {

isShowConfirm: false, // 用于控制整个窗口的显示/隐藏

titleText: '操作提示', // 提示框标题

content: 'Say Something ...', // 提示框的内容

cancelText: '取消', // 取消按钮的文字

confirmText: '确认', // 确认按钮的文字

type: 'confirm', // 表明弹框的类型:confirm - 确认弹窗(有取消按钮);alert - 通知弹框(没有取消按钮)

outerData: null // 用于记录外部传进来的数据,也可以给外部监听userBehavior,事件的函数提供判断到底是哪个事件触发的

}

},

methods: {

show (content, config) {

this.content = content || 'Say Something ...'

if (Object.prototype.toString.call(config) === '[object Object]') {

// 确保用户传递的是一个对象

this.titleText = config.titleText || ''

this.cancelText = config.cancelText || '取消'

this.confirmText = config.confirmText || '确认'

this.type = config.type || 'confirm'

this.outerData = config.data || null

}

this.isShowConfirm = true

},

hidden () {

this.isShowConfirm = false

this.titleText = '操作提示'

this.cancelText = '取消'

this.confirmText = '确认'

this.type = 'confirm'

this.outerData = null

},

clickFun (type) {

this.$emit('userBehavior', type, this.outerData)

this.hidden()

}

}

}

</script>

<style scoped>

.my-confirm {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.5);

z-index: 998;

/* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */

-webkit-text-size-adjust: 100%;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

/* 进入和出去的动画 */

.confirm-fade-enter-active {

animation: opacity 0.3s;

}

.confirm-fade-enter-active .confirm-content-wrap {

animation: scale 0.3s;

}

.confirm-fade-leave-active {

animation: outOpacity 0.2s;

}

/* 包裹层容器样式 */

.confirm-content-wrap {

position: absolute;

top: 28%;

left: 0;

right: 0;

width: 280px;

margin: 0 auto;

background-color: #fff;

border-radius: 5px;

z-index: 999;

user-select: none;

}

/* 顶部标题部分 */

.my-confirm-title {

padding-top: 20px;

text-align: center;

font-size: 20px;

font-weight: 500;

color: #333;

}

/* 中间内容部分 */

.my-confirm-content {

padding: 0 15px;

padding-top: 20px;

margin-bottom: 32px;

text-align: center;

font-size: 16px;

color: #666;

line-height: 1.5;

}

/* 底部按钮样式 */

.my-operation {

display: flex;

border-top: 1px solid #eee;

}

.my-operation .my-cancel-btn, .confirm-btn {

flex: 1;

}

.my-operation .confirm-btn {

color: #ffb000;

}

.my-operation .my-btn-text {

text-align: center;

font-size: 16px;

margin: 8px 0;

padding: 6px 0;

}

/* 其他修饰样式 */

.my-border-right {

border-right: 1px solid #eee;

}

/* 进来的动画 */

@keyframes opacity {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes scale {

0% {

transform: scale(0);

}

60% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

/* 出去的动画 */

@keyframes outOpacity {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

}

</style>

调用:

(1)提示框的使用:

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>

……

//提示框

this.$refs.myDialog.show(content, {

type: 'alert',

confirmText: 'OK',

cancelText: '取消',

titleText: '',

data: null

})

效果:

(2)确认框:

this.$refs.myDialog.show('要兑换这个商品么?', {

type: 'confirm',

confirmText: '立即兑换',

cancelText: '不用了',

titleText: '',

data: {shop: shop, operate: 'exchange'}

})

效果:

当为确认框时的按键处理:changeData

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>

……

changeData (type, data) {

console.log('changeData',data)

if (type === 'clickConfirm') {

if (data.operate === 'exchange') {

// this.receEnergy(data.shop)

this.exchangeCoupon(data.shop)

} else if (data.operate === 'downLoad') {

window.location = data.url

} else if (data.operate === 'login') {

this.uplusApi.upVdnMole.goToPage({url: 'mpaas://usercenter'})

this.isLogin = false

}

}

},

补充:

点击空白页,关闭弹窗:

在最外层的div上,加上

@click.stop="clickFun('clickCancel')"

在它的内层div上加上

@click.stop

clickFun函数:

clickFun () {

// this.$emit('userBehavior', type, this.outerData)

this.hidden()

},

代码:

<template>

<transition name="confirm-fade">

<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">

<div class="confirm-content-wrap1" :style="{'width': osType=='ios'?'78%':'297px'}" @click.stop>

………………

</div>

</div>

</transition>

</template>

<script type="text/ecmascript-6">

export default {

name: "NoticeDialog",

data () {

return {

isShowConfirm: false, // 用于控制整个窗口的显示/隐藏

titleText: '天天收能量,福利享不停', // 提示框标题

content: 'Say Something ...', // 提示框的内容

outerData: null, // 用于记录外部传进来的数据,也可以给外部监听userBehavior

}

},

methods: {

……

hidden () {

this.isShowConfirm = false

this.titleText = '操作提示'

this.outerData = null

},

clickFun () {

this.hidden()

},

……

}

}

</script>

文章知识点与官方知识档案匹配

Vue入门技能树Node.js和npmNode安装与配置

22313 人正在系统学习中

打开CSDN,阅读体验更佳

Vue 自定义模态对话框弹窗_mossbaoo的博客_vue弹出模态...

Vue 自定义模态对话框弹窗 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template> <viewclass="app-container"> <modal-dialogshowText="确定要取消收藏吗?":isShowDialog="isDialog"@cancel="isDialog = false"@confirm="confir...

Vue3.0实现自定义Message提示框_林卤蛋的博客_vue3提示框

学习vue3.0的时候想到了,能不能自己写一个自定义的类似于element ui的this.$message的消息提示框,网上有很多是基于vue2.0的自定义提示框,那么我就来搞一个3.0版本的吧。 实现步骤 1. 创建MessageMain.vue <template><Transition name=...

vue-dialog:vue自定义弹窗组件(含回调)

具体参考博客:

使用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数。 首先写一个基本的弹窗样式,如上图所示。 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。 在打开弹窗的方法中赋值: openMask(){

ant-vue通知提醒框( Notification )实现自定义样式

需求:运用ant中通知提醒实现自定义的样式效果; 效果如下:点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h),我自己是用function(h)来实现的,想用vueNode的 可以去vue 官网去查看 相应的编码规范,function(h)的其中核心有点像广度遍历似的,大家可以先将要实现的代码先写出来之后再用function(h) 来实现 更高效: 我不知道怎么绑定指令,问我的狗子 他也不知道,真希望有高人指点一番!!! h( '页面标签

继续访问

vue封装带确定、取消按钮的弹窗和提示组件,可用promise回调

vue封装带确定和取消的全局弹窗组件,支持promise回调,任意组件之间调用方法

继续访问

vue2 确认框 MessageBox 弹框 删除确认取消

项目需要删除时弹出确认框 需求是项目完成80%时提出的 再添加弹出框的话 耗时耗力 所于是就有了封装好的弹窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码 第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去 ↓↓↓ 代码 ↓↓↓ /** * ********************** * @MessageBox { true } : 引入element的弹出框 * @confirmButtonTex

继续访问

Vue实现以按钮弹框动态控制Table列展示

点击设置弹出列数,并根据选择列进行展示: 点击勾选之后改变列表展示列 Html: <div id="app"> <template> <el-popover placement="right" width="800" trigger="click" style="margin-left:80%"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for

继续访问

vue项目自定义提示框

<!-- 弹框 --> <template> <div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox"> <div ref="showPopover" class="tipsClass animated"> <...

继续访问

Vue中的确认提示框

弹出确认框 this.$confirm("是否确认标记为作废?", "提示", { iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 showClose: true, //是否显示右上角关闭按钮 type: "warning", //提示类型 succes

继续访问

vue自定义弹窗

vue自定义弹窗

继续访问

vue自定义组件+Dialog 对话框组件定制弹出框教程(转载)

1、新建一个.vue页面,写一个Dialog组件、把弹出框上想要展示的内容放进去。 <template> <el-dialog title="新增标签" :visible.sync="centerDialogVisible" width="80%" center> <div> <!-- 这个div放置内容 --> </div> </el-dialog> </templat

继续访问

Vue 自定义一个全局弹框组件

前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全局组件,然后在页面上直接this.$popupMessage()调用 首先,需要创建一个vue文件来写我们的弹框样式,新建PopupMessage.vue <template> <div class="popup-message warning"> <div cl...

继续访问

vue实现按钮弹框【弹出图片、视频、表格、表单等】

vue实现弹框【弹视频、图片、表单、表格等】总之,你想弹啥就弹啥。一💫

继续访问

Vue实战篇八:实现弹出对话框进行交互

系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 Vue提高篇一:使用Vuex进行状态管理 Vue提高篇二:使用vue-router实现静态路由 Vue提高篇三:使用vue-router实现动态路由 Vue提高篇四:使用Element UI组件库 Vue提高篇五:使用Jest进行单元测试 Vue提高篇六

继续访问

运算符(逻辑或||)和(逻辑与&&)和括号的优先级

运算符(逻辑或||)和(逻辑与&&)和括号的优先级 首先他们的优先级为:括号 >(逻辑&&)>(逻辑或||) 来个例子: return a&&b||c // 根据a来判断,当a值为true,则返回b,当a值为false,则返回c return a||b&&c //根据优先级先算b&&c,然后在和a或(||), //如果b为false,那么b&&c返回false,此时相当于return a||false

继续访问

VUE:自己写一个消息提示弹框(类似element-ui的message)

项目中的3D模块操作时,需要提示用户的一些不正确操作,但是又想多一个不再提示的按钮。百度资料并仿照element-ui的message消息提示,写了一个组件方法,效果图如下。

继续访问

布尔操作符:逻辑或 (||)、逻辑与(&&)、逻辑非(!)

逻辑或 (||)、逻辑与(&&)、逻辑非(!) 逻辑非操作符遵循下列规则: “”、0、NaN、null、undefined 转换成布尔值是false,其余转换成布尔值为true。 逻辑非把前面的值取反即可; !取反操作;因为js有数据,数据有真假,所以可以进行转化取反; !!两个逻辑非操作符,就是直接将数据转换成布尔值; 逻辑或:

继续访问

Vue()-常用组件之自定义弹框layer

Vue利用layer进行自定义弹窗(依赖jquery和layer,不知道怎么引入的,看我之前的文章)

继续访问

vue 自定义弹框的用法

vue 自定义弹框的用法 一、$prompt 的用法 console.log('驳回的参数',list); this.$prompt('', '战败驳回原因', { inputType: 'textarea', confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /\S/, inputErrorMessage: '驳回原因不能为空',

继续访问

最新发布 Vue确认框和弹出框对比实现

Vue确认框和弹出框对比实现 如果是要有选择,使用确认框如果只是简单的提示,用弹出框。

继续访问

vue弹出自定义对话框

vue

css

写评论

回答于 2022-12-21

抢首赞

客如云餐饮管理系统价格-各类潮流单品,尽在淘宝热卖,快来选购!

客如云收银重装系统 变更账号 会员营销高级版 小程序2.0扫码点餐

¥299 元

客如云餐饮纯收银系统PC和安卓双端版 平板扫码点餐会员 外卖自配

¥999 元

客如云红云餐饮收银机一体机奶茶扫码点餐便利超市饭店烧烤水果称重触摸屏收款机点菜美团外卖接单机系统软件

¥1699 元

客如云收银机一体机超市餐饮收银机饭店收银机火锅店水果称重扫码点餐机美团外卖收银系统管理一体机 收款机

¥1699 元

收银系统软件酒吧称重茶饮扫码点餐母婴餐饮超市零售智能中餐快餐

¥150 元

simba.taobao.com广告

国际 学校北京诺德安达精英教育典范

诺德安达双语学校,中国国家课程与IBDP/A-level 项目结合,国际背景师资,高品质寄宿;国际 学校诺德安达双语学校,中国国家课程+A-level或IB项目,国际师资,寄宿走读均可

本月13人已申请相关服务

咨询

NORDANGLIAEDUCATIONLIMITED广告

更多专家

vue的确认弹框加格式

专家1对1在线解答问题

5分钟内响应 | 万名专业答主

马上提问

最美的花火 咨询一个电子数码问题,并发表了好评

lanqiuwangzi 咨询一个电子数码问题,并发表了好评

garlic 咨询一个电子数码问题,并发表了好评

188****8493 咨询一个电子数码问题,并发表了好评

篮球大图 咨询一个电子数码问题,并发表了好评

动物乐园 咨询一个电子数码问题,并发表了好评

AKA 咨询一个电子数码问题,并发表了好评

— 为你推荐更多精彩内容 —

用鸡翅做麻辣香锅,怎样处理鸡翅,肉嫩菜香炒一锅,吃不够呢?

视频回答

安然761

回答于 2022-11-09

49点赞0浏览

【洁净全屋】无线充电款吸尘器家用大吸力大功率小型家用强力室内

¥194.4 元¥194.4 元

购买

simba.taobao.com广告

海尔(Haier) 吸尘器家用卧式 大功率强劲吸力 多功能一键收线一键倒尘多重过滤吸尘机 HZW1207【中国红】

¥279 元¥279 元

购买

京东广告

网赌流水3000万被判十五年

视频回答

杜晓霞律师

回答于 2022-03-29

273点赞1,836浏览

陈凯歌不再隐瞒说出和倪萍两人分手的原因,很多网友并不买账,咋回事?

提到陈凯歌,我们第一个想到的应该是著名导演了吧,但是你能想象到一个这么有名气的导演,背后却有很多人在

娱人娱乐i

回答于 2022-08-22

1点赞3,361浏览

吸尘器吸尘-逛京东,爆款好物,新人专享!

值得一看的吸尘器相关信息推荐

北京京东世纪信息技术广告

梅德韦杰夫:新加入俄罗斯的领土可用核武器进行防御,背后透露了哪些信息?

在俄乌军事冲突期间,梅德韦杰夫作为现任俄罗斯联邦安全会议副,频繁高调露面让人难免会产生诸多联想,

毒舌酸果

回答于 2022-09-23

2点赞2评论

广西男子双色球中2.19亿捐500万,买了共计160元,这是什么运气?

广西男子双色球中了2.19亿捐了500万,买了总共计160元,这是什么运气?可以说他购买了160块钱

小白知识之窗

回答于 2022-10-26

2,894浏览3评论

批发吸尘器5500W业吸尘器酒店宾馆工厂缝隙干湿两用吸水大功率

¥2680 元¥2680 元

购买

1688广告

正在加载

全部

站点网还为您提供以下相关内容希望对您有帮助:

详解mpvue小程序中怎么引入iconfont字体图标

在“我的项目”中,点击查看在线链接,:将iconfont.css的@font-face部分换成之前复制的带有alicdn的代码。引入cssApp.vue style开头引入:@import '../static/iconfont.css' // 若css在static中,要加..,不然会报错使...

在vue里面怎样使用iconfont?

1、 首先用@font-face声明字体,表明字体的名称和位置;2、 设置font-family,确定在何种情况下使用该字体;3、 然后用CSS伪元素和unicode字符来控制要显示的内容。至于这些unicode字符,如果icon字体是你们设计师制作的,设计...

vue实现密码小眼睛的显示隐藏

&lt;text class="mis-uc-name iconfont icon-password mis-mg-t-10"&gt;&lt;/text&gt; &lt;text v-show="seen" @click="changeSeen" class="icon iconfont icon-open-your-eyes"&gt;&lt;/text&gt; &lt;text v-show="!seen" ...

阿里巴巴iconfont正确的使用方式是怎样的?

一、用某博号注册。当新手第一次登陆时,网站会提示你注册,你只需要按照网站的要求注册就可以了,这里对于国内设计师来说用某博号注册是非常便捷的事情,具体注册方式根据网站提示操作就行,非常简单。二、图标收藏暂存。当...

vanticon调整大小

使用本地字体文件 Icon 组件默认引用有赞 CDN 提供的字体文件,并通过网络下载。如果需要在项目中使用本地字体文件,请引入下面的 CSS 文件,并在项目中配置url-loader import 'vant/lib/icon/local.css';自定义图标 如果...

ant-design-pro中菜单图标/业务组件,iconfont的使用

来使用我们iconFont中的图标,如图:至此,可以将图标下方的type,如:icon-weixin,设置到路由中的icon上,即可设置成功。其中scriptUrl也是iconfont中的项目地址。将通用icon组件引入,设置type即可使用在iconfont项目中的图标。

Vue3.x引用iconfont.js ,报错error 'l' is assigned to itself no-self...

阿里巴巴图标symbol方式引用图标过程中,导入iconfont.js,出现如下错误,原因是禁止自身赋值:因为项目是通过 vue create hello-world创建的,当时选择了默认的包含了基本的 Babel + ESLint 设置的 preset,所以ESlint是通过...

通过在vue项目中引入noVNC远程桌面的方法步骤有哪些

有两种引入方式,一是,直接下载源码到自己的项目中,此方式一些问题下面进行详细介绍;git clone git://github.com/novnc/noVNC二是,如果采用了webpack的方式,可以使用npm进行安装依赖,更方便。npm install @novnc/novnc...

阿里巴巴iconfont正确的使用方式是什么?

具体使用方法如下:1.首先在I阿里巴巴iconfont矢量图标库这个页面上把你需要的相应图标随后就会点击购物车按钮加入暂存架;2.其次就是选择完你所需要所有要用的图标后,这时你就需要给它命名。然后你还要在图标管理所...

uniapp解决iconfont图标的unicode编码动态显示的问题

在vue中可以使用v-html去动态解析iconfont码,但是uniapp的小程序端 就很尴尬了,不支持,所以我们要使用第二种方案了 欢迎各位大神点赞

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top