h5
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
4.7 KiB

3 years ago
<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>