From b0c9ad943427bca2de66d4683583ccc5f9bb3fb3 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 19 十二月 2024 19:15:00 +0800
Subject: [PATCH] 骨架屏优化
---
packageBookService/pages/psychologyAnswer/psychologyAnswer.js | 2
packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss | 175 +++++++++++++++++++----------
packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml | 132 ++++++++++++---------
3 files changed, 192 insertions(+), 117 deletions(-)
diff --git a/packageBookService/pages/psychologyAnswer/psychologyAnswer.js b/packageBookService/pages/psychologyAnswer/psychologyAnswer.js
index dc16d9a..02f47f5 100644
--- a/packageBookService/pages/psychologyAnswer/psychologyAnswer.js
+++ b/packageBookService/pages/psychologyAnswer/psychologyAnswer.js
@@ -13,7 +13,7 @@
dataList: "",
barHeight: "",
navBarHeight: "",
- loading: false,
+ loading: true,
answerTitle: "", // 瀵艰埅鏍忔爣棰�
submitStatus: false, // 鎻愪氦鐘舵��
currentIndex: 0, // 褰撳墠鏄剧ず鐨勯鍙�
diff --git a/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml b/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml
index b57238e..43b158e 100644
--- a/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml
+++ b/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml
@@ -1,5 +1,5 @@
<!--
-姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/12/19涓嬪崍3:05:54
+姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/12/19涓嬪崍7:08:05
浣跨敤鏂规硶锛�
鍦� D:\JiaRuan\jsek-applet\packageBookService\pages\psychologyAnswer\psychologyAnswer.wxml 寮曞叆妯℃澘
@@ -17,74 +17,96 @@
-->
<template name="skeleton">
<view class="sk-container">
- <view class="page" style="background-color:">
- <view class="page-content" style="background-color:">
- <view is="packageBookService/pages/psychologyAnswer/questionList/index">
- <view class="questionList-index--question-list" style="background-color:#fff">
- <view class="questionList-index--question-title" id="15fc288f--question-title">
- <rich-text class="questionList-index--substance" nodes="" space="emsp"></rich-text>
+ <view class="page-content" style="background-color:">
+ <view is="packageBookService/pages/bookServices/examination/questionSchedule/index" id="countDownRef">
+ <view class="questionSchedule-index--schedule" id="401ba865--schedule" style="background-color:#fff">
+ <view class="questionSchedule-index--schedule-top">
+ <view class="questionSchedule-index--question-schedule sk-transparent" style="color: #000;">绛旈杩涘害
+ <text class="questionSchedule-index--parimary-color questionSchedule-index--question-num sk-transparent sk-opacity">0</text>
+ <text class="sk-transparent sk-text-14-2857-972 sk-text">/31</text>
</view>
- <swiper class="questionList-index--swiper" current="0" id="15fc288f--swiper" style="height:100%" autoplay="false">
- <swiper-item style="overflow-y: auto; position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
- <view class="questionList-index--question-stem questionList-index--title-score" style="color: #000; font-size: 16px;">
- <text class="sk-transparent sk-text-14-2857-769 sk-text">1.</text>
- <view class="questionList-index--title-content questionList-index--text-space sk-transparent sk-text-16-6667-358 sk-text">鎴戜笉鏄竴涓緢绉瀬鐨勪汉銆�</view>
+ <view class="questionSchedule-index--remainder" style="color: #000;">
+ <view class="questionSchedule-index--remainder-text sk-transparent sk-text-14-2857-676 sk-text">鍓╀綑鏃堕棿 </view>
+ <view class="questionSchedule-index--parimary-color questionSchedule-index--remaining-time sk-transparent sk-text-14-2857-756 sk-text">01:59:53</view>
+ </view>
+ </view>
+ <view class="questionSchedule-index--schedule-progress">
+ <view class="t-progress progress--t-progress " style="true">
+ <view class="t-progress--thin progress--t-progress--thin t-progress--status-- progress--t-progress--status-- ">
+ <view class="t-progress__bar progress--t-progress__bar">
+ <view class="t-progress__inner progress--t-progress__inner " style="background-color: #efefef;"></view>
</view>
- <view class="questionList-index--question-answer">
- <view class="t-radio-group radio-group--t-radio-group questionList-index--radio-group " style="true">
- <view>
- <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block " style="background-color: #fff;" tabindex="0">
- <view class="t-radio__content radio--t-radio__content" data-target="text">
- <view class="t-radio__title radio--t-radio__title " style="-webkit-line-clamp:3">
- <view class="questionList-index--radio-item" style="font-size: 16px;">
- <view class="questionList-index--text-space sk-transparent sk-text-16-6667-817 sk-text">
- A銆佹槸
- </view>
- </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view is="packageBookService/pages/bookServices/examination/questionList/index">
+ <view class="questionList-index--question-list" style="background-color:#fff">
+ <view class="questionList-index--question-title" style="background-color:#fff">
+ <text class="questionList-index--title-name sk-transparent sk-text-14-2857-835 sk-text">鍒ゆ柇棰�</text>
+ <text class="questionList-index--title-score sk-transparent sk-text-14-2857-843 sk-text" style="color: #000;">(姣忛2鍒�)</text>
+ </view>
+ <swiper class="questionList-index--swiper" autoplay="false">
+ <swiper-item style="overflow-y: auto; position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
+ <view class="questionList-index--question-stem questionList-index--title-score" style="color: #000; font-size: 16px;">
+ <text class="sk-transparent sk-text-14-2857-731 sk-text">1.</text>
+ <view class="questionList-index--title-content sk-transparent sk-text-14-2857-317 sk-text">鏀剧儹鍖栧鍙嶅簲閮借兘鑷姩杩涜銆�</view>
+ </view>
+ <view class="questionList-index--question-answer">
+ <view class="t-radio-group radio-group--t-radio-group questionList-index--radio-group " style="true">
+ <view>
+ <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block ">
+ <view class="t-radio__content radio--t-radio__content" data-target="text">
+ <view class="t-radio__title radio--t-radio__title sk-transparent" style="-webkit-line-clamp:3">
+ <view class="questionList-index--radio-item" style="font-size: 16px;">
+ <text class="sk-transparent sk-text-16-6667-394 sk-text">A銆佸</text>
</view>
</view>
</view>
</view>
- <view>
- <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block " style="background-color: #fff;" tabindex="0">
- <view class="t-radio__content radio--t-radio__content" data-target="text">
- <view class="t-radio__title radio--t-radio__title t-radio__title--checked radio--t-radio__title--checked " style="-webkit-line-clamp:3">
- <view class="questionList-index--radio-item questionList-index--radio-active" style="font-size: 16px;">
- <view class="questionList-index--text-space sk-transparent sk-text-16-6667-488 sk-text">
- B銆佸惁
- </view>
- </view>
+ </view>
+ <view>
+ <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block " style="background-color: #fff;" tabindex="0">
+ <view class="t-radio__content radio--t-radio__content" data-target="text">
+ <view class="t-radio__title radio--t-radio__title sk-transparent" style="-webkit-line-clamp:3">
+ <view class="questionList-index--radio-item" style="font-size: 16px;">
+ <text class="sk-transparent sk-text-16-6667-51 sk-text">B銆侀敊</text>
</view>
</view>
</view>
</view>
</view>
</view>
- </swiper-item>
- </swiper>
- </view>
+ </view>
+ </swiper-item>
+ </swiper>
</view>
</view>
- <view class="page-bottom" style="background-color:">
- <view is="packageBookService/pages/psychologyAnswer/questionOptions/index" id="question-options">
- <view class="questionOptions-index--page-bottom" style="color: #000; background-color:#fff">
- <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
- <image class="sk-image"></image>
- 绛旈鍗�
- </view>
- <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
- <image class="sk-image"></image>
- 璁剧疆
- </view>
- <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
- <image class="sk-image"></image>
- 閲嶅仛
- </view>
- <view class="questionOptions-index--bottom-submit">
- <button app-parameter="true" data-custom="null" form-type="true" hover-class="t-button--hover" hover-start-time="20" hover-stay-time="70" lang="true" open-type="true" send-message-img="鎴浘" send-message-path="褰撳墠鍒嗕韩璺緞" send-message-title="褰撳墠鏍囬" session-from="true" style="width:166px;border-radius:31px;" class="t-button button--t-button t-button--base button--t-button--base t-button--primary button--t-button--primary t-button--rectangle button--t-button--rectangle t-button--size-large button--t-button--size-large sk-button sk-pseudo sk-pseudo-circle">
- <view class="t-button__content button--t-button__content sk-transparent sk-text-33-6735-874 sk-text" style="background-position-x: 50%;">鎻愪氦</view>
- </button>
- </view>
+ </view>
+ <view class="page-bottom" style="background-color:">
+ <view is="packageBookService/pages/bookServices/examination/questionOptions/index" id="question-options">
+ <view class="questionOptions-index--page-bottom" style="color: #000; background-color:#fff">
+ <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
+ <image class="sk-image"></image>
+ 鏀惰棌
+ </view>
+ <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
+ <image class="sk-image"></image>
+ 绛旈鍗�
+ </view>
+ <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
+ <image class="sk-image"></image>
+ 璁剧疆
+ </view>
+ <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
+ <image class="sk-image"></image>
+ 閲嶅仛
+ </view>
+ <view class="questionOptions-index--bottom-submit">
+ <button app-parameter="true" data-custom="null" form-type="true" hover-class="t-button--hover" hover-start-time="20" hover-stay-time="70" lang="en" open-type="true" send-message-img="true" send-message-path="true" send-message-title="true" session-from="true" style="width:166px;border-radius:31px;" class="t-button button--t-button t-button--base button--t-button--base t-button--primary button--t-button--primary t-button--rectangle button--t-button--rectangle t-button--size-large button--t-button--size-large sk-button sk-pseudo sk-pseudo-circle">
+ <view class="t-button__content button--t-button__content sk-transparent sk-text-33-6735-471 sk-text" style="background-position-x: 50%;">鎻愪氦</view>
+ </button>
</view>
</view>
</view>
diff --git a/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss b/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss
index 94e1178..f06524d 100644
--- a/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss
+++ b/packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss
@@ -1,5 +1,5 @@
/*
-姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/12/19涓嬪崍3:05:54
+姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/12/19涓嬪崍7:08:05
鍦� D:\JiaRuan\jsek-applet\packageBookService\pages\psychologyAnswer\psychologyAnswer.wxss 涓紩鍏ユ牱寮�
```
@@ -9,67 +9,120 @@
鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗ｏ細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
- color: transparent !important;
- }
-.sk-text-14-2857-769 {
- background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
- background-size: 100% 43.0769rpx;
- position: relative !important;
- }
+ color: transparent !important;
+}
+
+.sk-opacity {
+ opacity: 0 !important;
+}
+
+.sk-text-14-2857-972 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 37.6923rpx;
+ position: relative !important;
+}
+
.sk-text {
- background-origin: content-box !important;
- background-clip: content-box !important;
- background-color: transparent !important;
- color: transparent !important;
- background-repeat: repeat-y !important;
- }
-.sk-text-16-6667-358 {
- background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
- background-size: 100% 46.1538rpx;
- position: relative !important;
- }
-.sk-text-16-6667-817 {
- background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
- background-size: 100% 46.1538rpx;
- position: relative !important;
- }
-.sk-text-16-6667-488 {
- background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
- background-size: 100% 46.1538rpx;
- position: relative !important;
- }
-.sk-text-33-6735-874 {
- background-image: linear-gradient(transparent 33.6735%, #EEEEEE 0%, #EEEEEE 66.3265%, transparent 0%) !important;
- background-size: 100% 94.2308rpx;
- position: relative !important;
- }
+ background-origin: content-box !important;
+ background-clip: content-box !important;
+ background-color: transparent !important;
+ color: transparent !important;
+ background-repeat: repeat-y !important;
+}
+
+.sk-text-14-2857-676 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 37.6923rpx;
+ position: relative !important;
+}
+
+.sk-text-14-2857-756 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 37.6923rpx;
+ position: relative !important;
+}
+
+.sk-text-14-2857-835 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 37.6923rpx;
+ position: relative !important;
+}
+
+.sk-text-14-2857-843 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 37.6923rpx;
+ position: relative !important;
+}
+
+.sk-text-14-2857-731 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 43.0769rpx;
+ position: relative !important;
+}
+
+.sk-text-14-2857-317 {
+ background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+ background-size: 100% 43.0769rpx;
+ position: relative !important;
+}
+
+.sk-text-16-6667-394 {
+ background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
+ background-size: 100% 46.1538rpx;
+ position: relative !important;
+}
+
+.sk-text-16-6667-51 {
+ background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
+ background-size: 100% 46.1538rpx;
+ position: relative !important;
+}
+
+.sk-text-33-6735-471 {
+ background-image: linear-gradient(transparent 33.6735%, #EEEEEE 0%, #EEEEEE 66.3265%, transparent 0%) !important;
+ background-size: 100% 94.2308rpx;
+ position: relative !important;
+}
+
.sk-button {
- color: #EFEFEF !important;
- background: #EFEFEF !important;
- border: none !important;
- box-shadow: none !important;
- }
+ color: #EFEFEF !important;
+ background: #EFEFEF !important;
+ border: none !important;
+ box-shadow: none !important;
+}
+
.sk-image {
- background: #EFEFEF !important;
- }
-.sk-pseudo::before, .sk-pseudo::after {
- background: #EFEFEF !important;
- background-image: none !important;
- color: transparent !important;
- border-color: transparent !important;
- }
-.sk-pseudo-rect::before, .sk-pseudo-rect::after {
- border-radius: 0 !important;
- }
-.sk-pseudo-circle::before, .sk-pseudo-circle::after {
- border-radius: 50% !important;
- }
+ background: #EFEFEF !important;
+}
+
+.sk-pseudo::before,
+.sk-pseudo::after {
+ background: #EFEFEF !important;
+ background-image: none !important;
+ color: transparent !important;
+ border-color: transparent !important;
+}
+
+.sk-pseudo-rect::before,
+.sk-pseudo-rect::after {
+ border-radius: 0 !important;
+}
+
+.sk-pseudo-circle::before,
+.sk-pseudo-circle::after {
+ border-radius: 50% !important;
+}
+
.sk-container {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-color: transparent;
- }
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background-color: transparent;
+}
+
+.t-progress__inner {
+ background-color: #efefef;
+}
\ No newline at end of file
--
Gitblit v1.9.1