From 054fc0743a85692b2af22ec0dfeada6926b05394 Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Wed, 19 Feb 2025 15:51:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E5=96=84pc=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/pc_web/home/components/second.vue       |   2 +-
 pages/pc_web/home/home.vue                    |   3 +-
 .../components/drawerComponents/create.vue    | 177 +++++
 .../components/drawerComponents/recharge.vue  | 214 ++++++
 .../components/drawerComponents/share.vue     | 281 ++++++++
 pages/pc_web/index/components/movable.vue     | 287 +++++++++
 .../pc_web/index/components/recordDrawer.vue  |  43 ++
 pages/pc_web/index/index.vue                  |  10 +-
 pages/pc_web/wall/wall.vue                    | 608 ++++++++++++++++++
 pages/pc_web/work/work.vue                    | 561 ++++++++++++++++
 10 files changed, 2180 insertions(+), 6 deletions(-)
 create mode 100644 pages/pc_web/index/components/drawerComponents/create.vue
 create mode 100644 pages/pc_web/index/components/drawerComponents/recharge.vue
 create mode 100644 pages/pc_web/index/components/drawerComponents/share.vue
 create mode 100644 pages/pc_web/index/components/movable.vue
 create mode 100644 pages/pc_web/index/components/recordDrawer.vue
 create mode 100644 pages/pc_web/wall/wall.vue
 create mode 100644 pages/pc_web/work/work.vue

diff --git a/pages/pc_web/home/components/second.vue b/pages/pc_web/home/components/second.vue
index 1f882fd..b1382b7 100644
--- a/pages/pc_web/home/components/second.vue
+++ b/pages/pc_web/home/components/second.vue
@@ -251,7 +251,7 @@ export default {
 		},
 		// 前往作品墙
 		toWall(){
-			// uni.navigateTo({url: `/pages/mobile_web/wall/detail`});
+			this.$emit('toWall');
 		},
 	}
 }
diff --git a/pages/pc_web/home/home.vue b/pages/pc_web/home/home.vue
index c14522d..906b526 100644
--- a/pages/pc_web/home/home.vue
+++ b/pages/pc_web/home/home.vue
@@ -35,7 +35,8 @@
 			</view>
 		</view>
 		<view class="second-content">
-			<Second @showToast="$emit('toast')" @handleChangeService="handleChangeService"/>
+			<Second @showToast="$emit('toast')" @handleChangeService="handleChangeService"
+			@toWall="$emit('toWall')" />
 		</view>
 	</view>
 </template>
