更新组件演示页面,方便用户直接使用组件,去除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:
JaylenTech
2022-02-08 19:55:15 +08:00
parent 043ee3f585
commit 946bb52c03
94 changed files with 6296 additions and 4727 deletions

View File

@@ -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>