OfficeApp/subpkg/contractDetail/contractDetail.vue

<template>
  <view class="">
    <view class="item">
      <view class="title">公司基本信息</view>
      <view class="card">
        <view class="top">
          <view class="left">
            <image ></image>
            <view class="text">
              <view class="name">公司名称</view>
              <view class="code">社会代码000000</view>
            </view>
          </view>
          <view class="right">公司类型</view>
        </view>
        <view class="bottom"><uni-icons type="location"></uni-icons><text class="location">负责区域:泸州市江阳区通滩镇</text></view>
      </view>
    </view>
    <view class="item">
      <view class="title">
        <text>联系人管理</text>
        <view>新增</view>
      </view>
      <view class="card">
        <view class="one">
          <view class="linkman">主要联系人</view>
          <view class="info">
            <view class="info_item">姓名：张三三</view>
            <view class="info_item">职位：公司总经理</view>
            <view class="info_item">联系电话：0830-123456</view>
            <view class="info_item">邮箱：123456789@qq.com</view>
          </view>
        </view>
        <view style="height: 32rpx;"></view>
        <view class="one">
          <view class="linkman">其他联系人</view>
          <view class="info">
            <view class="info_item">姓名：张三三</view>
            <view class="info_item">职位：公司总经理</view>
            <view class="info_item">联系电话：0830-123456</view>
            <view class="info_item">邮箱：123456789@qq.com</view>
          </view>
        </view>
      </view>
    </view>
    <view class="item">
      <view class="title">资质信息</view>
      <view class="image_box">
        <image class="left"></image>
        <image class="right"></image>
      </view>
    </view>
    <view class="item">
      <view class="title">电子合同</view>
      <view class="card">
        <view class="one">
          <view class="linkman">签约公司名称</view>
          <view class="info">
            <view class="info_item">签约对象：被签约对象名称</view>
            <view class="info_item">合同类型：系统获取</view>
            <view class="info_item">合同编号：系统获取</view>
          </view>
        </view>
        <u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
        <view class="contract">
          <view class="left">
            <image class="contract_img" src="../../static/img/contract/contract.png"></image>
            <view class="text">
              <view class="name">《劳务派遣合同》</view>
              <view><text class="nickname">张郭郭</text><text>2023年01月01日</text></view>
            </view>
          </view>
          <view class="right" @click="naviTo('/subpkg/pdfView/pdfView?url=' + 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/1.pdf')">
            <!-- <image class="icon"></image> -->
            <uni-icons type="paperclip" color="#3274F9"></uni-icons>
            <view>查看</view>
          </view>
        </view>
      </view>
    </view>
    <button class="back_btn">返回</button>
    <button class="stop_btn">终止合同</button>
  </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">
.item{
  padding: 31.5rpx 28rpx;
  .title{
    margin-bottom: 21rpx;
    font-size: 35rpx;
    font-weight: 500;
    color: #333333;
    display: flex;
    justify-content: space-between;
  }
  .card{
    width: 694rpx;
    // height: 231rpx;
    padding: 28rpx;
    background: #FFFFFF;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top{
      display: flex;
      justify-content: space-between;
      .left{
        display: flex;
        image{
          width: 102rpx;
          height: 102rpx;
          margin-right: 28rpx;
          background: #CCCCCC;
          border-radius: 14rpx 14rpx 14rpx 14rpx;
          opacity: 1;
        }
        .text{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name{
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(0,0,0,0.8);
          }
          .code{
            font-size: 28rpx;
            font-weight: 400;
            color: #666666;
          }
        }
      }
      .right{
        font-size: 28rpx;
        font-weight: 500;
        color: #3274F9;
      }
    }
    .bottom{
      display: flex;
      align-items: center;
      color: #666666FF;
      margin-top: 32rpx;
      .location{
        margin-left: 28rpx;
      }
    }
    .one{
      .linkman{
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 28rpx;
      }
      .info{
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
        line-height: 45rpx;
      }
    }
    .contract{
      display: flex;
      justify-content: space-between;
      .left{
        display: flex;
        .contract_img{
          width: 102rpx;
          height: 102rpx;
          background: #F5F5F5;
          border-radius: 14rpx 14rpx 14rpx 14rpx;
          margin-right: 21rpx;
        }
        .text{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name{
            font-size: 32rpx;;
            font-weight: 500;
            color: rgba(0,0,0,0.8);
            line-height: 35rpx;
          }
          .nickname{
            margin-right: 35rpx;
          }
          text{
            height: 39rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #666666;
            line-height: 35rpx;
          }
        }
      }
      .right{
        font-size: 28rpx;
        font-weight: 500;
        color: #3274F9;
        line-height: 35rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon{
          width: 35rpx;
          height: 39rpx;
          background-color: #3274F9;
          opacity: 1;
          margin-right: 10rpx
        }
      }
    }
  }
  .image_box{
    display: flex;
    justify-content: space-between;
    .left{
      width: 224rpx;
      height: 319rpx;
      background: #FFFFFF;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
    }
    .right{
      width: 450rpx;
      height: 318rpx;
      background: #FFFFFF;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
    }
  }
}
.back_btn{
  width: 694rpx;
  height: 84rpx;
  background: #3274F9;
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 30rpx auto;
}
.stop_btn{
  width: 694rpx;
  height: 84rpx;
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3274F9;
  background-color: transparent;
  margin: 30rpx auto;
}
</style>