@atomicservice/ascf-base 1.0.16 → 1.0.17

package/dist/templates/ascfRead/Page_Search/index.css

@@ -0,0 +1,615 @@
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+  }
+
+  .panel {
+    width: 700rpx;
+    height: 100%;
+    margin-left: 33rpx;
+    margin-right: 33rpx;
+  }
+
+  .title {
+    font-size: 100rpx;
+  }
+
+  .search_bar_container {
+    display: flex;
+    align-items: center;
+    width: 696rpx;
+    height: 100rpx;
+    margin-left: 17rpx;
+    margin-right: 33rpx;
+  }
+
+  .search_close {
+    display: flex;
+    background-color: #f2f2f2;
+    align-items: center;
+    border-radius: 8rpx;
+    height: 64rpx;
+    width: 700rpx;
+  }
+
+  .search {
+    width: 700rpx;
+    height: 40rpx;
+    color: #1a1a1a;
+    font-size: 28rpx;
+    line-height: 40rpx;
+    margin-right: 33rpx;
+  }
+
+  .image_search_back_div_search {
+    display: flex;
+    width: 84rpx;
+    height: 100rpx;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+  .image_search_back_div {
+    display: flex;
+    width: 84rpx;
+    height: 100rpx;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .image_search_back {
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  .search_text {
+    color: #cd853f;
+    font-size: 30rpx;
+  }
+
+  .div_image {
+    display: flex;
+    width: 60rpx;
+    height: 60rpx;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .div_allsearch {
+    display: flex;
+    border-radius: 5rpx;
+    flex-direction: column;
+    margin-top: 20rpx;
+    width: 700rpx;
+  }
+
+  .change_search {
+    display: flex;
+    width: 684rpx;
+    height: 30rpx;
+    margin-top: 41rpx;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .spare_bar {
+    width: 684rpx;
+    height: 16rpx;
+  }
+
+  .a_change_search {
+    font-size: 27.1rpx;
+    color: #CD2325;
+    height: 34rpx;
+    line-height: 34rpx;
+    padding-left: 10rpx;
+    text-align: center;
+  }
+
+  .all_find {
+    font-size: 31rpx;
+    color: #1a1a1a;
+    height: 34rpx;
+    line-height: 34rpx;
+  }
+
+  .change_content {
+    display: flex;
+    width: 682rpx;
+    flex-wrap: wrap;
+  }
+
+  .a_item {
+    background-color: rgba(0, 0, 0, 0.05);
+    text-align: center;
+    height: 50rpx;
+    border-radius: 8.3rpx;
+    line-height: 50rpx;
+    padding: 10rpx 20rpx;
+    margin: 17rpx 17rpx 0 0;
+    font-size: 25rpx;
+    color: #000000;
+    lines: 1;
+  }
+
+  .image_search_result {
+    width: 33rpx;
+    height: 33rpx;
+    margin-left: 17rpx;
+    margin-right: 17rpx;
+  }
+
+  .search-shujia {
+    margin-top: 60rpx;
+  }
+
+  .search-shujia-book {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 700rpx;
+    margin-top: 20rpx;
+  }
+
+  .shujia_hight_light_item {
+    display: flex;
+    width: 600rpx;
+    height: 134rpx;
+    text-align: center;
+    align-items: center;
+  }
+
+  .shujia-book-image {
+    width: 70rpx;
+    height: 70rpx;
+  }
+
+  .shujia_search_text {
+    width: 500rpx;
+  }
+
+  .read-shujia {
+    width: 117rpx;
+    height: 58rpx;
+    border: 2.1rpx solid #000000;
+    border-radius: 8.3rpx;
+    text-align: center;
+  }
+
+  .search-shujia-more {
+    display: flex;
+    justify-content: center;
+    height: 70rpx;
+    align-items: center;
+  }
+
+  .search-shujia-more text {
+    padding: 10rpx 16rpx;
+    font-size: 25rpx;
+    color: #1A1A1A;
+    margin-right: 8rpx;
+  }
+
+  .search-shujia-more image {
+    width: 33rpx;
+  }
+
+  .high-light-line {
+    width: 100%;
+    height: 0.5rpx;
+    margin-top: 17rpx;
+    background-color: #f2f2f2;
+  }
+
+  .auto_div {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: flex-end;
+    flex-direction: column;
+  }
+
+  .auto_item {
+    width: 620rpx;
+    height: 80rpx;
+    padding-left: 40rpx;
+    line-height: 80rpx;
+  }
+
+  .border_bottom {
+    width: 620rpx;
+    height: 1rpx;
+    background-color: #a9a9a9;
+  }
+
+  .result_number {
+    width: 700rpx;
+    font-size: 20rpx;
+    margin-bottom: 17rpx;
+  }
+
+  .search_item_div {
+    display: flex;
+    align-items: flex-start;
+    height: 317rpx;
+    width: 700rpx;
+  }
+
+  .search_item_image {
+    display: flex;
+    align-items: flex-start;
+    width: 217rpx;
+    height: 289rpx;
+    margin-right: 30rpx;
+    margin-bottom: 11rpx;
+  }
+
+  .rs_item_image {
+    width: 70rpx;
+    height: 85rpx;
+    border-radius: 6rpx;
+  }
+
+  .rs_item_image_result {
+    width: 217rpx;
+    height: 289rpx;
+  }
+
+  .search_image_text {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 610rpx;
+    height: 120rpx;
+    border-bottom-color: #182233;
+    border-bottom-width: 0.5rpx;
+  }
+
+  .search_image_text_result {
+    display: flex;
+    flex-direction: column;
+    width: 600rpx;
+    height: 289rpx;
+    border-bottom-color: #182233;
+    border-bottom-width: 0.5rpx;
+
+  }
+
+  .result_title {
+    width: 600rpx;
+    height: 40rpx;
+    margin-top: 15rpx;
+  }
+
+  .result_content {
+    display: flex;
+    width: 489rpx;
+    height: 210rpx;
+    flex-direction: column;
+    margin-top: 24rpx;
+  }
+
+  .result_content_main {
+    width: 489rpx;
+    height: 175rpx;
+    margin-bottom: 42rpx;
+
+  }
+
+  .result_content_main_text {
+    font-size: 30rpx;
+    color: #a9a9a9;
+  }
+
+  .result_content_foot {
+    display: flex;
+    width: 489rpx;
+    height: 35rpx;
+    justify-content: space-between;
+
+  }
+
+  .result_content_foot_author {
+    font-size: 26rpx;
+    color: #a9a9a9;
+    height: 35rpx;
+    line-height: 35rpx;
+    width: 100rpx;
+  }
+
+  .result_content_foot_read {
+    width: 140rpx;
+    height: 33rpx;
+    line-height: 33rpx;
+    text-align: center;
+    background-color: #f1f1f1;
+    color: #a9a9a9;
+    font-size: 18rpx;
+    border-radius: 4.2rpx;
+
+  }
+
+  .margin_left {
+    margin-left: 40rpx;
+  }
+
+  .hight_light_item {
+    display: flex;
+    width: 700rpx;
+    height: 120rpx;
+    align-items: center;
+  }
+
+  .close_size {
+    width: 30rpx;
+    height: 30rpx;
+  }
+
+
+  /* 搜索结果列表 */
+
+  .single-list {
+    display: flex;
+    border-color: #0000ff;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .single-item {
+    margin: 17rpx 0 11rpx 0;
+  }
+
+  .single-line {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .single-line text {
+    width: 434rpx;
+    height: 1rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .single-product {
+    margin: 5rpx 0rpx 5rpx 0rpx;
+  }
+
+  .single-description {
+    display: flex;
+    flex-direction: column;
+    width: 434rpx;
+    align-self: center;
+  }
+
+  .single-image {
+    width: 217rpx;
+    height: 290rpx;
+    margin-right: 33rpx;
+    border-radius: 8rpx;
+  }
+
+  .single-title {
+    color: #000000;
+    font-size: 31.3rpx;
+    line-height: 40.6rpx;
+    font-weight: bold;
+    margin-bottom: 16rpx;
+  }
+
+  .single-brief {
+    color: #1A1A1A;
+    opacity: 0.5;
+    font-size: 27.1rpx;
+    line-height: 34.9rpx;
+    margin-bottom: 49rpx;
+  }
+
+  .single-bottom {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .single-bottom-left {
+    color: #1A1A1A;
+    opacity: 0.5;
+    font-size: 27.1rpx;
+    align-self: center;
+  }
+
+  .single-bottom-right {
+    color: #000000;
+    opacity: 0.5;
+    font-size: 16.7rpx;
+    line-height: 24rpx;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 8.3rpx;
+    align-self: center;
+    margin-left: 10rpx;
+    text-align: center;
+    padding: 10rpx 20rpx;
+  }
+
+  .shujia-list {
+    display: flex;
+    width: 698rpx;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .shujia-box-top {
+    display: flex;
+    width: 100%;
+    height: 100rpx;
+    padding: 30rpx 34rpx 36rpx 34rpx;
+    position: fixed;
+    top: 0rpx;
+    background-color: rgba(242, 242, 242, 0.95);
+    align-items: center;
+  }
+
+  .close_img {
+    width: 50rpx;
+    height: 50rpx;
+    margin-right: 30rpx;
+  }
+
+  .top_title {
+    font-size: 37.5rpx;
+    color: #1A1A1A;
+  }
+
+  .list-row {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    margin-bottom: 50rpx;
+  }
+
+  .last-list-row {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .shujia-books {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24rpx;
+  }
+
+  .image_div {
+    display: flex;
+    width: 188rpx;
+    height: 250rpx;
+    justify-content: flex-end;
+    align-items: flex-end;
+    background-size: cover;
+  }
+
+  .select_box {
+    margin: 7rpx;
+  }
+
+  .select_box_image {
+    width: 40rpx;
+  }
+
+  .checkbox {
+    width: 60rpx;
+  }
+
+  .shujia-line {
+    height: 30rpx;
+    width: 100%;
+    /* background-image: url(../img/shujia.png); */
+    background-repeat: no-repeat;
+  }
+
+  .shujia-line img {
+    width: 100%;
+  }
+
+  .tabs {
+    background-color: #F2F2F2;
+    height: 100rpx;
+    width: 100%;
+    position: fixed;
+    bottom: 0rpx;
+
+  }
+
+  .tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 33rpx;
+    margin-right: 33rpx;
+    padding-top: 14rpx;
+    padding-bottom: 11rpx;
+    width: 170.8rpx;
+    height: 104.2rpx;
+  }
+
+  .image-active {
+    width: 33rpx;
+    height: 33rpx;
+    /* resize-mode: contain; */
+  }
+
+  .title {
+    font-size: 20rpx;
+  }
+
+  /* 书架左上角标 */
+
+  .book_type_1 {
+    width: 67rpx;
+    height: 34rpx;
+    top: 16rpx;
+    left: 0rpx;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  stack{
+    position: relative;
+  }
+
+  .book_type_1 text {
+    width: 100%;
+    font-size: 20.8rpx;
+    color: #ffffff;
+    text-align: center;
+  }
+
+  /* 书架左下角 */
+
+  .book_type_2 {
+    width: 34rpx;
+    height: 34rpx;
+    top: 210rpx;
+    left: 8rpx;
+    position: absolute;
+    background-size: cover;
+  }
+
+  .book_name {
+    text-align: center;
+    font-size: 24rpx;
+    margin-top: 10rpx;
+    color: rgba(0,0,0,0.8);
+  }
+
+  .book-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.book-row {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+
+.book {
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.book-cover {
+  width: 188rpx;
+  height: 250rpx;
+}
+
+.book-title {
+  text-align: center;
+  margin-top: 5px;
+}

package/dist/templates/ascfRead/Page_Search/index.hxml

@@ -0,0 +1,108 @@
+<view class="container">
+    <view class="search_bar_container">
+        <view class="search_close">
+            <view class="image_search_back_div" bind:tap="search">
+                <image class="image_search_result " src="/Page_Search/img/search.png"></image>
+            </view>
+            <input class="search" id="search" name="search" value="{{ inputValue }}" placeholder="搜索书籍、作者" bind:change="updateValue" bindblur="addHistory" />
+            <view show="{{ inputValue != '' }}" class="image_search_back_div" bind:tap="resetSearchValue">
+                <image class="image_search_result close_size" src="/Page_Search/img//search_close.png"></image>
+            </view>
+        </view>
+    </view>
+    <view class="panel">
+        <!-- 搜素热词、历史显示区域 -->
+        <block has:if="{{ showPageType === 'searchBar' }}">
+            <!-- 大家都在看 -->
+            <view class="div_allsearch">
+                <view class="change_search">
+                    <text class="all_find">大家都在看</text>
+                    <a class="a_change_search" bind:tap="changeSearchWord">换一换</a>
+                </view>
+                <view class="spare_bar"></view>
+                <view class="change_content">
+                    <block has:for="{{ list }}" has:for-item="item">
+                        <a class="a_item" bind:tap="setInputValue" data-title="{{ item.name }}">
+                            {{ item.name }}
+                        </a>
+                    </block>
+                </view>
+            </view>
+            <view class="div_allsearch">
+                <view class="change_search">
+                    <text class="all_find">书籍热搜榜</text>
+                </view>
+                <view class="spare_bar"></view>
+                <view class="shucheng-box-seven">
+                    <swi list="{{ subjectlist }}" banner="{{ banner }}"></swi>
+                </view>
+            </view>
+            <view class="div_allsearch">
+                <view class="change_search">
+                    <text class="all_find">搜索历史</text>
+                    <text class="a_change_search" bind:tap="clearHis">清空</text>
+                </view>
+                <view class="spare_bar"></view>
+                <view class="change_content">
+                    <block has:for="{{ hisList }}" has:for-item="item" has:key="index">
+                        <a class="a_item" bind:tap="setInputValue">{{ item }}</a>
+                    </block>
+                </view>
+            </view>
+        </block>
+        <!-- 搜索结果页面展示区域 -->
+        <block has:if="{{ showPageType === 'result' }}">
+            <view class="result_number">
+                <text has:if="{{ searchResults.length > 0 }}">
+                    找到{{ searchResults.length }}本相关书籍
+                </text>
+                <text has:else="{{ searchResults.length <= 0 }}">没有找到相关书籍</text>
+            </view>
+            <view class="single-list">
+                <block has:for="{{ searchResults }}">
+                    <view class="single-item" bind:tap="clickToBookDetail()">
+                        <view>
+                            <image class="single-image" src="{{ item.src }}"></image>
+                        </view>
+                        <view class="single-description">
+                            <text class="single-title">{{ $item.name }}</text>
+                            <text class="single-brief">
+                                现代学生穿越三生三世十里桃花的世界，成为白浅的妹妹，保护白浅不吃苦，不经历伤情，成全墨渊与白浅
+                            </text>
+                            <view class="single-bottom">
+                                <text class="single-bottom-left">秋风雨</text>
+                                <text class="single-bottom-right">今日16520在读</text>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="single-line">
+                        <text></text>
+                    </view>
+                </block>
+            </view>
+        </block>
+        <!-- 动态联想此条展示区域 -->
+        <block has:if="{{ showPageType !== 'searchBar' && searchBook.length > 0 }}">
+            <view class="search-shujia">
+                <text>找到{{searchBook.length}}本书籍</text>
+            </view>
+            <view class="book-container">
+                <view class="book-row" has:for="{{searchBook}}" has:key="id" has:for-item="book" has:for-index="index">
+                    <view class="book-item">
+                        <view class="book">
+                            <view>
+                                <image class="book-cover" src="{{book.image}}"></image>
+                            </view>
+                            <view>
+                                <text class="book-title">{{book.name}}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </block>
+        <block has:if="{{showPageType !== 'searchBar' && searchBook.length == 0}}">
+            <view>未找到相关结果</view>
+        </block>
+    </view>
+</view>