【文档记录】支付宝小程序原生ACSS分享

简介: 【文档记录】支付宝小程序原生ACSS分享
CSS
复制代码
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
.a-page { min-height: 100vh; }
.a-input { display: inline-block; background-color: rgb(255, 255, 255); padding: 2px 5px; color: rgb(0, 0, 0); font-size: 17px; height: 25px; box-sizing: content-box; }
.a-input input:disabled { opacity: 0.4; }
.a-input-wrap { position: relative; text-overflow: inherit; border: 0px; height: 100%; width: auto; font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; background: inherit; padding: 0px; margin: 0px; outline: 0px; text-align: inherit; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.a-input-wrap form { height: inherit; }
.a-input-content, .a-input-placeholder { left: 0px; top: 0px; width: 100%; height: inherit; text-align: inherit; font-family: inherit; }
.a-input-content { border: 0px; font-size: inherit; font-weight: inherit; background: 0px 0px; display: inherit; padding: 0px; margin: 0px; outline: 0px; vertical-align: middle; text-overflow: inherit; -webkit-tap-highlight-color: transparent; position: relative; color: inherit; overflow: inherit; white-space: inherit; }
.a-input-placeholder { position: absolute; white-space: nowrap; overflow: hidden; color: rgb(204, 204, 204); display: flex; -webkit-box-align: center; place-items: center flex-start; user-select: none; }
.a-input-placeholder span { -webkit-box-flex: 1; flex: 1 1 0%; padding-left: 3px; }
.a-label { display: inline-block; line-height: 1.8; }
.a-lifestyle { display: flex; height: 56px; font-size: 16px; -webkit-box-align: center; align-items: center; background-color: rgb(255, 255, 255); }
.a-lifestyle-error.a-lifestyle { background-color: transparent; }
.a-lifestyle-loading { -webkit-box-pack: center; justify-content: center; }
.a-lifestyle-name-wrap { -webkit-box-flex: 1; flex: 1 1 0%; padding-left: 15px; display: flex; overflow: hidden; }
.a-lifestyle-btn.a-button { font-size: 12px; width: 39px; height: 24px; margin-top: 0px; margin-bottom: 0px; line-height: 24px; }
.a-lifestyle-name { line-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px; }
.a-lifestyle-icon { width: 34px; height: 34px; margin-right: 12px; }
.a-lifestyle-btn-wrap { padding-right: 15px; }
.a-lifestyle-btn.a-button-loading { width: 44px; }
.a-lifestyle-high { height: 71px; }
.a-lifestyle-high .a-lifestyle-icon { width: 41px; height: 41px; }
.a-lifestyle-high .a-lifestyle-name-wrap { -webkit-box-align: center; align-items: center; }
.a-lifestyle-high .a-lifestyle-memo { overflow: hidden; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 48px; justify-content: space-around; }
.a-lifestyle-high .a-lifestyle-name { line-height: 24px; color: rgb(0, 0, 0); font-size: 17px; font-weight: 700; }
.a-lifestyle-high .a-lifestyle-desc { font-size: 13px; line-height: 18px; color: rgb(153, 153, 153); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-lottie { width: 100px; height: 100px; overflow: hidden; }
.a-live-player[hidden], .a-live-pusher[hidden], .a-lottie[hidden], .a-movable-area[hidden], .a-movable-view[hidden], .a-switch.a-switch-android .checkbox::before { display: none; }
.a-live-player, .a-live-pusher { width: 300px; height: 225px; display: inline-block; line-height: 0; overflow: hidden; position: relative; background-color: rgb(0, 0, 0); }
.a-map { width: 100vw; height: 100vh; }
.a-movable-area, .a-movable-view { position: relative; width: 10px; height: 10px; }
.a-movable-view { display: inline-block; position: absolute; top: 0px; left: 0px; transform-origin: center center; }
.a-picker-view { display: flex; height: 238px; -webkit-box-align: center; align-items: center; }
.a-picker-view-picker { position: relative; height: 100%; overflow: hidden; width: 100%; -webkit-box-flex: 1; flex: 1 1 0%; text-align: center; }
.a-picker-view-picker-mask { position: absolute; left: 0px; top: 0px; height: 100%; margin: 0px auto; width: 100%; z-index: 3; background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background-position: center top, center bottom; background-size: 100% 102px; background-repeat: no-repeat; }
.a-picker-view-picker-content { position: absolute; left: 0px; top: 0px; width: 100%; z-index: 1; }
.a-picker-view-picker-item { touch-action: manipulation; text-align: center; font-size: 16px; height: 34px; line-height: 34px; color: rgb(0, 0, 0); white-space: nowrap; text-overflow: ellipsis; }
.a-picker-view-picker-indicator { box-sizing: border-box; width: 100%; height: 34px; position: absolute; left: 0px; top: 102px; z-index: 3; }
.a-picker-view-picker-indicator::after, .a-picker-view-picker-indicator::before { content: " "; position: absolute; left: 0px; right: 0px; height: 0px; transform: scaleY(0.5); }
.a-picker-view-picker-indicator::before { top: 0px; border-top: 1px solid rgb(229, 229, 229); transform-origin: 0px 0px; }
.a-picker-view-picker-indicator::after { bottom: 0px; border-bottom: 1px solid rgb(229, 229, 229); transform-origin: 0px 100%; }
.a-progress { display: flex; -webkit-box-align: center; align-items: center; }
.a-progress-container { -webkit-box-flex: 1; flex: 1 1 0%; }
.a-progress-outer { display: block; background-color: rgb(238, 238, 238); }
.a-progress-bar { height: 0px; border-bottom: 4px solid rgb(16, 142, 233); transition: all 0.3s linear 0s; }
.a-progress-info { margin-left: 10px; }
.a-radio { border-radius: 100vh; }
.a-radio-checked { border-width: 0px; }
.a-slider { display: flex; -webkit-box-align: center; align-items: center; }
.a-slider-wrapper { -webkit-box-flex: 1; flex: 1 1 0%; padding: 0px; }
.a-slider-content { position: relative; margin: 0px; padding: 10px 0px; }
.a-slider-rail { position: absolute; width: 100%; height: 2px; background-color: rgb(221, 221, 221); box-sizing: border-box; }
.a-slider-track { position: absolute; visibility: visible; left: 0px; height: 2px; border-radius: 2px; background-color: rgb(16, 142, 233); }
.a-slider-handle { position: absolute; margin-left: -12px; margin-top: -12px; width: 22px; height: 22px; cursor: pointer; border-radius: 100vh; border: 2px solid rgb(16, 142, 233); background-color: rgb(255, 255, 255); box-sizing: border-box; }
.a-slider-handle:active { background-color: rgb(64, 165, 237); box-shadow: rgb(64, 165, 237) 0px 0px 2px; }
.a-slider-disabled { opacity: 0.3; }
.a-slider-disabled .a-slider-track { height: 2px; }
.a-slider-disabled .a-slider-handle { cursor: not-allowed; box-shadow: none; }
.a-slider-presentation { min-width: 5px; font-size: 14px; color: rgb(153, 153, 153); margin-left: 8px; }
.a-slider-a11y-wrapper { position: relative; width: 100%; z-index: 1; opacity: 0.01; }
.a-slider-a11y-input, .a-switch input[type="checkbox"] { position: absolute; top: 0px; left: 0px; width: 100%; }
.a-swiper { position: relative; display: block; visibility: visible; overflow: hidden; width: 100%; height: 150px; box-sizing: border-box; }
.a-swiper-container { position: absolute; inset: 0px; }
.a-swiper-item, .a-swiper-slides { position: absolute; width: 100%; height: 100%; }
.a-swiper-slides { display: block; top: 0px; left: 0px; transition-timing-function: ease-out; }
.a-swiper-item { will-change: auto; box-sizing: border-box; overflow: hidden; }
.a-swiper-vertical .a-swiper-slides { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }
.a-swiper-indicator { position: absolute; bottom: 0px; height: 14px; width: 100%; text-align: center; -webkit-box-pack: center; justify-content: center; display: flex; transform: translate3d(0px, 0px, 0px); }
.a-swiper-dot { display: inline-block; zoom: 1; width: 4px; height: 3px; margin: 0px 2px; background: rgb(232, 232, 232); }
.a-swiper-dot-active { width: 11px; background: rgb(16, 142, 233); }
.a-switch, .a-switch .checkbox { box-sizing: border-box; z-index: 0; cursor: pointer; position: relative; }
.a-switch { display: inline-block; vertical-align: middle; align-self: center; }
.a-switch .checkbox { width: 51px; height: 31px; border-radius: 100vh; background: rgb(229, 229, 229); margin: 0px; padding: 0px; border: 0px; transition: all 300ms ease 0s; }
.a-switch .checkbox::after, .a-switch .checkbox::before { content: " "; height: 28px; border-radius: 100vh; background: rgb(255, 255, 255); position: absolute; left: 1px; top: 1px; transition: all 200ms ease 0s; }
.a-switch .checkbox::before { box-sizing: border-box; transform: scale(1); width: 48px; z-index: 1; }
.a-switch .checkbox::after { width: 28px; z-index: 2; transform: translateX(0px); box-shadow: rgba(0, 0, 0, 0.21) 2px 2px 4px; }
.a-switch .checkbox.checkbox-disabled { z-index: 3; }
.a-switch input[type="checkbox"] { opacity: 0; height: 100%; z-index: 2; border: 0px; }
.a-switch input[type="checkbox"]:checked + .checkbox, .a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox { background: rgb(16, 142, 233); }
.a-switch input[type="checkbox"]:checked + .checkbox::before, .a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox::before { transform: scale(0); }
.a-switch input[type="checkbox"]:checked + .checkbox::after { transform: translateX(20px); }
.a-switch input[type="checkbox"]:disabled + .checkbox { opacity: 0.3; }
.a-switch.a-switch-android .checkbox { width: 72px; height: 23px; border-radius: 3px; background: rgb(167, 170, 166); }
.a-switch.a-switch-android .checkbox::after { width: 35px; height: 21px; border-radius: 2px; box-shadow: none; left: 1px; top: 1px; }
.a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox::after { transform: translateX(35px); }
.a-text-space { white-space: pre-wrap; }
.a-text-no-space { white-space: pre-line; }
.a-textarea { position: relative; background-color: rgb(255, 255, 255); padding: 2px 5px; color: rgb(0, 0, 0); font-size: 17px; height: 42px; line-height: 1.4; }
.a-textarea-wrap { position: relative; height: 100%; width: inherit; line-height: inherit; font-family: inherit; min-height: inherit; }
.a-textarea-content, .a-textarea-placeholder { height: inherit; vertical-align: middle; text-align: inherit; }
.a-textarea-placeholder { inset: 0px 0px 0px 3px; word-break: break-all; overflow-wrap: break-word; position: absolute; overflow: hidden; color: rgb(204, 204, 204); }
.a-textarea-content { position: relative; line-height: inherit; min-height: inherit; width: 100%; font-size: inherit; font-weight: inherit; color: inherit; background: 0px 0px; display: inherit; border: 0px; padding: 0px; margin: 0px; outline: 0px; overflow: inherit; text-overflow: inherit; -webkit-tap-highlight-color: transparent; resize: none; z-index: 2; }
.a-textarea-show-count { padding-bottom: 16px; }
.a-textarea-count-wrap { position: absolute; bottom: 0px; right: 5px; color: rgb(178, 178, 178); font-size: 14px; margin: 0px; }
.a-video { width: 300px; height: 225px; position: relative; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; overflow: hidden; }
.a-video-poster { position: absolute; inset: 0px; width: 100%; height: 100%; background-image: url("https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; }
.a-video-play { z-index: 1; width: 50px; height: 50px; background-image: url("https://gw.alipayobjects.com/mdn/miniapp_de/afts/img/A*DBiWS4fIefQAAAAAAAAAAABkARQnAQ"); background-size: 50px 50px; }
.a-video-con, .a-video-wrap { position: absolute; inset: 0px; width: 100%; height: 100%; border-radius: inherit; }
.a-web-view-mini { width: 100%; height: 200px; }
.a-rtc-room { width: 100vw; height: 100vh; }
AvatarName
目录
相关文章
|
5月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
小程序 Java 关系型数据库
weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
本文介绍了一款大学生就业平台微信小程序的开发过程,涵盖开发环境、系统设计、实现与测试等方面。该小程序基于微信平台特性,采用MYSQL数据库存储数据,确保系统稳定与安全,同时满足学生、企业和管理员不同权限用户的功能需求。通过简化操作流程,实现了招聘信息查看、简历投递等实用功能,旨在为用户提供便捷高效的求职体验,符合“操作简单,功能实用”的设计理念。
|
6月前
|
小程序 Java 关系型数据库
weixin030英语学习交流平台小程序+ssm(文档+源码)_kaic
本文介绍了英语学习交流平台小程序的开发全过程,包括系统分析、设计与实现。该小程序基于Java的SSM框架进行后端管理开发,使用MySQL作为数据库,并借助微信开发者工具确保系统稳定性。小程序设有管理员和用户两个角色,功能涵盖个人中心、每日打卡、学习计划、论坛交流等,具有操作简单、界面清晰、功能齐全的特点。通过技术可行性、经济可行性和操作可行性分析,证明了系统的实用性和高效性,为英语学习者提供了一个便捷的交流平台。
|
5月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
8月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
244 1
|
11月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
11月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2837 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
11月前
|
JSON 数据可视化 小程序
uview/小程序可视化表单代码生成器文档
uview/小程序可视化表单代码生成器文档
149 0
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
514 0
|
存储 小程序 JavaScript

热门文章

最新文章