xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(下拉菜单): 下拉菜单组件50%

Browse Source
This commit is contained in:
xuan
2022-09-28 19:15:47 +08:00
parent d00604b3f0
commit 47a13a4365
8 changed files with 241 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/saleStatistic/index.module.scss
+7 -367
View File
@@ -1,370 +1,10 @@
page {
background: #f7f7f7;
}
.mainBox {
.pussBox {
margin-top: 24px;
display: flex;
align-items: center;
.pussName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.pussPhone {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.total {
margin-top: 44px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 32px;
margin-bottom: 8px;
}
.productBox {
width: 702px;
background: #FFFFFF;
border-radius: 16px;
margin-left: 24px;
padding-bottom: 36px;
overflow: hidden;
.flexMoney {
display: flex;
margin-top: 32px;
align-items: center;
justify-content: space-between;
.flexTotalBox {
display: flex;
align-items: center;
.totalFont {
margin-left: 32px;
margin-right: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.tishi {
font-size: 28px;
}
}
.shoudPay {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F64861;
margin-right: 32px;
}
}
}
}
.defaltBox {
margin: 24px;
padding: 24px 32px 24px 24px;
background: #FFFFFF;
border-radius: 16px;
.titleBox {
width: 638px;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.modeName {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
}
}
.modeLine {
margin-top: 24px;
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
}
}
.goodsBox {
margin-top: 24px;
overflow: hidden;
border-bottom: 8px solid #F7F7F7;
.goodsProduct {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-left: 32px;
}
.goodsLine {
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
margin-left: 32px;
margin-top: 24px;
}
.itemGoods {
margin-top: 24px;
display: flex;
.itemPic {
margin-left: 32px;
margin-right: 42px;
width: 108px;
height: 108px;
background: #322F2F;
border-radius: 8px;
}
.itemRight {
padding-bottom: 24px;
width: 495px;
border-bottom: 1px solid #f7f7f7;
.item_right_top {
margin-bottom: 41px;
display: flex;
align-items: center;
justify-content: space-between;
.itemName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemNums {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.item_right_Bottom {
display: flex;
align-items: center;
justify-content: space-between;
.itemMoney {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemMoneyOne {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
.itemGoods:last-child {
margin-top: 24px;
display: flex;
.itemPic {
margin-left: 32px;
margin-right: 42px;
width: 108px;
height: 108px;
background: #322F2F;
border-radius: 8px;
}
.itemRight {
padding-bottom: 24px;
width: 495px;
border-bottom: none;
.item_right_top {
margin-bottom: 41px;
display: flex;
align-items: center;
justify-content: space-between;
.itemName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemNums {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.item_right_Bottom {
display: flex;
align-items: center;
justify-content: space-between;
.itemMoney {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemMoneyOne {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
}
.goodsBox:last-child {
border-bottom: none;
}
.detailBox {
.saleStatistic {
&--filterBar {
display: flex;
margin-top: 24px;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
justify-content: space-between;
.detailRightFlex {
display: flex;
align-items: center;
.detailRight {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.detailBtn {
margin-left: 16px;
width: 65px;
height: 32px;
border-radius: 8px;
border: 1PX solid #337FFF;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 32px;
}
}
.detailFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
width: 100%;
background-color: white;
}
}
.remarkFont {
margin-top: 24px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.safeBottom {
height: 300px;
}
.bottomBox {
display: flex;
justify-content: space-between;
align-items: center;
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
padding-bottom: 24px;
// position: relative;
.moreFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin-left: 48px;
}
.posssBox {
position: absolute;
left: 32px;
z-index: 99;
bottom: 170px;
// width: 120px;
padding: 24px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
.posssBox:after {
display: inline-block;
position: absolute;
bottom: -20px;
z-index: 88;
// left: 5px;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 20px;
border-color: #fff #fff transparent transparent;
transform: rotate(135deg);
box-shadow: 2px -2px 2px #ccc;
}
}
src/pages/saleStatistic/index.tsx
+27 -3
View File
@@ -1,7 +1,31 @@
import { View } from "@tarojs/components"
import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
import { View } from '@tarojs/components'
import { useState } from 'react'
import styles from './index.module.scss'
const saleStatistic = () => {
return <View>销售统计</View>
const [options, setOptions] = useState<DropDownOptions[]>([
{
text: 'name',
value: 0,
},
{
text: 'name1',
value: 1,
},
{
text: 'name2',
value: 2,
},
])
return (
<View className={styles.saleStatistic}>
<View className={styles['saleStatistic--filterBar']}>
<View>sdflkajsfdlk</View>
<DropDownItem title='name' activeColor='#337fff' options={options}></DropDownItem>
</View>
</View>
)
}
export default saleStatistic