【Qt】Qt Style Sheets (QSS) 指南：打造个性化用户界面

文章目录

  • 前言：
  • 1. QSS 选择器
  • 2. 子控件选择器（Sub-Controls）
    • 2.1. 示例：给 QComboBox 给下拉按钮加上图标
    • 2.2. 示例：修改进度条颜色
  • 3. 伪类选择器
    • 3.1. 代码示例: 设置按钮的伪类样式.
    • 3.2. 代码示例: 使用事件方式实现同样效果
  • 4. 样式属性
    • 4.1. 代码示例: 设置边框和内边距
    • 4.2. 代码示例: 设置外边距
  • 5. 控件样式示例
    • 5.1. 按钮
    • 5.2. 复选框
    • 5.3.输入框
    • 5.4. 列表
    • 5.5 菜单栏
  • 6. 登录界面
  • 总结：

前言：

在现代软件开发中，用户界面的美观性和交互性是至关重要的。Qt Style Sheets（QSS）作为一种强大的样式定制工具，为开发者提供了类似于CSS的样式设置机制，使得界面设计更加灵活和多样化。通过QSS，开发者可以轻松地为Qt应用程序中的控件定义外观和行为，从而创建出既美观又具有良好用户体验的界面。本文将详细介绍QSS的选择器、样式属性以及如何利用这些工具来定制各种控件的样式，最终通过一个登录界面的设计示例，展示QSS在实际开发中的应用。

1. QSS 选择器

QSS 的选择器支持以下几种：
在这里插入图片描述

 a.setStyleSheet("QPushButton { color : red; }");

这段代码中 QPushButton 就是 类型选择器了，QPushButton 也是 QWidget 的子类。

a.setStyleSheet(".QWidget { color : red; }");

这段代码中 .QWidget 是 类选择器，不会选中子类。

在开发中，期望不同的控件的样式不同，此时就需要使用 id 选择器了，因为 id 是唯一的。

// main.cpp
#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString style = "QPushButton { color: red; }";
    style += "#pushButton_2 { color: green; }";
    style += "#pushButton_3 { color: blue; }";

    a.setStyleSheet(style);

    Widget w;
    w.show();
    return a.exec();
}

在这里插入图片描述
此时当类型选择器 和 id选择器 选中同一个控件的时候，并且设置的样式是冲突的，此时，id选择器的优先级更高。

并集选择器：

QString style = "#pushButton_2, QLineEdit, QLabel{ color: red; }";

a.setStyleSheet(style);

在这里插入图片描述

2. 子控件选择器（Sub-Controls）

在这里插入图片描述

在这里插入图片描述

2.1. 示例：给 QComboBox 给下拉按钮加上图标

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString style = "QComboBox::down-arrow{ image: url(:/down.png)}";
    a.setStyleSheet(style);

    Widget w;
    w.show();
    return a.exec();
}

在这里插入图片描述

2.2. 示例：修改进度条颜色

 QProgressBar::chunk {background-color: #FF0000;

3. 伪类选择器

前面介绍的选择器，都是选中“控件”，伪类选择器，选中的控件的“状态”，“符合一定条件”的控件。
在这里插入图片描述
这些状态可以使用! 来取反. 比如 :!hover 就是鼠标离开控件时, :!pressed 就是鼠标松开时,
等等。
在这里插入图片描述

3.1. 代码示例: 设置按钮的伪类样式.

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString style = "QPushButton { color: red; }";
    style += "QPushButton:hover { color: green; }";
    style += "QPushButton:pressed { color: blue; }";
    a.setStyleSheet(style);

    Widget w;
    w.show();
    return a.exec();
}

在这里插入图片描述
上述代码也可以使用事件的方式来实现.

3.2. 代码示例: 使用事件方式实现同样效果

  1. 创建 MyPushButton 类, 继承自 QPushButton
    在这里插入图片描述
  2. 把生成代码中的构造函数改成带参数 QWidget* 版本的构造函数. (否则无法和 Qt Designer 生成的代码适配).
// mypushbutton.h
#include <QWidget>
#include <QPushButton>

