OfficeApp/subpkg/contract/contract.vue

178 lines
3.8 KiB
Vue
Raw Normal View History

2023-07-20 13:48:26 +08:00
<template>
<view class="">
<view class="tabs">
<view class="left">
<view class="item active">合同列表</view>
<view class="item">已签订合同</view>
</view>
<view class="right">
<text>新增</text>
</view>
</view>
<view class="contract_list">
<view class="item">
<view class="top">
<image src="../../static/img/contract/contract.png"></image>
<view class="text">
<view class="name">
<text class="title">合同名称</text>
<text class="number">合同编号5464643423423</text>
</view>
<view class="date">
<text class="time">2023-04-27 2024-04-28 </text>
<text class="expire">365天后到期</text>
</view>
</view>
</view>
<u-line color="#999999FF"></u-line>
<view class="bottom">
<view class="left">已签订</view>
<!-- <view class="left red">已到期</view> -->
<button class="right" @click="naviTo('/subpkg/contractDetail/contractDetail')">详情</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {},
onShow() {},
methods: {
naviTo(url) {
url ?
uni.navigateTo({
url: url
}) : Toast('暂未开放')
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.tabs{
height: 112rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28rpx;
.left{
display: flex;
.item{
margin-right: 52.5rpx;
width: 175rpx;
height: 53rpx;
line-height: 53rpx;
text-align: center;
background-color: #F3F4F8FF;
border-radius: 35rpx 35rpx 35rpx 35rpx;
font-size: 28rpx;
font-weight: 400;
color: #999999;
}
.active{
background-color: #3274F9FF;
color: #FFFFFFFF;
}
}
.right{
font-size: 28rpx;
font-weight: 400;
color: #999999;
line-height: 0rpx;
-webkit-background-clip: text;
}
}
.contract_list{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 28rpx;
.item{
width: 694rpx;
height: 263rpx;
padding: 28rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.top{
display: flex;
image{
width: 87.6rpx;
height: 87.6rpx;
margin-right: 28rpx;
}
.text{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.name{
.title{
font-size: 32rpx;
font-weight: 400;
color: #333333;
margin-right: 17.5rpx;
}
.number{
font-size: 25rpx;
font-weight: 400;
color: #3274F9;
}
}
.date{
font-size: 25rpx;
font-weight: 400;
color: #F9AA32;
.time{
color: #CCCCCCFF;
margin-right: 10rpx;
}
}
}
}
.bottom{
display: flex;
justify-content: space-between;
.left{
font-size: 28rpx;
font-weight: 400;
color: #34A853;
}
.red{
color: #F02828FF;
}
.right{
width: 158rpx;
height: 53rpx;
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
border-radius: 26rpx 26rpx 26rpx 26rpx;
opacity: 1;
border: 2rpx solid #3274F9;
font-size: 28rpx;
font-weight: 400;
color: #3274F9;
}
}
}
}
</style>