猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

128 lines
2.6 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view class="po-r">
  3. <image class="bg" src="" mode=""></image>
  4. <view class="po-a content w-100">
  5. <view class="top bg-fff">
  6. <view class="com-title size-32 fw700 flex-rowl">
  7. 您选择的宠物类型
  8. </view>
  9. <image class="mt32" :src="petTypeData.image" mode="widthFix"></image>
  10. </view>
  11. <view class="text po-r bg-fff">
  12. <up-parse class="size-28" :content="configList.pet_raising_details.paramValueArea"></up-parse>
  13. <view class="po-a flex-rowl tips">
  14. <image class="ml16" src="@/static/images/ydd/icon1.png" mode="widthFix"></image>
  15. <text class="size-28 ml16">养宠考试说明</text>
  16. </view>
  17. </view>
  18. <view class="text po-r bg-fff mb150">
  19. <up-parse class="size-28" :content="configList.pet_attention_details.paramValueArea"></up-parse>
  20. <view class="po-a flex-rowl tips">
  21. <image class="ml16" src="@/static/images/ydd/icon2.png" mode="widthFix"></image>
  22. <text class="size-28 ml16">考试注意事项</text>
  23. </view>
  24. </view>
  25. </view>
  26. <view class="footer-btn flex-colc">
  27. <view class="size-22 color-777 tips-rest">
  28. <!-- todo -->
  29. 剩余考试机会<text class="highlight">{{ restTimes }}</text>
  30. </view>
  31. <view class="btn" @click="toNext">
  32. 开始考试
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script setup>
  38. import { ref, onMounted } from 'vue'
  39. import { onShow } from '@dcloudio/uni-app'
  40. import { store } from '@/store'
  41. const petTypeData = ref({})
  42. const restTimes = ref()
  43. const configList = store.state.system.configList
  44. onShow(() => {
  45. petTypeData.value = uni.getStorageSync('petTypeData')
  46. // todo: fetch
  47. restTimes.value = 3
  48. })
  49. const toNext = () => {
  50. uni.navigateTo({
  51. url: "/otherPages/authentication/examination/base"
  52. })
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .mb150 {
  57. margin-bottom: 150rpx;
  58. }
  59. .text {
  60. padding: 50rpx 37rpx;
  61. border-radius: 20rpx;
  62. margin-top: 43px;
  63. }
  64. .tips {
  65. width: 302rpx;
  66. height: 67rpx;
  67. background-color: #FFEBCE;
  68. top: -28rpx;
  69. left: 20rpx;
  70. border-radius: 0 90rpx 0 0;
  71. image {
  72. width: 40rpx;
  73. }
  74. }
  75. .content {
  76. padding: 16rpx;
  77. width: 718rpx;
  78. left: 0;
  79. top: 0;
  80. }
  81. .bg {
  82. width: 750rpx;
  83. height: 432px;
  84. background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
  85. }
  86. .top {
  87. padding: 46rpx 17rpx 17rpx;
  88. margin: 16rpx;
  89. border-radius: 20rpx;
  90. image {
  91. width: 198rpx;
  92. }
  93. }
  94. .tips {
  95. &-rest {
  96. color: #707070;
  97. font-size: 22rpx;
  98. margin: 9rpx 0 13rpx 0;
  99. .highlight {
  100. color: #FF8DC6;
  101. }
  102. }
  103. }
  104. .footer-btn {
  105. height: 163rpx;
  106. box-sizing: border-box;
  107. padding-bottom: 18rpx;
  108. }
  109. </style>