2.修改tab的backMode模式样式

v2
king 1 year ago
parent 9d9506c66e
commit a43a0fabc2
  1. 21
      src/components/tabs/tabs.scss
  2. 3
      src/components/tabs/tabs.tsx
  3. 2
      src/pages/index/index.tsx
  4. 18
      src/pages/manage/courseAdmin/components/search.tsx
  5. 24
      src/pages/manage/courseAdmin/courseAdmin.module.scss

@ -44,14 +44,18 @@
width: 100%;
border-radius: 90rpx;
transition: background-color 300ms;
&:first-child{
padding: 16rpx 16rpx 16rpx 0;
}
.current {
&:last-child{
padding: 16rpx 0 16rpx 16rpx;
}
}
.sliding{
position: relative;
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #323635;
&:after {
position: absolute;
@ -69,6 +73,13 @@
transition: all 200ms;
}
}
.current {
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #323635;
}
}
@keyframes spread {

@ -23,6 +23,7 @@ interface TabsProps {
onChange?: (data: OnChangOpt) => void
backMode?: boolean // 块级模式
style?: CSSProperties
hiddenSliding?: boolean // 取消底部滑块
}
const Tabs: FC<TabsProps> = (opt) => {
@ -55,7 +56,7 @@ const Tabs: FC<TabsProps> = (opt) => {
<View className={'tabs-scroll ' + (opt.tabList.length < 5 ? 'justify-around' : '')}>
{opt.tabList.map((d, index) => <View
key={index}
className={'tabs-item ' + (is_current(d.value, index) ? 'current' : null)}
className={'tabs-item ' + (is_current(d.value, index) && 'current ') + (!opt.hiddenSliding && 'sliding')}
onClick={(event) => onChange(event, index, d)}>
{d.title}
</View>)}

@ -26,7 +26,7 @@ const Index: FC = () => {
<View className={styles.content}>
<NavigationBar
cancelBack
leftNode={<Tabs tabList={category} onChange={tabChange} current={categoryKey}/>}
leftNode={<Tabs tabList={category} onChange={tabChange} current={categoryKey} hiddenSliding/>}
backgroundColor={'transparent'}
/>
<VideoList

@ -1,12 +1,11 @@
import {FC, useCallback, useEffect, useState} from "react";
import {Image, Input, Radio, Text, View} from "@tarojs/components";
import {Input, Radio, View} from "@tarojs/components";
import styles from "../courseAdmin.module.scss";
import Icon from "@/components/icon";
import {CourseAllParam, curriculum} from "@/api";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import Empty from "@/components/empty/empty";
import MyButton from "@/components/button/MyButton";
import screen from '@/static/img/screen.png'
interface Props {
param: CourseAllParam
@ -70,17 +69,10 @@ export const Search: FC<Props> = ({param, setParam}) => {
})}
/>
</View>
<View onClick={() => setShow(true)}>
<Text></Text>
<Image src={screen}
mode='aspectFit'
style={{
display: 'inline-block',
width: '15px',
height: '15px',
verticalAlign: 'middle',
marginLeft: '5px'
}}/>
<View className='mt-3'>
<View onClick={() => setShow(true)} className={styles.select}>
</View>
</View>
</View>

@ -1,15 +1,17 @@
page {
background: #fff !important;
}
.searchBox {
background: #fff;
padding: 24rpx 30rpx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
position: sticky;
top: 0;
border-bottom: 1px solid #F5F8F7;
}
.searchInput {
width: 550rpx;
width: 100%;
height: 68rpx;
display: flex;
align-items: center;
@ -19,6 +21,20 @@
overflow: hidden;
}
.select{
width: 172rpx;
height: 56rpx;
background: #F6F6F6;
border-radius: 28rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #323635;
}
.radioBox {
border-bottom: 1px solid #F5F8F7;
padding: 20px 0;

Loading…
Cancel
Save