class MyPushButton : public QPushButton
{
    Q_OBJECT
public:
    MyPushButton(QWidget* parent);
};

// mypushbutton.cpp
#include "mypushbutton.h"

MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{

}
  1. 在界面上创建按钮, 并提升为 MyPushButton 类型
    在这里插入图片描述
  2. 重写 MyPushButton 的四个事件处理函数
// mypushbutton.h
class MyPushButton : public QPushButton
{
    Q_OBJECT
public:
    MyPushButton(QWidget* parent);

    void mousePressEvent(QMouseEvent* e);
    void mouseReleaseEvent(QMouseEvent* e);
    void enterEvent(QEvent* e);
    void leaveEvent(QEvent* e);

};

// mypushbutton.cpp
#include "mypushbutton.h"

MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{
    this->setStyleSheet("QPushButton { color: red; }"); // 初始化值设为红色
}

void MyPushButton::mousePressEvent(QMouseEvent *e)  // 鼠标按下时设为蓝色
{
    this->setStyleSheet("QPushButton { color: blue; }");
}

void MyPushButton::mouseReleaseEvent(QMouseEvent *e) // 鼠标放开时还原为绿色
{
    this->setStyleSheet("QPushButton { color: green; }");
}

void MyPushButton::enterEvent(QEvent *e) // 鼠标进入时设为绿色
{
    this->setStyleSheet("QPushButton { color: green; }");
}

void MyPushButton::leaveEvent(QEvent *e) // 鼠标离开时还原为蓝色
{
    this->setStyleSheet("QPushButton {color: red; }");
}

4. 样式属性

QSS 中的样式属性非常多，不需要都记住，核心原则还是用到了就区查，大部分的属性和CSS是非常相似的。
box model 盒子模型， 来自于 CSS
在这里插入图片描述
Qt 中每个 widget 都是一个矩形
在这里插入图片描述
复合属性，比方说，margin 可以拆分成 4 个属性: margin-left、margin-right、margin-top、margin-bottom
margin: 10px; 四个方向都是 10px 的外边距
margin: 10px 20px; 上下是 10px, 左右是 20px
margin: 10px 20px 30px 40px; 上右下左(顺时针)
同样， padding 也是可以拆成 4 个属性：padding-left、padding-right、padding-top、padding-bottom

4.1. 代码示例: 设置边框和内边距

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString style = "QLabel { border: 5px solid red; padding-left: 10px;}";
    a.setStyleSheet(style);

    Widget w;
    w.show();
    return a.exec();
}

在这里插入图片描述

4.2. 代码示例: 设置外边距

#include "widget.h"
#include "ui_widget.h"

#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button = new QPushButton(this);
    button->setGeometry(0, 0, 100, 100);
    button->setText("按钮");
    button->setStyleSheet("QPushButton { border: 5px solid red; margin: 20px;}");

}

Widget::~Widget()
{
    delete ui;
}

在这里插入图片描述

5. 控件样式示例

5.1. 按钮

代码示例: 自定义按钮

QPushButton {
	font-size: 20px;  /*设置字体大小*/
	border: 2px solid rgb(138, 156, 255); /*设置边框*/
	border-radius: 10px;  /*设置圆角*/
	background-color: rgb(63, 127, 191); /*设置背景色*/
	color: rgb(255, 255, 255); /*设置字体颜色*/
}

QPushButton:pressed {
	background-color: rgb(255, 170, 0);
}

在这里插入图片描述

5.2. 复选框

代码示例：自定义复选框
在这里插入图片描述

QCheckBox {
	font-size: 30px;
}

QCheckBox::indicator { /*::indicator 子控件选择器，选中checkbox中的勾选的部分*/
	width: 30px;  /*设置子控件宽度，对于普通控件无效（普通控件使用geometry方式设定尺寸）*/
	height: 30px; /*设置子控件高度*/
}

QCheckBox::indicator:unchecked { /*:unchecked 伪类选择器，选中checkbox 未被选中的状态*/
	image:url(:/checkbox_unchecked.png);
}