diff --git a/pages/pc_web/index/components/drawerComponents/create.vue b/pages/pc_web/index/components/drawerComponents/create.vue
new file mode 100644
index 0000000..63e2da5
--- /dev/null
+++ b/pages/pc_web/index/components/drawerComponents/create.vue
@@ -0,0 +1,177 @@
+<template>
+	<view class="detail-content">
+		<u-section title="生成记录" :subTitle="`总数 ${total}`"
+		color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
+		<scroll-view :scroll-top="scrollTop" :scrollY="true" class="createList"
+		scroll-with-animation @scroll="scroll">
+			<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
+			borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
+			borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}" 
+			:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
+				<u-collapse-item v-for="(item, index) in createList" :key="item.id">
+					<template slot="title">
+						<view class="create-item-title">
+							<view class="cit-left">
+								{{ index+1 }}.  {{ item.type }}
+								<text :class="item.addOrSub === 'sub' ? 'citl-red' : 'citl-green'">
+									{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ item.value }}￥
+								</text>
+							</view>
+							<view class="cit-right">
+								{{ dateFormat(item.createtime) }}
+							</view>
+						</view>
+					</template>
+					<view class="create-item-content">{{item.description}}</view>
+				</u-collapse-item>
+				<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
+			</u-collapse>
+		</scroll-view>
+		<view @click="goTop">
+			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }" 
+			:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
+		</view>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+export default {
+	data(){
+		return{
+			// 是否结束——loadmore加载更多，loading加载中，nomore无更多
+			isFinish: 'nomore',
+			form: {
+				size: 20,
+				current: 1
+			},
+			// 滚动顶部
+			scrollTop: 0,
+			oldScrollTop: 0,
+			// 生成/消费记录
+			createList: [],
+			// 总数
+			total: 0,		
+		}
+	},		
+	mounted() {
+		this.init();
+	},
+	methods:{
+		// 滚动回顶部
+		goTop() {
+			this.scrollTop = this.oldScrollTop;
+			this.$nextTick(()=>{
+			    this.scrollTop = 0;
+			});
+		},	
+		// 滚动监听
+		scroll(e){
+			this.oldScrollTop = e.detail.scrollTop;
+		},
+		// 时间格式化
+		dateFormat(time){
+			let date = new Date(time);
+			let month = date.getMonth()+1,
+			day = date.getDate(),
+			hour = date.getHours(),
+			minute = date.getMinutes(),
+			second = date.getSeconds();
+			return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
+		},
+		// 加载更多
+		getMore(){
+			if(this.isFinish === 'nomore') return;
+			this.form.current++;
+			this.getCreateList();
+		},
+		// 获取生产记录列表
+		async getCreateList(){
+			this.isFinish = 'loading';
+			let res = await this.$api.getConsumption(this.form);
+			if(res?.success){
+				const { records, size, total, current } = res.data;
+				if(current === 1) this.createList = records;
+				else this.createList.push(...records);
+				this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
+				this.total = total;
+			}else{
+				this.$emit('toast',{type:'error',title: "生成记录获取失败!"});
+				this.isFinish = 'loadmore';
+			}
+		},
+		// 初始化
+		init(){
+			this.form = {size: 20,current: 1};
+			this.getCreateList();
+		},	
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.detail-content{
+	width: 800rpx;
+	height: 100vh;
+	padding: 50rpx 50rpx 20rpx;
+	border-radius: 16rpx;
+	.createList{
+		margin: 30rpx 0;
+		width: 100%;
+		height: 92vh;
+		.create-item-title{
+			width: 100%;
+			margin: 0 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.cit-left{
+				max-width: 50%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				text{
+					margin-left: 20rpx;
+				}
+				.citl-green{
+					color: #49cc90;
+				}
+				.citl-red{
+					color: #f93e3e;
+				}
+			}
+		}
+		.create-item-content{
+			margin: 10rpx 30rpx;
+			color: #888888;
+		}
+	}
+}
+.u-back-top{
+	cursor: pointer;
+	&:hover{
+		box-shadow: 0 0 20rpx #9989bb;
+	}
+	&:active{
+		box-shadow: 0 0 10rpx #9989bb;
+	}
+}
+::v-deep .u-more-text{
+	cursor: pointer;
+	&:hover{
+		opacity: 0.8;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+::v-deep .u-collapse-head{
+	background-color: #eee;
+	&:hover{
+		opacity: 0.8;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/index/components/drawerComponents/recharge.vue b/pages/pc_web/index/components/drawerComponents/recharge.vue
new file mode 100644
index 0000000..8b6a8c9
--- /dev/null
+++ b/pages/pc_web/index/components/drawerComponents/recharge.vue
@@ -0,0 +1,214 @@
+<template>
+	<view class="detail-content">
+		<u-section title="充值记录" :subTitle="`总数 ${total}`"
+		color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
+		<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
+		scroll-with-animation @scroll="scroll">
+			<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
+			borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
+			borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}" 
+			:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
+				<u-collapse-item v-for="(item, index) in rechargeList" :key="item.id">
+					<template slot="title">
+						<view class="recharge-item-title">
+							<view class="cit-left">
+								{{ index+1 }}.  钻石充值
+								<text :class="item.result ? 'citl-green' : 'citl-red'">
+									{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ options[item.buyType-1] }}
+								</text>
+							</view>
+							<view class="cit-right">
+								{{ dateFormat(item.createTime) }}
+							</view>
+						</view>
+					</template>
+					<view class="recharge-item-content">
+						{{ item.orderType || '钻石充值' }} {{ options[item.buyType-1] }}钻 {{ item.amount }}￥ —{{ item.result || '支付失败' }}
+					</view>
+				</u-collapse-item>
+				<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
+			</u-collapse>
+		</scroll-view>
+		<view class="recharge-tips">
+			<view class="tips-green"><view class="tip-green"></view>充值成功</view>
+			<view class="tips-red"><view class="tip-red"></view>充值失败</view>
+		</view>
+		<view @click="goTop">
+			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }" 
+			:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
+		</view>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+export default {
+	data(){
+		return{
+			// 是否结束——loadmore加载更多，loading加载中，nomore无更多
+			isFinish: 'nomore',
+			form: {
+				size: 20,
+				current: 1
+			},
+			// 滚动顶部
+			scrollTop: 0,
+			oldScrollTop: 0,
+			// 充值记录
+			rechargeList: [],
+			// 总数
+			total: 0,
+			// 额度选项
+			options: [5,10,20,30,50,100],
+		}
+	},		
+	mounted() {
+		this.init();
+	},
+	methods:{
+		// 滚动回顶部
+		goTop() {
+			this.scrollTop = this.oldScrollTop;
+			this.$nextTick(()=>{
+			    this.scrollTop = 0;
+			});
+		},
+		// 滚动监听
+		scroll(e){
+			this.oldScrollTop = e.detail.scrollTop;
+		},
+		// 时间格式化
+		dateFormat(time){
+			let date = new Date(time);
+			let month = date.getMonth()+1,
+			day = date.getDate(),
+			hour = date.getHours(),
+			minute = date.getMinutes(),
+			second = date.getSeconds();
+			return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
+		},
+		// 加载更多
+		getMore(){
+			if(this.isFinish === 'nomore') return;
+			this.form.current++;
+			this.getRechargeList();
+		},
+		// 获取充值记录列表
+		async getRechargeList(){
+			this.isFinish = 'loading';
+			let res = await this.$api.getOrders(this.form);
+			if(res?.success){
+				const { records, size, total, current } = res.data;
+				if(current === 1) this.rechargeList = records;
+				else this.rechargeList.push(...records);
+				this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
+				this.total = total;
+			}else{
+				this.$refs.uToast.show({type:'error',title: "充值记录获取失败!"});
+				this.isFinish = 'loadmore';
+			}
+		},
+		// 初始化
+		init(){
+			const { id } = JSON.parse(this.$store.state.user_message);
+			if(!id) return;
+			this.form = {size: 20,current: 1,memberId: id};
+			this.getRechargeList();
+		},	
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.detail-content{
+	width: 800rpx;
+	height: 100vh;
+	padding: 50rpx 50rpx 20rpx;
+	border-radius: 16rpx;
+	.rechargeList{
+		margin: 30rpx 0;
+		width: 100%;
+		height: 88vh;
+		.recharge-item-title{
+			width: 100%;
+			margin: 0 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.cit-left{
+				max-width: 50%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				text{
+					margin-left: 20rpx;
+				}
+				.citl-green{
+					color: #49cc90;
+				}
+				.citl-red{
+					color: #f93e3e;
+				}
+			}
+		}
+		.recharge-item-content{
+			margin: 10rpx 30rpx;
+			color: #888888;
+		}
+	}
+	.recharge-tips{
+		display: flex;
+		align-items: center;
+		.tips-green{
+			display: flex;
+			align-items: center;
+			color: #49cc90;
+			margin-right: 20rpx;
+			.tip-green{
+				width: 22rpx;
+				height: 22rpx;
+				margin-right: 10rpx;
+				background-color: #49cc90;
+			}
+		}
+		.tips-red{
+			display: flex;
+			align-items: center;
+			color: #f93e3e;
+			.tip-red{
+				width: 22rpx;
+				height: 22rpx;
+				margin-right: 10rpx;
+				background-color: #f93e3e;
+			}
+		}
+	}
+}
+.u-back-top{
+	cursor: pointer;
+	&:hover{
+		box-shadow: 0 0 20rpx #9989bb;
+	}
+	&:active{
+		box-shadow: 0 0 10rpx #9989bb;
+	}
+}
+::v-deep .u-more-text{
+	cursor: pointer;
+	&:hover{
+		opacity: 0.8;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+::v-deep .u-collapse-head{
+	background-color: #eee;
+	&:hover{
+		opacity: 0.8;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/index/components/drawerComponents/share.vue b/pages/pc_web/index/components/drawerComponents/share.vue
new file mode 100644
index 0000000..9444a2d
--- /dev/null
+++ b/pages/pc_web/index/components/drawerComponents/share.vue
@@ -0,0 +1,281 @@
+<template>
+	<view class="detail-content">
+		<u-section title="发布记录" sub-title="筛选"
+		color="#a3d4fe" fontSize="40" subColor="#cdfbf2">
+			<template slot="right">
+				<image @click="showSift = true" class="dc-sift" src="/static/sift.png"></image>
+			</template>
+		</u-section>
+		<scroll-view :scrollTop="scrollTop" :scrollY="true" class="shareList"
+		scroll-with-animation @scroll="scroll">
+			<u-swipe-action :index="index" v-for="(item, index) in shareList" 
+			:key="item.id" @click="handleClick" bgColor="#eee" @content-click="contentClick"
+			:options="swipeOptions">
+				<view class="share-item" :class="currentClickIndex===index?'change-morphology':''">
+					<view class="si-left">
+						<u-lazy-load border-radius="16" class="sil-image" :height="currentClickIndex===index? 200 : 140"
+						:image="getImagePath(item.path)" @click.native.stop="previewImage(item.path)"></u-lazy-load>
+					</view>
+					<view class="si-right">
+						<text :style="{color: statusList[item.reviewStatus]?statusList[item.reviewStatus].color:'#61affe'}">
+							{{ statusList[item.reviewStatus]?statusList[item.reviewStatus].name:'未知' }}
+						</text>
+						<text>{{ dateFormat(item.createtime) }}</text>
+					</view>
+				</view>
+			</u-swipe-action>
+			<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
+		</scroll-view>
+		<view @click="goTop">
+			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }" 
+			:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
+		</view>
+		<u-select v-model="showSift" :list="statusList" @confirm="selectSift" :defaultValue="[siftIndex]"
+		confirm-color="#94d500" labelName="name" valueName="value"></u-select>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+import { tools } from '@/utils/utils.js';
+export default {
+	data(){
+		return{
+			// 是否结束——loadmore加载更多，loading加载中，nomore无更多
+			isFinish: 'nomore',
+			form: {
+				size: 10,
+				current: 1,
+				reviewStatus: ''
+			},
+			currentClickIndex: '',
+			// 滚动顶部
+			scrollTop: 0,
+			oldScrollTop: 0,
+			// 生成/消费记录
+			shareList: [],
+			// 单元滑动格删除样式
+			swipeOptions: [{text:'删除',style:{backgroundColor:'#dd524d',marginRight: '-2rpx'}}],
+			// 状态列表
+			statusList: [
+				{name: '全部', color: '#61affe', value: ''},
+				{name: '审核中', color: '#fca130', value: 1},
+				{name: '通过', color: '#49cc90', value: 2},
+				{name: '未通过', color: '#f93e3e', value: 3},
+				{name: '已推荐', color: '#49cc90', value: 4},
+				{name: '取消推荐', color: '#fca130', value: 5},
+			],
+			// 筛选下标
+			siftIndex: 0,
+			// 筛选显示
+			showSift: false,
+		}
+	},
+	mounted() {
+		this.init();
+	},
+	methods:{
+		// 图片格式化
+		getImagePath(path){
+			if(!path) return;
+			let index = path?.indexOf('?');
+			let judge = path?.includes(configService.anotherAliUrl);
+			return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.staticIp+path);
+		},
+		// 滚动回顶部
+		goTop() {
+			this.scrollTop = this.oldScrollTop;
+			this.$nextTick(()=>{
+			    this.scrollTop = 0;
+			});
+		},
+		// 滚动监听
+		scroll(e){
+			this.oldScrollTop = e.detail.scrollTop;
+		},
+		// 时间格式化
+		dateFormat(time){
+			let date = new Date(time);
+			let month = date.getMonth()+1,
+			day = date.getDate(),
+			hour = date.getHours(),
+			minute = date.getMinutes(),
+			second = date.getSeconds();
+			return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
+		},
+		// 点击按钮
+		async handleClick(itemIndex, functionIndex){
+			// 删除
+			if(functionIndex === 0) {
+				let that = this;
+				uni.showModal({
+					title: '提示',
+					content: `是否确认删除该作品发布？`,
+					confirmColor: '#94d500',
+					success: async (res) => {
+						if (res.confirm) {
+							let res = await that.$api.deleteReleases(that.shareList[itemIndex].id);
+							if(res?.success){
+								that.currentClickIndex = '';
+								that.shareList.splice(itemIndex, 1);
+								that.$emit('toast',{type:'success',title: "发布记录删除成功!"});
+							}else{
+								that.$emit('toast',{type:'error',title: "发布记录删除失败!"});
+							}
+						}
+					}
+				});
+			}
+		},
+		// 内容点击
+		contentClick(index){
+			this.currentClickIndex = this.currentClickIndex===index ? '' : index;
+		},
+		// 预览图片
+		previewImage(path){
+			tools.methods.lookImage(0,[this.getImagePath(path)]);
+		},
+		// 加载更多
+		getMore(){
+			if(this.isFinish === 'nomore') return;
+			this.form.current++;
+			this.getShareList();
+		},
+		// 获取生产记录列表
+		async getShareList(){
+			this.isFinish = 'loading';
+			let res = await this.$api.getReleases(this.form);
+			if(res?.success){
+				const { records, size, total, current } = res.data;
+				if(current === 1) this.shareList = records;
+				else this.shareList.push(...records);
+				this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
+			}else{
+				this.$emit('toast',{type:'error',title: "发布记录获取失败!"});
+				this.isFinish = 'loadmore';
+			}
+		},
+		// 初始化
+		init(){
+			this.form = {size: 10, current: 1, reviewStatus: ''};
+			this.getShareList();
+		},
+		// 筛选
+		selectSift(e){
+			const value = e[0].value;
+			this.siftIndex = value === '' ? 0 : value;
+			this.form = {size: 10, current: 1, reviewStatus: value};
+			this.currentClickIndex = '';
+			this.getShareList();
+		},
+	}
+}		
+</script>
+
+<style scoped lang="scss">
+.detail-content{
+	width: 800rpx;
+	height: 100vh;
+	padding: 50rpx 50rpx 20rpx;
+	border-radius: 16rpx;
+	.shareList{
+		margin: 30rpx 0;
+		width: 100%;
+		height: 92vh;
+		.share-item{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: wrap;
+			margin: 20rpx;
+			.si-left{
+				transition: 0.3s;
+				width: 140rpx;
+				height: 140rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.sil-image{
+					width: 140rpx;
+					height: 140rpx;
+				}
+			}
+			.si-right{
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				height: 140rpx;
+				justify-content: space-around;
+				color: #b3a0da;
+				text{
+					margin-right: 20rpx;
+				}
+			}
+		}
+		.change-morphology{
+			.si-left{
+				width: 100%;
+				height: 100%;
+				transition: 0.5s;
+				.sil-image{
+					width: 200rpx;
+					height: 200rpx;
+				}
+			}
+			.si-right{
+				width: 100%;
+				align-items: center;
+				justify-content: center;
+				text{
+					margin-bottom: 10rpx;
+					margin-right: 0rpx;
+				}
+			}
+		}
+	}
+	.dc-sift{
+		width: 50rpx;
+		height: 50rpx;
+		margin-bottom: -6rpx;
+		filter: drop-shadow(0 0 14rpx #4d6578);
+		cursor: pointer;
+		&:hover{
+			opacity: 0.9;
+		}
+		&:active{
+			opacity: 0.7;
+		}
+	}
+}
+.u-back-top{
+	cursor: pointer;
+	&:hover{
+		box-shadow: 0 0 20rpx #9989bb;
+	}
+	&:active{
+		box-shadow: 0 0 10rpx #9989bb;
+	}
+}
+::v-deep .u-swipe-action{
+	border-radius: 10rpx;
+	margin: 0 0 20rpx;
+}
+::v-deep .u-select__header__btn{
+	cursor: pointer;
+	&:hover{
+		opacity: 0.9;
+	}
+	&:active{
+		opacity: 0.7;
+	}
+}
+::v-deep .u-more-text{
+	cursor: pointer;
+	&:hover{
+		opacity: 0.8;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/index/components/movable.vue b/pages/pc_web/index/components/movable.vue
new file mode 100644
index 0000000..e9ff700
--- /dev/null
+++ b/pages/pc_web/index/components/movable.vue
@@ -0,0 +1,287 @@
+<template>
+	<view>
+		<!-- 悬浮按钮 -->
+		<view class="movableArea">
+			<view class="movableView" @click="show = true">
+				<u-icon name="kefu-ermai" size="56" :color="textColor"></u-icon>
+			</view>
+		</view>
+		<u-popup v-model="show" mode="center" border-radius="20">
+			<view class="modal-content">
+				<form @submit="submit">
+					<view class="dc-form">
+						<u-divider bgColor="#ffffff00" half-width="240" fontSize="40" color="#424242" borderColor="#578ce4">问题反馈</u-divider>
+						<view class="blocks">
+							<view class="block_input">
+								<view><text>*</text>联系方式：</view>
+								<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
+								<view class="tip" v-show="tip.phone">请输入正确的联系方式</view>
+							</view>
+							
+							<view class="block_input">
+								<view><text>*</text>留言：</view>
+								<view class="message-textarea">
+									<textarea name="message" v-model="form.message" placeholder="请输入留言内容"  :maxlength="messageMaxlength"></textarea>
+									<view class="mt-tip">
+										{{ form.message.length }} / {{ messageMaxlength }}
+									</view>
+								</view>
+								<view class="tip" v-show="tip.message">请输入留言内容</view>
+							</view>
+						</view>
+						<view class="dcf-btn">
+							<u-button ripple :disabled="loading" :loading="loading" :hairLine="false" 
+							:class="loading?'submit-disabled':''" class="messageSubmit" form-type="submit">提交</u-button>
+						</view>
+					</view>
+				</form>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				form:{
+					phone: '',// 联系方式
+					message: ''// 留言
+				},
+				tip: {
+					phone: false,
+					message: false
+				},
+				messageMaxlength: 300,// 留言最长字数
+				loading: true, // 加载
+			};
+		},
+		props: {
+			textColor: {
+				type: String,
+				default: '#333'
+			}
+		},
+		mounted() {
+			this.loading = false;
+			this.form.phone = JSON.parse(this.$store.state.user_message)?.username;
+		},
+		methods: {
+			// 提交申请
+			async submit(e){
+				try{
+					this.loading = true;
+					const { phone, message } = this.form;
+					this.tip = {
+						phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
+						message:message===''
+					}
+					
+					if(!(/^1[345789]\d{9}$/.test(phone))){
+						this.$emit('toast',{type:'warning',title: "联系方式不正确!"});
+						return;
+					}else if(message===''){
+						this.$emit('toast',{type:'warning',title: "请输入留言内容!"});
+						return;
+					}
+					let res = await this.$api.addMessage(this.form);
+					if(res.success){
+						this.$emit('toast',{type:'success',title: "提交成功!"});
+						this.clear();
+					}else{
+						this.$emit('toast',{type:'error',title: "提交失败!"});
+					}
+				}catch(e){
+					this.$emit('toast',{type:'error',title: "处理失败!"});
+				}finally{
+					this.loading = false;
+				}
+			},
+			// 清空
+			clear(){
+				this.form= {
+					phone: '',// 联系方式
+					message: ''// 留言
+				};
+				this.tip={
+					phone: false,
+					message: false
+				};
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.movableArea {
+	position: fixed;
+	top: 120rpx;
+	left: 0;
+	width: 100%;
+	height: calc(100% - 120rpx);
+	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
+	z-index: 80;
+	
+	.movableView {
+		position: fixed;
+		right: -96rpx;
+		bottom: 400rpx;
+		pointer-events: auto; //可以点击
+		cursor: pointer;
+		width: 120rpx;
+		height: 120rpx;
+		// border-radius: 78rpx;
+		opacity: 0.8;
+		border-top-left-radius: 14rpx;
+		border-bottom-left-radius: 14rpx;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
+		background: rgba(255,255,255,0.99);
+		transition: 0.3s;
+		.iconImage {
+			width: 80rpx;
+			height: 70rpx;
+			display: block;
+		}
+		&:hover{
+			right: 0;
+			border-radius: 78rpx;
+			opacity: 1;
+		}
+		&:active{
+			opacity: 0.7;
+		}
+	}
+}
+.modal-content{
+	width: 1000rpx;
+	// height: 500rpx;
+	padding: 40rpx 70rpx 0rpx;
+	color: #f9f9f9;
+	.dc-form{
+		display: flex;
+		flex-direction: column;
+		.blocks{
+			display: flex;
+			flex-direction: column;
+			.block_title{
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 800;
+				font-size: 36rpx;
+				color: #000000;
+				line-height: 40rpx;
+			}
+			.block_input{
+				margin-top: 30rpx;
+				margin-bottom: 32rpx;
+				.tip{
+					color: #FE020E;
+					margin-top: 4rpx;
+					font-size: small;
+					margin-bottom: 0rpx !important;
+				}
+				view{
+					font-family: PingFang SC, PingFang SC;
+					font-size: 32rpx;
+					color: #000000;
+					line-height: 40rpx;
+					margin-bottom: 16rpx;
+					text{
+						vertical-align: middle;
+						color: #FE020E;
+						font-weight: bold;
+						margin-right: 8rpx;
+					}
+				}
+				input{
+					height: 92rpx;
+					background: #F8F9FB;
+					border-radius: 4rpx;
+					color: rgba(0,0,0,0.8);
+					padding:0 32rpx;
+					font-size: 32rpx;
+					border-radius: 15rpx;
+				}
+				.message-textarea{
+					width: 100%;
+					position: relative;
+					textarea{
+						padding: 32rpx;
+						width: 100%;
+						height: 400rpx;
+						background: #F8F9FB;
+						border-radius: 4rpx;
+						color: rgba(0,0,0,0.8);
+						font-size: 32rpx;
+						border-radius: 15rpx;
+					}
+					.mt-tip{
+						position: absolute;
+						font-size: 28rpx;
+						right: 32rpx;
+						bottom: 10rpx;
+						z-index: 2;
+						background-color: #f8f9fb;
+						padding: 5rpx;
+						border-radius: 8rpx;
+					}
+				}
+			}
+		}
+		.dcf-btn{
+			flex: 1;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			justify-content: flex-end;
+		}
+	}
+}
+.messageSubmit{
+	width: 100%;
+	background-size: 200% auto;
+	transition: 0.5s;
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	border: none;
+	background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
+	background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
+	height: 100rpx;
+	font-size: 30rpx;
+	font-weight: bold;
+	color: #fff;
+	border-radius: 56rpx;
+	margin-top: 20rpx;
+	margin-bottom: 60rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 35rpx;
+	&::after{
+		display: none;
+	}
+	&:hover {
+	    background-position: right center;
+	    color: #f8f9fb;
+	    text-decoration: none;
+	}
+	&:active{
+		opacity: 0.6;
+	}
+}
+.submit-disabled{
+	cursor: default;
+	opacity: 0.5;
+	&:hover {
+	    background-position: inherit !important;
+	    color: rgba(0, 0, 0, 0.3) !important;
+	}
+	&:active{
+		opacity: 0.5;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/index/components/recordDrawer.vue b/pages/pc_web/index/components/recordDrawer.vue
new file mode 100644
index 0000000..f9b81af
--- /dev/null
+++ b/pages/pc_web/index/components/recordDrawer.vue
@@ -0,0 +1,43 @@
+<template>
+	<u-popup :value="showDialog" mode="right" @close="$emit('close')">
+		<view class="drawer-view">
+			<component ref="drawerRef" @toast="showToast" :is="refType" />
+		</view>
+	</u-popup>
+</template>
+
+<script>
+import Share from './drawerComponents/share.vue';
+import Create from './drawerComponents/create.vue';
+import Recharge from './drawerComponents/recharge.vue';
+export default {
+	components:{ Share, Create, Recharge },
+	props: {
+		refType: {
+			type: String,
+			default: 'share'
+		},
+		showDialog: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data(){
+		return{
+			
+		}
+	},
+	methods:{
+		// 提示弹窗
+		showToast(content){
+			this.$emit('toast',content);
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.drawer-view{
+	
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/index/index.vue b/pages/pc_web/index/index.vue
index 31d7d92..f0b0572 100644
--- a/pages/pc_web/index/index.vue
+++ b/pages/pc_web/index/index.vue
@@ -6,7 +6,8 @@
 		  </view>
 		  <view style="width: 100%;height: 100rpx;"></view>
 		  <view class="pc-main">
-		  	<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
+		  	<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId" 
+			:is="refs[current]" @toWall="changePlat(3)"/>
 		  </view>
 		</el-container>
 		<Movable textColor="#94d500" @toast="showToast" v-if="isLogin !== ''"/>
@@ -31,11 +32,12 @@ import Home from '@/pages/pc_web/home/home.vue';
 import Workshops from '@/pages/pc_web/workshops/workshops.vue';
 import Work from '@/pages/pc_web/work/work.vue';
 import Movable from './components/movable.vue';
+import Wall from '../wall/wall.vue';
 import configService from '@/common/config.service.js';
 import { tools } from '@/utils/utils.js';
 export default {
 	components:{
-		Header, Home, Workshops, Work, Movable
+		Header, Home, Workshops, Work, Movable, Wall
 	},
 	data(){
 		return{
@@ -45,7 +47,7 @@ export default {
 			// 当前页码下标
 			current: uni.getStorageSync('pc_current')||0,
 			// refs组件列表
-			refs: ['home','workshops','work'],
+			refs: ['home','workshops','work','wall'],
 			// 加载
 			loading: false,
 			// 滚动顶部
@@ -103,7 +105,7 @@ export default {
 		// 切换主体
 		changePlat(current){
 			if(this.current === current) return;
-			if(current !== 0 && !this.isLogin){
+			if(current !== 0 && current !== 3 && !this.isLogin){
 				this.$refs.header.showLogin = true;
 				this.$refs.uToast.show({type: 'warning', title: '请先登录！'});
 				return;
diff --git a/pages/pc_web/wall/wall.vue b/pages/pc_web/wall/wall.vue
new file mode 100644
index 0000000..2a7e8c2
--- /dev/null
+++ b/pages/pc_web/wall/wall.vue
@@ -0,0 +1,608 @@
+<template>
+	<view class="pc-wall" :style="windowHeight>1000?{}:{ minHeight: windowHeight+'px'}">
+		<!-- 左侧图片列表 -->
+		<view class="wall-images" v-loading="loading" :style="{backgroundImage: getTip.backgroundImage}">
+			<view class="display-wall">
+				<view class="display-title">
+					<view class="display-title-left">
+						专题
+						<u-line class="display-line" direction="col" color="#000" length="42rpx" />
+					</view>
+					<text @click="showList = true">{{ form.name || '暂无' }}</text>
+				</view>
+				<view class="display-introduce">
+					<text class="introduce-author">pixel.ai制图社</text>
+					<text class="introduce-time">{{ dateFormat(photos[0] ? photos[0].createtime : form.createtime) }}</text>
+					<text>广州</text>
+				</view>
+			</view>
+			<view class="display-tips" :style="{color: getTip.color}">
+				<text>{{ getTip.emotion }}</text>
+				<text>{{ getTip.text }}</text>
+			</view>
+			<u-waterfall class="display-photos" v-model="photos" ref="uWaterfall">
+				<template v-slot:left="{leftList}">
+					<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in leftList" :key="item.id">
+						<u-lazy-load border-radius="30" class="display-photo"
+						:image="getImagePath(item.watermarkPath)"></u-lazy-load>
+						<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
+						<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
+					</view>
+				</template>
+				<template v-slot:right="{rightList}">
+					<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in rightList" :key="item.id">
+						<u-lazy-load border-radius="30" class="display-photo"
+						:image="getImagePath(item.watermarkPath)"></u-lazy-load>
+						<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
+						<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
+					</view>
+				</template>
+			</u-waterfall>
+			<view class="last-tip" :style="{color: getTip.color}">
+				~~ 持续更新中 ~~
+			</view>
+		</view>
+		<view class="work-big">
+			<view class="big-image" :class="Object.keys(selectItem).length !== 0 ? 'big-image-none' : ''">
+				<view v-if="Object.keys(selectItem).length !== 0" class="bi-show-image">
+					<view class="bi-hover">
+						<u-icon size="90" title="预览" :name="fileUrl+previewIcon" @click="handlePreview"></u-icon>
+						<u-icon size="90" title="做同款" :name="fileUrl+sameIcon" @click="toDeal"></u-icon>
+						<u-icon size="90" title="购买原图" :name="fileUrl+buyIcon" @click="buyOrdPicture"></u-icon>
+					</view>
+					<image :src="getImagePath(selectItem.watermarkPath)" mode="aspectFit" class="big-preview"></image>
+				</view>
+				<view class="big-image" v-else>
+					<image :src="fileUrl+sleep"></image>
+					<view class="none-tips">
+						暂无作品，敬请期待！
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="hide-view" v-show="showList" @click="hideList">
+			<view @click.stop class="hide-lam" :style="{backgroundImage: getTip.backgroundImage}"
+			:class="showHide ? 'hide-animation' : ''">
+				<view class="special-top">
+					专题栏
+					<image :src="fileUrl+blackStar"></image>
+				</view>
+				<view class="special-scroll">
+					<view class="special-item" v-for="(item,index) in labels"
+					:key="index" @click="navigateTo(item.id,index)">
+						<text :style="[getSelectionsStyle(item.id)]">{{ item.name }}</text>
+						<u-icon name="arrow-right" :color="item.id === labelId ? getTip.color : 'rgba(105, 105, 105, 0.5)'"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+import { tools } from '@/utils/utils.js';
+export default {
+	data(){
+		return{
+			// 基础地址
+			ip: configService.ip,
+			fileUrl: configService.fileUrl + 'pixel/',
+			// 标签图标
+			sign: 'home/typelam.png',
+			// 禁用pc端的缺省图
+			sleep: 'pc/sleep.png',
+			// 预览图标
+			previewIcon: 'pc/workshops/preview.png',
+			// 选择黑星图片
+			blackStar: 'work/black-star.png',
+			// 购买图标
+			buyIcon: 'pc/workshops/download.png',
+			// 做同款图标
+			sameIcon: 'pc/workshops/same.png',
+			// 屏幕高度
+			windowHeight: 0,
+			// 选中图片
+			selectItem:{},
+			// 专题信息
+			form: {},
+			// 照片墙
+			photos: [],
+			// 专题id
+			labelId: '',
+			// 类型列表
+			typeList: {
+				'0' : '图生图',
+				'1' : '文生图',
+				'2' : '选项+图片',
+				'3' : '选项+文字',
+				'4' : '换装',
+			},
+			// 操作提示
+			tipText: ["1、点击标题切换专题","2、双击图片可购买原图"],
+			// 提示语
+			tips: {
+				'0' : { color: '#3f5b9c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(63, 91, 156, 0.3) 100%)', emotion: '( •̀ ω •́ )y', text: '智 / 能 / 创 / 作' },
+				'28' : { color: '#8ee200', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(142, 226, 0, 0.3) 100%)', emotion: '(o゜▽゜)o☆', text: '容 / 光 / 焕 / 发' },
+				'29' : { color: '#dd4747', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(221, 71, 71, 0.3) 100%)', emotion: '( ˘•ω•˘ )◞⁽˙³˙⁾', text: '多 / 样 / 颜 / 平 / 方' },
+				'31' : { color: '#f64e9c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(246, 78, 156, 0.3) 100%)', emotion: '(*´∀`)~♥', text: '花 / 样 / 试 / 衣 / 间' },
+				'33' : { color: '#93931e', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(147, 147, 30, 0.3) 100%)', emotion: '(:3[___]=', text: '妄 / 想 / 时 / 间' },
+				'35' : { color: '#32bbff', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(50, 187, 255, 0.3) 100%)', emotion: '(☄◣ω◢)☄', text: '壁 / 纸 / 专 / 题 / 展' },
+				'2' : { color: '#8d5ff8', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(141, 95, 248, 0.3) 100%)', emotion: '(∩^o^)⊃━☆ﾟ.*･｡', text: '动 / 感 / 人 / 像' },
+				'4' : { color: '#fdc535', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(253, 197, 53, 0.3) 100%)', emotion: '(´◉‿◉｀)', text: '幻 / 想 / 时 / 间' },
+				'7' : { color: '#52fec7', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(82, 254, 199, 0.3) 100%)', emotion: 'ヾ(´︶`*)ﾉ♬', text: '通 / 形 / 文 / 字 / 展' },
+				'9' : { color: '#0C5460', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(12, 84, 96, 0.3) 100%)', emotion: '(̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄', text: '面 / 部 / 造 / 型 / 社' },
+				'10' : { color: '#0f93b6', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(15, 147, 182, 0.3) 100%)', emotion: 'ƪ(•̃͡ε•̃͡)∫', text: '高 / 端 / 发 / 廊 / 展' },
+				'11' : { color: '#606971', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(96, 105, 113, 0.3) 100%)', emotion: '∠( ᐛ 」∠)_', text: '岁 / 月 / 时 / 光 / 机' },
+				'12' : { color: '#b3a0da', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(179, 160, 218, 0.3) 100%)', emotion: '(੭ ᐕ)੭？', text: '棱 / 角 / 分 / 明' },
+				'13' : { color: '#fde46c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(253, 228, 108, 0.3) 100%)', emotion: '(≖＿≖)✧', text: '漫 / 画 / 世 / 界' },
+				'14' : { color: '#5dfec9', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(93, 254, 201, 0.3) 100%)', emotion: '-//(ǒ.ǒ)//-', text: '摄 / 像 / 牢 / 笼' },
+				'15' : { color: '#fb7bb2', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(251, 123, 178, 0.3) 100%)', emotion: '-`д´-', text: '人 / 像 / 抠 / 图 / ？' },
+				// (σ′▽‵)′▽‵)σ
+			},
+			// 加载
+			loading: false,
+			// 专题列表
+			labels: [],
+			// 列表展开
+			showList: false,
+			// 列表关闭动画
+			showHide: false,
+		}
+	},
+	beforeMount() {
+		// 计算当前窗口高度
+		this.windowHeight = window.screen.height;
+	},
+	computed: {
+		// 获取提示语
+		getTip(){
+			return this.tips[this.labelId]||this.tips['0'];
+		},
+		// 获取专栏列表选中样式
+		getSelectionsStyle(id){
+			return (id) => {
+				return this.labelId===id?{ color: this.getTip.color} : {};
+			}
+		},
+	},
+	mounted() {
+		this.getLabels();
+	},
+	methods:{
+		// 获取标签
+		async getLabels(){
+			this.loading = true;
+			let res = await this.$api.getLabels(4);
+			if(res?.success){
+				this.labels = res.data;
+				if(!this.labelId){ 
+					this.labelId = this.labels[0]?.id;
+					this.form = this.labels.length > 0 ? this.labels[0] : {};
+				}
+				this.getPhotos();
+			}else{
+				this.loading = false;
+				this.$emit('toast',{type:'error',title: "专题列表获取失败!"});
+			}
+		},
+		// 获取作品墙
+		async getPhotos(){
+			try{
+				this.loading = true;
+				let that = this;
+				let res = await this.$api.allPictureWall({labelId: this.labelId});
+				if(res?.success){
+					this.photos = res.data;
+					this.selectItem = this.photos.length > 0 ? this.photos[0] : {};
+				}else{
+					this.$emit('toast',{type:'error',title: "作品墙内容获取失败!"});
+				}
+			}catch(e){this.loading = false;}
+			finally{this.loading = false;}
+		},
+		// 图片格式化
+		getImagePath(path){
+			if(!path) return;
+			let index = path?.indexOf('?');
+			let judge = path?.includes(configService.anotherAliUrl);
+			return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
+		},
+		// 图片点击事件
+		maskTouchend(item,index){
+			this.selectItem = item;
+		},
+		// 图片预览
+		handlePreview(){
+			let item = this.selectItem;
+			const array = [this.getImagePath(item.watermarkPath)];
+			tools.methods.lookImage(0,array);
+		},
+		// 时间格式化
+		dateFormat(time){
+			let date = time ? new Date(time) : new Date();
+			let month = date.getMonth()+1,
+			day = date.getDate(),
+			hour = date.getHours(),
+			minute = date.getMinutes(),
+			second = date.getSeconds();
+			return `${date.getFullYear()}年${month<10?'0':''}${month}月${day<10?'0':''}${day}日 ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}`;
+		},
+		// 前往工作室——做同款
+		toDeal(){
+			let id = this.selectItem.serviceId;
+			if(id!==null&&id!=='')
+				this.$emit('changeService',id);
+			else this.$emit('toast',{type:'error',title: "暂未开放对应功能!"});
+		},
+		// 购买原图
+		buyOrdPicture(){
+			let that = this;
+			let item = this.selectItem;
+			uni.showModal({
+				title: '购买提示',
+				content: `该作品原图购买需支付${item.price}钻石，购买后将直接下载，若使用了微信内置浏览器，请点击右上角打开浏览器再进行购买，以免购买后下载失败！`,
+				confirmColor: this.getTip.color,
+				success: async (res) => {
+					if (res.confirm) {
+						let resp = await that.$api.buyOriginalPicture({id: item.id});
+						if(resp?.success){
+							await that.download(resp.data.originalPath);
+						}else{
+							that.$emit('toast',{type:'error',title: "购买失败，请检查余额是否充足!"});
+						}
+					}
+				}
+			});
+		},
+		// 图片下载
+		async download(path = ''){
+			let that = this;
+			if(this.path === '') {
+				this.$emit('toast',{type:'error',title: "暂无结果图片可下载!"});
+				return;
+			}
+			// 下载地址
+			let downloadUrl = encodeURI(path);
+			uni.request({
+				url: downloadUrl,
+				method: 'GET',
+				header: { 'token' : that.$store.state.vuex_token },
+				responseType: 'arraybuffer',
+				success(res) {
+					const arrayBuffer = res.data;
+					const blob = new Blob([arrayBuffer], {type: 'image/png'}); // 创建 Blob 对象
+					const imageUrl = URL.createObjectURL(blob); // 通过 Blob 对象创建图片 URL
+					let a = document.createElement('a'); //创建一个 a 标签
+					a.href = imageUrl;  //把路径赋到a标签的href上
+					a.download = 'pixel.png'; 
+					a.click();
+					URL.revokeObjectURL(imageUrl);
+					a = null;
+					that.$emit('toast',{type:'success',title: "图片下载成功!"});
+				},
+				fail() {
+					that.$emit('toast',{type:'error',title: "图片下载失败，请重试!"});
+				},
+				complete() {	
+					that.functionLoading = false;
+				}
+			});
+		},
+		// 跳转专栏
+		navigateTo(id, index){
+			if(this.labelId === id) return;
+			this.labelId = id;
+			this.form = this.labels[index];
+			this.$refs.uWaterfall.clear();
+			this.hideList();
+			this.getPhotos();
+		},
+		// 隐藏列表
+		hideList(){
+			this.showHide = true;
+			setTimeout(()=>{
+				this.showList = false;
+				this.showHide = false;
+			},300)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.pc-wall{
+	background-image: linear-gradient(to left top, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
+	margin-top: 20rpx;
+	min-height: 2050rpx;
+	display: flex;
+	align-items: center;
+	padding: 40rpx 50rpx;
+	position: relative;
+	overflow: hidden;
+	.wall-images{
+		margin-left: 200rpx;
+		width: 900rpx;
+		height: 1620rpx;
+		background-color: #fff;
+		border-radius: 40rpx;
+		transition: 0.3s;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		border: 2rpx solid #d5d5d5;
+		box-shadow: 0 0 20rpx #c6c6c6;
+		.display-wall{
+			margin: 80rpx 44rpx 32rpx;
+			.display-title{
+				display: flex;
+				align-items: center;
+				font-size: 50rpx;
+				font-weight: 600;
+				.display-title-left{
+					min-width: 130rpx;
+					display: flex;
+					align-items: center;
+					.display-line{
+						margin: 0 16rpx !important;
+						border-width: 6rpx !important;
+					}
+				}
+				text{
+					font-weight: normal;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					color: #576ba3;
+					cursor: pointer;
+					&:hover{
+						opacity: 0.8;
+					}
+					&:active{
+						opacity: 0.6;
+					}
+				}
+			}
+		}
+		.display-introduce{
+			display: flex;
+			align-items: center;
+			margin: 30rpx 0 30rpx;
+			font-size: 32rpx;
+			color: #a8abb2;
+			.introduce-author{
+				color: #576ba3;
+			}
+			.introduce-time{
+				margin: 0 24rpx;
+			}
+		}
+		.display-tips{
+			margin-top: 60rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			font-size: 30rpx;
+			text{
+				margin: 10rpx 0;
+			}
+		}
+		.display-photos{
+			margin: 50rpx 50rpx 40rpx;
+			column-gap: 2.2em;
+			-moz-column-gap: 2.2em;
+			-webkit-column-gap: 2.2em; 
+			.photo-lam{
+				-webkit-column-break-inside: avoid;
+				break-inside: avoid; /*防止断点*/
+				margin-bottom: 1em;
+				position: relative;
+				padding-top: 12rpx;
+				.display-photo{
+					border-radius: 30rpx;
+					// 骗系统开启硬件加速
+					transform: transition3d(0, 0, 0);
+					// 防止图片加载“闪一下”
+					will-change: transform;
+					box-shadow: 0 0 20rpx #696969;
+					cursor: pointer;
+				}
+				&:hover{
+					filter: opacity(0.8);
+				}
+				&:active{
+					filter: opacity(0.6);
+				}
+				.sign-text{
+					width: 140rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					color: #ffffff;
+					font-size: 28rpx;
+					position: absolute;
+					top: 0.85em;
+					left: 0.9em;
+					z-index: 1;
+				}
+				.sign{
+					border: none;
+					border-radius: 0;
+					position: absolute;
+					top: 0.8em;
+					left: 0.6em;
+					width: 170rpx;
+					height: 47rpx;
+				}
+			}
+		}
+		.last-tip{
+			color: rgb(63, 91, 156);
+			font-size: 30rpx;
+			text-align: center;
+			margin: 20rpx 0 40rpx;
+		}
+		&:hover{
+			box-shadow: 0 0 20rpx #8a8a8a;
+		}
+	}
+	.work-big{
+		flex: 1;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		border-radius: 40rpx;
+		.big-image{
+			width: 1350rpx;
+			height: 1350rpx;
+			background-color: #ffffff;
+			border: 4rpx dashed #99d7ff;
+			border-radius: 40rpx;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			justify-content: center;
+			transition: 0.3s;
+			overflow: hidden;
+			.bi-show-image{
+				width: 100%;
+				height: 100%;
+				position: relative;
+				.big-preview{
+					width: 100%;
+					height: 100%;
+				}
+				.bi-hover{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background-color: rgba(0,0,0,0.5);
+					z-index: 1;
+					transition: 0.5s;
+					opacity: 0;
+					.u-icon{
+						margin: 0 30rpx;
+						cursor: pointer;
+						&:hover{
+							opacity: 0.8;
+						}
+						&:active{
+							opacity: 0.6;
+						}
+					}
+				}
+			}
+			.none-tips{
+				margin-top: 30rpx;
+				color: #9a702d;
+				font-size: 50rpx;
+			}
+			&:hover{
+				box-shadow: 0 0 20rpx #d3d3d3;
+				.bi-hover{
+					opacity: 1;
+				}
+			}
+		}
+		.big-image-none{
+			background-color: #ffffff00;
+			border: none;
+		}
+	}
+	.hide-view{
+		z-index: 2;
+		bottom: 0;
+		position: fixed;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 110rpx);
+		background-color: rgba(0,0,0,0.5);
+		.hide-lam{
+			bottom: 0;
+			position: fixed;
+			left: 0;
+			height: calc(100% - 110rpx);
+			width: 400rpx;
+			display: flex;
+			flex-direction: column;
+			background-color: rgba(255, 255, 255, 0.9);
+			border-right: 4rpx solid #eee;
+			animation-duration: 0.5s;
+			animation-fill-mode: both;
+			animation-name: slideInLeft;
+			.special-top{
+				padding: 80rpx 40rpx 40rpx;
+				margin-left: 14rpx;
+				font-size: 46rpx;
+				font-weight: bold;
+				position: relative;
+				color: #222;
+				image{
+					position: absolute;
+					margin-top: -10rpx;
+					width: 30rpx;
+					height: 34rpx;
+				}
+			}
+			.special-scroll{
+				flex: 1;
+				overflow-y: scroll;
+				.special-item{
+					margin: 0 20rpx;
+					padding: 20rpx 30rpx;
+					color: #696969;
+					border-radius: 16rpx;
+					font-size: 36rpx;
+					border-top: 2rpx solid #eee;
+					// box-shadow: 0 0 10rpx #eee;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					cursor: pointer;
+					.u-icon{
+						opacity: 0.6;
+					}
+					&:hover{
+						opacity: 0.8;
+					}
+					&:active{
+						opacity: 0.6;
+					}
+					&:nth-last-child(1){
+						border-bottom: 2rpx solid #eee;
+					}
+				}
+			}
+		}
+		.hide-animation{
+			animation-duration: 0.3s !important;
+			animation-name: slideOutLeft !important;
+		}
+	}	
+}
+@keyframes slideInLeft {
+    from {
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes slideOutLeft {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/work/work.vue b/pages/pc_web/work/work.vue
new file mode 100644
index 0000000..9c8e11b
--- /dev/null
+++ b/pages/pc_web/work/work.vue
@@ -0,0 +1,561 @@
+<template>
+	<view class="pc-work" :style="windowHeight>1000?{}:{ minHeight: windowHeight+'px'}">
+		<!-- 左侧图片列表 -->
+		<view class="work-images">
+			<view class="mw-top" :style="{backgroundImage: `url(${fileUrl+topBackground})`}">
+				<view class="mwt-one">
+					<view class="mwto-item" :style="[getSwitchItemStyle(index)]" v-for="(item,index) in selectList" :key="index" @click="changeSelect(index)">
+						{{ item }}
+						<image v-show="current===index" :src="fileUrl+blackStar" class="mwto-star"></image>
+					</view>
+				</view>
+				<view class="mwt-two">
+					<view class="mwtt-num">
+						<u-count-to autoplay color="#ff4269" fontSize="110" bold 
+						:startVal="startVal" :endVal="current===0? workForm.total:collectForm.total"></u-count-to>
+						<image :src="fileUrl+redStar" class="mwtt-star"></image>
+					</view>
+					<view class="mwtt-unit">
+						件{{ current===0? '作':'藏' }}品
+					</view>
+				</view>
+			</view>
+			<view class="mw-content">
+				<u-waterfall class="show-work" v-model="current===0?workList:collectList" ref="uWaterfall">
+					<template v-slot:left="{leftList}">
+						<view @click="maskTouchend(item,index)" :title="item.type || '暂无'" 
+						class="work-item" v-for="(item,index) in leftList" :key="index">
+							<u-lazy-load border-radius="30" class="work-picture"
+							:image="getImagePath(item.path)"></u-lazy-load>
+							<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
+							<view class="sign-text">{{ item.type || '暂无' }}</view>
+						</view>
+					</template>
+					<template v-slot:right="{rightList}">
+						<view @click="maskTouchend(item,index)" :title="item.type || '暂无'" 
+						class="work-item" v-for="(item,index) in rightList" :key="index">
+							<u-lazy-load border-radius="30" class="work-picture"
+							:image="getImagePath(item.path)"></u-lazy-load>
+							<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
+							<view class="sign-text">{{ item.type || '暂无' }}</view>
+						</view>
+					</template>
+				</u-waterfall>
+				<!-- 下面这里等后端有了之后，用isFinish判断 -->
+				<view class="last-tip" :class="(current === 0 ? workForm.isFinish : collectForm.isFinish)?'':'clickable'" @click="getMore">
+					{{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
+				</view>
+			</view>
+		</view>
+		<view class="work-big">
+			<view class="big-image" :class="Object.keys(selectItem).length !== 0 ? 'big-image-none' : ''">
+				<view v-if="Object.keys(selectItem).length !== 0" class="bi-show-image">
+					<view class="bi-hover">
+						<u-icon size="90" title="预览" :name="fileUrl+previewIcon" @click="handlePreview"></u-icon>
+						<u-icon size="90" title="下载" :name="fileUrl+downloadIcon" @click="handleDownload"></u-icon>
+						<u-icon size="90" title="发布" :name="fileUrl+publicIcon" @click="handlePublic" v-if="current===0"></u-icon>
+						<u-icon size="90" title="收藏" :name="fileUrl+collectIcon" @click="handleCollect" v-if="current===0"></u-icon>
+						<u-icon size="90" :title=" current===0?'删除':'取消收藏'" :name="fileUrl+deleteIcon" @click="handleDelete"></u-icon>
+					</view>
+					<image :src="getImagePath(selectItem.path)" mode="aspectFit" class="big-preview"></image>
+				</view>
+				<view class="big-image" v-else>
+					<image :src="fileUrl+sleep"></image>
+					<view class="none-tips">
+						暂无{{ current===0? '作':'藏' }}品，前往<text @click="$emit('changeService', '')">工作室</text>创作！
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+import { tools } from '@/utils/utils.js';
+export default {
+	data(){
+		return{
+			// 基础路径
+			fileUrl: configService.fileUrl + 'pixel/',
+			// 筛选项
+			selectList: ["我的创作", "我的藏品"],
+			// 顶部背景
+			topBackground: 'work/background.png',
+			// 选择黑星图片
+			blackStar: 'work/black-star.png',
+			// 选择白底图片
+			selectBottom: 'work/select-bottom.png',
+			// 选择红星
+			redStar: 'work/red-star.png',
+			// 标签图标
+			sign: 'home/typelam.png',
+			// 禁用pc端的缺省图
+			sleep: 'pc/sleep.png',
+			// 下载图标
+			downloadIcon: 'pc/workshops/download.png',
+			// 删除图标
+			deleteIcon: 'pc/workshops/delete.png',
+			// 预览图标
+			previewIcon: 'pc/workshops/preview.png',
+			// 发布图标
+			publicIcon: 'pc/workshops/public.png',
+			// 收藏图标
+			collectIcon: 'pc/workshops/collect.png',
+			// 数字滚动开始数字
+			startVal: 0,
+			// 屏幕高度
+			windowHeight: 0,
+			// 当前选项
+			current: 0,
+			// 收藏作品列表
+			collectList:[],
+			// 我的创作
+			workList:[],
+			// 我的创作Form
+			workForm: {
+				current: 1,
+				size: 10,
+				isFinish: true,
+				total: 0
+			},
+			// 我的收藏Form
+			collectForm: {
+				current: 1,
+				size: 10,
+				isFinish: true,
+				total: 0
+			},
+			// 选中图片
+			selectItem:{},
+		}
+	},
+	computed: {
+		// 切换栏选中样式
+		getSwitchItemStyle(){
+			return (index) => {
+				return this.current===index ? {backgroundImage: `url(${this.fileUrl+this.selectBottom})`,
+					color: `rgba(33,33,33,1)`}:{}
+			}
+		},
+	},
+	beforeMount() {
+		// 计算当前窗口高度
+		this.windowHeight = window.screen.height;
+	},
+	mounted() {
+		this.init();
+	},
+	methods:{
+		// 切换选项
+		changeSelect(index){
+			this.current = index;
+			this.startVal = index===0?this.collectForm.total:this.workForm.total;
+			this.init();
+		},
+		// 初始化
+		init(){
+			this.$refs.uWaterfall.clear();
+			if(this.current){
+				this.collectList = [];
+				this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
+				this.getCollections();
+			}else{
+				this.workList = [];
+				this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
+				this.getMyWorks();
+			}
+		},
+		// 查看更多
+		getMore(){
+			if(this.current === 0 ? this.workForm.isFinish : this.collectForm.isFinish) return;
+			if(this.current === 0){
+				this.workForm.current++;
+				this.getMyWorks();
+			}else{
+				this.collectForm.current++;
+				this.getCollections();
+			}
+		},
+		// 获取我的创作
+		async getMyWorks(){
+			let that = this;
+			if(this.workForm.isFinish) return;
+			let res = await this.$api.myCreations(this.workForm);
+			if(res.success){
+				const { records, total, current, size } = res.data;
+				const result = records;
+				if(current === 1){
+					this.workList = result;
+					this.selectItem = result.length > 0 ? result[0] : {};
+				}else{
+					this.workList.push(...result);
+				}
+				this.workForm.total = total;
+				this.workForm.isFinish = current*size >= total;
+			}else{
+				this.$emit('toast',{type:'error',title: "我的创作获取失败!"});
+			}
+		},
+		// 获取我的藏品
+		async getCollections(){
+			let that = this;
+			if(this.collectForm.isFinish) return;
+			let res = await this.$api.getCollections(this.collectForm);
+			if(res.success){
+				const { records, total, current, size } = res.data;
+				const result = records;
+				if(current === 1){
+					this.collectList = result;
+					this.selectItem = result.length > 0 ? result[0] : {};
+				}else{
+					this.collectList.push(...result);
+				}
+				this.collectForm.total = total;
+				this.collectForm.isFinish = current*size >= total;
+			}else{
+				this.$emit('toast',{type:'error',title: "我的藏品获取失败!"});
+			}
+		},
+		// 图片格式化
+		getImagePath(path){
+			if(!path) return;
+			let index = path?.indexOf('?');
+			let judge = path?.includes(configService.anotherAliUrl);
+			return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
+		},
+		// 图片点击事件
+		maskTouchend(item,index){
+			this.selectItem = item;
+		},
+		// 图片预览
+		handlePreview(){
+			let item = this.selectItem;
+			const array = [this.getImagePath(item.path)];
+			if(item.sourcePath) array.push(this.getImagePath(item.sourcePath));
+			tools.methods.lookImage(0,array);
+		},
+		// 下载图片
+		handleDownload(){
+			window.open(this.getImagePath(this.selectItem.path));
+		},
+		// 删除图片——收藏/作品
+		handleDelete(){
+			let that = this;
+			let current = this.current===0;
+			let item = this.selectItem;
+			uni.showModal({
+				title: '提示',
+				content: `是否确认${current?'删除':'取消收藏'}该作品？`,
+				confirmColor: '#94d500',
+				success: async (res) => {
+					if (res.confirm) {
+						let res = current ? await that.$api.deleteCreation(item.id) : await that.$api.deleteCollections(item.id);
+						if(res.success){
+							current ? that.workForm.total-- : that.collectForm.total--;
+							that.$refs.uWaterfall.remove(item.id);
+							that.selectItem = current ? that.workList[0] : that.collectList[0];
+							that.$forceUpdate();
+							that.$emit('toast',{type:'success',title: `已${current?'删除':'取消收藏'}该作品！`});
+						}else{
+							that.$emit('toast',{type:'error',title: `作品${current?'删除':'取消收藏'}失败！`});
+						}
+					}
+				}
+			});
+		},
+		// 分享作品
+		handlePublic(){
+			let that = this;
+			let item = this.selectItem;
+			uni.showModal({
+				title: '提示',
+				content: `作品分享需经过审核，审核期间可前往“我的-分享作品查看结果”，是否确认分享该作品？`,
+				confirmColor: '#94d500',
+				success: async (res) => {
+					if (res.confirm) {
+						let res = await that.$api.publicWork({
+							creationId: item.id,
+						});
+						if(res?.success){
+							that.$refs.uWaterfall.$forceUpdate();
+							that.$emit('toast',{type:'success',title: '作品上传分享成功！'});
+						}else{
+							that.$emit('toast',{type:'error',title: res?.errorMsg || '作品上传分享失败！'});
+						}
+					}
+				}
+			});
+		},
+		// 收藏作品
+		handleCollect(){
+			let that = this;
+			let item = this.selectItem;
+			uni.showModal({
+				title: '提示',
+				content: `是否确认收藏该作品？`,
+				confirmColor: '#94d500',
+				success: async (res) => {
+					if (res.confirm) {
+						let res = await that.$api.addCollections({
+							creationId: item.id,
+						});
+						if(res?.success){
+							that.$refs.uWaterfall.$forceUpdate();
+							that.$emit('toast',{type:'success',title: '作品收藏成功！'});
+						}else{
+							that.$emit('toast',{type:'error',title: res?.data || '作品收藏失败！'});
+						}
+					}
+				}
+			});
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.pc-work{
+	background-image: linear-gradient(to left top, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
+	margin-top: 20rpx;
+	min-height: 2050rpx;
+	display: flex;
+	align-items: center;
+	padding: 40rpx 50rpx;
+	.work-images{
+		margin-left: 200rpx;
+		width: 900rpx;
+		height: 1620rpx;
+		background-color: #fff;
+		border-radius: 40rpx;
+		transition: 0.3s;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		border: 2rpx solid #d5d5d5;
+		box-shadow: 0 0 20rpx #c6c6c6;
+		.mw-top{
+			width: 100%;
+			height: 350rpx;
+			display: flex;
+			flex-direction: column;
+			background-size: cover;
+			.mwt-one{
+				margin-top: 65rpx;
+				display: flex;
+				.mwto-item{
+					font-size: 42rpx;
+					font-weight: bold;
+					color: rgba(33,33,33,0.8);
+					margin-left: 44rpx;
+					position: relative;
+					padding: 5rpx 10rpx;
+					background-size: contain;
+					background-repeat: no-repeat;
+					background-position: bottom;
+					background-size: 100%;
+					transition: 0.5s;
+					cursor: pointer;
+					&:hover{
+						opacity: 0.8;
+					}
+					&:active{
+						opacity: 0.6;
+					}
+					.mwto-star{
+						position: absolute;
+						right: -16rpx;
+						top: -7rpx;
+						width: 30rpx;
+						height: 34rpx;
+					}
+				}
+			}
+			.mwt-two{
+				display: flex;
+				margin-left: 65rpx;
+				margin-top: 40rpx;
+				align-items: flex-end;
+				.mwtt-num{
+					font-weight: bolder;
+					margin-right: 20rpx;
+					position: relative;
+					.mwtt-star{
+						position: absolute;
+						right: -30rpx;
+						top: -10rpx;
+						width: 30rpx;
+						height: 34rpx;
+					}
+				}
+				.mwtt-unit{
+					font-size: 40rpx;
+					font-weight: bold;
+					color: rgba(33,33,33,0.8);
+					line-height: 90rpx;
+				}
+			}
+		}
+		.mw-content{
+			box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+			z-index: 80;
+			flex: 1;
+			width: 100%;
+			margin-top: -35rpx;
+			border-top-right-radius: 36rpx;
+			border-top-left-radius: 36rpx;
+			background-color: #1a1929;
+			overflow-y: scroll;
+			.show-work{
+				margin: 20rpx 45rpx 0;
+				column-gap: 1em;
+				-moz-column-gap: 1em;
+				-webkit-column-gap: 1em; 
+				.work-item{
+					-webkit-column-break-inside: avoid;
+					break-inside: avoid; /*防止断点*/
+					// margin-bottom: 0.5em;
+					position: relative;
+					padding-top: 30rpx;
+					&:hover{
+						.work-picture{
+							filter: drop-shadow(0 0 10rpx #d5ff00);
+						}
+					}
+					&:active{
+						opacity: 0.8;
+					}
+					.work-picture{
+						cursor: pointer;
+						border: 0.1em solid #d5ff00;
+						border-radius: 30rpx;
+						// 骗系统开启硬件加速
+						transform: transition3d(0, 0, 0);
+						// 防止图片加载“闪一下”
+						will-change: transform;
+					}
+					.sign{
+						border: none;
+						border-radius: 0;
+						position: absolute;
+						top: 1.7em;
+						left: 0.6em;
+						width: 186rpx;
+						height: 47rpx;
+						z-index: 1;
+					}
+					.sign-text{
+						width: 142rpx;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
+						color: #ffffff;
+						font-size: 28rpx;
+						position: absolute;
+						top: 1.8em;
+						left: 0.9em;
+						z-index: 2;
+					}
+				}
+			}
+			.last-tip{
+				color: #d5ff00;
+				font-size: 28rpx;
+				text-align: center;
+				margin-top: 20rpx;
+				margin-bottom: 40rpx;
+			}
+			.clickable{
+				cursor: pointer;
+				&:hover{
+					opacity: 0.8;
+				}
+				&:active{
+					opacity: 0.6;
+				}
+			}
+		}
+		&:hover{
+			box-shadow: 0 0 20rpx #8a8a8a;
+		}
+	}
+	.work-big{
+		flex: 1;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		border-radius: 40rpx;
+		.big-image{
+			width: 1350rpx;
+			height: 1350rpx;
+			background-color: #ffffff;
+			border: 4rpx dashed #99d7ff;
+			border-radius: 40rpx;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			justify-content: center;
+			transition: 0.3s;
+			overflow: hidden;
+			.bi-show-image{
+				width: 100%;
+				height: 100%;
+				position: relative;
+				.big-preview{
+					width: 100%;
+					height: 100%;
+				}
+				.bi-hover{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background-color: rgba(0,0,0,0.5);
+					z-index: 1;
+					transition: 0.5s;
+					opacity: 0;
+					.u-icon{
+						margin: 0 30rpx;
+						cursor: pointer;
+						&:hover{
+							opacity: 0.8;
+						}
+						&:active{
+							opacity: 0.6;
+						}
+					}
+				}
+			}
+			.none-tips{
+				margin-top: 30rpx;
+				color: #9a702d;
+				font-size: 50rpx;
+				text{
+					cursor: pointer;
+					color: #53411e;
+					&:hover{
+						opacity: 0.8;
+					}
+					&:active{
+						opacity: 0.6;
+					}
+				}
+			}
+			&:hover{
+				box-shadow: 0 0 20rpx #d3d3d3;
+				.bi-hover{
+					opacity: 1;
+				}
+			}
+		}
+		.big-image-none{
+			background-color: #ffffff00;
+			border: none;
+		}
+	}
+}
+</style>
\ No newline at end of file