mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-13 02:53:59 +08:00
更新组件演示页面,方便用户直接使用组件,去除tn-button的默认背景色,tn-avatar修改参数默认值,修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug,tn-badge修改参数默认值,tn-collapse-item修复背景颜色失效问题,滚动通知移除默认背景颜色和字体大小,tn-count-down修复时间单位不正确问题,列表组件修复背景颜色问题,tn-nav-bar返回按钮修改为可进行修改的图标,tn-step添加点击步骤进行跳转,tn-loading修复默认激活颜色出错问题,tn-tag移除默认背景颜色,优化阴影大小css
This commit is contained in:
@@ -129,7 +129,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl">
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -160,6 +160,41 @@
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">课程</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">精选</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">播放</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
@@ -644,4 +679,53 @@
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user