|
|
@@ -9,10 +9,109 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <view class="pdx-30 pdy-10 bg-white">
|
|
|
+ <view class="flex ai_center jc_between">
|
|
|
+ <view class="menu_item" v-for="(item, index) in menuList" :class="{ active_menu: index === 0 }">
|
|
|
+ {{ item }}
|
|
|
+ <view v-if="index === 0" class="active_bg"></view>
|
|
|
+ <view v-else class="active"></view>
|
|
|
+ </view>
|
|
|
+ <up-input class="flex1 mgl-30" placeholder="搜索书名或作者" suffixIcon="search" suffixIconStyle="color: #909399"></up-input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y class="scroll_box">
|
|
|
+
|
|
|
+ <view class="pdy-30 pdx-30 bg-white">
|
|
|
+ <view class="">
|
|
|
+ <view class="flex ai_center jc_between">
|
|
|
+ <view class="flex ai_center text-32">
|
|
|
+ <svg t="1752222012281" class="w-50 h-50 mgr-10" viewBox="0 0 1024 1024" version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg" p-id="32757" width="128" height="128">
|
|
|
+ <path
|
|
|
+ d="M928.6 208c-27 1.4-51.8 18.6-62.7 43.4-12.1 27.7-6.2 56 10 76.3l-7.7 32.3c-15.7 66-74.6 112.5-142.5 112.5-76.4 0-139.9-58.7-146-134.8l-7.3-91.4c35.2-23.4 56-66.8 45.9-114-8.7-40.5-41.5-73.2-82.1-81.7C466.5 35.9 405 88.9 405 156.2c0 37.6 19.3 70.8 48.5 90.1l-7.3 91.4c-6.1 76.1-69.6 134.8-146 134.8-67.8 0-126.8-46.6-142.5-112.5l-7.7-32.3c16.2-20.2 22.1-48.6 10-76.3-10.8-24.8-35.6-42.1-62.7-43.4-49.4-2.5-85.3 40.7-77.4 86.3 4.4 25.2 21.1 45.2 42.8 54.8l65.6 463.5h769v-0.2l65.6-463.3c21.8-9.6 38.5-29.6 42.8-54.8 8.2-45.6-27.7-88.8-77.1-86.3z"
|
|
|
+ fill="#F9C85D" p-id="32758"></path>
|
|
|
+ <path d="M781.3 961.3h-541c-63 0-114-51-114-114h769c0 63-51.1 114-114 114z"
|
|
|
+ fill="#83C6EF" p-id="32759"></path>
|
|
|
+ <path d="M93 281.4m-73.9 0a73.9 73.9 0 1 0 147.8 0 73.9 73.9 0 1 0-147.8 0Z"
|
|
|
+ fill="#F9C85D" p-id="32760"></path>
|
|
|
+ <path
|
|
|
+ d="M928.6 208c-27 1.4-51.8 18.6-62.7 43.4-12.1 27.7-6.2 56 10 76.3l-7.7 32.3c-15.7 66-74.6 112.5-142.5 112.5-76.4 0-139.9-58.7-146-134.8l-7.3-91.4c35.2-23.4 56-66.8 45.9-114-8.7-40.5-41.5-73.2-82.1-81.7-7.9-1.7-15.7-2.3-23.4-2.3v764.4h384.5v-0.2l65.6-463.3c21.8-9.6 38.5-29.6 42.8-54.8 8.2-45.7-27.7-88.9-77.1-86.4z"
|
|
|
+ fill="#FFB103" p-id="32761"></path>
|
|
|
+ <path d="M933.3 281.4m-73.8 0a73.8 73.8 0 1 0 147.6 0 73.8 73.8 0 1 0-147.6 0Z"
|
|
|
+ fill="#F9C85D" p-id="32762"></path>
|
|
|
+ <path d="M513 154.3m-109.2 0a109.2 109.2 0 1 0 218.4 0 109.2 109.2 0 1 0-218.4 0Z"
|
|
|
+ fill="#F9C85D" p-id="32763"></path>
|
|
|
+ <path d="M510.8 847.3v114H784c61.5 0 111.3-49.8 111.3-111.3v-2.7H510.8z" fill="#429BCF"
|
|
|
+ p-id="32764"></path>
|
|
|
+ <path
|
|
|
+ d="M146.4 230.5c-8.7 45.1-45.9 84.2-99.2 108.5 12.6 10.1 28.4 16.3 45.8 16.3 40.8 0 73.9-33.1 73.9-73.9 0-19.7-7.9-37.6-20.5-50.9zM986.9 231.1c-10.1 44.5-47.9 82.7-101.3 106.3 12.9 11 29.4 17.9 47.7 17.9 40.8 0 73.8-33 73.8-73.8-0.1-19.6-7.8-37.2-20.2-50.4zM589.1 76c2.3 6.6 3.6 13.5 3.6 20.5 0 51.4-64.1 93.1-143.1 93.1-14.3 0-28.1-1.4-41.1-4 13.5 45 55.2 77.7 104.6 77.7 60.3 0 109.2-48.9 109.2-109.2-0.1-30.6-12.8-58.3-33.2-78.1z"
|
|
|
+ fill="#FFB103" p-id="32765"></path>
|
|
|
+ <path
|
|
|
+ d="M55.848334 249.331715a8.4 19.9 60 1 0 34.467811-19.9 8.4 19.9 60 1 0-34.467811 19.9Z"
|
|
|
+ fill="#F7EAD0" p-id="32766"></path>
|
|
|
+ <path
|
|
|
+ d="M945.164493 246.695113a19.9 8.4 30 1 0 8.4-14.549226 19.9 8.4 30 1 0-8.4 14.549226Z"
|
|
|
+ fill="#F7EAD0" p-id="32767"></path>
|
|
|
+ <path d="M469.7 77.7a41.4 10.6 0 1 0 82.8 0 41.4 10.6 0 1 0-82.8 0Z" fill="#F7EAD0"
|
|
|
+ p-id="32768"></path>
|
|
|
+ <path
|
|
|
+ d="M546 630.8h-61.4c-13.9 0-25.3-11.4-25.3-25.3s11.4-25.3 25.3-25.3H546c13.9 0 25.3 11.4 25.3 25.3s-11.4 25.3-25.3 25.3z"
|
|
|
+ fill="#DA3329" p-id="32769"></path>
|
|
|
+ <path d="M546 580.1h-33v50.7h33c13.9 0 25.3-11.4 25.3-25.3 0-14-11.4-25.4-25.3-25.4z"
|
|
|
+ fill="#C11B16" p-id="32770"></path>
|
|
|
+ </svg>
|
|
|
+ 排行榜
|
|
|
+ </view>
|
|
|
+ <view class="flex ai_center">
|
|
|
+ 查看全部榜单
|
|
|
+ <svg t="1752219361738" class="w-30 h-30 mgl-10" fill="#000" viewBox="0 0 1024 1024"
|
|
|
+ version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
|
|
|
+ <path
|
|
|
+ d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
|
|
|
+ p-id="12888"></path>
|
|
|
+ </svg>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="book_list mgt-30">
|
|
|
+ <view class="book_item" v-for="item in 5">
|
|
|
+ <image style="width: 86rpx;height: 113rpx;background-color: skyblue;border-radius: 12rpx;"
|
|
|
+ src="" mode="scaleToFill" />
|
|
|
+ <view class="mgl-10 flex flex1 fd_c jc_center">
|
|
|
+ <view class="ellipsis"><text>1</text>斗破苍穹斗破苍穹斗破苍穹斗破苍穹</view>
|
|
|
+ <view class="text-24 mgt-10 text-600" style="color: #fedb65">888.88万人阅读</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="pdy-30 pdx-30 bg-white mgt-30" v-for="item in 3">
|
|
|
+ <view class="">
|
|
|
+ <view class="flex ai_center text-32">
|
|
|
+ 全网精品
|
|
|
+ </view>
|
|
|
+ <view class="book_list_item mgt-30">
|
|
|
+ <view class="book_item" v-for="item in 5">
|
|
|
+ <image class="img" src="" mode="scaleToFill" />
|
|
|
+ <view class="book_name">
|
|
|
+ 斗破苍穹斗破苍穹斗破苍穹
|
|
|
+ </view>
|
|
|
+ <view class="hint">已完结</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="h-100 flex ai_center jc_center">
|
|
|
+ 到底啦~~
|
|
|
+ </view>
|
|
|
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 引入自定义 TabBar -->
|
|
|
+ <custom-tabbar :currentIndex='1' />
|
|
|
</view>
|
|
|
- <!-- 引入自定义 TabBar -->
|
|
|
- <custom-tabbar :currentIndex='1' />
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -32,11 +131,25 @@ onBeforeMount(() => {
|
|
|
});
|
|
|
|
|
|
|
|
|
+const menuList = ref([
|
|
|
+ '名作',
|
|
|
+ '佳作'
|
|
|
+])
|
|
|
+
|
|
|
+const value = ref('');
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+page {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+}
|
|
|
+
|
|
|
.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
.navBarBox {
|
|
|
.navBar {
|
|
|
width: 100%;
|
|
|
@@ -45,7 +158,126 @@ onBeforeMount(() => {
|
|
|
padding-left: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu_item {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #9b9b9b;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+
|
|
|
+ .active_menu {
|
|
|
+ color: #fd4345;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_bg {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #fd4345;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ font-size: 26rpx;
|
|
|
+ height: 50rpx !important;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ color: #9a9a9a;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll_box {
|
|
|
+ overflow-y: auto;
|
|
|
+ height: calc(100vh - 260rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_list {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-template-columns: repeat(auto-fill, 44vw);
|
|
|
+ grid-gap: 20rpx;
|
|
|
+
|
|
|
+ .book_item {
|
|
|
+ display: flex;
|
|
|
+ width: 44vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 超出2行
|
|
|
+ .ellipsis {
|
|
|
+ line-height: 1.2;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 限制显示2行 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_list_item {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-template-columns: repeat(auto-fill, 216rpx);
|
|
|
+ grid-gap: 20rpx;
|
|
|
+
|
|
|
+ .book_item {
|
|
|
+ position: relative;
|
|
|
+ width: 216rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 216rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ background-color: rgb(104, 122, 129);
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_name {
|
|
|
+ font-style: 28rpx;
|
|
|
+ color: #303030;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ /* 限制显示1行 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ background-color: #7d8bfb;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border-radius: 12rpx 0 12rpx 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|