JiangningUrbanManageApp/sub-enterprise/company-surver/company-surver.vue

<template>
  <view class="container-main">
    <view class="list">
      <view class="list-item" v-for="(item, index) in list" :key="index">
        <view class="item-state" :class="'state' + item.state">
          {{ item.state == 0 ? "进行中" : "已结束" }}
        </view>
        <view class="item-data">
          <view class="data-main">
            <view class="data-title">{{ item.title }}</view>
            <view class="data-lable-value">
              <view class="row-item">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_shijian.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">发布时间:</view>
                </view>
                <view class="item-value">{{ item.time }}</view>
              </view>
              <view class="row-item">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_faburen.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">发布人:</view>
                </view>
                <view class="item-value">{{ item.userName }}</view>
              </view>
              <view class="row-item">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_danwei.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">发布单位:</view>
                </view>
                <view class="item-value">{{ item.Units }}</view>
              </view>
            </view>
          </view>
          <view class="data-btn" v-if="item.state == 0" @click="goForm()">
            我要填写
          </view>
        </view>
      </view>
      <u-divider
        color="#C4CCD8"
        half-width="0"
        bg-color="#F5F7FA"
        margin-top="60"
        >已经到底啦~</u-divider
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      list: [
        {
          title: "企业调查单1",
          time: "2022-12-29",
          userName: "张晓娟",
          Units: "辽宁市场监督管理局",
          state: 0,
        },
        {
          title: "问卷调查表数据 2",
          time: "2022-12-29",
          userName: "张晓娟",
          Units: "辽宁市场监督管理局",
          state: 1,
        },
      ],
    };
  },
  methods: {
    goForm() {
      uni.navigateTo({
        url: "/sub-enterprise/firm-form/firm-form",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body,
page {
  background: rgba(245, 247, 250, 1);
}

.list {
  padding: 30rpx 20rpx;

  .list-item {
    margin-bottom: 100rpx;
    position: relative;
  }

  .item-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 66rpx;
    line-height: 66rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    border-radius: 16rpx 16rpx 0 0;
    font-size: 28rpx;
    font-family: "PingFang SC-中黑体";
    font-weight: 500;
  }

  .state0 {
    background: linear-gradient(
      180deg,
      #bcd2ff 0%,
      rgba(206, 222, 255, 0) 100%
    );
    color: #3976f1;
  }

  .state1 {
    background: linear-gradient(
      180deg,
      #dce3ec 0%,
      rgba(206, 222, 255, 0) 100%
    );
    color: #9da2ab;
  }

  .item-data {
    position: relative;
    left: 0;
    top: 60rpx;
    z-index: 10;
    width: 100%;
    min-height: 100rpx;
    background: #fff;
    border-radius: 16rpx;

    .data-main {
      box-sizing: border-box;
      padding: 30rpx 37rpx;

      .data-title {
        font-size: 34rpx;
        font-weight: 600;
        color: #34373b;
        margin-bottom: 30rpx;
      }
    }

    .row-item {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;

      .item-lable {
        display: flex;
        align-items: center;
        min-width: 170rpx;

        .lable-icon {
          height: 26rpx;
          width: 26rpx;

          image {
            height: 100%;
            width: 100%;
            display: block;
          }
        }

        .lable-text {
          margin-left: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #9da2ab;
        }
      }

      .item-value {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #34373b;
      }
    }

    .data-lable-value {
      & > view:last-child {
        margin: 0;
      }
    }
  }

  .data-btn {
    border-top: 1px solid rgba(220, 227, 236, 1);
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #3976f1;
  }
}
</style>