QCheckBox::indicator:unchecked:hover { /*:hover 伪类选择器，选中鼠标移动上去的状态*/
	image:url(:/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed { /*:pressed 伪类选择器，选中鼠标按下的状态*/
	image:url(:/checkbox_unchecked_pressed.png)
}

QCheckBox::indicator:checked { /*:checked 伪类选择器，选中checkbox被选中的状态*/
	image:url(:/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover { 
	image:url(:/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
	image:url(:/checkbox_checked_pressed.png)
}

在这里插入图片描述

5.3.输入框

QLineEdit {
	border-width: 2px;
	border-color: rgb(0, 170, 255);
	border-style: solid;
	border-radius: 10px;
	padding-left: 10px;
	color: rgb(0, 85, 255);
	font-size: 24px;
	background-color:rgb(220, 220, 220);
	selection-color: rgb(0, 255, 127);
	selection-background-color: rgb(180, 100, 100);
}

QLineEdit:hover {
    border-color:rgb(0, 85, 255);
}

在这里插入图片描述

5.4. 列表

qlineargradient 设置渐变色(线性渐变)，此处要填写6个参数。
在这里插入图片描述

x1: 起点的横坐标
y1: 起点的纵坐标
这里的取值，是非常有限的，要么是0，要么是1
x2: 终点的横坐标
y2: 终点的纵坐标
从左到右的渐变： x1: 0、y1: 0、x2: 1、y2: 0
从上到下的渐变： x1: 0、y1: 0、x2: 0、y2: 1
对角线方向从左上到右下的渐变： x1: 0、y1: 0、x2: 1、y2: 1

QListView::item:hover {
 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
 stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListView::item:selected {
 border: 1px solid #6a6ea9;
 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
 stop: 0 #6a6ea9, stop: 1 #888dd9);
}

在这里插入图片描述

5.5 菜单栏

QMenuBar {
    background-color: #EDEDED; /* 背景颜色 */
    border: 1px solid #CCCCCC; /* 边框 */
    border-radius: 6px; /* 设置菜单栏圆角 */
	spacing: 3px; /*菜单项的间隔*/
}

QMenuBar::item {
    background-color: #dfdfdf; /* 每个菜单项的背景颜色 */
    padding: 4px 10px; /* 调整内边距 */
    margin: 0px;
    border-radius: 6px; /* 设置菜单项圆角 */
    border: 1px solid transparent; /* 清除边框，还可以保证文字不会错位 */
}


QMenuBar::item:selected {
	border: 1px solid #6a6a6a; /* 边框 */
    background-color: #D3D3D3; /* 选中菜单项的背景颜色 */
}

QMenu {
    background-color: #EDEDED; /* 下拉菜单背景颜色 */
    border: 1px solid #CCCCCC; /* 下拉菜单边框 */
	border-radius: 6px; /* 设置下拉菜单栏圆角 */
}

QMenu::item {
    background-color: transparent; /* 清除下拉菜单项的背景色 */
    border: 1px solid transparent; /* 清除边框，还可以保证文字不会错位 */
    padding: 4px 20px; /* 调整内边距 */
	border-radius: 6px; /* 设置下拉菜单项圆角 */
}

QMenu::item:selected {
    background-color: #D3D3D3; /* 选中下拉菜单项的背景颜色 */
	border: 1px solid #6a6a6a; /* 边框 */
    border-radius: 6px; /* 设置菜单项圆角 */
}

QMenu::separator {
	height: 2px;
	background-color: rgb(98, 98, 98);
	margin:2 5px;
}

在这里插入图片描述

6. 登录界面

基于上述学习过的 QSS 样式，制作一个美化板本的登录界面，

调整输入框高度
在这里插入图片描述
居中对齐
在这里插入图片描述
在这里插入图片描述
让一个窗口变的好看，其中最明显的一点就是设置背景。
直观想法，是直接给 QWidget 顶层窗口设置背景图，但是 Qt 中存在限制，直接给顶层窗口设置背景会失效。（原因暂时不可考）
可以给上述控件外头套上套一个和窗口一样大小的 QFrame 控件。也是 QWidget 的一个子类。

Qt 中设置背景图，除了background-image 之外,还有border-image 属性。
background-image ：固定大小。
border-image:通过这种方式设置的背景，会自动跟随控件的大小变化。

在这里插入图片描述
在这里插入图片描述

QFrame {
	border-image: url(:/background.jpg);
}

QLineEdit {
	border: 1px solid transparent;
	color: rgb(221, 221, 221);
 	background-color: #405361;
 	padding: 0 5px;
 	font-size: 20px;
 	border-style: none;
 	border-radius: 10px;
}

QLineEdit:focus {
    border: 1px solid rgb(85, 170, 255); /* 获取焦点时的边框颜色 */
}

QCheckBox {
	color: white;
	font-size: 18px
}

QPushButton {
	font-size: 20px;  /*设置字体大小*/
	border: 1px solid rgb(0, 170, 255); /*设置边框*/
	border-radius: 10px;  /*设置圆角*/
	background-color: rgb(63, 127, 191); /*设置背景色*/
	color: rgb(255, 255, 255); /*设置字体颜色*/
}

QPushButton:pressed {
	background-color:rgb(0, 121, 181);
}

在这里插入图片描述

总结：

  1. QSS 是什么，类似于 CSS 这样的一种设置样式的机制，
  2. QSS 基本用法
  3. 选择器的使用
  4. 子控件选择器
  5. 伪类选择器
  6. 盒子模型
  7. 代码例子，QSS 支持的样式属性值是很多的

通过本文的学习，我们了解到QSS是一种类似于CSS的样式设置机制，它允许开发者通过选择器来指定控件的样式，并使用丰富的样式属性来定制界面。本文首先介绍了QSS的基本选择器，包括类型选择器、类选择器、ID选择器和并集选择器，然后详细探讨了子控件选择器和伪类选择器的使用，这些选择器能够帮助开发者对控件的特定部分或状态进行精确的样式设置。接着，文章通过多个代码示例展示了如何使用QSS来设置边框、内边距、外边距等样式属性，以及如何为按钮、复选框、输入框、列表和菜单栏等常见控件定制样式。最后，通过一个登录界面的设计示例，我们看到了QSS在实际开发中的综合应用，如何通过背景设置、控件样式定制以及布局调整来创建一个既美观又实用的用户界面。通过本文的学习，开发者可以更加熟练地运用QSS来提升应用程序的界面设计，增强用户体验。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

超级羊毛！Splashtop SOS 远程软件免费用！

超级羊毛！Splashtop SOS 远程软件免费用！

​作为新时代的 IT 青年&#xff0c;您是否经常被亲朋好友、同事、客户们请求帮助解决各种电脑、手机问题&#xff1f;您是否需要一个免费好用的远程支持软件&#xff1f; 机会来了&#xff0c;我们现在免费送您一年专业商业远程支持软件——Splashtop SOS&#xff0c;价值990…
阅读更多...
计算病理学的视觉语言基础模型| 文献速递-视觉通用模型与疾病诊断

计算病理学的视觉语言基础模型| 文献速递-视觉通用模型与疾病诊断

Title 题目 A visual-language foundation model for computational pathology 计算病理学的视觉语言基础模型 01 文献速递介绍 数字病理学的快速普及和深度学习的进步使得可以开发出针对各种疾病和患者群体的各种病理学任务的强大模型。然而&#xff0c;由于医学领域标签…
阅读更多...
windows下 Qt 操作xlsx 和 csv

windows下 Qt 操作xlsx 和 csv

需求： 工作中遇到一个需求，有两张表格，一个xlsx表，一个csv表格，格式如下： 以csv表格中船台标识为基础，读取xlsx中的数据，如果存在该MMSI则把船名写道csv中对应船名的后面，不存在的话，则添加进csv中，合并两个表格。由于表格数据非常多，有十几万个，所以只能通过程序…
阅读更多...
ClickHouse内幕（1）数据存储与过滤机制

ClickHouse内幕（1）数据存储与过滤机制

本文主要讲述ClickHouse中的数据存储结构&#xff0c;包括文件组织结构和索引结构&#xff0c;以及建立在其基础上的数据过滤机制&#xff0c;从Part裁剪到Mark裁剪&#xff0c;最后到基于SIMD的行过滤机制。 数据过滤机制实质上是构建在数据存储格式之上的算法&#xff0c;所…
阅读更多...
GNN与Transformer创新结合！模型性能起飞！

GNN与Transformer创新结合！模型性能起飞！

前言 近年来&#xff0c;图神经网络&#xff08;GNN&#xff09;和Transformer模型分别凭借其独到的优势&#xff0c;在处理复杂数据结构和识别序列间的相互依赖性方面取得了突破性进展&#xff0c;这些优势使得GNN和Transformer的结合成为图表示学习领域的一个有前景的研究方…
阅读更多...
微信小程序实现图生图（AI动漫特效）效果代码（触站API）

微信小程序实现图生图（AI动漫特效）效果代码（触站API）

1.效果 触站AI图生图 2.本次用的是触站平台的API,我申请的适用积分，有水印（博主没钱）。如果需要没有水印的可以去买他们的资源包 3.首先我们需要去触站官网平台注册/登录账号（已注册可跳过该步骤） 4.开通API权限 我们可以在主页看到自己免费获取的500积分，用于接口调用…
阅读更多...
Echarts 中type是value的X轴在设置了interval间隔后没有展示

Echarts 中type是value的X轴在设置了interval间隔后没有展示

文章目录 问题分析问题 Echarts中type是value的X轴在设置了interval间隔后没有展示 分析 之前代码是这样写的：axisLabel 属性中设置了 interval ，但未起作用，原因如下 在 ECharts 中，interval 属性是用于类目型（category）轴的刻度间隔设置，并不适用于数值型（value）…
阅读更多...
2024会声会影激活码免费注册码大揭秘！

2024会声会影激活码免费注册码大揭秘！

在当今数字化时代&#xff0c;视频编辑已经成为了许多人日常生活和工作中不可或缺的一部分。无论是制作短视频、Vlog还是专业影视剪辑&#xff0c;一款优秀的视频编辑软件都能让我们事半功倍。而市面上众多的视频编辑软件中&#xff0c;会声会影无疑是备受瞩目的一款。本文将为…
阅读更多...
如何将华为Ascend手机的短信和联系人安全传输到电脑

如何将华为Ascend手机的短信和联系人安全传输到电脑

华为Ascend系列手机以其流畅的使用体验、光滑的触感以及轻巧的设计赢得了市场的青睐。不仅如此&#xff0c;Ascend系列手机还以亲民的价格和出色的用户体验&#xff0c;搭载了众多先进功能&#xff0c;如Ascend P6的4.7英寸大屏、海思四核处理器、2GB RAM和800万像素摄像头等。…
阅读更多...
3 - 大的国家（高频 SQL 50 题基础版)

3 - 大的国家（高频 SQL 50 题基础版)

3.大的国家 -- 查询属性&#xff1a;国家名称、人口和面积 select name,population,area fromWorld where area>3000000 OR population>25000000;
阅读更多...
【启明智显分享】Model3A 7寸彩屏应用于智能中控屏解决方案

【启明智显分享】Model3A 7寸彩屏应用于智能中控屏解决方案

比尔盖茨曾在出版的《未来之路》中预言&#xff1a;“在不远的未来&#xff0c;没有智能家居系统的住宅会像不能上网的住宅一样不合潮流”。随着5G时代的到来&#xff0c;国内十几万家企业竞逐智能家居的产业赛道。智能家居的风口已然到来&#xff0c;智能家居产品也不断进行升…
阅读更多...
图片如何修改尺寸？四种好用的修改图片尺寸方法！

图片如何修改尺寸？四种好用的修改图片尺寸方法！

图片如何修改尺寸&#xff1f;图片是一种常见的文件类型&#xff0c;它存在于什么生活的方方面面&#xff0c;虽然图片很好用&#xff0c;但是大家日常也要注意图片的尺寸&#xff0c;如果图片尺寸不对是会带来很多问题的&#xff0c;下面小编就举例说明几个问题&#xff0c;首…
阅读更多...
Android Studio 中文汉化教程

Android Studio 中文汉化教程

1. 中文语言包 一般jetbrains系列软件都可以使用“中文语言包”进行汉化&#xff0c;语言包如下图所示&#xff1a; 然而&#xff0c;Android Studio的Marketplace并没有类似的中文语言包&#xff08;如下图&#xff09;&#xff0c;经过查阅相关资料发现需要去jetbrains的插件…
阅读更多...
【C语言】结构体（及位段）

【C语言】结构体（及位段）

你好&#xff01;感谢支持孔乙己的新作&#xff0c;本文就结构体与大家分析我的思路。 希望能大佬们多多纠正及支持 &#xff01;&#xff01;&#xff01; 个人主页&#xff1a;爱摸鱼的孔乙己-CSDN博客 欢迎 互粉哦&#x1f648;&#x1f648;&#xff01; 目录 1. 声明结构…
阅读更多...
查看 samba 文件共享服务器地址的具体 IP

查看 samba 文件共享服务器地址的具体 IP

问题背景 在某个局域网中&#xff0c;已知 samba 文件共享服务器的地址如 \\samba_share在该局域网的子网中&#xff0c;由于 dns 服务器缺失&#xff0c;无法通过地址 \\samba_share 直接访问该服务器 解决方法 使用 ping 命令查看某个地址的 ip &#xff1a; ping [addre…
阅读更多...
【Java面试】十四、LinkedList相关

【Java面试】十四、LinkedList相关

文章目录 1、单向链表1.1 结构1.2 查询的时间复杂度1.3 插入删除的时间复杂度 2、双向链表2.1 时间复杂度 3、ArrayList和LinkedList的区别是什么 1、单向链表 1.1 结构 存储空间上&#xff0c;非连续链表的每个元素称结点Node每个结点包括两块&#xff1a;存储数据的数据域d…
阅读更多...
C++11标准-详解

C++11标准-详解

目录 1、列表初始化 2、隐式类型转换 1&#xff09;概念理解 2&#xff09;举例增进理解 3&#xff09;隐式与显式区别&#xff1f; a、直接初始化 vs 拷贝初始化 b、构造函数调用 c、语义上的差异 d、性能差异 4&#xff09;explicit 关键字 5&#xff09;多参数的隐…
阅读更多...
Python 组合序号

Python 组合序号

import pandas as pd # 创建一个示例数据框 data { group: [A, A, A, B, B, C, C, C, C], value: [3, 1, 2, 5, 4, 6, 9, 7, 8] } df pd.DataFrame(data) # 先按group分组&#xff0c;再按value列升序排序 df_sorted_asc df.sort_values(by[group, value]) # 使…
阅读更多...
Ansible自动化运维工具 playbook 剧本

Ansible自动化运维工具 playbook 剧本

一、Playbooks 1. playbooks 介绍 Playbooks&#xff08;剧本&#xff09;是一种用于定义自动化任务的文件&#xff0c;通常与诸如Ansible等工具相关联。它们以YAML格式编写&#xff0c;包含了一系列有组织的任务&#xff0c;这些任务可以在远程计算机上执行。一个Playbook通…
阅读更多...
如果小孩对什么也不感兴趣，只爱看手机和电脑 怎么办？怎样培养孩子兴趣？兴趣有哪些可以选择？如何快速找到定位小孩的兴趣？

如果小孩对什么也不感兴趣，只爱看手机和电脑 怎么办？怎样培养孩子兴趣？兴趣有哪些可以选择？如何快速找到定位小孩的兴趣？

自古到今&#xff0c;生存都很艰难&#xff01;不论是动物还是人 得看小孩兴趣&#xff0c;有些爱读书&#xff0c;有些爱踢球&#xff0c;就怕啥也不爱&#xff0c;只看手机和电脑的&#xff0c;想卷都没个方向。 特长&#xff1a;是你从60亿人中不一样的地方。突出才易于生…
阅读更多...
最新文章

Copyright @ 2022~2023