|
|
|
@ -1,331 +1,652 @@ |
|
|
|
<template> |
|
|
|
<view class="home-container"> |
|
|
|
<!-- 顶部横幅图片 --> |
|
|
|
<view class="banner-section"> |
|
|
|
<!-- <image class="banner-image" src="@/static/首页背景图.png" mode="aspectFill"></image> --> |
|
|
|
<uv-swiper :list="bannerList" :loading="!bannerList.length" height="250"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 搜索区域 --> |
|
|
|
<SearchInput |
|
|
|
v-model="searchValue" |
|
|
|
placeholder="请输入展品名称" |
|
|
|
search-button-text="搜索" |
|
|
|
@search="handleSearch" |
|
|
|
/> |
|
|
|
<!-- 状态栏安全区域 --> |
|
|
|
<uv-status-bar></uv-status-bar> |
|
|
|
|
|
|
|
<!-- 展品分类 --> |
|
|
|
<view class="category-section" @click="openPicker"> |
|
|
|
<view class="category-label">{{ selectedCategory.label ||'展品分类' }}</view> |
|
|
|
<uv-icon name="arrow-down-fill" size="14" color="#C70019"></uv-icon> |
|
|
|
<!-- 顶部搜索栏 --> |
|
|
|
<view class="header"> |
|
|
|
<view class="search-container"> |
|
|
|
<uv-search |
|
|
|
placeholder="请输入要查询的内容" |
|
|
|
:show-action="false" |
|
|
|
shape="round" |
|
|
|
bg-color="#f5f5f5" |
|
|
|
color="#666" |
|
|
|
height="38" |
|
|
|
margin="0 200rpx 0 0" |
|
|
|
placeholderColor="#c6c6c6" |
|
|
|
></uv-search> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-picker ref="picker" confirmColor="#C70019" :columns="[columns[0], columns[1][0]]" keyName="label" @confirm="onCategoryConfirm" @change="onCategoryChange"></uv-picker> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 展品列表 --> |
|
|
|
<view class="exhibit-list"> |
|
|
|
<view class="exhibit-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item)"> |
|
|
|
<view class="item-header"> |
|
|
|
<text class="item-id">{{ item.id }}</text> |
|
|
|
<img src="@/static/copy.png" alt="我是复制黏贴" class="item-icon" @click="copyId(item.id)"> |
|
|
|
</view> |
|
|
|
<view class="item-border" /> |
|
|
|
<view class="item-content"> |
|
|
|
<view class="content-row"> |
|
|
|
<text class="name">{{ item.title }}</text> |
|
|
|
|
|
|
|
<!-- Tab栏 --> |
|
|
|
<view class="tab-container"> |
|
|
|
<scroll-view show-scrollbar="false" class="tab-scroll" scroll-x="true" > |
|
|
|
<view class="tab-list"> |
|
|
|
<view |
|
|
|
v-for="(tab, index) in tabs" |
|
|
|
:key="index" |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: activeTab === index }" |
|
|
|
@click="switchTab(index)" |
|
|
|
> |
|
|
|
{{ tab }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 轮播图 --> |
|
|
|
<view class="swiper-container"> |
|
|
|
<uv-swiper |
|
|
|
:list="bannerList" |
|
|
|
keyName="image" |
|
|
|
height="121" |
|
|
|
radius="12" |
|
|
|
indicator |
|
|
|
ndicatorInactiveColor="#fff" |
|
|
|
:loading="false" |
|
|
|
indicatorMode="dot" |
|
|
|
indicatorActiveColor="#F95A01" |
|
|
|
@click="onBannerClick" |
|
|
|
></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content-row"> |
|
|
|
<text class="label">展品编号</text> |
|
|
|
<text class="value">{{ item.id }}</text> |
|
|
|
<!-- 今日更新 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">今日更新</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#888"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" > |
|
|
|
<view class="content-list"> |
|
|
|
<view |
|
|
|
v-for="(item, index) in todayUpdates" |
|
|
|
:key="index" |
|
|
|
class="content-item" |
|
|
|
> |
|
|
|
<view class="item-cover"> |
|
|
|
<image :src="item.cover" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="item-info"> |
|
|
|
<text class="item-title">{{ item.title }}</text> |
|
|
|
<text class="item-author">{{ item.author }}</text> |
|
|
|
<view class="item-duration"><image src="/static/播放图标.png" class="item-icon" /><text>{{ item.duration }}</text></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content-row"> |
|
|
|
<text class="label">展品位置</text> |
|
|
|
<text class="value">{{ item.position }}</text> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 推荐书籍 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">推荐书籍</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#999"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" > |
|
|
|
<view class="book-list"> |
|
|
|
<view |
|
|
|
v-for="(book, index) in recommendBooks" |
|
|
|
:key="index" |
|
|
|
class="book-item" |
|
|
|
> |
|
|
|
<view class="book-cover"> |
|
|
|
<image :src="book.cover" mode="aspectFill"></image> |
|
|
|
<!-- <view class="book-duration"> |
|
|
|
<uv-icon name="time" size="10" color="#fff"></uv-icon> |
|
|
|
<text>{{ book.duration }}</text> |
|
|
|
</view> --> |
|
|
|
<view class="book-overlay"> |
|
|
|
<view class="book-duration"> |
|
|
|
<image src="/static/闹钟图标.png" class="book-duration-icon" /> |
|
|
|
<text class="book-duration-text">{{ book.duration }}</text> |
|
|
|
</view> |
|
|
|
<view class="book-title">{{ book.title }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content-row"> |
|
|
|
<text class="label">展品类型</text> |
|
|
|
<text class="value">{{ item.categoryId_dictText }}</text> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 四级精讲短文合集书 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">四级精讲短文合集书</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#999"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="book-grid"> |
|
|
|
<view |
|
|
|
v-for="(book, index) in bookGridList" |
|
|
|
:key="index" |
|
|
|
class="book-grid-item" |
|
|
|
> |
|
|
|
<view class="book-grid-cover"> |
|
|
|
<image :src="book.cover" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="content-row"> |
|
|
|
<text class="label">下次保养日期</text> |
|
|
|
<text class="value">{{ item.maintenanceDate }}</text> |
|
|
|
<view v-if="item.maintenanceProject" class="project"> |
|
|
|
{{ item.maintenanceProject }} |
|
|
|
<view class="book-grid-info"> |
|
|
|
<text class="book-grid-title">{{ book.title }}</text> |
|
|
|
<view class="book-grid-meta"> |
|
|
|
<text class="book-grid-grade">{{ book.grade }}/</text> |
|
|
|
<image src="/static/播放图标.png" class="book-grid-duration-icon" /> |
|
|
|
<text class="book-grid-duration">{{ book.duration }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="item-actions"> |
|
|
|
<uv-button |
|
|
|
size="small" |
|
|
|
color="#c70019" |
|
|
|
shape="circle" |
|
|
|
text="申请报修" |
|
|
|
@click.stop="handleRepair(item)" |
|
|
|
></uv-button> |
|
|
|
<uv-button |
|
|
|
|
|
|
|
size="small" |
|
|
|
text="保养提交" |
|
|
|
color="#c70019" |
|
|
|
shape="circle" |
|
|
|
plain |
|
|
|
@click.stop="handleMaintenance(item)" |
|
|
|
></uv-button> |
|
|
|
<uv-button |
|
|
|
color="#c70019" |
|
|
|
shape="circle" |
|
|
|
size="small" |
|
|
|
text="维修/保养记录" |
|
|
|
plain |
|
|
|
@click.stop="handleRecord(item)" |
|
|
|
></uv-button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 空状态 --> |
|
|
|
<uv-empty v-if="!list.length" icon="/static/暂无搜索结果.png" /> |
|
|
|
|
|
|
|
<!-- 推荐内容列表 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="recommend-list"> |
|
|
|
<view |
|
|
|
@click="goPlan()" |
|
|
|
v-for="(item, index) in recommendList" |
|
|
|
:key="index" |
|
|
|
class="recommend-item" |
|
|
|
> |
|
|
|
<image :src="item.image" mode="aspectFill" class="recommend-image"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import SearchInput from '@/pages/components/SearchInput.vue' |
|
|
|
import ListMixin from '@/mixins/list' |
|
|
|
|
|
|
|
export default { |
|
|
|
mixins: [ListMixin], |
|
|
|
components: { |
|
|
|
SearchInput |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
mixinListApi: 'exhibit.queryShowpieceList', |
|
|
|
searchValue: '', |
|
|
|
selectedCategory: { |
|
|
|
label: '', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
// Tab数据 |
|
|
|
tabs: ['为你推荐', '精选', '短文', '专栏', '初中', '四六级'], |
|
|
|
activeTab: 0, |
|
|
|
|
|
|
|
// 轮播图数据 |
|
|
|
bannerList: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 从状态管理工具中拿分类大数组 |
|
|
|
columns() { |
|
|
|
return this.$store.state.categoryList |
|
|
|
bannerList: [ |
|
|
|
{ |
|
|
|
image: '/static/首页背景图.png', |
|
|
|
title: '轮播图1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: '/static/默认图片.png', |
|
|
|
title: '轮播图2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: '/static/logo.png', |
|
|
|
title: '轮播图3' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
// 今日更新数据 |
|
|
|
todayUpdates: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
// 推荐书籍数据 |
|
|
|
recommendBooks: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'The Power of Now 擦拭才:The Power of Now :The Power of Now :', |
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'Dealing in Desire 擦擦:The Power of Now :The Power of Now :', |
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'A New Earth擦超2 :The Power of Now :The Power of Now :', |
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
// 书籍网格数据 |
|
|
|
bookGridList: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
// 推荐列表数据 |
|
|
|
recommendList: [ |
|
|
|
{ |
|
|
|
image: '/static/默认图片.png' |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: '/static/默认图片.png' |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: '/static/默认图片.png' |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: '/static/默认图片.png' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
handleSearch() { |
|
|
|
console.log('搜索的数值为', this.searchValue); |
|
|
|
this.initPage() |
|
|
|
this.getList(true) |
|
|
|
}, |
|
|
|
mixinSetParams() { |
|
|
|
const params = { } |
|
|
|
if (this.selectedCategory.value) { |
|
|
|
params.categoryId = this.selectedCategory.value |
|
|
|
} |
|
|
|
return { |
|
|
|
title: this.searchValue, |
|
|
|
...params |
|
|
|
} |
|
|
|
}, |
|
|
|
openPicker() { |
|
|
|
this.$refs.picker.open() |
|
|
|
|
|
|
|
}, |
|
|
|
onCategoryConfirm(e) { |
|
|
|
this.selectedCategory = e.value[1] |
|
|
|
console.log('选择分类:', e) |
|
|
|
this.initPage() |
|
|
|
this.getList(true) |
|
|
|
// TODO: 根据分类筛选展品 |
|
|
|
}, |
|
|
|
onCategoryChange(e) { |
|
|
|
const { columnIndex , index} = e |
|
|
|
if (columnIndex === 0) { |
|
|
|
this.$refs.picker.setColumnValues(1, this.columns[1][index]) |
|
|
|
} |
|
|
|
}, |
|
|
|
copyId(id) { |
|
|
|
uni.setClipboardData({ |
|
|
|
data: id, |
|
|
|
success: () => { |
|
|
|
uni.showToast({ |
|
|
|
title: '已复制到剪贴板', |
|
|
|
icon: 'success' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
// 切换Tab |
|
|
|
switchTab(index) { |
|
|
|
this.activeTab = index |
|
|
|
}, |
|
|
|
handleItemClick(item) { |
|
|
|
console.log('点击展品:', item) |
|
|
|
// TODO: 跳转到展品详情页 |
|
|
|
}, |
|
|
|
handleRepair(item) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPages/home/repairSubmit?id=' + item.id |
|
|
|
}) |
|
|
|
// TODO: 跳转到报修页面 |
|
|
|
}, |
|
|
|
handleMaintenance(item) { |
|
|
|
console.log('保养提交:', item) |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPages/home/maintainanceSubmit?id=' + item.id |
|
|
|
}) |
|
|
|
// TODO: 跳转到保养提交页面 |
|
|
|
|
|
|
|
// 轮播图点击事件 |
|
|
|
onBannerClick(index) { |
|
|
|
console.log('点击轮播图:', index) |
|
|
|
// 这里可以添加跳转逻辑 |
|
|
|
}, |
|
|
|
handleRecord(item) { |
|
|
|
console.log('查看记录:', item) |
|
|
|
// 跳转计划定制 |
|
|
|
goPlan() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPages/home/RAArecord?id=' + item.id |
|
|
|
url: '/subPages/home/plan' |
|
|
|
}) |
|
|
|
}, |
|
|
|
async getBannerList() { |
|
|
|
const bannerRes = await this.$api.config.queryBannerList() |
|
|
|
if (bannerRes.code === 200) { |
|
|
|
this.bannerList = bannerRes.result.records.map(item => item.image) |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
this.getBannerList() |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
|
|
.home-container { |
|
|
|
background-color: #fff; |
|
|
|
background: #fff; |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
.banner-section { |
|
|
|
width: 100%; |
|
|
|
height: 500rpx; |
|
|
|
// 顶部搜索栏 |
|
|
|
.header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 6rpx 32rpx; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.banner-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
.search-container { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Tab栏 |
|
|
|
.tab-container { |
|
|
|
background: #fff; |
|
|
|
// border-bottom: 1px solid #f0f0f0; |
|
|
|
|
|
|
|
.tab-scroll { |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
.tab-list { |
|
|
|
display: flex; |
|
|
|
padding: 0 20rpx; |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex-shrink: 0; |
|
|
|
padding: 20rpx 20rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #666; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: $primary-text-color; |
|
|
|
font-weight: 700; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 22rpx; |
|
|
|
height: 4rpx; |
|
|
|
background: $primary-text-color; |
|
|
|
border-radius: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 轮播图容器 |
|
|
|
.swiper-container { |
|
|
|
margin: 20rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.category-section { |
|
|
|
padding: 20rpx 48rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: start; |
|
|
|
gap: 9rpx; |
|
|
|
.category-label { |
|
|
|
font-size: 28rpx; |
|
|
|
color: $primary-color; |
|
|
|
} |
|
|
|
// 内容区块 |
|
|
|
.section { |
|
|
|
margin-top: 40rpx; |
|
|
|
|
|
|
|
.category-picker { |
|
|
|
.section-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border: 1rpx solid #ddd; |
|
|
|
border-radius: 8rpx; |
|
|
|
background-color: #fafafa; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 30rpx ; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
.section-title { |
|
|
|
font-size: 36rpx; |
|
|
|
// font-weight: 600; |
|
|
|
color: $primary-text-color; |
|
|
|
} |
|
|
|
|
|
|
|
.category-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #666; |
|
|
|
margin-right: 10rpx; |
|
|
|
.section-more { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 4rpx; |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 24rpx; |
|
|
|
color: $secondary-text-color; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content-scroll { |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.exhibit-list { |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
// 今日更新列表 |
|
|
|
.content-list { |
|
|
|
display: flex; |
|
|
|
padding: 0 30rpx; |
|
|
|
gap: 32rpx; |
|
|
|
|
|
|
|
.exhibit-item { |
|
|
|
background-color: #fff; |
|
|
|
.content-item { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 602rpx; |
|
|
|
height: 212rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background: #F8F8F8; |
|
|
|
padding: 16rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 30rpx 30rpx 45rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border-radius: 15rpx; |
|
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); |
|
|
|
.item-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: start; |
|
|
|
gap: 20rpx; |
|
|
|
padding-bottom: 14rpx; |
|
|
|
gap: 16rpx; |
|
|
|
.item-cover { |
|
|
|
width: 136rpx; |
|
|
|
height: 200rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
// overflow: hidden; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 136rpx; |
|
|
|
height: 200rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item-info { |
|
|
|
// padding-top: 20rpx; |
|
|
|
gap: 16rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
.item-title { |
|
|
|
|
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 700; |
|
|
|
color: $primary-text-color; |
|
|
|
letter-spacing: 0; |
|
|
|
line-height: 48rpx; |
|
|
|
// margin-bottom: 12rpx; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.item-id { |
|
|
|
font-size: 28rpx; |
|
|
|
.item-author { |
|
|
|
|
|
|
|
font-size: 24rpx; |
|
|
|
color: $secondary-text-color; |
|
|
|
// margin-bottom: 8rpx; |
|
|
|
letter-spacing: 0; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
.item-icon { |
|
|
|
width: 25.5rpx; |
|
|
|
height: 25.5rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.item-border { |
|
|
|
border-bottom: 1rpx solid $secondary-text-color; |
|
|
|
opacity: 0.22; |
|
|
|
} |
|
|
|
.item-content { |
|
|
|
margin-top: 26.5rpx; |
|
|
|
margin-bottom: 57rpx; |
|
|
|
|
|
|
|
.content-row { |
|
|
|
.item-duration { |
|
|
|
gap: 12rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 25rpx; |
|
|
|
|
|
|
|
.name{ |
|
|
|
font-size: 30rpx; |
|
|
|
color: $primary-text-color; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 22rpx; |
|
|
|
letter-spacing: 0; |
|
|
|
color: $secondary-text-color; |
|
|
|
.item-icon{ |
|
|
|
width: 22rpx; |
|
|
|
height: 25rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
// 推荐书籍列表 |
|
|
|
.book-list { |
|
|
|
display: flex; |
|
|
|
padding: 0 30rpx; |
|
|
|
gap: 32rpx; |
|
|
|
|
|
|
|
.book-item { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 270rpx; |
|
|
|
// border-radius: 16rpx; |
|
|
|
.book-cover { |
|
|
|
width: 100%; |
|
|
|
height: 360rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.book-overlay { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
width: 100%; |
|
|
|
height: 140rpx; |
|
|
|
padding-top: 4rpx; |
|
|
|
padding-right: 16rpx; |
|
|
|
padding-bottom: 8rpx; |
|
|
|
padding-left: 16rpx; |
|
|
|
backdrop-filter: blur(5px); |
|
|
|
box-sizing: border-box; |
|
|
|
background: #00000066; |
|
|
|
padding: 20rpx 16rpx 8rpx; |
|
|
|
// gap: 26rpx; |
|
|
|
|
|
|
|
.book-duration{ |
|
|
|
display: flex; |
|
|
|
gap: 8rpx; |
|
|
|
|
|
|
|
&-icon{ |
|
|
|
width: 24rpx; |
|
|
|
height: 24rpx; |
|
|
|
} |
|
|
|
&-text{ |
|
|
|
font-size: 20rpx; |
|
|
|
color: #DCDCDC; |
|
|
|
} |
|
|
|
} |
|
|
|
&:first-child { |
|
|
|
margin-bottom: 37rpx; |
|
|
|
|
|
|
|
.book-title { |
|
|
|
margin-top: 10rpx; |
|
|
|
max-width: 220rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
// max-height: 68rpx; /* = line-height * 2（34rpx * 2）作为保险 */ |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 2; /* 关键：显示两行，超过两行才省略 */ |
|
|
|
overflow: hidden; |
|
|
|
word-break: break-word; /* 长单词也能断行 */ |
|
|
|
white-space: normal; /* 允许换行 */ |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 书籍网格布局 |
|
|
|
.book-grid { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 0 30rpx; |
|
|
|
gap: 32rpx; |
|
|
|
|
|
|
|
.book-grid-item { |
|
|
|
width: 208rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.book-grid-cover { |
|
|
|
box-shadow: 0px 4px 4px 0px #C0BCBA75; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
height: 278rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.book-grid-info { |
|
|
|
padding: 6rpx; |
|
|
|
.book-grid-title { |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 700; |
|
|
|
color: $primary-text-color; |
|
|
|
margin-bottom: 14rpx; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.book-grid-meta { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// gap: 16rpx; |
|
|
|
.book-grid-duration-icon { |
|
|
|
width: 24rpx; |
|
|
|
height: 24rpx; |
|
|
|
margin-right: 12rpx; |
|
|
|
} |
|
|
|
.book-grid-grade { |
|
|
|
font-size: 24rpx; |
|
|
|
color: $secondary-text-color; |
|
|
|
// width: 200rpx; |
|
|
|
margin-right: 19rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
font-size: 22rpx; |
|
|
|
color: $primary-text-color; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
.project { |
|
|
|
// flex: 1; |
|
|
|
background: $primary-color; |
|
|
|
// border: 1px solid #707070; |
|
|
|
border-radius: 11rpx; |
|
|
|
color: #fff; |
|
|
|
font-size: 22rpx; |
|
|
|
padding: 6rpx 12rpx; |
|
|
|
.book-grid-duration { |
|
|
|
font-size: 24rpx; |
|
|
|
color: $secondary-text-color; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 推荐列表样式 |
|
|
|
.recommend-list { |
|
|
|
padding: 0 30rpx; |
|
|
|
|
|
|
|
.recommend-item { |
|
|
|
width: 100%; |
|
|
|
height: 200rpx; |
|
|
|
margin-bottom: 48rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.item-actions { |
|
|
|
margin-left: -10rpx; |
|
|
|
display: flex; |
|
|
|
gap: 55rpx; |
|
|
|
flex-wrap: wrap; |
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.recommend-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
hflllll
3 months ago
