From 2ac4aaad7abcda3ee1e9b562a0c8e0fd2f126f45 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 05 八月 2025 09:42:37 +0800
Subject: [PATCH] 协议页面复用问题
---
pages/mine/myCollect/myCollect.vue | 798 +++++++++++++++++++++++++-------------------------------
1 files changed, 362 insertions(+), 436 deletions(-)
diff --git a/pages/mine/myCollect/myCollect.vue b/pages/mine/myCollect/myCollect.vue
index 7251419..d198b7a 100644
--- a/pages/mine/myCollect/myCollect.vue
+++ b/pages/mine/myCollect/myCollect.vue
@@ -1,6 +1,5 @@
<template>
-
- <view class="activity-container">
+ <view class="page-container">
<!-- 椤堕儴 Tab 瀵艰埅 -->
<view class="tab-nav">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: currentTab === index}"
@@ -9,344 +8,389 @@
</view>
</view>
- <!-- 瑙嗛鍒楄〃 -->
- <view class="activity-list">
- <view v-if="currentTab === 0">
- <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="videoCollects.length > 0">
- <view v-for="(item, idx) in videoCollects" :key="idx" class="video-item">
- <!-- 瑙嗛灏侀潰+鎾斁鎸夐挳 -->
- <view class="video-cover-container">
- <image :src="item.coverUrl" mode="aspectFill" class="video-cover" />
- <view class="play-icon">
- <u-icon name="play-circle-fill" size="60" color="#fff"></u-icon>
- </view>
- <view class="video-duration" v-if="item.duration">{{ item.duration }}</view>
- </view>
-
- <!-- 瑙嗛淇℃伅 -->
- <view class="video-info">
- <view class="video-title">{{ item.authorName || '鏈煡浣滆��' }}</view>
- <view class="video-meta">
- <text class="video-weight" v-if="item.weight > 0">
- <u-icon name="thumb-up-fill" size="24" color="#999"></u-icon>
- {{ item.weight }}
- </text>
- </view>
- </view>
-
- <!-- 鎿嶄綔鎸夐挳 -->
- <view class="video-actions">
- <button class="cancel-btn" @click.stop="handleCancelCollection(item,'video')">
- 鍙栨秷鏀惰棌
- </button>
- </view>
- </view>
- </view>
- <view v-else class="empty-tip">
- <text>鏆傛棤鏀惰棌瑙嗛</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="videoCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- </scroll-view>
-
-
-
- </view>
-
- <view v-if="currentTab === 1">
- <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="goodsCollects.length > 0">
- <view v-for="(item, idx) in goodsCollects" :key="idx" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block>
- <image :src="item.original" mode="aspectFill" class="activity-cover" />
- </block>
-
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.goodsName }}</view>
- <view class="activity-meta">
- <text class="activity-time">浠锋牸:{{ item.price }}鍏�</text>
- <text class="activity-location">{{ item.storeName || '鏆傛棤' }}</text>
- </view>
- </view>
-
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item,'goods')"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
- </view>
- </view>
- <view v-else class="empty-tip">
-
- <text>鏆傛棤鏀惰棌鍟嗗搧</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="goodsCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- </scroll-view>
- </view>
-
- <view v-if="currentTab === 2">
- <scroll-view scroll-y class="activity-list" style="height: 80vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="activityCollects.length > 0">
- <view v-for="(item, idx) in activityCollects" :key="idx" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
- <image :src="item.cover" mode="aspectFill" class="activity-cover" />
- </block>
- <block v-if="item.coverType === '鏂囧瓧'">
- <view class="activity-cover text-cover">{{ item.cover }}</view>
- </block>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.activityName }}</view>
- <view class="activity-meta">
- <text class="activity-time">{{ item.startTime }}</text>
- <text class="activity-time"> {{ item.endTime }}</text>
- <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
- </view>
- </view>
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item,'activity')"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
+ <!-- 瑙嗛鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 0" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="videoCollects.length > 0">
+ <view v-for="(item, idx) in videoCollects" :key="item.id" class="collect-item">
+ <!-- 瑙嗛灏侀潰 -->
+ <image v-if="tem.videoContentType === 'img'" class="cover-image" :src="item.imgs[0]" mode="aspectFill"></image>
+
+ <view v-else class="cover-container">
+ <video class="cover-image"
+ :src="item.videoUrl"
+ initial-time='0.01'
+ muted
+ :controls="false"
+ :show-center-play-btn="false"
+ object-fit="cover"></video>
+ <!-- <image :src="getVideoCover()" mode="aspectFill" class="cover-image" /> -->
+ <!-- <view v-if="item.duration" class="duration">
+ {{ formatDuration(item.duration) }}
+ </view> -->
</view>
+ <!-- 瑙嗛淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.title || '鏃犳爣棰樿棰�' }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="account-fill" size="24" color="#999"></u-icon>
+ {{ item.authorName || '鏈煡浣滆��' }}
+ </view>
+ <view class="meta-item" v-if="item.weight > 0">
+ <u-icon name="thumb-up-fill" size="24" color="#999"></u-icon>
+ {{ item.weight }}
+ </view>
+ </view>
+ </view>
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'video', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
</view>
- <view v-else class="empty-tip">
- <text>鏆傛棤鏀惰棌娲诲姩</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="activityCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- <view style="height: 150rpx"></view>
- </scroll-view>
-
- </view>
-
-
-
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌瑙嗛</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="videoCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
</view>
+ <!-- 鍟嗗搧鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 1" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="goodsCollects.length > 0">
+ <view v-for="(item, idx) in goodsCollects" :key="item.id" class="collect-item">
+ <!-- 鍟嗗搧灏侀潰 -->
+ <view class="cover-container">
+ <image :src="item.original" mode="aspectFill" class="cover-image" />
+ </view>
+ <!-- 鍟嗗搧淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.goodsName }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="rmb-circle-fill" size="24" color="#FF5500"></u-icon>
+ {{ item.price }}鍏�
+ </view>
+ <view class="meta-item">
+ <u-icon name="home-fill" size="24" color="#999"></u-icon>
+ {{ item.storeName || '鏆傛棤' }}
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'goods', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+ </view>
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌鍟嗗搧</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="goodsCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
+ </view>
+
+ <!-- 娲诲姩鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 2" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="activityCollects.length > 0">
+ <view v-for="(item, idx) in activityCollects" :key="item.id" class="collect-item">
+ <!-- 娲诲姩灏侀潰 -->
+ <view class="cover-container">
+ <image v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'" :src="item.cover"
+ mode="aspectFill" class="cover-image" />
+ <view v-else-if="item.coverType === '鏂囧瓧'" class="text-cover">
+ {{ item.cover }}
+ </view>
+ </view>
+
+ <!-- 娲诲姩淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.activityName }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="calendar-fill" size="24" color="#999"></u-icon>
+ {{ item.startTime }} ~ {{ item.endTime }}
+ </view>
+ <view class="meta-item">
+ <u-icon name="map-pin-fill" size="24" color="#999"></u-icon>
+ {{ item.activityLocation || '鏆傛棤' }}
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'activity', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+ </view>
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌娲诲姩</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="activityCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
+ </view>
</view>
-
</template>
<script>
- import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue'
- import UImage from '@/uview-components/uview-ui/components/u-image/u-image.vue';
import {
- getFilePreviewUrl
- } from '@/api/common.js'
- import {
- changeCollect,
- getMyCollectList
+ getMyCollectList,
+ changeCollect
} from '@/api/collect.js'
- import {
- ifError
- } from 'assert'
+ import storage from '@/utils/storage'
+
export default {
- components: {
- UImage,
- ULoadmore
- },
data() {
return {
- total: 0,
- loading: false,
- noMore: {
- video: false,
- goods: false,
- activity: false
- },
- currentTab: 0, // 褰撳墠閫変腑鐨則ab绱㈠紩
+ currentTab: 0,
tabs: ['瑙嗛', '鍟嗗搧', '娲诲姩'],
- //
- videoCollects: [], // 鏀惰棌瑙嗛鍒楄〃
- goodsCollects: [], // 鏀惰棌鍟嗗搧鍒楄〃
- activityCollects: [], // 鏀惰棌娲诲姩鍒楄〃
- collectForm: {
- collectType: '',
- refId: '',
- },
+ videoCollects: [],
+ goodsCollects: [],
+ activityCollects: [],
query: {
+ authorId: '',
type: 'video',
pageNumber: 1,
- pageSize: 5,
- }
+ pageSize: 5
+ },
+ loading: false,
+ noMore: false,
+ total: 0
+ }
+ },
+ computed: {
+ loadStatus() {
+ return this.loading ? 'loading' : this.noMore ? 'nomore' : 'loadmore'
}
},
onLoad() {
- this.currentTab = 0;
- //TODO 鏈櫥褰曢渶瑕乮d锛屾祴璇曠敤鍐欐\
- this.getintit()
+ this.query.authorId = storage.getUserInfo().id
+ this.loadData()
+ },
+ onPullDownRefresh() {
+ this.query.pageNumber = 1
+ this.noMore = false
+ this.videoCollects = []
+ this.goodsCollects = []
+ this.activityCollects = []
+ this.loadData().finally(() => {
+ uni.stopPullDownRefresh()
+ })
},
methods: {
+ async getVideoCover(videoPath) {
+ return null;
+ },
- /**
- * 涓嬫媺鍒锋柊鏃�
- */
- onPullDownRefresh() {
- this.currentTab = 0;
- this.query.pageNumber = 1; // 閲嶇疆椤电爜
- this.noMore = false;
- this.videoCollects = [];
- this.goodsCollects = []; // 鏀惰棌鍟嗗搧鍒楄〃
- this.activityCollects = []; // 鏀惰棌娲诲姩鍒楄〃// 娓呯┖鏁版嵁
- this.getintit();
- },
- loadMore() {
- this.loading = true;
- this.query.pageNumber += 1;
- // 寤惰繜鎵ц璁︰I鏈夊弽搴旀椂闂�
- setTimeout(() => {
- this.query.pageNumber += 1;
- this.getintit();
- }, 300);
- },
- handleCancelCollection(item, type) {
- console.log(item)
- this.collectForm.collectType = type;
- this.collectForm.refId = item.id;
- changeCollect(this.collectForm).then(res => {
- if (res.statusCode === 200) {
- uni.showToast({
- title: res.data.msg, // 鎻愮ず鏂囧瓧
- icon: 'none', // 鍥炬爣绫诲瀷锛坰uccess/loading/none锛�
- mask: true // 鏄惁鏄剧ず閫忔槑钂欏眰锛堥槻姝㈣Е鎽哥┛閫忥級
- });
- this.getintit();
+
+ // 璺宠浆鍒拌棰戞挱鏀鹃〉
+ // jumpToPlay(index) {
+ // const playInfo = {
+ // videoList: this.videoCollects,
+ // nomore: this.noMore,
+ // pageNumber: this.query.pageNumber,
+ // playIndex: index
+ // }
+ // uni.setStorageSync("playInfo", playInfo)
+ // uni.navigateTo({
+ // url: `/pages/video/video-play?authorId=${this.query.authorId}&videoFrom=collect`
+ // })
+ // },
+
+ // 鍙栨秷鏀惰棌
+ handleCancelCollection(item, type, index) {
+ uni.showModal({
+ title: '鎻愮ず',
+ content: '纭畾瑕佸彇娑堟敹钘忓悧锛�',
+ success: (res) => {
+ if (res.confirm) {
+ changeCollect({
+ collectType: type,
+ refId: item.id
+ }).then(res => {
+ if (res.data.code === 200) {
+ uni.showToast({
+ title: res.data.msg,
+ icon: 'none'
+ })
+ if (type === 'video') {
+ this.videoCollects.splice(index, 1)
+ } else {
+ this.query.pageNumber = 1
+ this.noMore = false
+ this.loadData()
+ }
+ }
+ })
+ }
}
+ })
+ },
- })
- },
- getUrl(params) {
- getFilePreviewUrl(params).then(res => {
- return res.data.data
- })
- },
- // 鍒囨崲tab
+ // 鍒囨崲鏍囩椤�
switchTab(index) {
if (this.currentTab !== index) {
this.currentTab = index
- //鍒囨崲鏃堕〉鐮佸綊0
- this.query.pageNumber = 0;
- // 娓呯┖鏁版嵁
- this.videoCollects = [];
- this.goodsCollects = [];
- this.activityCollects = [];
- // 瀹為檯椤圭洰涓彲浠ュ湪杩欓噷娣诲姞鍔犺浇鏁版嵁鐨勯�昏緫
- this.getintit()
+ this.query.pageNumber = 1
+ this.query.type = ['video', 'goods', 'activity'][index]
+ this.videoCollects = []
+ this.goodsCollects = []
+ this.activityCollects = []
+ this.loadData()
}
},
- async getintit() {
+
+ // 鍔犺浇鏇村
+ loadMore() {
+ if (!this.loading && !this.noMore) {
+ this.query.pageNumber += 1
+ this.loadData()
+ }
+ },
+
+ // 鍔犺浇鏁版嵁
+ async loadData() {
+ if (this.loading) return
+
+ this.loading = true
uni.showLoading({
title: '鍔犺浇涓�'
- });
- if (this.currentTab === 0) {
- this.query.type = 'video';
+ })
+
+ try {
getMyCollectList(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
-
- if (res.statusCode === 200) {
+ if (res.data.code === 200) {
const newData = res.data.data
- this.total = res.data.total || 0;
- // 杩藉姞鎴栨浛鎹㈡暟鎹�
- this.videoCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.videoCollects, ...newData];
- // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
- this.noMore = newData.length < this.query.pageSize ||
- this.videoCollects.length >= this.total;
+ this.total = res.data.total || 0
- }
- })
- } else if (this.currentTab === 1) {
- this.query.type = 'goods';
- getMyCollectList(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
- if (res.statusCode === 200) {
- const newData = res.data.data
- this.total = res.data.total || 0;
+ // 鏍规嵁褰撳墠鏍囩椤垫洿鏂板搴旀暟鎹�
+ if (this.currentTab === 0) {
+ this.videoCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.videoCollects, ...newData]
+ } else if (this.currentTab === 1) {
+ this.goodsCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.goodsCollects, ...newData]
+ } else if (this.currentTab === 2) {
+ this.activityCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.activityCollects, ...newData]
+ }
- this.goodsCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.goodsCollects, ...newData];
- // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
this.noMore = newData.length < this.query.pageSize ||
- this.goodsCollects.length >= this.total;
+ (this.currentTab === 0 ? this.videoCollects :
+ this.currentTab === 1 ? this.goodsCollects : this.activityCollects)
+ .length >= this.total
}
- })
- } else if (this.currentTab === 2) {
- this.query.type = 'activity';
- getMyCollectList(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
- if (res.statusCode === 200) {
- const newData = res.data.data
- this.total = res.data.total || 0;
+ });
- this.activityCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.activityCollects, ...newData];
- this.noMore = newData.length < this.query.pageSize ||
- this.activityCollects.length >= this.total;
- }
+ } catch (error) {
+ console.error(error)
+ uni.showToast({
+ title: '鍔犺浇澶辫触',
+ icon: 'none'
})
+ } finally {
+ this.loading = false
+ uni.hideLoading()
}
-
}
}
}
</script>
<style lang="scss">
- .text-cover {
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
- color: #fff;
- font-size: 28rpx;
- padding: 16rpx;
- line-height: 1.4;
+ .page-container {
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ min-height: 100vh;
}
- /* 瑙嗛鍒楄〃涓撶敤鏍峰紡 */
- .video-item {
+ .tab-nav {
+ display: flex;
+ background-color: #fff;
+ border-radius: 12rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+ .tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 24rpx 0;
+ font-size: 28rpx;
+ color: #666;
+ position: relative;
+
+ &.active {
+ color: #007AFF;
+ font-weight: bold;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80rpx;
+ height: 6rpx;
+ background-color: #007AFF;
+ border-radius: 3rpx;
+ }
+ }
+ }
+ }
+
+ .list-container {
+ background-color: #fff;
+ border-radius: 12rpx;
+ padding: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+ .scroll-view {
+ height: calc(100vh - 200rpx);
+ }
+ }
+
+ .collect-item {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
@@ -357,18 +401,31 @@
}
}
- .video-cover-container {
+ .cover-container {
position: relative;
- width: 240rpx;
- height: 160rpx;
+ width: 250rpx;
+ height: 180rpx;
border-radius: 12rpx;
overflow: hidden;
margin-right: 24rpx;
flex-shrink: 0;
- .video-cover {
+ .cover-image {
width: 100%;
height: 100%;
+ }
+
+ .text-cover {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+ color: #fff;
+ font-size: 28rpx;
+ padding: 16rpx;
+ line-height: 1.4;
}
.play-icon {
@@ -379,7 +436,7 @@
opacity: 0.9;
}
- .video-duration {
+ .duration {
position: absolute;
right: 8rpx;
bottom: 8rpx;
@@ -391,14 +448,14 @@
}
}
- .video-info {
+ .info-container {
flex: 1;
+ height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
- height: 160rpx;
- .video-title {
+ .title {
font-size: 30rpx;
color: #333;
font-weight: bold;
@@ -408,22 +465,21 @@
overflow: hidden;
}
- .video-meta {
+ .meta {
display: flex;
- justify-content: space-between;
- font-size: 24rpx;
- color: #999;
+ flex-wrap: wrap;
-
-
- .video-weight {
+ .meta-item {
display: flex;
align-items: center;
+ margin-right: 20rpx;
+ font-size: 24rpx;
+ color: #999;
}
}
}
- .video-actions {
+ .action-container {
margin-left: 20rpx;
flex-shrink: 0;
@@ -447,6 +503,7 @@
image {
width: 300rpx;
+ height: 300rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
@@ -458,138 +515,7 @@
}
}
- .activity-container {
- padding: 20rpx;
- background-color: #f5f5f5;
- min-height: 100vh;
- }
-
- /* Tab 瀵艰埅鏍峰紡 */
- .tab-nav {
- display: flex;
- background-color: #fff;
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
-
- .tab-item {
- flex: 1;
- text-align: center;
- padding: 24rpx 0;
- font-size: 28rpx;
- color: #666;
- position: relative;
-
- &.active {
- color: #007AFF;
- font-weight: bold;
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 80rpx;
- height: 6rpx;
- background-color: #007AFF;
- border-radius: 3rpx;
- }
- }
- }
-
- /* 娲诲姩鍒楄〃鏍峰紡 */
- .activity-list {
- background-color: #fff;
- border-radius: 12rpx;
- padding: 20rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
-
- .activity-item {
- display: flex;
+ .load-more {
padding: 20rpx 0;
- border-bottom: 1rpx solid #eee;
-
- &:last-child {
- border-bottom: none;
- }
- }
-
- .activity-cover {
- width: 200rpx;
- height: 140rpx;
- border-radius: 8rpx;
- margin-right: 20rpx;
- }
-
- .activity-info {
- flex: 1;
- position: relative;
- }
-
- .activity-title {
- font-size: 32rpx;
- color: #333;
- font-weight: bold;
- margin-bottom: 12rpx;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- }
-
- .activity-meta {
- font-size: 24rpx;
- color: #999;
- margin-bottom: 16rpx;
-
- text {
- display: block;
- margin-bottom: 8rpx;
- }
- }
-
- .activity-status {
- position: absolute;
- right: 0;
- top: 0;
- font-size: 24rpx;
- padding: 4rpx 12rpx;
- border-radius: 20rpx;
-
- &.signed {
- color: #007AFF;
- background-color: rgba(0, 122, 255, 0.1);
- }
-
- &.ended {
- color: #999;
- background-color: rgba(153, 153, 153, 0.1);
- }
-
- &.canceled {
- color: #ff3b30;
- background-color: rgba(255, 59, 48, 0.1);
- }
- }
-
- /* 绌虹姸鎬佹彁绀� */
- .empty-tip {
- text-align: center;
- padding: 100rpx 0;
-
- image {
- width: 300rpx;
- margin-bottom: 30rpx;
- opacity: 0.6;
- }
-
- text {
- display: block;
- font-size: 28rpx;
- color: #999;
- }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0