From be4212081285227ee0f5eb080c2d4098a82c2ab9 Mon Sep 17 00:00:00 2001 From: litian <C21AF165> Date: 星期四, 11 四月 2024 15:49:01 +0800 Subject: [PATCH] 样式,骨架屏 --- pages/home/home.skeleton.wxss | 150 ++++++ pages/home/home.js | 9 packageDomain/pages/sampleBookList/index.skeleton.wxss | 155 ++++++ packageDomain/pages/sampleBookList/index.wxml | 19 packageDomain/pages/sampleBookList/index.wxss | 12 packageBookService/pages/bookServices/detail/index.wxml | 312 ++---------- packageDomain/pages/sampleBookList/index.skeleton.wxml | 209 ++++++++ packagePersonal/pages/userSetting/index.js | 6 pages/home/home.skeleton.wxml | 295 +++++++++++ packageDomain/pages/teacherCertification/index.wxss | 2 packageDomain/pages/teacherCertification/index.wxml | 9 packageDomain/pages/teacherCertification/index.skeleton.wxss | 120 ++++ packageDomain/pages/teacherCertification/index.skeleton.wxml | 180 +++++++ pages/home/home.wxml | 11 pages/home/home.wxss | 2 15 files changed, 1,208 insertions(+), 283 deletions(-) diff --git a/packageBookService/pages/bookServices/detail/index.wxml b/packageBookService/pages/bookServices/detail/index.wxml index 1e52a33..fb777d8 100644 --- a/packageBookService/pages/bookServices/detail/index.wxml +++ b/packageBookService/pages/bookServices/detail/index.wxml @@ -4,55 +4,30 @@ <view style="width: 100%; height: {{barHeight}}px; "></view> <view class="nacigationBar" style="width: 70%; height: {{navBarHeight}}px;"> <view> - <t-icon - name="chevron-left" - size="30" - data-name="{{item}}" - bind:click="goBack" - /> + <t-icon name="chevron-left" size="30" data-name="{{item}}" bind:click="goBack" /> </view> <view class="navbar-title">{{options.name}}</view> </view> <t-toast id="t-toast" /> - <scroll-view - scroll-y="{{true}}" - class="book" - bindscrolltolower="onReachBottom" - > + <scroll-view scroll-y="{{true}}" class="book" bindscrolltolower="onReachBottom"> <!-- 鍥句功璇︽儏 --> <view class="book-box"> <view class="book-detail" id="book-detail"> <view class="detail-left"> <view class="book-img"> - <image - loading="" - src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}" - mode="aspectFill" - aria-label="{{bookDetail.name}}" - /> + <image loading="" src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}" mode="aspectFill" aria-label="{{bookDetail.name}}" /> </view> <view class="book-use"> <view class="collect" bind:tap="setCollect"> <view> - <image - loading="" - src="/static/images/bookService/detail/collect.png" - wx:if="{{!bookDetail.isFavourite}}" - /> - <image - loading="" - src="/static/images/bookService/detail/collecting.png" - wx:if="{{bookDetail.isFavourite}}" - /> + <image loading="" src="/static/images/bookService/detail/collect.png" wx:if="{{!bookDetail.isFavourite}}" /> + <image loading="" src="/static/images/bookService/detail/collecting.png" wx:if="{{bookDetail.isFavourite}}" /> </view> <view class="use-title">鏀惰棌</view> </view> <view class="suggest" bind:tap="suggestBtn"> <view> - <image - loading="" - src="/static/images/bookService/detail/suggest.png" - /> + <image loading="" src="/static/images/bookService/detail/suggest.png" /> </view> <view class="use-title">鎴戣寤鸿</view> </view> @@ -74,24 +49,15 @@ <view class="li-content">{{bookDetail.isbn}}</view> </view> <view class="message-li"> - <view class="li-title" wx:if="{{bookDetail.publicationDate}}" - >鍑虹増鏃堕棿锛�</view - > + <view class="li-title" wx:if="{{bookDetail.publicationDate}}">鍑虹増鏃堕棿锛�</view> <view class="li-content">{{bookDetail.publicationDate}}</view> </view> - <view - class="message-li" - wx:if="{{bookDetail.class}}" - style="height: 80rpx" - > + <view class="message-li" wx:if="{{bookDetail.class}}" style="height: 80rpx"> <view class="li-title">鍥句功鍒嗙被锛�</view> <view class="class-name showTow">{{bookDetail.class}}</view> </view> </view> - <image - src="/static/images/bookService/detail/square.png" - class="right-background" - /> + <image src="/static/images/bookService/detail/square.png" class="right-background" /> </view> </view> <!-- 閿�鍞俊鎭� --> @@ -100,17 +66,12 @@ <!-- 鐢靛瓙涔﹀敭浠� --> <view class="electron-price" wx:if="{{bookDetail.price}}"> <view> - <image - src="/static/images/bookService/detail/electon-price.png" - /> + <image src="/static/images/bookService/detail/electon-price.png" /> </view> <view class="price"> - <view class="price-text" - >{{bookDetail.price == '0.00' ? '鍏嶈垂' : '楼'+ - bookDetail.price}}</view - > - <view class="price-old" wx:if="{{bookDetail.oldPrice != '0.00'}}" - >楼{{bookDetail.oldPrice}} + <view class="price-text">{{bookDetail.price == '0.00' ? '鍏嶈垂' : '楼'+ + bookDetail.price}}</view> + <view class="price-old" wx:if="{{bookDetail.oldPrice != '0.00'}}">楼{{bookDetail.oldPrice}} </view> </view> <view> </view> @@ -120,67 +81,26 @@ <view> <image src="/static/images/bookService/detail/paper-price.png" /> </view> - <view class="price" - >{{bookDetail.paperPrice == '0.00' ? '鍏嶈垂' : - '楼'+bookDetail.paperPrice}}</view - > + <view class="price">{{bookDetail.paperPrice == '0.00' ? '鍏嶈垂' : + '楼'+bookDetail.paperPrice}}</view> </view> </view> <!-- 缃戝簵 --> <view class="book-web"> - <image - src="/static/images/bookService/detail/jd.png" - wx:if="{{bookDetail.JDLink}}" - bind:tap="goShop" - data-link="{{bookDetail.JDLink}}" - data-type="jd" - /> - <image - class="tmall-image" - src="/static/images/bookService/detail/tmall.png" - bind:tap="goShop" - data-link="{{bookDetail.tmallLink}}" - wx:if="{{bookDetail.tmallLink}}" - /> - <image - src="/static/images/bookService/detail/dangdang.png" - bind:tap="goShop" - data-link="{{bookDetail.dangdangLink}}" - wx:if="{{bookDetail.dangdangLink}}" - /> - <image - src="/static/images/bookService/detail/weidian.png" - bind:tap="goShop" - data-link="{{bookDetail.weidianLink}}" - wx:if="{{bookDetail.weidianLink}}" - /> + <image src="/static/images/bookService/detail/jd.png" wx:if="{{bookDetail.JDLink}}" bind:tap="goShop" data-link="{{bookDetail.JDLink}}" data-type="jd" /> + <image class="tmall-image" src="/static/images/bookService/detail/tmall.png" bind:tap="goShop" data-link="{{bookDetail.tmallLink}}" wx:if="{{bookDetail.tmallLink}}" /> + <image src="/static/images/bookService/detail/dangdang.png" bind:tap="goShop" data-link="{{bookDetail.dangdangLink}}" wx:if="{{bookDetail.dangdangLink}}" /> + <image src="/static/images/bookService/detail/weidian.png" bind:tap="goShop" data-link="{{bookDetail.weidianLink}}" wx:if="{{bookDetail.weidianLink}}" /> </view> </view> </view> - <movable-area class="movable-area"> - <view class="book-resource"> - <t-tabs - value="{{tabValue}}" - bind:change="onTabsChange" - t-class="custom-tabs" - t-class-content="custom-panel" - class="tab-class" - > - <t-tab-panel - label="鍥句功绠�浠�" - icon="{{ tabValue == 'brief' ? briefIconClick : briefIcon}}" - value="brief" - style="{{tabPanelstyle}}" - > - <book-brief - content="{{bookDetail.content}}" - authorIntroduction="{{bookDetail.authorIntroduction}}" - wx:if="{{bookDetail.content || bookDetail.authorIntroduction}}" - ></book-brief> - <view - wx:if="{{!bookDetail.content && !bookDetail.authorIntroduction}}" - class="noData" - > + + <view class="book-resource"> + <movable-area class="movable-area"> + <t-tabs value="{{tabValue}}" bind:change="onTabsChange" t-class="custom-tabs" t-class-content="custom-panel" class="tab-class"> + <t-tab-panel label="鍥句功绠�浠�" icon="{{ tabValue == 'brief' ? briefIconClick : briefIcon}}" value="brief" style="{{tabPanelstyle}}"> + <book-brief content="{{bookDetail.content}}" authorIntroduction="{{bookDetail.authorIntroduction}}" wx:if="{{bookDetail.content || bookDetail.authorIntroduction}}"></book-brief> + <view wx:if="{{!bookDetail.content && !bookDetail.authorIntroduction}}" class="noData"> <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" /> </view> </t-tab-panel> @@ -191,198 +111,82 @@ style="{{tabPanelstyle}}" > </t-tab-panel> --> - <t-tab-panel - label="鏁欏璧勬簮" - icon="{{tabValue == 'jsek_teachingResources' ? teachResourcesClickIcon : teachResourcesIcon}}" - value="jsek_teachingResources" - class="{{loading ? 'loading': ''}}" - > - <view - wx:if="{{!loading && teach.length && !noResources && applyState}}" - > - <teach-resource - applyState="{{applyState}}" - rejectCause="{{rejectCause}}" - deadline="{{deadline}}" - bind:applyResource="applyResource" - applyResourceLoading="{{applyResourceLoading}}" - ></teach-resource> - <tree - id="teach-tree" - openIds="{{openTeachids}}" - bookInfo="{{bookDetail}}" - treeList="{{teach}}" - tab="{{tabValue}}" - applyState="{{applyState}}" - bind:downloadTeach="downloadTeach" - bind:handleTree="handleTree" - openTeachids="{{openTeachids}}" - wx:if="{{teach.length}}" - ></tree> + <t-tab-panel label="鏁欏璧勬簮" icon="{{tabValue == 'jsek_teachingResources' ? teachResourcesClickIcon : teachResourcesIcon}}" value="jsek_teachingResources" class="{{loading ? 'loading': ''}}"> + <view wx:if="{{!loading && teach.length && !noResources && applyState}}"> + <teach-resource applyState="{{applyState}}" rejectCause="{{rejectCause}}" deadline="{{deadline}}" bind:applyResource="applyResource" applyResourceLoading="{{applyResourceLoading}}"></teach-resource> + <tree id="teach-tree" openIds="{{openTeachids}}" bookInfo="{{bookDetail}}" treeList="{{teach}}" tab="{{tabValue}}" applyState="{{applyState}}" bind:downloadTeach="downloadTeach" bind:handleTree="handleTree" openTeachids="{{openTeachids}}" wx:if="{{teach.length}}"></tree> </view> - <t-loading - theme="circular" - size="60rpx" - class="loading" - loading="{{loading }}" - /> + <t-loading theme="circular" size="60rpx" class="loading" loading="{{loading }}" /> <view wx:if="{{noResources}}" class="noData"> <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" /> </view> </t-tab-panel> - <t-tab-panel - label="浜戝涔�" - icon="{{tabValue == 'jsek_cloudLearning' ? learnResourceClickIcon : learnResourceIcon}}" - value="jsek_cloudLearning" - style="{{tabPanelstyle}}" - > + <t-tab-panel label="浜戝涔�" icon="{{tabValue == 'jsek_cloudLearning' ? learnResourceClickIcon : learnResourceIcon}}" value="jsek_cloudLearning" style="{{tabPanelstyle}}"> <view wx:if="{{!loading && learn.length}}"> - <learn-resource - bind:getFreeResource="getFreeResource" - bind:allAddShoppiingCar="allAddShoppiingCar" - id="learn-resource" - buyResourceData="{{buyResourceData}}" - bookId="{{bookDetail.id}}" - isshowDrawBtn="{{isshowDrawBtn}}" - ></learn-resource> + <learn-resource bind:getFreeResource="getFreeResource" bind:allAddShoppiingCar="allAddShoppiingCar" id="learn-resource" buyResourceData="{{buyResourceData}}" bookId="{{bookDetail.id}}" isshowDrawBtn="{{isshowDrawBtn}}"></learn-resource> - <tree - id="tree" - openIds="{{openLearnids}}" - bookInfo="{{bookDetail}}" - tab="{{tabValue}}" - treeList="{{learn}}" - buyIds="{{buyIdList}}" - openLearnids="{{openLearnids}}" - bind:updateShoppingCartHidden="updateShoppingCartHidden" - bind:updateCloudLearning="updateCloudLearning" - ></tree> + <tree id="tree" openIds="{{openLearnids}}" bookInfo="{{bookDetail}}" tab="{{tabValue}}" treeList="{{learn}}" buyIds="{{buyIdList}}" openLearnids="{{openLearnids}}" bind:updateShoppingCartHidden="updateShoppingCartHidden" bind:updateCloudLearning="updateCloudLearning"></tree> </view> <view wx:if="{{noResources}}" class="noData"> <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" /> </view> </t-tab-panel> - <t-tab-panel - label="浜戞祴璇�" - icon="{{tabValue == 'questionBank' ? testResourceClickIocn : testResourceIocn}}" - value="questionBank" - style="{{tabPanelstyle}}" - > + <t-tab-panel label="浜戞祴璇�" icon="{{tabValue == 'questionBank' ? testResourceClickIocn : testResourceIocn}}" value="questionBank" style="{{tabPanelstyle}}"> <view wx:if="{{!loading}}"> - <test-resource - id="test-resource" - list="{{test}}" - bookInfo="{{bookDetail}}" - mockData="{{mockData}}" - bind:buyMock="buyMock" - ></test-resource> + <test-resource id="test-resource" list="{{test}}" bookInfo="{{bookDetail}}" mockData="{{mockData}}" bind:buyMock="buyMock"></test-resource> </view> </t-tab-panel> - <t-tab-panel - label="浜戠瑪璁�" - icon="{{tabValue == 'jsek_note' ? noteClickIcon: noteIcon}}" - value="jsek_note" - style="{{tabPanelstyle}}" - > + <t-tab-panel label="浜戠瑪璁�" icon="{{tabValue == 'jsek_note' ? noteClickIcon: noteIcon}}" value="jsek_note" style="{{tabPanelstyle}}"> <note bookInfo="{{bookDetail}}" id="note" class="note-list"></note> </t-tab-panel> - <t-tab-panel - label="鐩稿叧鍥句功" - icon="{{tabValue == 'related_books' ? linkClickIcon: linkIcon}}" - value="related_books" - style="{{tabPanelstyle}}" - > - <related-books - relatedBookData="{{relatedBookData}}" - relatedBookLoading="{{relatedBookLoading}}" - noRelatedBookData="{{noRelatedBookData}}" - bind:goBookDetails="goBookDetails" - ></related-books> + <t-tab-panel label="鐩稿叧鍥句功" icon="{{tabValue == 'related_books' ? linkClickIcon: linkIcon}}" value="related_books" style="{{tabPanelstyle}}"> + <related-books relatedBookData="{{relatedBookData}}" relatedBookLoading="{{relatedBookLoading}}" noRelatedBookData="{{noRelatedBookData}}" bind:goBookDetails="goBookDetails"></related-books> </t-tab-panel> </t-tabs> - </view> - <movable-view class="movable-view" :x="{{x}}" :y="{{y}}" direction="all"> - <view class="applyBox" bindtap="goApply"> - <view class="box"> - <t-image - src="/static/images/home/yangshuForm1.png" - mode="heightFix" - class="img" - /> - <view class="num" wx:if="{{num > 0}}">{{num}}</view> + <movable-view class="movable-view" :x="{{x}}" :y="{{y}}" direction="all"> + <view class="applyBox" bindtap="goApply"> + <view class="box"> + <t-image src="/static/images/home/yangshuForm1.png" mode="heightFix" class="img" /> + <view class="num" wx:if="{{num > 0}}">{{num}}</view> + </view> </view> - </view> - </movable-view> - </movable-area> + </movable-view> + </movable-area> + </view> + </scroll-view> <!-- 鎴戣寤鸿寮圭獥 --> - <suggest - class="suggest-component" - id="suggest-component" - bookIcon="{{bookDetail.icon}}" - bookName="{{bookDetail.name}}" - ></suggest> + <suggest class="suggest-component" id="suggest-component" bookIcon="{{bookDetail.icon}}" bookName="{{bookDetail.name}}"></suggest> <!-- 鏁欏璧勬簮涓嬭浇鎻愮ず寮圭獥 --> - <t-dialog - class="teachDownloadDialog" - visible="{{isShowTeachDownload}}" - title="鎻愮ず" - content="璇峰墠寰�PC绔笅杞�" - confirm-btn="{{ confirmBtn }}" - bind:confirm="closeTeachDownload" - /> + <t-dialog class="teachDownloadDialog" visible="{{isShowTeachDownload}}" title="鎻愮ず" content="璇峰墠寰�PC绔笅杞�" confirm-btn="{{ confirmBtn }}" bind:confirm="closeTeachDownload" /> <!-- 璐拱鎸夐挳 --> <view class="box-bottom"> <view class="bottom-btn" bind:tap="appplyElectronicBook"> <view> - <t-image - loading="" - src="/static/images/bookService/detail/ebook.png" - ></t-image> + <t-image loading="" src="/static/images/bookService/detail/ebook.png"></t-image> </view> <view class="btn-text">鐢靛瓙鏍蜂功鐢宠</view> </view> <view class="bottom-btn" bind:tap="appplyPaperBook"> <view> - <t-image - src="/static/images/bookService/detail/paper-book.png" - ></t-image> + <t-image src="/static/images/bookService/detail/paper-book.png"></t-image> </view> <view class="btn-text">绾歌川鏍蜂功鐢宠</view> </view> - <view - class="{{!bookBuy && bookDetail.isSell ? 'bottom-btn tryRead' : 'bottom-btn try'}}" - bind:tap="goRead" - wx:if="{{!bookBuy}}" - > + <view class="{{!bookBuy && bookDetail.isSell ? 'bottom-btn tryRead' : 'bottom-btn try'}}" bind:tap="goRead" wx:if="{{!bookBuy}}"> <view> <t-image src="/static/images/bookService/detail/shidu.png"></t-image> </view> <view class="btn-text">璇曡</view> </view> - <view - class="shopCar shopCarColor" - bind:tap="addBookShopcCar" - wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}" - >鍔犲叆璐墿杞�</view - > - <view - class="buy buyColor" - bind:tap="buyBtn" - wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}" - >绔嬪嵆璐拱</view - > - <view - class="buy receiveColor" - bind:tap="buyBtn" - wx:if="{{!bookBuy && bookDetail.price == '0.00' && bookDetail.isSell == '1'}}" - >鍏嶈垂棰嗗彇</view - > + <view class="shopCar shopCarColor" bind:tap="addBookShopcCar" wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}">鍔犲叆璐墿杞�</view> + <view class="buy buyColor" bind:tap="buyBtn" wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}">绔嬪嵆璐拱</view> + <view class="buy receiveColor" bind:tap="buyBtn" wx:if="{{!bookBuy && bookDetail.price == '0.00' && bookDetail.isSell == '1'}}">鍏嶈垂棰嗗彇</view> <view class="buy read" bind:tap="goRead" wx:if="{{bookBuy}}">绔嬪嵆鏌ョ湅</view> </view> </view> <view class="loading" wx:if="{{pageLoading}}"> <t-loading loading="{{pageLoading}}" size="40"></t-loading> -</view> +</view> \ No newline at end of file diff --git a/packageDomain/pages/sampleBookList/index.skeleton.wxml b/packageDomain/pages/sampleBookList/index.skeleton.wxml new file mode 100644 index 0000000..82aab6f --- /dev/null +++ b/packageDomain/pages/sampleBookList/index.skeleton.wxml @@ -0,0 +1,209 @@ +<!-- +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓嬪崍2:18:24 +浣跨敤鏂规硶锛� +鍦� F:\project-2024\jsek-applet\packageDomain\pages\sampleBookList\index.wxml 寮曞叆妯℃澘 + +``` +<import src="index.skeleton.wxml"/> +<template is="skeleton" wx:if="{{loading}}" /> +``` + +鍦� F:\project-2024\jsek-applet\packageDomain\pages\sampleBookList\index.wxss 涓紩鍏ユ牱寮� +``` +@import "./index.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +--> +<template name="skeleton"> + <view class="sk-container"> + <view> + <view class="page-header"> + <view style="width: 100%; height: 44px;"></view> + <view class="nacigationBar" style="width: 100%; height: 40px;"> + <view> + <view class="t-icon icon--t-icon " style="font-size: 30px;"> + <label class="t-icon-chevron-left icon--t-icon-chevron-left t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="navBar-search t-search search--t-search " style="width: 232px;"> + <view class="t-search__input-box search--t-search__input-box t-not-focused search--t-not-focused t-search__input-box-- search--t-search__input-box-- t-search__input-box--round search--t-search__input-box--round "> + <view class="t-icon icon--t-icon search--t-icon " style="font-size: 24px;"> + <label class="t-icon-search icon--t-icon-search t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + <view class="t-input__keyword search--t-input__keyword sk-image" cursor="0" maxlength="-1" name="input" placeholder="璇疯緭鍏ュ叧閿瘝/涔﹀悕/ISBN/浣滆��" placeholder-class=" t-search__placeholder t-search__placeholder--normal" placeholder-style="true" selection-end="-1" selection-start="-1" type="text" value="true"></view> + </view> + </view> + </view> + <view class="list-header"> + <view class="header-scroll"> + <view class="srcolbox"> + <view class="t-dropdown-menu menu--t-dropdown-menu sk-pseudo sk-pseudo-circle" id="e32012ea--t-bar"> + <view class="t-dropdown-menu__item menu--t-dropdown-menu__item sk-button" data-index="0"> + <view class="t-dropdown-menu__title menu--t-dropdown-menu__title sk-transparent sk-text-14-2857-921 sk-text">鎬诲垎绫�</view> + <view class="t-icon icon--t-icon menu--undefined menu--t-dropdown-menu__icon menu--t-dropdown-menu__icon-- "> + <label class="t-icon-caret-down-small icon--t-icon-caret-down-small t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="t-dropdown-menu__item menu--t-dropdown-menu__item t-dropdown-menu__item--disabled menu--t-dropdown-menu__item--disabled sk-button" data-index="1"> + <view class="t-dropdown-menu__title menu--t-dropdown-menu__title sk-transparent sk-text-14-2857-902 sk-text">涓�绾у垎绫�</view> + <view class="t-icon icon--t-icon menu--undefined menu--t-dropdown-menu__icon menu--t-dropdown-menu__icon-- "> + <label class="t-icon-caret-down-small icon--t-icon-caret-down-small t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="t-dropdown-menu__item menu--t-dropdown-menu__item t-dropdown-menu__item--disabled menu--t-dropdown-menu__item--disabled sk-button" data-index="2"> + <view class="t-dropdown-menu__title menu--t-dropdown-menu__title sk-transparent sk-text-14-2857-380 sk-text"> 浜岀骇</view> + <view class="t-icon icon--t-icon menu--undefined menu--t-dropdown-menu__icon menu--t-dropdown-menu__icon-- "> + <label class="t-icon-caret-down-small icon--t-icon-caret-down-small t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="t-dropdown-menu__item menu--t-dropdown-menu__item sk-button" data-index="3"> + <view class="t-dropdown-menu__title menu--t-dropdown-menu__title sk-transparent sk-text-14-2857-593 sk-text">榛樿鎺掑簭</view> + </view> + </view> + </view> + </view> + </view> + </view> + <view class="bookServices-list"> + <view class="list-body"> + <movable-area class="movable-area"> + <scroll-view scroll-y="true" class="scroll content" lower-threshold="200" scroll-top="0" refresher-default-style="none" refresher-enabled="true" refresher-threshold="80"> + <view class="title"> + <view class="line"></view> + <view class="icon"> + <image class="iconImage sk-image" mode="aspectFit"></image> + </view> + </view> + <view class="book-list"> + <view class="book-box"> + <view class="book-img" data-book="[object Object]"> + <image class="t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="68dea408--image" mode="scaleToFill" style="width: 105px;height: 145px;"></image> + </view> + <view class="book-name book-color sk-transparent sk-text-14-2857-536 sk-text" data-book="[object Object]">鈥滀簰鑱旂綉+鈥濇枃鍖栧垱鎰忓垱涓�</view> + <view class="book-author book-color sk-transparent sk-text-14-2857-282 sk-text">鍒樹腹</view> + <view class="checkbox"> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title sk-transparent sk-text-20-8333-360 sk-text" style="-webkit-line-clamp:3"> + </view> + <view class="t-checkbox__description checkbox--t-checkbox__description " style="-webkit-line-clamp:5"></view> + </view> + </view> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--checked checkbox--t-checkbox--checked t-checkbox--block checkbox--t-checkbox--block eBook " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left t-checkbox__icon--checked checkbox--t-checkbox__icon--checked t-checkbox__icon--disabled checkbox--t-checkbox__icon--disabled "> + <view class="t-icon icon--t-icon checkbox--t-checkbox__icon-wrapper " style="true"> + <label class="t-icon-check-rectangle-filled icon--t-icon-check-rectangle-filled t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title t-checkbox__title--disabled checkbox--t-checkbox__title--disabled t-checkbox__title--checked checkbox--t-checkbox__title--checked sk-transparent sk-text-20-8333-397 sk-text" style="-webkit-line-clamp:3"> + </view> + <view class="t-checkbox__description checkbox--t-checkbox__description t-checkbox__description--disabled checkbox--t-checkbox__description--disabled " style="-webkit-line-clamp:5"></view> + </view> + </view> + </view> + </view> + <view class="book-box"> + <view class="book-img" data-book="[object Object]"> + <image class="t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="f0e8c605--image" mode="scaleToFill" style="width: 105px;height: 145px;"></image> + </view> + <view class="book-name book-color sk-transparent sk-text-14-2857-156 sk-text" data-book="[object Object]">涓鐢熺墿瀛﹀疄楠屾暀瀛﹁锛堢3鐗堬級</view> + <view class="book-author book-color sk-transparent sk-text-14-2857-975 sk-text">寰愪綔鑻�</view> + <view class="checkbox"> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title sk-transparent sk-text-20-8333-650 sk-text" style="-webkit-line-clamp:3"> + </view> + <view class="t-checkbox__description checkbox--t-checkbox__description " style="-webkit-line-clamp:5"></view> + </view> + </view> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block eBook " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left t-checkbox__icon--disabled checkbox--t-checkbox__icon--disabled "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle t-checkbox__icon-rectangle--disabled checkbox--t-checkbox__icon-rectangle--disabled"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title t-checkbox__title--disabled checkbox--t-checkbox__title--disabled sk-transparent sk-text-20-8333-168 sk-text" style="-webkit-line-clamp:3"> + </view> + <view class="t-checkbox__description checkbox--t-checkbox__description t-checkbox__description--disabled checkbox--t-checkbox__description--disabled " style="-webkit-line-clamp:5"></view> + </view> + </view> + </view> + </view> + <view class="book-box"> + <view class="book-img" data-book="[object Object]"> + <image class="t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="2508fe19--image" mode="scaleToFill" style="width: 105px;height: 145px;"></image> + </view> + <view class="book-name book-color sk-transparent sk-text-14-2857-79 sk-text" data-book="[object Object]">鐢靛瓙鏀垮姟锛堢3鐗堬級</view> + <view class="book-author book-color sk-transparent sk-text-14-2857-886 sk-text">瀛欏畤</view> + <view class="checkbox"> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title sk-transparent sk-text-20-8333-304 sk-text" style="-webkit-line-clamp:3"> + </view> + </view> + </view> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--checked checkbox--t-checkbox--checked t-checkbox--block checkbox--t-checkbox--block eBook " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left t-checkbox__icon--checked checkbox--t-checkbox__icon--checked t-checkbox__icon--disabled checkbox--t-checkbox__icon--disabled "> + <view class="t-icon icon--t-icon checkbox--t-checkbox__icon-wrapper " style="true"> + <label class="t-icon-check-rectangle-filled icon--t-icon-check-rectangle-filled t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title t-checkbox__title--disabled checkbox--t-checkbox__title--disabled t-checkbox__title--checked checkbox--t-checkbox__title--checked sk-transparent sk-text-20-8333-292 sk-text" style="-webkit-line-clamp:3"> + </view> + </view> + </view> + </view> + </view> + <view class="book-box"> + <view class="book-img" data-book="[object Object]"> + <image class="t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="53a65354--image" mode="scaleToFill" style="width: 105px;height: 145px;"></image> + </view> + <view class="book-name book-color sk-transparent sk-text-14-2857-673 sk-text" data-book="[object Object]">浼氳绛栧垝涓庣粍缁囷紙绗簩鐗堬級</view> + <view class="book-author book-color sk-transparent sk-text-14-2857-499 sk-text">鍛ㄥ仴鍗�</view> + <view class="checkbox"> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title sk-transparent sk-text-20-8333-491 sk-text" style="-webkit-line-clamp:3"> + </view> + </view> + </view> + <view class="t-checkbox checkbox--t-checkbox t-checkbox--left checkbox--t-checkbox--left t-checkbox--default checkbox--t-checkbox--default t-checkbox--block checkbox--t-checkbox--block eBook " style="true" tabindex="0"> + <view class="t-checkbox__icon checkbox--t-checkbox__icon t-checkbox__icon--left checkbox--t-checkbox__icon--left "> + <view class="t-checkbox__icon-rectangle checkbox--t-checkbox__icon-rectangle"></view> + </view> + <view class="t-checkbox__content checkbox--t-checkbox__content" data-target="text"> + <view class="t-checkbox__title checkbox--t-checkbox__title sk-transparent sk-text-20-8333-784 sk-text" style="-webkit-line-clamp:3"> + </view> + </view> + </view> + </view> + </view> + </view> + </scroll-view> + <movable-view class="movable-view" direction="all" style="transform: translateX(23px) translateY(105.3px) translateZ(0px) scale(1); transform-origin: center center; will-change: auto;"> + <view class="applyBox"> + <view class="box"> + <image class="img t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="dbf47068--image" mode="heightFix" style="width: 92px;"></image> + </view> + </view> + </movable-view> + </movable-area> + </view> + </view> + </view> + </view> +</template> \ No newline at end of file diff --git a/packageDomain/pages/sampleBookList/index.skeleton.wxss b/packageDomain/pages/sampleBookList/index.skeleton.wxss new file mode 100644 index 0000000..5818fe8 --- /dev/null +++ b/packageDomain/pages/sampleBookList/index.skeleton.wxss @@ -0,0 +1,155 @@ +/* +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓嬪崍2:18:24 + +鍦� F:\project-2024\jsek-applet\packageDomain\pages\sampleBookList\index.wxss 涓紩鍏ユ牱寮� +``` +@import "./index.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +*/ +.sk-transparent { + color: transparent !important; + } +.sk-text-14-2857-921 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + 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-14-2857-902 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-380 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-593 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-20-0000-919 { + background-image: linear-gradient(transparent 20.0000%, #EEEEEE 0%, #EEEEEE 80.0000%, transparent 0%) !important; + background-size: 100% 40.0000rpx; + position: relative !important; + } +.sk-text-14-2857-536 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-282 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 33.6000rpx; + position: relative !important; + } +.sk-text-20-8333-360 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-20-8333-397 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-14-2857-156 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-975 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 33.6000rpx; + position: relative !important; + } +.sk-text-20-8333-650 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-20-8333-168 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-14-2857-79 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-886 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 33.6000rpx; + position: relative !important; + } +.sk-text-20-8333-304 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-20-8333-292 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-14-2857-673 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-14-2857-499 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 33.6000rpx; + position: relative !important; + } +.sk-text-20-8333-491 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-20-8333-784 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-button { + 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; + } +.sk-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: transparent; + } diff --git a/packageDomain/pages/sampleBookList/index.wxml b/packageDomain/pages/sampleBookList/index.wxml index 3f7724b..92f90a3 100644 --- a/packageDomain/pages/sampleBookList/index.wxml +++ b/packageDomain/pages/sampleBookList/index.wxml @@ -1,6 +1,6 @@ <!-- 鍥句功鏈嶅姟-鍒楄〃 --> <view clas="container"> - <view class="page-header"> + <view class="page-header" wx:if="{{!skeletonLoding}}"> <view style="width: 100%; height: {{barHeight}}px;"></view> <view class="nacigationBar" style="width: 100%; height: {{navBarHeight}}px;"> <view> @@ -30,7 +30,7 @@ </view> --> </view> </view> - <view class="bookServices-list"> + <view class="bookServices-list" wx:if="{{!skeletonLoding}}"> <view class="list-body"> <movable-area class="movable-area"> <scroll-view class="scroll content" bind:scroll="onPageScroll" model:scroll-top="{{setScrollValue}}" scroll-y refresher-enabled="{{true}}" lower-threshold="{{200}}" refresher-threshold="{{80}}" refresher-default-style="none" refresher-triggered="{{triggered}}" bindrefresherpulling="{{refresh.onPulling}}" bindrefresherrefresh="onPullDownRefresh" bindscrolltolower="onReachBottom"> @@ -45,11 +45,11 @@ <image src="/static/images/home/yangshuliebiao.png" mode="aspectFit" class="iconImage" /> </view> </view> - <view class="book-list" wx:if="{{bookList.length > 0 && !skeletonLoding}}"> + <view class="book-list" wx:if="{{bookList.length > 0}}"> <view class="book-box" wx:for="{{bookList}}" wx:key="id"> <view class="book-img" bind:tap="goDetail" data-book="{{item}}"> - <t-image src="{{item.icon}}" width="105" height="145" aria-label="{{item.name}}" wx:if="{{item.icon}}" /> - <t-image src="/static/images/default-book-img.png" width="105" height="145" aria-label="{{item.name}}" wx:else /> + <image src="{{item.icon}}" aria-label="{{item.name}}" mode="aspectFit" wx:if="{{item.icon}}" /> + <image src="/static/images/default-book-img.png" aria-label="{{item.name}}" mode="aspectFit" wx:else /> </view> <view class="book-name book-color" bind:tap="goDetail" data-book="{{item}}">{{ item.name}}</view> <view class="book-author book-color">{{item.author}}</view> @@ -59,7 +59,7 @@ </view> </view> </view> - <view wx:if="{{bookList.length == 0 && !skeletonLoding}}" class="empyt"> + <view wx:if="{{bookList.length == 0}}" class="empyt"> <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" /> </view> <view class="bottom-loading" wx:if="{{bottomLoading}}"> @@ -67,9 +67,6 @@ </view> <view class="bottom-loading" style="color: #ccc;font-size: 28rpx;" wx:if="{{isMoreData}}"> <text>娌℃湁鏇村浜�</text> - </view> - <view class="body-loading" wx:if="{{skeletonLoding}}"> - <t-loading theme="circular" size="40rpx" text="鍔犺浇涓�..." class="wrapper" /> </view> </scroll-view> <movable-view class="movable-view" :x="{{x}}" :y="{{y}}" direction="all"> @@ -85,4 +82,6 @@ </view> <t-back-top theme="round" wx:if="{{isBackTop}}" text="椤堕儴" bind:to-top="onToTop"></t-back-top> -</view> \ No newline at end of file +</view> +<import src="index.skeleton.wxml" /> +<template is="skeleton" wx:if="{{skeletonLoding}}" /> \ No newline at end of file diff --git a/packageDomain/pages/sampleBookList/index.wxss b/packageDomain/pages/sampleBookList/index.wxss index 9c512d7..c73292b 100644 --- a/packageDomain/pages/sampleBookList/index.wxss +++ b/packageDomain/pages/sampleBookList/index.wxss @@ -1,3 +1,5 @@ +@import "./index.skeleton.wxss"; + .container { width: 100vw; height: 100vh; @@ -215,11 +217,17 @@ color: #333; } -.book-img image { - object-fit: contain; +.book-img { + width: 210rpx; + height: 290rpx; box-shadow: 0px 0px 20rpx 2px rgba(0, 0, 0, 0.08); } +.book-img image { + width: 100%; + height: 100%; +} + .book-name { height: 76rpx; margin-top: 24rpx; diff --git a/packageDomain/pages/teacherCertification/index.skeleton.wxml b/packageDomain/pages/teacherCertification/index.skeleton.wxml new file mode 100644 index 0000000..a9ba727 --- /dev/null +++ b/packageDomain/pages/teacherCertification/index.skeleton.wxml @@ -0,0 +1,180 @@ +<!-- +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓婂崍11:50:29 +浣跨敤鏂规硶锛� +鍦� F:\project-2024\jsek-applet\packageDomain\pages\teacherCertification\index.wxml 寮曞叆妯℃澘 + +``` +<import src="index.skeleton.wxml"/> +<template is="skeleton" wx:if="{{loading}}" /> +``` + +鍦� F:\project-2024\jsek-applet\packageDomain\pages\teacherCertification\index.wxss 涓紩鍏ユ牱寮� +``` +@import "./index.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +--> +<template name="skeleton"> + <view class="sk-container"> + <view class="container"> + <scroll-view scroll-y="true" class="scroll content" enable-back-to-top="true"> + <view class="tips sk-transparent sk-text-20-8333-349 sk-text"> 浠呴檺瀛︽牎鏈绋嬩换璇炬暀甯堢敵璇凤紱璇蜂笂浼犳湁鏁堝湪鑱屾暀甯堝伐浣滆瘉灏嗘湁鍔╀簬瀹℃牳銆� </view> + <view class="page-body"> + <view class="baseInfoBox"> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-347 sk-text"> 褰撳墠鐘舵�侊細 </view> + <view class="stateBox"> + <text class="yes sk-transparent sk-text-14-2857-314 sk-text">宸茶璇�</text> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-219 sk-text"> 瀛︽牎锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="璇疯緭鍏ュ鏍�" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="鍖椾含甯堣寖澶у"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-468 sk-text"> 鐪熷疄濮撳悕锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="璇疯緭鍏ョ湡瀹炲鍚�" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="涓戒附"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-6 sk-text"> 鑱岀О锛� </view> + <view class="item-content state"> + <view class="t-cell cell--t-cell t-cell--middle cell--t-cell--middle sk-button sk-pseudo sk-pseudo-circle" hover-class="true" hover-stay-time="70" style="true"> + <view class="t-cell__left cell--t-cell__left "></view> + <view class="t-cell__title cell--t-cell__title "> + <view class="t-cell__title-text cell--t-cell__title-text "></view> + <view class="t-cell__description cell--t-cell__description "></view> + </view> + <view class="t-cell__note cell--t-cell__note "> + <text class="sk-transparent sk-text-20-8333-168 sk-text">姝i珮锛堟暀鎺堛�佹楂樼骇璁插笀锛�</text> + </view> + <view class="t-cell__right cell--t-cell__right "> + <view class="t-icon icon--t-icon cell--undefined cell--t-cell__right-icon " style="true"> + <label class="t-icon-chevron-right icon--t-icon-chevron-right t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-651 sk-text"> 浠绘暀璇剧▼锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="璇疯緭鍏ヤ换鏁欒绋�" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="楂樻暟"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-253 sk-text"> 鎵嬫満鍙凤細 </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="杈撳叆鎵嬫満鍙风爜" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="number" value="18892082500"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-652 sk-text"> 搴ф満锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="杈撳叆搴ф満鍙�" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="029-88232145"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-984 sk-text"> 閭锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="杈撳叆閭" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="2804272236@qq.co"></view> + </view> + </view> + </view> + </view> + </view> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-884 sk-text"> 璇︾粏鍦板潃锛� </view> + <view class="item-content"> + <view class="t-input input--t-input t-input--layout-horizontal input--t-input--layout-horizontal " style="true"> + <view class="t-input__wrap--prefix input--t-input__wrap--prefix"> + <view class="t-input__label input--t-input__label "></view> + </view> + <view class="t-input__wrap input--t-input__wrap"> + <view class="t-input__content input--t-input__content t-input--default input--t-input--default"> + <view class="t-input__control input--t-input__control t-input--left input--t-input--left sk-image" cursor="0" maxlength="-1" placeholder="璇疯緭鍏ヨ缁嗗湴鍧�" placeholder-class="t-input__placeholder input-placeholder" placeholder-style="true" safe-password-custom-hash="true" selection-end="-1" selection-start="-1" type="text" value="鍖椾含甯傛湞闃冲尯"></view> + </view> + </view> + </view> + </view> + </view> + </view> + <view class="fileInfoBox"> + <view class="from-item"> + <view class="label sk-transparent sk-text-29-4118-406 sk-text"> 鍦ㄨ亴鏁欏笀宸ヤ綔璇侊細 </view> + <view class="imageBox"> + <view class="weui-uploader"> + <view class="pics"> + <image class="weui-uploader__img sk-image" data-index="0" mode="aspectFill"></image> + </view> + <view class="pics"> + <image class="weui-uploader__img sk-image" data-index="1" mode="aspectFill"></image> + </view> + <view class="pics"> + <image class="weui-uploader__img sk-image" data-index="2" mode="aspectFill"></image> + </view> + </view> + </view> + </view> + </view> + </view> + </scroll-view> + <view class="popupBox"></view> + </view> + </view> +</template> \ No newline at end of file diff --git a/packageDomain/pages/teacherCertification/index.skeleton.wxss b/packageDomain/pages/teacherCertification/index.skeleton.wxss new file mode 100644 index 0000000..aa4052a --- /dev/null +++ b/packageDomain/pages/teacherCertification/index.skeleton.wxss @@ -0,0 +1,120 @@ +/* +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓婂崍11:50:29 + +鍦� F:\project-2024\jsek-applet\packageDomain\pages\teacherCertification\index.wxss 涓紩鍏ユ牱寮� +``` +@import "./index.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +*/ +.sk-transparent { + color: transparent !important; + } +.sk-text-20-8333-349 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + 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-29-4118-347 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-14-2857-314 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 39.2000rpx; + position: relative !important; + } +.sk-text-29-4118-219 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-468 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-6 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-20-8333-168 { + background-image: linear-gradient(transparent 20.8333%, #EEEEEE 0%, #EEEEEE 79.1667%, transparent 0%) !important; + background-size: 100% 48.0000rpx; + position: relative !important; + } +.sk-text-29-4118-651 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-253 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-652 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-984 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-884 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-29-4118-406 { + background-image: linear-gradient(transparent 29.4118%, #EEEEEE 0%, #EEEEEE 70.5882%, transparent 0%) !important; + background-size: 100% 68.0000rpx; + position: relative !important; + } +.sk-text-14-2857-723 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 81.2000rpx; + position: relative !important; + } +.sk-button { + 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; + } +.sk-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: transparent; + } diff --git a/packageDomain/pages/teacherCertification/index.wxml b/packageDomain/pages/teacherCertification/index.wxml index 18eec56..77183ce 100644 --- a/packageDomain/pages/teacherCertification/index.wxml +++ b/packageDomain/pages/teacherCertification/index.wxml @@ -1,9 +1,6 @@ <view class="container"> <scroll-view class="scroll content" scroll-y> - <view class="tips"> 浠呴檺瀛︽牎鏈绋嬩换璇炬暀甯堢敵璇凤紱璇蜂笂浼犳湁鏁堝湪鑱屾暀甯堝伐浣滆瘉灏嗘湁鍔╀簬瀹℃牳銆� </view> - <view class="body-loading" wx:if="{{skeletonLoding}}"> - <t-loading theme="circular" size="40rpx" class="wrapper" /> - </view> + <view class="tips" wx:if="{{!skeletonLoding}}"> 浠呴檺瀛︽牎鏈绋嬩换璇炬暀甯堢敵璇凤紱璇蜂笂浼犳湁鏁堝湪鑱屾暀甯堝伐浣滆瘉灏嗘湁鍔╀簬瀹℃牳銆� </view> <view class="page-body" wx:if="{{!skeletonLoding}}"> <view class="baseInfoBox"> <view class="from-item"> @@ -121,4 +118,6 @@ </view> </t-popup> </view> -</view> \ No newline at end of file +</view> +<import src="index.skeleton.wxml" /> +<template is="skeleton" wx:if="{{skeletonLoding}}" /> \ No newline at end of file diff --git a/packageDomain/pages/teacherCertification/index.wxss b/packageDomain/pages/teacherCertification/index.wxss index da744f1..6d6add5 100644 --- a/packageDomain/pages/teacherCertification/index.wxss +++ b/packageDomain/pages/teacherCertification/index.wxss @@ -1,3 +1,5 @@ +@import "./index.skeleton.wxss"; + page { background: #F2F3F8; } diff --git a/packagePersonal/pages/userSetting/index.js b/packagePersonal/pages/userSetting/index.js index 5a6bcc3..9752870 100644 --- a/packagePersonal/pages/userSetting/index.js +++ b/packagePersonal/pages/userSetting/index.js @@ -301,14 +301,14 @@ getSecond(time) { let timer = null if (!timer) { - let countDown = time; this.setData({ countDown: time, }); + let conut = this.data.countDown; timer = setInterval(() => { - countDown-- + conut-- this.setData({ - countDown: countDown, + countDown: conut, }); if (this.data.countDow == 0) { clearInterval(timer) diff --git a/pages/home/home.js b/pages/home/home.js index 063db05..1522c7c 100644 --- a/pages/home/home.js +++ b/pages/home/home.js @@ -36,7 +36,8 @@ shoppingCartGetId: [], baseRefresh: { value: false - } + }, + loading: true }, onShow() { this.loadHomePage(); @@ -111,11 +112,13 @@ const item = res.datas[i] list.push({ value: item.icon, - link: item.jsek_link + link: item.jsek_link, + }) } this.setData({ - bannerList: list + bannerList: list, + loading: false }) }) }, diff --git a/pages/home/home.skeleton.wxml b/pages/home/home.skeleton.wxml new file mode 100644 index 0000000..81a4f9f --- /dev/null +++ b/pages/home/home.skeleton.wxml @@ -0,0 +1,295 @@ +<!-- +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓婂崍10:45:19 +浣跨敤鏂规硶锛� +鍦� F:\project-2024\jsek-applet\pages\home\home.wxml 寮曞叆妯℃澘 + +``` +<import src="home.skeleton.wxml"/> +<template is="skeleton" wx:if="{{loading}}" /> +``` + +鍦� F:\project-2024\jsek-applet\pages\home\home.wxss 涓紩鍏ユ牱寮� +``` +@import "./home.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +--> +<template name="skeleton"> + <view class="sk-container"> + <view class="container"> + <scroll-view scroll-y="true" scroll-with-animation="true" enhanced="true" class="t-pull-down-refresh refresh--t-pull-down-refresh " enable-back-to-top="true" lower-threshold="50" scroll-into-view="true" scroll-top="0" show-scrollbar="true" style="true" upper-threshold="50"> + <view class="t-pull-down-refresh__track refresh--t-pull-down-refresh__track t-pull-down-refresh__track-- refresh--t-pull-down-refresh__track--" style="true"> + <view class="t-pull-down-refresh__tips refresh--t-pull-down-refresh__tips" style="height: 50px"></view> + <view class="background" style="padding-top: 44px"> + <text class="text sk-transparent sk-text-27-5000-451 sk-text" style="background-position-x: 50%;"></text> + </view> + <view class="home-page-header"> + <view class="bg"> + <image class="image sk-image" mode="heightFix" style="width: 385.519px;"></image> + </view> + <view class="search"> + <view class=" t-search search--t-search " style="true"> + <view class="t-search__input-box search--t-search__input-box t-not-focused search--t-not-focused t-search__input-box-- search--t-search__input-box-- t-search__input-box--square search--t-search__input-box--square t-search__input-container"> + <view class="wr icon--wr " style="color: #bbb; font-size: 20px;"> + <label class="wr-search icon--wr-search t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + <!-- <view class="t-input__keyword search--t-input__keyword t-search__input sk-image" cursor="0" maxlength="-1" name="input" placeholder="" placeholder-class=" t-search__placeholder t-search__placeholder--normal" placeholder-style="true" selection-end="-1" selection-start="-1" type="text" value="true"></view> --> + </view> + </view> + </view> + <view class="swiper-wrap"> + <swiper autoplay="false" circular="true" class="swiper" indicator-dots="true" interval="5000" current="0"> + <swiper-item data-info="[object Object]" style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);"> + <view class="swiperItem"> + <image class="img sk-image" mode="widthFix" style="height: 189.73px;"></image> + </view> + </swiper-item> + </swiper> + </view> + </view> + <view class="home-page-menu"> + <view class="t-grid grid--t-grid t-grid--card grid--t-grid--card t-grid-block " style="true"> + <view class="t-grid__content grid--t-grid__content" style="margin-left:+0px; margin-top:+0px"> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="d9ea5a46--t_badge_42_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="43c131ff--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="65b0662d--t_grid_item_20"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-546 sk-text" style="background-position-x: 50%;"> + + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="fb301057--t_badge_43_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="462849bd--image" mode="widthFix" style="height: 28.5px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="63b6e526--t_grid_item_21"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-401 sk-text" style="background-position-x: 50%;"> + + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="7e5403e1--t_badge_44_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="247c9ab4--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="005dd591--t_grid_item_22"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-585 sk-text" style="background-position-x: 50%;"> + + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="7b059b9e--t_badge_45_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="a80701ed--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="2581ff20--t_grid_item_23"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-854 sk-text" style="background-position-x: 50%;"> + 鏁板瓧鏁欐潗 + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="e66571e1--t_badge_46_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="04f9b726--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="b8219551--t_grid_item_24"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-927 sk-text" style="background-position-x: 50%;"> + 涓撻璁ㄨ + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="35f6cd9e--t_badge_47_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="544b32bd--image" mode="widthFix" style="height: 28.5px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="3f730ffc--t_grid_item_25"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-17 sk-text" style="background-position-x: 50%;"> + 绾夸笂涔﹀睍 + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="5fb77773--t_badge_48_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="f9be2f2e--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="31192364--t_grid_item_26"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-476 sk-text" style="background-position-x: 50%;"> + 涔︾洰涓嬭浇 + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="6ec6dc8f--t_badge_49_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="98321597--image" mode="widthFix" style="height: 27.541px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="3d4557a1--t_grid_item_27"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-399 sk-text" style="background-position-x: 50%;"> + 鏁欏笀璁よ瘉 + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="b8516969--t_badge_50_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="b28fa99f--image" mode="widthFix" style="height: 28.5px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="c53c7729--t_grid_item_28"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-625 sk-text" style="background-position-x: 50%;"> + 鏍蜂功鐢宠 + </view> + </view> + </view> + </view> + </view> + <view class="t-grid-item item--t-grid-item sk-button" hover-class="true" hover-stay-time="200" style="width:20%;"> + <view class="t-grid-item__wrapper item--t-grid-item__wrapper t-grid-item__wrapper--vertical item--t-grid-item__wrapper--vertical" style="true"> + <view class="t-grid-item__content item--t-grid-item__content t-grid-item__content--center item--t-grid-item__content--center t-grid-item__content--vertical item--t-grid-item__content--vertical " style="true"> + <view class="t-badge badge--t-badge item--undefined" style="true"> + <view class="t-badge__content badge--t-badge__content item--undefined" id="31a9cf1b--t_badge_51_label"> + <view class="t-grid-item__image item--t-grid-item__image t-grid-item__image--small item--t-grid-item__image--small "> + <image class="item--undefined item--t-grid-item__image item--t-grid-item__image--small t-image image--t-image t-image--shape-round image--t-image--shape-round sk-image" id="a5a2eaa2--image" mode="widthFix" style="height: 28px;"></image> + </view> + </view> + </view> + <view class="t-grid-item__words item--t-grid-item__words t-grid-item__words--vertical item--t-grid-item__words--vertical" id="c566601d--t_grid_item_29"> + <view class="t-grid-item__text item--t-grid-item__text t-grid-item__text--small item--t-grid-item__text--small t-grid-item__text--vertical item--t-grid-item__text--vertical sk-transparent sk-text-22-7273-621 sk-text" style="background-position-x: 50%;"> + 鎴戣鍑轰功 + </view> + </view> + </view> + </view> + </view> + </view> + </view> + </view> + <view class="home-page-container"> + <view class="home-page-list"> + <view class="tabCardPublic iconOne"> + <view class="icon"> + <image class="iconImage sk-image" mode="aspectFit"></image> + </view> + <view class="flex" data-info="zhuantitaolun"> + <text class="more sk-transparent sk-text-14-2857-390 sk-text">鏇村</text> + <view class="t-icon icon--t-icon " style="color: #ff6d00; font-size: 16px;"> + <label class="t-icon-chevron-right icon--t-icon-chevron-right t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label> + </view> + </view> + </view> + <view class="listBox"> + <view class="listItemBox"> + <view class="listItem" data-book="[object Object]"> + <view class="specialSubject-img"> + <image class="img sk-image" mode="aspectFill"></image> + </view> + <view class="body-info"> + <view class="name sk-transparent sk-text-12-5000-274 sk-text">浣撴搷绫昏繍鍔� 鏂拌鏍囨暀鏉愭暀娉曚笌鏁欏璁捐</view> + <view class="time sk-transparent sk-text-14-2857-635 sk-text">鐩存挱鏃堕棿锛�05-23 19:30:00</view> + <view class="flex jc-sb"> + <text class="author sk-transparent sk-text-14-2857-515 sk-text">寮犵箒 鍖椾含甯堣寖澶у浣撹偛涓庤繍鍔ㄥ闄綋鎿嶆暀鐮斿鍓暀鎺堬紝纭曞</text> + <text class="price sk-transparent sk-text-14-2857-604 sk-text">鍏嶈垂</text> + </view> + </view> + </view> + </view> + <view class="listItemBox"> + <view class="listItem" data-book="[object Object]"> + <view class="specialSubject-img"> + <image class="img sk-image" mode="aspectFill"></image> + </view> + <view class="body-info"> + <view class="name sk-transparent sk-text-12-5000-560 sk-text">浣撹兘鍙戝睍 鏂拌鏍囨暀鏉愭暀娉曚笌鏁欏璁捐</view> + <view class="time sk-transparent sk-text-14-2857-933 sk-text">鐩存挱鏃堕棿锛�05-17 19:30:00</view> + <view class="flex jc-sb"> + <text class="author sk-transparent sk-text-14-2857-467 sk-text">钂嬫檽涓� 鍖椾含甯堣寖澶у鐝犳捣鍒嗘牎鍋ヨ韩浣撻�傝兘鏁欑爺瀹や富浠�</text> + <text class="price sk-transparent sk-text-14-2857-15 sk-text">鍏嶈垂</text> + </view> + </view> + </view> + </view> + <view class="listItemBox"> + <view class="listItem" data-book="[object Object]"> + <view class="specialSubject-img"> + <image class="img sk-image" mode="aspectFill"></image> + </view> + </view> + </view> + </view> + </view> + </view> + </view> + </scroll-view> + </view> + </view> +</template> \ No newline at end of file diff --git a/pages/home/home.skeleton.wxss b/pages/home/home.skeleton.wxss new file mode 100644 index 0000000..87f331d --- /dev/null +++ b/pages/home/home.skeleton.wxss @@ -0,0 +1,150 @@ +/* +姝ゆ枃浠朵负寮�鍙戣�呭伐鍏风敓鎴愶紝鐢熸垚鏃堕棿: 2024/4/11涓婂崍10:45:19 + +鍦� F:\project-2024\jsek-applet\pages\home\home.wxss 涓紩鍏ユ牱寮� +``` +@import "./home.skeleton.wxss"; +``` + +鏇村璇︾粏淇℃伅鍙互鍙傝�冩枃妗o細https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html +*/ +.sk-transparent { + color: transparent !important; + } +.sk-text-27-5000-451 { + background-image: linear-gradient(transparent 27.5000%, #EEEEEE 0%, #EEEEEE 72.5000%, transparent 0%) !important; + background-size: 100% 80.0000rpx; + 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-22-7273-546 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-401 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-585 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-854 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-927 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-17 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-476 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-399 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-625 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-22-7273-621 { + background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important; + background-size: 100% 44.0000rpx; + position: relative !important; + } +.sk-text-14-2857-390 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 33.6000rpx; + position: relative !important; + } +.sk-text-12-5000-274 { + background-image: linear-gradient(transparent 12.5000%, #EEEEEE 0%, #EEEEEE 87.5000%, transparent 0%) !important; + background-size: 100% 40.0000rpx; + position: relative !important; + } +.sk-text-14-2857-635 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-text-14-2857-515 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-text-14-2857-604 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-text-12-5000-560 { + background-image: linear-gradient(transparent 12.5000%, #EEEEEE 0%, #EEEEEE 87.5000%, transparent 0%) !important; + background-size: 100% 40.0000rpx; + position: relative !important; + } +.sk-text-14-2857-933 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-text-14-2857-467 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-text-14-2857-15 { + background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; + background-size: 100% 36.4000rpx; + position: relative !important; + } +.sk-button { + 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; + } +.sk-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: transparent; + } diff --git a/pages/home/home.wxml b/pages/home/home.wxml index 9678950..204d392 100644 --- a/pages/home/home.wxml +++ b/pages/home/home.wxml @@ -1,5 +1,5 @@ <view class="container"> - <t-pull-down-refresh value="{{baseRefresh.value}}" loadingTexts="{{['涓嬫媺鍒锋柊', '鏉炬墜鍒锋柊', '姝e湪鍒锋柊', '鍒锋柊瀹屾垚']}}" bind:refresh="onPullDownRefresh" bind:scroll="onScroll"> + <t-pull-down-refresh value="{{baseRefresh.value}}" loadingTexts="{{['涓嬫媺鍒锋柊', '鏉炬墜鍒锋柊', '姝e湪鍒锋柊', '鍒锋柊瀹屾垚']}}" bind:refresh="onPullDownRefresh" bind:scroll="onScroll" wx:if="{{!loading}}"> <view class="background {{ isWhite ? 'white':''}}" style="padding-top: {{barHeight}}px"> <text class="text">浜笀E璇�</text> </view> @@ -14,16 +14,13 @@ </view> <view class="swiper-wrap"> <!-- <t-swiper wx:if="{{bannerList.length > 0}}" list="{{bannerList}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{ { type: 'dots' } }}" height="380rpx" bind:click="navToActivityDetail" /> --> - <swiper interval="5000" indicator-dots="true" autoplay="true" circular="true" class="swiper" wx:if="{{bannerList.length > 0}}"> + <swiper interval="5000" indicator-dots="true" autoplay="true" circular="true" class="swiper"> <swiper-item wx:for="{{bannerList}}" wx:for-index="index" wx:key="index" data-info="{{item}}" bindtap="navToActivityDetail"> <view class="swiperItem"> <image src="{{item.value}}" mode="widthFix" class="img" /> </view> </swiper-item> </swiper> - <view class="body-loading" wx:else> - <t-loading theme="circular" size="40rpx" class="wrapper" /> - </view> </view> </view> <view class="home-page-menu"> @@ -215,4 +212,6 @@ </view> </view> </t-pull-down-refresh> -</view> \ No newline at end of file +</view> +<import src="home.skeleton.wxml" /> +<template is="skeleton" wx:if="{{loading}}" /> \ No newline at end of file diff --git a/pages/home/home.wxss b/pages/home/home.wxss index fba2bb6..c4dc56e 100644 --- a/pages/home/home.wxss +++ b/pages/home/home.wxss @@ -1,3 +1,5 @@ +@import "./home.skeleton.wxss"; + .background { width: 100%; position: fixed; -- Gitblit v1.9.1