检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
如何自定义主题样式 AstroZero预置了很多默认样式，您可以对标准页面的主题样式进行自定义修改。 场景描述 自定义主题时，可以自定义修改标准页面的样式。设置完并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据
AstroZero预置了很多默认样式，供您选择使用，同时也支持对标准页面的主题样式进行自定义修改。自定义主题时，可以自定义修改标准页面的样式。设置完成并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置的为准。 自定义主题样式需要您熟悉CSS的Less代码编写规范，关于Less介绍，请参见Less介绍。
对接CSS提供云搜索服务 背景信息 云搜索服务（Cloud Search Service，简称CSS），为您提供托管的分布式搜索引擎服务，完全兼容开源Elasticsearch搜索引擎，支持结构化、非结构化文本的多条件检索、统计、报表。云搜索服务的使用流程和数据库类似，更多介绍请参见云搜索服务。
目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。 图3 目录结构 在本地编辑器中打开文件夹，把userLogin
对接CSS实现在应用中调用分布式搜索 云搜索服务（Cloud Search Service，简称CSS），为您提供托管的分布式搜索引擎服务，完全兼容开源Elasticsearch搜索引擎，支持结构化、非结构化文本的多条件检索、统计、报表。在AstroZero中，通过应用与CSS对接，实现云搜索服务功能。
性布局，又在“样式 > 布局”中选择了Block，最终这个“容器”组件中的布局为Block。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使
如果表格字段太多，无法正常显示，可以在页面的“样式代码”中，添加样式代码。请参考图2，输入以下样式代码。 .ivu-table-row td{ width:100px; } 如果当前“样式代码”为空，直接将此样式粘贴到“样式代码”中，保存页面即可。 如果在“样式代码”中，有较多样式，需要先找到表格所在的
图19 样式属性配置面板 在“样式 > 高级设置”面板中，可以直接编写CSS代码作用于当前元素。如图20所示，可以直接在“容器”组件的“高级设置”中，编写样式代码实现与图12相同的布局效果。 图20 自定义CSS代码实现图12组件居中效果 同一个组件如果在“基本属性”和“样式”中，
DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。
none"></div> 根据需要修改解压后的“Vue3Navigator_Widget.css”文件（本场景不需要修改）。 “Vue3Navigator_Widget.css”文件是Widget的样式文件，在该文件中编写Widget的css样式。 .navigator-widget-container
主题颜色：系统预置了很多主题供您选择。 图标：鼠标放在“图标”下的图片上，选择“更改”，上传新图片，可更改应用Logo，同时支持设置圆形图标和隐藏文字。 图2 设置图标 布局：选择“布局”中的样式（“菜单显示为左侧”等），在右侧“样式设置”区域设置布局参数，包括默认、鼠标悬浮、激活状态下应用顶部、应用标题、
开发者开发完应用后，支持修改应用导航框架的布局、元素和样式，来提升用户体验、增强应用的可用性和美观等。 设置应用的外观 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“设置”，进入应用设置页面。 图1 选择设置 在外观设置中，设置应用布局样式。 桌面端：设置应用在PC端显示的样式。
page3")}}</router-link> </div> 根据需要修改解压后的“Navigator_Widget.css”文件（本场景不需要修改）。 “Navigator_Widget.css”文件是Widget的样式文件，在该文件中编写Widget的css样式。 #navigator_widget {
DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。
高级设置：在高级设置中，直接编写CSS代码作用于当前元素。同一个组件如果在“基本属性”和“样式”中，同时对布局属性进行了设置，最终生效是“样式”栏中的设置。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定
端页面前，请先了解三者的区别。 标准页面主要适用于对样式要求相对简单的场景（如表单类应用），这种页面一般用于业务数据的增、删、改、查等基础功能，例如绩效管理、请假电子流、健康打卡、在线投票等。标准页面中的组件是基于Vue.js的通用基础组件，常用于管理端表格表单类的页面开发，如布局容器、数据容器、输入、显示、按钮等。
高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 父主题：
若上一步编译不成功，需要修改主题配置，修改主题配置需要单击“ON”禁用该主题，再单击。 界面化方式 在主题配置页签，单击“界面化新建”。 配置相关组件或者颜色、排版主题样式。 例如，修改按钮组件的样式，在左侧选择“组件 > 按钮”组件，在中间区域直接修改界面参数设置样式。 图2 修改界面参数设置样式
高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 父主题：
高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 父主题：
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
