最美前端
文章平均质量分 60
前端美化
Bruce小鬼
**高级测试开发**
- 技术是在不断打磨中成长,
- 能力是在不断采坑中成熟,
- 技术人的路就是在采坑中寻找乐趣,在成长过程中不断成熟。
> 书山有路勤为径,学海无涯苦作舟
关注:brucelong.blog.csdn.net
展开
-
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态文章目录P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态1.概述2.mock接口返回token2.1.mock调用guid返回token2.2.mockjs官网guid方法3.配置store管理token3.1.新建user文件3.2.index.js导入user.js3.3.user内容4.登录和登出配置4.1.Login组件4.2.登出清除token和路由5.配置路由守卫5.1.配置路由拦截器6.登录和登出效果7.优化菜单原创 2021-02-22 16:29:05 · 1529 阅读 · 0 评论 -
P21-Vue3后台管理系统-权限管理-权限管理实现
P21-Vue3后台管理系统-权限管理-权限管理实现1.概述这篇文章介绍通过动态路由实现权限管理2.路由配置思想我们首先对项目进行分析将路由做个分类,分为动态路由和静态路由。需要权限管理的菜单路由分配到动态路由不需要权限管理的菜单分配到静态路由2.1.动静路由配置动态路由配置思想动态路由配置效果import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 导入组件con原创 2021-02-22 14:43:11 · 2079 阅读 · 0 评论 -
P20-Vue3后台管理系统-权限管理-权限管理思路
P20-Vue3后台管理系统-权限管理-权限管理思路1.概述这篇文章进入一个新的领域,介绍权限管理实现思想。根据用户的权限级别返回不同的菜单。实现思路动态路由后端返回的数据格式有要求,需要返回用户可访问菜单路由地址触发时机登陆成功的时候触发操作Cookie中存在对应数据,⾸次进⼊⻚⾯时2.权限接口数据2.1.权限接口结构permission.js文件mock数据,根据不同用户返回不同菜单index.js文件接收前端请求。2.2.permission.js文件内原创 2021-02-20 19:28:08 · 2899 阅读 · 1 评论 -
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户1.概述这篇文章介绍新增用户和查询用户功能开发2.新增用户2.1.新增用户实现逻辑1.点击新建按钮绑定新增用户方法2.新增用户方法中调用form弹框控件3.在form弹框控件中调用confirm方法,该方法调用新增用户接口。2.2.新增用户效果3.根据姓名搜索用户3.1.搜索用户逻辑点击搜索后,将搜索用户名称作为查询条件传给查询用户数据接口,该接口返回符合条件的数据3.2.搜索用户效果4.新增用户原创 2021-02-20 17:39:32 · 2999 阅读 · 0 评论 -
P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作
P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作1.概述这篇文章介绍用户管理界面表格的编辑和删除操作。2.编辑操作实现2.1.CommonTable向父组件发送操作事件2.2.UserManage父组件接收子组件事件2.3.父组件输出操作表格的行数据3.封装弹出框组件当在表格上点击编辑后,需要弹出一个form表单的弹出框来修改数据。下面封装这个弹出框组件实现编辑功能。3.1.查看Element官网提供弹框组件3.2.创建dialog弹窗在UserMana原创 2021-02-20 16:01:20 · 3191 阅读 · 2 评论 -
P17-Vue3后台管理系统-用户管理界面-分页功能开发
P17-Vue3后台管理系统-用户管理界面-分页功能开发1.概述这篇文章介绍用户管理界面的分页功能实现。2.实现分页功能2.1.查看Element官网提供分页插件2.2.绑定当前页事件2.3.父组件监听子组件的事件UserManage父组件监听CommonTable子组件发送的事件,并处理事件返回对应结果给子组件。UserManage父组件监听子组件事件打印子组件事件发送的页数绑定getList方法请求当前页的数据分页效果3.优化table表格列宽Comm原创 2021-02-19 19:31:57 · 1185 阅读 · 0 评论 -
P16-Vue3后台管理系统-用户管理界面-Loading加载功能开发
P16-Vue3后台管理系统-用户管理界面-Loading加载功能开发1.概述这篇文章介绍用户管理页面的Loadding加载功能的实现。2.表格添加Loading功能在用户管理界面的表格上添加一个区域Loading加载效果,当表格请求数据过程中显示Loading加载效果,请求数据完成后关闭Loading加载效果。2.1.查看Element提供的Loading组件2.2.使用Loading组件模板在CommonTable组件的table标签上添加v-loading属性,实现Loadi原创 2021-02-19 17:37:20 · 1612 阅读 · 0 评论 -
P15-Vue3后台管理系统-用户管理界面-table表格封装
P15-Vue3后台管理系统-用户管理界面-table表格封装1.概述这篇文章继续介绍用户管理界面,在这篇文章中完成table表格封装2.新建表格组件2.1.新建CommonTable组件2.2.注册子组件在UserManage组件中注册CommonTable子组件...原创 2021-02-19 10:58:05 · 1860 阅读 · 1 评论 -
P14-Vue3后台管理系统-用户管理界面-form表单封装
P14-Vue3后台管理系统-用户管理界面-form表单封装1.概述这篇文章开始我们来介绍用户管理界面的开发,首先介绍用户管理界面的form表单开发。2.接口数据用户管理界面展示的数据是请求接口,由接口返回数据。这里我们通过mock模拟接口返回的用户管理界面数。2.1.index.js内容import Mock from 'mockjs'import homeApi from './home'import userApi from './user'// 设置mock响应时间为20原创 2021-02-17 16:05:00 · 1665 阅读 · 0 评论 -
P13-Vue3后台管理系统-Echart组件样式优化
P13-Vue3后台管理系统-Echart组件样式优化文章目录P13-Vue3后台管理系统-Echart组件样式优化1.概述2.柱状图&饼状图2.1.添加没有坐标轴数2.2.Home组件添加柱状图&饼状图数据2.3.Home父组件传递数据给子组件2.4.柱状图&饼状图效果展示3.图表样式优化3.1.美化图表颜色3.2.坐标轴添加颜色3.3.设置x轴文字颜色3.4.设置图例颜色3.5.设置提示信息3.6.设置饼图颜色和提示信息3.7.调整图表布局位置3.8.调整图表自适应浏览器窗口大原创 2021-02-17 09:41:55 · 1120 阅读 · 0 评论 -
P12-Vue3后台管理系统-Echart组件介绍
P12-Vue3后台管理系统-Echart组件介绍1.概述这篇文章开始我们将介绍Echart的使用。什么是Echart使用Echart步骤封装Echart思想2.Echart封装思想2.1.安装Echart# 进入到项目根路径cd vue-manage-system# 安装Echartyarn add echarts -S2.2.Echart介绍Echart官网https://echarts.apache.org/zh/index.htmlEchart入门官原创 2021-02-15 20:53:02 · 903 阅读 · 0 评论 -
P11-Vue3后台管理系统-开发首页table部分内容
P11-Vue3后台管理系统-开发首页table部分内容1.概述这篇文章我们介绍首页左侧下部table内容的开发。2.首页左侧table开发2.1.首页mock数据在mock文件夹下的home.js文件中配置了首页的mock数据模板。下面是home.js文件mock数据。import Mock from 'mockjs'// 图表数据let List = []export default { getStatisticalData: () => { for (l原创 2021-02-10 21:13:10 · 802 阅读 · 0 评论 -
P10-Vue3后台管理系统-开发首页图标外的内容
P10-Vue3后台管理系统-开发首页图标外的内容1.概述上篇文章完成了首页的布局,这篇文章开发首页图标外的内容。2.首页左侧用户信息我们先开发首页左侧上面card内容,该内容由两块内容构成。用户头像和昵称用户登录信息2.1.新增用户信息在Home.vue组件中添加用户信息和登录信息HTML内容,用户的头像是从data数据中动态获取。2.2.设置用户信息样式2.3.用户信息效果3.设置首页右侧数据区域3.1.添加数据区域内容数据区域的内容放到data中,原创 2021-02-10 18:29:16 · 736 阅读 · 0 评论 -
P9-Vue3后台管理系统-Element实现首页布局
P9-Vue3后台管理系统-Element实现首页布局文章目录P9-Vue3后台管理系统-Element实现首页布局1.概述2.首页布局介绍2.1.首页布局分析2.2.首页布局结构设计2.3.首页样式结构设计3.左侧空间布局3.1. 复制Element官网card代码3.2. 应用到Home.vue组件中4.右侧空间布局4.1.右侧全局布局4.2.数据区域布局5.设置首页样式5.1.设置首页右侧数据区域5.2.设置首页右侧折线图和graph图样式5.3.设置首页左侧布局样式6.首页布局和样式完整代码6.1原创 2021-02-09 16:30:19 · 1371 阅读 · 0 评论 -
P8-Vue3后台管理系统-mock与axios安装配置
P8-Vue3后台管理系统-mock与axios安装配置文章目录P8-Vue3后台管理系统-mock与axios安装配置1.概述2.安装mock与axios2.1.mock介绍2.2.安装mock与axios3.axios全局配置3.1.新建axios配置文件3.2.挂载axios到Vue实例4.Mock配置4.1.新建mock配置文件4.2.查看官网mock基础使用说明4.3.mock全局配置4.4.配置首页mock内容4.5.配置首页mock接口4.6.Home.vue请求mock接口4.7.查看Mo原创 2021-02-09 13:16:25 · 1006 阅读 · 0 评论 -
P7-Vue3后台管理系统-页面布局整体样式优化
P7-Vue3后台管理系统-页面布局整体样式优化文章目录P7-Vue3后台管理系统-页面布局整体样式优化1.概述2.优化CommonAside组件样式3.优化CommonHeader组件样式3.1.调整面包屑背景色4.优化CommonTab组件样式4.1.改变Tag标签主题样式4.2.改变Tag标签鼠标样式5.折叠导航栏面板5.1. 配置vuex管理导航栏是否折叠5.2.配置CommonHeader组件触发导航栏折叠事件5.3.配置CommonAside组件获取isCollapse值决定是否折叠导航栏5.原创 2021-02-08 19:03:16 · 1662 阅读 · 0 评论 -
P6-Vue3后台管理系统-构建业务组件连通公共组件
P6-Vue3后台管理系统-构建业务组件连通公共组件1.概述这篇文章我们将创建业务模块,并且与公共组件进行连通。2.构建业务模块2.1.构建Home2.2.构建VideoManage2.3.构建UserManage2.4.构建Other3.构建业务组件路由在router下的index.js文件配置业务路由映射关系表import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//原创 2021-02-08 17:09:40 · 1018 阅读 · 0 评论 -
P5-Vue3后台管理系统-vuex切换tab页
P5-Vue3后台管理系统-vuex切换tab页文章目录P5-Vue3后台管理系统-vuex切换tab页1.概述2.添加tab标签页2.1.新建CommonTab组件2.2.Main.vue引入CommonTab组件2.3.创建Tag标签2.4.设置tag标签样式3.vuex切换tab页3.1.vuex添加两个方法管理tab页3.2.CommonTab组件使用vuex管理的tag3.3.设置tag标签为home时不可关闭3.4.CommonTab组件完整代码1.概述这篇文章添加一个tab标签实现快速原创 2021-02-08 15:03:12 · 1638 阅读 · 1 评论 -
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑1.概述上篇文章实现了左侧边栏导航,这篇文章我们开发顶部导航。2.顶部导航栏设置2.1.设置导航栏背景色在Main.vue组建中设置Header导航栏背景色2.1.Header添加按钮官网中找到Button按钮–图标按钮–复制图标按钮代码应用到CommonHeader组件中官网搜索图标替换按钮默认图标2.2.添加头像下拉菜单Element官网找到点击触发下拉菜单复制点击触发下拉菜单代码应原创 2021-02-07 18:15:57 · 4578 阅读 · 0 评论 -
P3-Vue3后台管理系统-路由设计及左侧公用导航栏开发
P3-Vue3后台管理系统-路由设计及左侧公用导航栏开发1.概述这篇文章介绍项目的路由设计,和左侧导航栏开发。2.安装配置Element组件库2.1.安装Element# 1.进入到项目根路径cd .\base-learn\# 2.执行安装命令- 使用yarn包管理器安装,如果是npm包安装可以查看官网安装介绍- -S表示开发和生产环境都使用yarn add element-ui -S2.2.引用Element在Element官网复制Element模块在项目的main原创 2021-02-07 13:59:27 · 2076 阅读 · 1 评论 -
P2-Vue3后台管理系统-配置scss全局变量
P2-Vue3后台管理系统-配置scss全局变量1.概述将项目中重复使用的内容配置成全局变量,当需要改变内容时候只需要改变全局变量,不需要在代码中修改。2.配置scss全局变量2.1.新建scss文件夹scss文件夹管理所有scss文件,全局变量都配置到scss文件中。2.2.新建第一个全局配置文件在scss文件夹下新建 _variable.scss ⽂件,并配置全局变量。引入样式重置文件样式重置文件内容html, body, div, span, applet,原创 2021-02-05 16:03:47 · 1131 阅读 · 0 评论 -
P1-Vue3后台管理系统-创建&配置项目
P1-Vue3后台管理系统-创建&配置项目文章目录P1-Vue3后台管理系统-创建&配置项目1.概述2.创建项目2.1.创建Vue32.2.手动配置插件2.3.选择hash路由2.4.选择代码校验规范3.项目结构配置3.1.创建配置文件3.2.启动项目3.3.配置ESLint格式化3.4.初始化项目3.5.启动项目1.概述这篇文章开始进入一个新的专栏,这个专栏将介绍如何创建一个Web端后台管理系统2.创建项目2.1.创建Vue3# 创建vue3vue create vue-原创 2021-02-05 14:47:26 · 1272 阅读 · 1 评论 -
P5-VUE3-Element组件库-Form表单组件
P5-VUE3-Element组件库-Form表单组件1.概述这篇文章介绍Element组件库的Form表单,在项目中使用非常广泛。2.新建组件新建组件配置组件路由3.Form表单使用官网Form表单介绍3.1.Form表单基本使用复制官网表单代码应用到Form.vue<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item原创 2021-02-05 11:36:20 · 1295 阅读 · 0 评论 -
P4-VUE3-Element组件库-表格组件
P4-VUE3-Element组件库-表格组件1.概述这篇文章继续介绍Element组件库的表格组件,在开发中表格也是常用内容。2.创建组件2.1.新建Table.vue2.2.配置组件路由2.3.创建组件效果展示3.表格组件3.1.表格基本使用复制官网表格HTML部分内容复制官网表格JS部分内容应用Table.vue<template> <div> <el-table :data="tableData" st原创 2021-02-04 19:08:49 · 1973 阅读 · 0 评论 -
P3-VUE3-Element组件库-弹出类型组件
P3-VUE3-Element组件库-弹出类型组件1.概述2.创建Pop组件首先创建一个组件来使用Element的弹出组件,这个组件就是Pop.vue在element文件夹下新建Pop.vue组件配置Pop组件路由import Vue from 'vue'import VueRouter from 'vue-router'// 挂载router到vue实例Vue.use(VueRouter)// 导入组件模块const Layout = () => import(原创 2021-02-04 15:53:55 · 1124 阅读 · 0 评论 -
P2-VUE3-初次使用Element组件库-Layout和Container布局
P2-VUE3-初次使用Element组件库-Layout和Container布局1.概述Element是一个快速布局组件库,我们可以使用它提供的组件库快速构建项目布局和各个组件样式。无需重复造轮子,就像搭积木一样搭建一个项目。2.Element组件Element组件官网:https://element.eleme.cn/#/zh-CN/component/installation2.1.安装Element组件第一步需要我们在项目中安装Element组件库,才能使用它提供的组件。# 1原创 2021-02-04 14:56:43 · 3965 阅读 · 0 评论 -
P1-VUE3-UI方式创建项目
P1-VUE3-UI方式创建项目1.概述这篇文章开始进入一个新的领域,这个领域就是ElementUI专栏,从这里起航入手界面控件布局。2.UI方式创建VUE3项目2.1.前提条件使用UI界面创建VUE3项目前提条件1.本地已安装node,输入node -v 可查看到版本号2.本地已安装vue-cli3,输入vue -V 可查看到版本号3.本地已安装yarn包管理器,安装命令:npm install -g yarn如果未配置好环境可以查看VUE【构建vue项目】专栏中有完整介绍v原创 2021-02-04 11:33:51 · 749 阅读 · 0 评论 -
P91-前端基础高级布局flex-弹性元素属性介绍
P91-前端基础高级布局flex-弹性元素属性介绍1.概述这篇文章介绍弹性布局中的弹性元素属性2.弹性元素属性介绍2.1.自动增长元素宽度小于弹性容器宽度,设置自动增长系数会填满弹性容器空白空间<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>弹性元素的样式</title> <style> * { m原创 2021-02-03 14:24:13 · 731 阅读 · 0 评论 -
P90-前端基础高级布局flex-弹性容器属性介绍
P90-前端基础高级布局flex-弹性容器属性介绍文章目录P90-前端基础高级布局flex-弹性容器属性介绍1.概述2.弹性容器属性介绍2.1.设置弹性元素是否自动换行2.2.设置分配主轴上的空白空间2.3.设置元素在弹性容器辅轴对齐方式2.4.覆盖当前弹性元素上的align-items2.5.设置元素在弹性容器辅轴空白空间的分布3.弹性容器属性设置完整代码1.概述这篇文章介绍弹性容器盒中弹性容器相关属性设置,帮助我们完成各种页面布局需求2.弹性容器属性介绍2.1.设置弹性元素是否自动换行原创 2021-02-03 12:03:57 · 740 阅读 · 0 评论 -
P89-前端基础高级布局flex-弹性盒布局导航栏练习
P89-前端基础高级布局flex-弹性盒布局导航栏练习1.概述我们使用新学习的布局方式来做个导航栏,弹性盒导航栏。体验下弹性盒的优点2.弹性盒布局导航栏2.1.未开启弹性盒代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>弹性盒导航栏</title> <link rel="stylesheet" href="css/reset.c原创 2021-02-02 20:46:27 · 1105 阅读 · 0 评论 -
P88-前端基础高级布局flex-弹性盒介绍
P88-前端基础高级布局flex-弹性盒介绍1.概述前面我们布局通常使用的方式是 浮动+定位。浮动会有一些负面作用,比如父元素高度塌陷,下面我们介绍一个新的布局方式替代浮动。flex(弹性盒、伸缩盒)是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变弹性容器要使用弹性盒,必须先将一个元素设置为弹性容器我们通过 display 来设置弹性容器display:flex 设置为块级弹性容器displa原创 2021-02-02 20:31:39 · 689 阅读 · 0 评论 -
P87-前端基础Less-语法介绍父元素&扩展&函数
P87-前端基础Less-语法介绍父元素&扩展&函数1.概述这篇文章介绍一些Less入门常用的语法2.案例结构2.1.html文件内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Less语法</title> <!-- 引用less预编译后的css文件 --> <link rel原创 2021-02-02 19:28:00 · 1562 阅读 · 0 评论 -
P86-前端基础Less-介绍
P86-前端基础Less-介绍1.概述这篇文章开始介绍CSS的增强版Less,less在使用上比CSS要简介效率更高。less是一门css的预处理语言less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性:像对变量的支持、对mixin的支持… …less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行2.CSS变量在介原创 2021-02-02 16:02:10 · 639 阅读 · 0 评论 -
P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数:scaleX() 水平方向缩放scaleY() 垂直方向缩放scaleZ() Z方向缩放scale() 双方向的缩放2.缩放2.1.缩放代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>缩放</title></head>原创 2021-02-02 10:04:48 · 966 阅读 · 0 评论 -
P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习。知识点:元素设置透明效果设置3d变形效果设置动画旋转2. 3D复仇者联盟2.1.3D复仇者联盟图片2.2.3D复仇者联盟代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>3D复仇者联盟</title&原创 2021-02-01 19:36:50 · 1033 阅读 · 0 评论 -
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习1.概述这篇文章通过一个奔跑的少年练习动画效果2.奔跑的小子2.1.奔跑的小子图片2.2.奔跑的小子代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>奔跑的少年</title> <style> .box { /* 设置单个图片的宽高 *原创 2021-01-31 19:38:52 · 866 阅读 · 0 评论 -
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表。2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转。在这个案例中我们通过拆分步骤介绍如何制作钟表。2.1.表针末端旋转原理旋转动画<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表</title>原创 2021-01-31 19:08:20 · 880 阅读 · 0 评论 -
P81-前端基础动画效果-动画旋转
P81-前端基础动画效果-动画旋转1.概述我们继续介绍CSS动画,这篇主要介绍是动画旋转效果。动画的旋转和上篇介绍的Z轴平移使用步骤是一样的。2.动画旋转动画效果的介绍风格与前面的一样,先给出基础内容的代码。后面将每个效果代码单独介绍。通过旋转可以使元素沿着x y 或 z旋转指定的角度rotateX()rotateY()rotateZ()旋转的单位有三种:px:像素deg:角度turn:圈2.1.动画旋转基础代码动画Z轴旋转<!DOCTYPE原创 2021-01-31 15:57:17 · 1708 阅读 · 0 评论 -
P80-前端基础动画效果-Z轴可视距离调整效果
P80-前端基础动画效果-Z轴可视距离调整效果1.概述z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距2.Z轴移动设置Z轴移动有两个步骤设置网页初始可视距离:设置html的perspective来初始化可视距离设置Z轴移动距离: 设置Z轴移动距离,transform: translateZ(100px)<!DOCTYPE htm原创 2021-01-30 21:04:59 · 814 阅读 · 0 评论 -
P79-前端基础动画效果-变形平移
P79-前端基础动画效果-变形平移1.概述这篇文章介绍水平和垂直平移动画效果变形就是指通过CSS来改变元素的形状或位置变形不会影响到页面的布局,当前元素的变形不会影响相邻元素布局位置。transform 用来设置元素的变形效果平移:平移元素,百分比是相对于自身计算的translateX() 沿着x轴方向平移translateY() 沿着y轴方向平移translateZ() 沿着z轴方向平移2.变形平移2.1.在元素大小确定下设置居中效果当元素宽和高是固定的情况下,我们原创 2021-01-30 20:51:06 · 669 阅读 · 0 评论