7 changed files with 213 additions and 12 deletions
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 总 --> |
|||
<view class="salary-total text-center flex flex-col justify-center text-white"> |
|||
<view class="salary-total-money">5000.00</view> |
|||
<view class="pt-2">实发金额(元)</view> |
|||
</view> |
|||
|
|||
<!-- 详细名目 --> |
|||
<view> |
|||
<view class="mt-3 px-4 bg-white"> |
|||
<view class="flex justify-between items-center h-48 font-bold border-bottom"> |
|||
<view>固定工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="text-gray-500"> |
|||
<view> |
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="px-4 text-gray-400"> |
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="mt-3 px-4 bg-white"> |
|||
<view class="flex justify-between items-center h-48 font-bold border-bottom"> |
|||
<view>固定工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="text-gray-500"> |
|||
<view> |
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="px-4 text-gray-400"> |
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48"> |
|||
<view>基本工资</view> |
|||
<view>5000</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
|
|||
<view class="flex justify-between items-center h-48 border-bottom"> |
|||
<view>基本工资</view> |
|||
<view><text>5000</text><u-icon class="m-1 text-gray-400" size="26" name="arrow-right" @click=""></u-icon></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 确认 --> |
|||
<view class="fixed bottom-0 px-6 flex justify-around items-center w-full border-top h-50 bg-white"> |
|||
<u-button class="salary-btn" @click="">对工资有疑问</u-button> |
|||
<u-button class="salary-btn" type="primary" @click="">确认</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding-bottom: 80px; |
|||
width: 100%; |
|||
background-color: #f3f3f3 !important; |
|||
|
|||
.border-bottom { |
|||
border-bottom: 1px solid #E5E7EB; |
|||
} |
|||
|
|||
.border-top { |
|||
border-top: 1px solid #E5E7EB; |
|||
} |
|||
} |
|||
|
|||
.salary-total { |
|||
height: 160px; |
|||
background-color: #40a9ff; |
|||
|
|||
.salary-total-money { |
|||
font-size: 40px; |
|||
} |
|||
} |
|||
|
|||
.salary-btn { |
|||
width: 47%; |
|||
height: 36px; |
|||
font-size: 16px; |
|||
|
|||
&:after { |
|||
border: 0; |
|||
} |
|||
|
|||
&:first-child { |
|||
color: #929292; |
|||
} |
|||
|
|||
&:last-child { |
|||
letter-spacing: 8px; |
|||
} |
|||
} |
|||
</style> |
Loading…
Reference in new issue