refactor(tailwind.config.js): 禁用部分Tailwind CSS类以解决微信小程序兼容性问题 为了解决微信小程序中的兼容性问题,禁用了以下Tailwind CSS类: - `gap`:微信小程序不支持 gap 属性- `lineClamp`:微信小程序不支持 line-clamp 类 - `textIndent`:禁用 text-indent - `writingMode`:禁用 writing-mode - `hyphens`:禁用 hyphens ```
104 lines
2.0 KiB
SCSS
104 lines
2.0 KiB
SCSS
/* ./src/index.css */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
page{
|
|
background-color: #f5f5f5;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: bottom;
|
|
}
|
|
|
|
/* 在全局样式文件中添加 */
|
|
button {
|
|
&::after {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
/* 去掉 Grid 组件的边框 */
|
|
.no-border-grid {
|
|
.nut-grid-item {
|
|
border: none !important;
|
|
border-right: none !important;
|
|
border-bottom: none !important;
|
|
|
|
&::after {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.nut-grid {
|
|
border: none !important;
|
|
|
|
&::after {
|
|
border: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 微信授权按钮的特殊样式 */
|
|
button[open-type="getPhoneNumber"] {
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
line-height: inherit !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
button[open-type="chooseAvatar"] {
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
line-height: inherit !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.buy-btn{
|
|
height: 70px;
|
|
background: linear-gradient(to bottom, #1cd98a, #24ca94);
|
|
border-radius: 100px;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.cart-icon{
|
|
background: linear-gradient(to bottom, #bbe094, #4ee265);
|
|
border-radius: 100px 0 0 100px;
|
|
height: 70px;
|
|
}
|
|
.cart-add{
|
|
background: #e9fff2;
|
|
color: #333333;
|
|
border-radius: 20px 0 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80px;
|
|
}
|
|
.cart-buy{
|
|
background: linear-gradient(-45deg, #1fbfa2, #94e0ce);
|
|
color: #ffffff;
|
|
border-radius: 0 20px 20px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
image {
|
|
margin: 0; /* 全局设置图片的 margin */
|
|
}
|
|
|
|
/* 管理员面板功能项交互效果 */
|
|
.admin-feature-item {
|
|
transition: transform 0.15s ease-in-out;
|
|
}
|
|
|
|
.admin-feature-item:active {
|
|
transform: scale(0.95);
|
|
}
|