项目管理

components/manager/project.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="m_right">
+		<view class="m_right_hander">
+			<button size="mini" class="m_btn_red">添加项目</button>
+		</view>
+		<view class="m_right_container">
+			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
+				<thead class="m-table-hander">
+					<tr>
+
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>项目名称</th>
+						<th>项目创建人</th>
+						<th>项目创建时间</th>
+						<th>项目描述</th>
+						<th>项目推荐</th>
+						<th>上线</th>
+						<th>删除</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_online">上线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_offline">下线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_online">上线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_offline">下线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_online">上线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_offline">下线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th>
+							<icon type="" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
+						</th>
+						<th>CMII09</th>
+						<th>张小旭</th>
+						<th>2021-01-01</th>
+						<th>CMII09</th>
+						<th>CMII09</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_online">上线</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+				</tbody>
+			</table>
+		</view>
+		<view class="m_right_footer">
+			<view class="m_paging">
+				<text class="m_paging_item m_paging_upper">上一页</text>
+				<text class="m_paging_item" :key="i" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
+					{{i}}
+				</text>
+				<text class="m_paging_item m_paging_lower">下一页</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "project",
+		data() {
+			return {
+				index: 1,
+				checke: false
+			}
+		},
+		methods: {
+			paging(obj) {
+				this.index = obj;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import '../../assets/icon/iconfont.css';
+
+	.m_right {
+		width: 100%;
+		margin-top: 5rpx;
+		padding: 0 150rpx;
+		background-color: #fff;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+
+		.m_right_hander {
+			text-align: right;
+			height: 250rpx;
+			position: relative;
+
+			.m_btn_red {
+				position: absolute;
+				height: 80rpx;
+				line-height: 80rpx;
+				padding: 0 40rpx;
+				right: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				background: #EA252C;
+				color: #fff;
+			}
+		}
+
+	}
+
+	tbody tr {
+		border-top: 2rpx solid #DDDDDD !important;
+
+	}
+
+	tbody tr th {
+		font-weight: 400 !important;
+		height: 140rpx;
+		line-height: 140rpx;
+	}
+
+	tbody tr:hover {
+		// color: #fff;
+		background: #FDEBEC;
+		// opacity: 0.08;
+	}
+
+	.m-table-hander {
+		background-color: #FFF8F7;
+		height: 140rpx;
+		line-height: 140rpx;
+		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+		font-weight: bold;
+	}
+
+	.m_edit {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgb(67, 127, 250);
+		color: rgb(255, 255, 255);
+		min-width: 130rpx;
+	}
+
+	.m_delete {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		min-width: 130rpx;
+		transform: translate(-50%, -50%);
+		background: rgb(234, 37, 44);
+		color: rgb(255, 255, 255);
+	}
+
+	.m_online {
+		background: #437FFA;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		min-width: 130rpx;
+		transform: translate(-50%, -50%);
+		color: rgb(255, 255, 255);
+	}
+
+	.m_offline {
+		background: #FD813B;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		min-width: 130rpx;
+		transform: translate(-50%, -50%);
+		color: rgb(255, 255, 255);
+	}
+
+	.m_right_footer {
+		margin-top: 80rpx;
+	}
+
+	.m_paging {
+		text-align: right;
+
+		.m_paging_item {
+			padding: 10rpx 18rpx;
+			border: 1rpx solid #DDDDDD;
+			border-radius: 8rpx;
+			margin-right: 10rpx;
+		}
+
+		.p_act {
+			background: #EA252C;
+			color: #fff;
+			border: inherit;
+		}
+	}
+
+	.m_paging_item:hover {
+		background: #EA252C;
+		color: #fff;
+		border: inherit;
+	}
+
+	.m_act1 {
+		color: #FF0019;
+	}
+</style>