feat: 每日一练弹窗；体验结束弹窗

src/components/answer-complete-pop/index.vue

 <template>
+  <!-- 合格/不合格弹窗 -->
   <u-popup
     border-radius="24"
     v-model="visible"

src/components/daily-pop/index.vue

+<template>
+  <!-- 每日一练完成弹窗 -->
+  <u-popup
+    border-radius="24"
+    v-model="visible"
+    safe-area-inset-bottom
+    mode="center"
+    width="654rpx"
+    :mask-close-able="false"
+  >
+    <view class="pop-view">
+      <image
+        mode="widthFix"
+        class="top-image-view"
+        :src="xunzhangImage"
+      ></image>
+      <view class="pop-main">
+        <image
+          mode="widthFix"
+          class="image-view"
+          :src="backgroundImage"
+        ></image>
+        <view class="head-view">
+          <view class="pop-title">
+            <text>每日一练已完成</text>
+          </view>
+          <view class="pop-message">
+            <text>您已经累计打卡</text>
+          </view>
+        </view>
+        <view class="pop-content">
+          <view class="list-view">
+            <view>{{ count }}</view>
+            <view class="label-view">天</view>
+          </view>
+        </view>
+        <view class="pop-btn-view">
+          <u-button
+            :custom-style="customStyleCancel"
+            hover-class="none"
+            shape="circle"
+            @click="handleClickCancel"
+          >
+            查看记录
+          </u-button>
+          <u-button
+            :custom-style="customStyleSave"
+            shape="circle"
+            type="primary"
+            @click="handleClickSure"
+          >
+            继续练习
+          </u-button>
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    backgroundImage() {
+      return process.uniEnv.qn_base_url + 'lianxibeijing.png'
+    },
+    xunzhangImage() {
+      return process.uniEnv.qn_base_url + 'xunzhang.png'
+    },
+    customStyleCancel() {
+      return {
+        width: '264rpx',
+        height: '96rpx',
+        color: '#9EA5BB',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+        backgroundColor: 'transparent',
+      }
+    },
+    customStyleSave() {
+      return {
+        backgroundColor: '#2953FF',
+        width: '264rpx',
+        height: '96rpx',
+        color: '#ffffff',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+      }
+    },
+  },
+  methods: {
+    changeVisibleValue(val) {
+      this.$emit('update:visible', val)
+    },
+    handleClickCancel() {
+      this.changeVisibleValue(false)
+      this.$emit('cancel')
+    },
+    handleClickSure() {
+      this.changeVisibleValue(false)
+      this.$emit('submit')
+    },
+  },
+}
+</script>
+<style lang="scss">
+.u-mode-center-box {
+  background-color: transparent !important;
+  padding-top: 40rpx;
+}
+</style>
+
+<style lang="scss" scoped>
+.pop-view {
+  padding-top: 90rpx;
+  position: relative;
+  .top-image-view {
+    width: 182rpx;
+    height: 272rpx;
+    position: absolute;
+    top: 0;
+    left: calc(50% - 91rpx);
+    z-index: 2;
+  }
+  .pop-main {
+    padding: 48rpx 24rpx 48rpx 24rpx;
+    min-height: 520rpx;
+    position: relative;
+    text-align: center;
+    border-radius: 24rpx;
+    overflow: hidden;
+    background-color: #ffffff;
+    z-index: 1;
+    .head-view {
+      width: 100%;
+      height: 432;
+
+      padding-top: 160rpx;
+      padding-bottom: 30rpx;
+
+      .pop-title {
+        font-size: 48rpx;
+        text-align: center;
+        color: #191c27;
+        font-weight: bold;
+      }
+      .pop-message {
+        margin-top: 60rpx;
+        font-size: 28rpx;
+        text-align: center;
+        color: #5a6073;
+      }
+    }
+
+    .image-view {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    }
+    .pop-content {
+      margin-bottom: 140rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .list-view {
+        font-weight: bold;
+        width: 30%;
+        color: #2953ff;
+        font-size: 80rpx;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 30rpx;
+        padding-top: 0rpx;
+        .label-view {
+          font-size: 28rpx;
+          color: #5a6073;
+          margin-bottom: 22rpx;
+          padding-top: 6rpx;
+          padding-left: 14rpx;
+        }
+      }
+    }
+
+    .line-view {
+      background-color: #e8ebf3;
+      height: 2rpx;
+      width: 100%;
+      margin-bottom: 40rpx;
+      margin-top: 40rpx;
+    }
+
+    .pop-btn-view {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: absolute;
+      bottom: 48rpx;
+      left: 24rpx;
+      right: 24rpx;
+    }
+  }
+}
+</style>

src/components/experience-end-pop/index.vue

+<template>
+  <!-- 体验资格结束弹窗 -->
+  <u-popup
+    v-model="visible"
+    mode="center"
+    safe-area-inset-bottom
+    width="690rpx"
+    :mask-close-able="flase"
+    close-icon-color="#FFFFFF"
+    height="86%"
+  >
+    <view class="pop-view">
+      <image mode="widthFix" class="image-view" :src="backgroundImage"></image>
+      <view class="head-view">
+        <view class="pop-title">
+          <text>温馨提示</text>
+        </view>
+      </view>
+      <view class="pop-content">
+        <view>您的免费答题体验已完成</view>
+        <view class="label-view">绑卡/购买可继续完成答题练习</view>
+      </view>
+      <view class="pop-btn-view">
+        <u-button
+          :custom-style="customStyleCancel"
+          hover-class="none"
+          shape="circle"
+          @click="handleClickCancel"
+        >
+          回到首页
+        </u-button>
+        <u-button
+          :custom-style="customStyleSave"
+          shape="circle"
+          type="primary"
+          @click="handleClickSure"
+        >
+          去绑卡
+        </u-button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    backgroundImage() {
+      return process.uniEnv.qn_base_url + 'zigetanchaung-w.png'
+    },
+    customStyleCancel() {
+      return {
+        width: '264rpx',
+        height: '96rpx',
+        color: '#9EA5BB',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+      }
+    },
+    customStyleSave() {
+      return {
+        backgroundColor: '#2953FF',
+        width: '264rpx',
+        height: '96rpx',
+        color: '#ffffff',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+      }
+    },
+  },
+  methods: {
+    handleClickCancel() {
+      this.$emit('update:visible', false)
+      uni.switchTab({
+        url: '/pages/index/index',
+      })
+    },
+    handleClickSure() {
+      this.$emit('update:visible', false)
+      this.$u.route({
+        url: 'pages/learn/detail',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pop-view {
+  margin-top: 80rpx;
+  padding: 48rpx 24rpx;
+  position: relative;
+  text-align: center;
+  background-color: #ffffff;
+  z-index: 1;
+  border-radius: 24rpx;
+  overflow: hidden;
+  .head-view {
+    width: 100%;
+    height: 432;
+    padding-top: 10rpx;
+    padding-bottom: 300rpx;
+    .pop-title {
+      font-size: 48rpx;
+      text-align: center;
+      color: #ffffff;
+      font-weight: bold;
+    }
+  }
+  .image-view {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  .pop-content {
+    margin-bottom: 60rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #191c27;
+    margin-top: 80rpx;
+    .label-view {
+      font-size: 28rpx;
+      color: #9ea5bb;
+      margin-top: 20rpx;
+      font-weight: 400;
+    }
+  }
+}
+.pop-btn-view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 48rpx;
+  left: 40rpx;
+  right: 40rpx;
+}
+</style>