feat:测试页位置迁移,适配 tabbar

This commit is contained in:
2025-07-22 15:48:33 +08:00
parent bec8fa978e
commit 8921d1b871
10 changed files with 135 additions and 132 deletions
+1 -1
View File
@@ -3,7 +3,7 @@
"pages/index/index",
"pages/shape/index",
"pages/debug/debug",
"pages/shapePrint/index"
"demoPages/shapePrint/index"
],
"window": {},
"style": "v2",
@@ -1,92 +1,92 @@
.word-picker {
.word-picker-content {
padding: 28rpx;
background-color: #ffffff;
overflow: hidden;
}
.word-picker-title {
font-size: 32rpx;
color: #141414;
font-weight: bold;
text-align: center;
margin-bottom: 28rpx;
}
.word-picker-title {
font-size: 32rpx;
color: #141414;
font-weight: bold;
text-align: center;
margin-bottom: 28rpx;
}
.nav-class {
// background-color: red;
// width: 890rpx;
}
.nav-class {
// background-color: red;
// width: 890rpx;
}
.tab-class {
// width: 220rpx;
// flex-basis: auto !important;
// display: inline-block;
}
.tab-class {
// width: 220rpx;
// flex-basis: auto !important;
// display: inline-block;
}
.tab-active-class {
color: #93d333;
}
.tab-active-class {
color: #93d333;
}
.wrap-class {
margin-bottom: 28rpx;
// background-color: blue;
}
.wrap-class {
margin-bottom: 28rpx;
// background-color: blue;
}
.word-list-wrapper {
padding: 28rpx 0;
overflow-y: auto;
height: 500rpx;
.word-list-wrapper {
padding: 28rpx 0;
overflow-y: auto;
height: 500rpx;
.word-list {
display: grid;
grid-template-columns: repeat(6, 72rpx);
grid-template-rows: repeat(1, 72rpx);
gap: 40rpx;
.word-list {
display: grid;
grid-template-columns: repeat(6, 72rpx);
grid-template-rows: repeat(1, 72rpx);
gap: 40rpx;
justify-content: center;
// box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
// align-items: flex-start;
.word-item {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
background: rgba(240, 240, 240, 1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
// box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
// align-items: flex-start;
font-size: 28rpx;
color: #141414;
.word-item {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
background: rgba(240, 240, 240, 1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #141414;
&.selected {
background: rgb(147, 211, 51);
color: #ffffff;
box-shadow: 0px 2px 4px rgba(147, 211, 51, 0.15);
}
&.selected {
background: rgb(147, 211, 51);
color: #ffffff;
box-shadow: 0px 2px 4px rgba(147, 211, 51, 0.15);
}
}
.word-item-empty {
height: 28rpx;
width: 100%;
}
}
.selected-words {
padding: 28rpx;
font-size: 28rpx;
color: #141414;
.selected-words-text {
font-weight: bold;
color: #93d333;
}
.word-item-empty {
height: 28rpx;
width: 100%;
}
}
.btn-area {
display: flex;
justify-content: space-between;
margin-bottom: 96rpx;
padding: 0 28rpx;
.selected-words {
padding: 28rpx;
font-size: 28rpx;
color: #141414;
.selected-words-text {
font-weight: bold;
color: #93d333;
}
}
.btn-area {
display: flex;
justify-content: space-between;
// margin-bottom: 96rpx;
padding: 0 28rpx;
}
@@ -6,66 +6,69 @@
round
closeable="{{true}}"
close-on-click-overlay="{{true}}"
safe-area-inset-bottom="{{true}}"
safe-area-inset-bottom="{{false}}"
position="bottom"
custom-style="height: 70%"
custom-style="height:75%"
custom-class="word-picker">
<view class="word-picker-title">请选择文字</view>
<van-tabs
wx:if="{{show}}"
id="tabs"
animated
color="#93d333"
ellipsis="{{false}}"
line-width="90rpx"
nav-class="nav-class"
tab-class="tab-class"
wrap-class="wrap-class"
tab-active-class="tab-active-class"
swipeable="{{true}}"
active="{{currentTab}}"
bind:change="onTabChange">
<van-tab
wx:for="{{wordList}}"
wx:for-index="categoryIndex"
wx:key="categoryIndex"
title="{{wordList[categoryIndex].categoryName}}">
<view class="word-list-wrapper">
<view class="word-list">
<view
class="word-item {{wxs.isSelected(selectedWords, item) ? 'selected' : ''}}"
wx:for="{{wordList[categoryIndex].words}}"
wx:key="index"
data-word="{{item}}"
bind:tap="onWordClick">
<text class="word-item-text">{{item}}</text>
<!-- <text class="word-item-icon icon-success"></text> -->
<view class="word-picker-content">
<view class="word-picker-title">请选择文字</view>
<van-tabs
wx:if="{{show}}"
id="tabs"
animated
color="#93d333"
ellipsis="{{false}}"
line-width="90rpx"
nav-class="nav-class"
tab-class="tab-class"
wrap-class="wrap-class"
tab-active-class="tab-active-class"
swipeable="{{true}}"
active="{{currentTab}}"
bind:change="onTabChange">
<van-tab
wx:for="{{wordList}}"
wx:for-index="categoryIndex"
wx:key="categoryIndex"
title="{{wordList[categoryIndex].categoryName}}">
<view class="word-list-wrapper">
<view class="word-list">
<view
class="word-item {{wxs.isSelected(selectedWords, item) ? 'selected' : ''}}"
wx:for="{{wordList[categoryIndex].words}}"
wx:key="index"
data-word="{{item}}"
bind:tap="onWordClick">
<text class="word-item-text">{{item}}</text>
<!-- <text class="word-item-icon icon-success"></text> -->
</view>
</view>
<view class="word-item-empty"></view>
</view>
<view class="word-item-empty"></view>
</view>
</van-tab>
</van-tabs>
<view class="selected-words">
已选文字:
<text
class="selected-word-text"
wx:for="{{selectedWords}}"
wx:key="index"
>{{item}}{{index !== selectedWords.length - 1 ? '、' : ''}}</text
>
</view>
<view class="btn-area">
<toy-button type="primary" bind:click="onChange" width="400rpx">
(已选{{selectedWords.length}}个) 确定
</toy-button>
<toy-button
type="white"
bind:click="onClear"
width="210rpx"
icon="clear"
icon-class-prefix="toy-icon">
清空
</toy-button>
</van-tab>
</van-tabs>
<view class="selected-words">
已选文字:
<text
class="selected-word-text"
wx:for="{{selectedWords}}"
wx:key="index"
>{{item}}{{index !== selectedWords.length - 1 ? '、' :
''}}</text
>
</view>
<view class="btn-area">
<toy-button type="primary" bind:click="onChange" width="400rpx">
(已选{{selectedWords.length}}个) 确定
</toy-button>
<toy-button
type="white"
bind:click="onClear"
width="210rpx"
icon="clear"
icon-class-prefix="toy-icon">
清空
</toy-button>
</view>
</view>
</van-popup>
+1 -1
View File
@@ -79,6 +79,6 @@
clickable
data-name="shapePrint"
is-link
url="/pages/shapePrint/index" />
url="/demoPages/shapePrint/index" />
</van-cell-group>
</view>