assessment-front/components/home/unfinishTestPopup.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.17"
    mode="center"
    bgColor="none"
    :zIndex="1000000"
  >
    <view class="popup__view">
      <view class="header">您还有未完成的题，是否继续答题？</view>
      <view class="flex flex-column content">
        <image class="icon" src="@/static/image/icon-unfinish.png" mode="widthFix"></image>
        <view>{{ `您还有${detail.unfinishCount}道题未完成` }}</view>
      </view>
      <view class="flex footer">
        <button class="btn" @click="close">取消</button>
        <button class="btn btn-primary" @click="onContinue">继续答题</button>
      </view>
    </view>
  </uv-popup>
</template>

<script>
  export default {
		data() {
			return {
        detail: {}
			}
		},
    methods: {
      open(data) {
        this.detail = data
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      onContinue() {
				uni.navigateTo({
					url: `/pages_order/test/answer?id=${this.detail.id}&current=${this.detail.current}`,
          success: () => {
            this.close()
          },
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .popup__view {
    padding: 60rpx 45rpx 53rpx 45rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
  }

  .header {
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
    color: #000000;
  }

  .content {
    padding: 90rpx 0 103rpx 0;
    row-gap: 24rpx;
    font-size: 28rpx;
    color: #999999;

    .icon {
      width: 120rpx;
    }
  }

  .footer {
    column-gap: 25rpx;
  }

  .btn {
    flex: 1;
    padding: 17rpx 0;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-size: 30rpx;
    line-height: 1.4;
    color: #014FA2;
    border: 3rpx solid #014FA2;
    border-radius: 40rpx;

    &-primary {
      color: #FFFFFF;
      background: #014FA2;
    }
  }
</style>