Skip to content

Commit

Permalink
feat: grid 样式调整
Browse files Browse the repository at this point in the history
  • Loading branch information
weifang.jiagweifan committed Sep 19, 2024
1 parent e4c9202 commit 8bc9452
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 108 deletions.
72 changes: 38 additions & 34 deletions compiled/alipay/src/Grid/index.axml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,25 @@
></image-icon>
</slot>
</view>
<view class="ant-grid-item-title">
<slot
name="title"
value="{{item}}"
index="{{index}}"
>
{{item.title}}
</slot>
</view>
<view class="ant-grid-item-description">
<slot
name="description"
value="{{item}}"
index="{{index}}"
>
{{item.description}}
</slot>
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">
<slot
name="title"
value="{{item}}"
index="{{index}}"
>
{{item.title}}
</slot>
</view>
<view class="ant-grid-item-description">
<slot
name="description"
value="{{item}}"
index="{{index}}"
>
{{item.description}}
</slot>
</view>
</view>
</view>
</block>
Expand Down Expand Up @@ -84,23 +86,25 @@
></image-icon>
</slot>
</view>
<view class="ant-grid-item-title">
<slot
name="title"
value="{{item}}"
index="{{index}}"
>
{{item.title}}
</slot>
</view>
<view class="ant-grid-item-description">
<slot
name="description"
value="{{item}}"
index="{{index}}"
>
{{item.description}}
</slot>
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">
<slot
name="title"
value="{{item}}"
index="{{index}}"
>
{{item.title}}
</slot>
</view>
<view class="ant-grid-item-description">
<slot
name="description"
value="{{item}}"
index="{{index}}"
>
{{item.description}}
</slot>
</view>
</view>
</view>
</block>
Expand Down
27 changes: 19 additions & 8 deletions compiled/alipay/src/Grid/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,19 @@
text-align: left;
position: relative;
min-height: @icon-size;
padding-left: 80 * @rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
.@{gridPrefix}-item-info {
padding-left: 16 * @rpx;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.@{gridPrefix}-item-img,
.@{gridPrefix}-item-icon {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -63,6 +68,11 @@
margin-top: 0;
}
}
&-vertical {
.@{gridPrefix}-item-description {
padding-top: 4 * @rpx;
}
}
&-columns-scroll {
width: @columnsscroll-width;
}
Expand All @@ -80,9 +90,9 @@
}
}
&-title {
font-size: 26 * @rpx;
font-size: 30 * @rpx;
color: @title-color;
line-height: 37 * @rpx;
line-height: 42 * @rpx;
width: 100%;
margin-top: 16 * @rpx;
white-space: nowrap;
Expand All @@ -94,6 +104,7 @@
color: @description-color;
line-height: 33 * @rpx;
width: 100%;
padding-top: 4 * @rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
12 changes: 8 additions & 4 deletions compiled/wechat/src/Grid/index.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@
style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
></image-icon>
</view>
<view class="ant-grid-item-title">{{item.title}}</view>
<view class="ant-grid-item-description">{{item.description}}</view>
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">{{item.title}}</view>
<view class="ant-grid-item-description">{{item.description}}</view>
</view>
</view>
</block>
</view>
Expand Down Expand Up @@ -56,8 +58,10 @@
style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
></image-icon>
</view>
<view class="ant-grid-item-title">{{item.title}}</view>
<view class="ant-grid-item-description">{{item.description}}</view>
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">{{item.title}}</view>
<view class="ant-grid-item-description">{{item.description}}</view>
</view>
</view>
</block>
</view>
Expand Down
25 changes: 17 additions & 8 deletions compiled/wechat/src/Grid/index.wxss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,30 @@
text-align: left;
position: relative;
min-height: 28px;
padding-left: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
}
.ant-grid-item-horizontal .ant-grid-item-info {
padding-left: 8px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.ant-grid-item-horizontal .ant-grid-item-img,
.ant-grid-item-horizontal .ant-grid-item-icon {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.ant-grid-item-horizontal .ant-grid-item-title {
margin-top: 0;
}
.ant-grid-item-vertical .ant-grid-item-description {
padding-top: 2px;
}
.ant-grid-item-columns-scroll {
width: 65px;
}
Expand All @@ -87,9 +95,9 @@
height: 28px;
}
.ant-grid-item-title {
font-size: 13px;
font-size: 15px;
color: #333333;
line-height: 18.5px;
line-height: 21px;
width: 100%;
margin-top: 8px;
white-space: nowrap;
Expand All @@ -101,6 +109,7 @@
color: #999999;
line-height: 16.5px;
width: 100%;
padding-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
96 changes: 50 additions & 46 deletions src/Grid/index.axml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,31 @@
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-title">
<!-- #if ALIPAY -->
<slot
name="title"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.title }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-description">
<!-- #if ALIPAY -->
<slot
name="description"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.description }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">
<!-- #if ALIPAY -->
<slot
name="title"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.title }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-description">
<!-- #if ALIPAY -->
<slot
name="description"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.description }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
</view>
</view>
</block>
Expand Down Expand Up @@ -90,29 +92,31 @@
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-title">
<!-- #if ALIPAY -->
<slot
name="title"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.title }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-description">
<!-- #if ALIPAY -->
<slot
name="description"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.description }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
<view class="ant-grid-item-info">
<view class="ant-grid-item-title">
<!-- #if ALIPAY -->
<slot
name="title"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.title }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
<view class="ant-grid-item-description">
<!-- #if ALIPAY -->
<slot
name="description"
value="{{ item }}"
index="{{ index }}">
<!-- #endif -->
{{ item.description }}
<!-- #if ALIPAY -->
</slot>
<!-- #endif -->
</view>
</view>
</view>
</block>
Expand Down
27 changes: 19 additions & 8 deletions src/Grid/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,19 @@
text-align: left;
position: relative;
min-height: @icon-size;
padding-left: 80 * @rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
.@{gridPrefix}-item-info {
padding-left: 16 * @rpx;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.@{gridPrefix}-item-img,
.@{gridPrefix}-item-icon {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -63,6 +68,11 @@
margin-top: 0;
}
}
&-vertical {
.@{gridPrefix}-item-description {
padding-top: 4 * @rpx;
}
}
&-columns-scroll {
width: @columnsscroll-width;
}
Expand All @@ -80,9 +90,9 @@
}
}
&-title {
font-size: 26 * @rpx;
font-size: 30 * @rpx;
color: @title-color;
line-height: 37 * @rpx;
line-height: 42 * @rpx;
width: 100%;
margin-top: 16 * @rpx;
white-space: nowrap;
Expand All @@ -94,6 +104,7 @@
color: @description-color;
line-height: 33 * @rpx;
width: 100%;
padding-top: 4 * @rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down

0 comments on commit 8bc9452

Please sign in to comment.