project_process_h5/pages/project/index.vue

<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="sousuo">
			<view class="iconfont icon-sousuo" style="margin: 0 30rpx 0 30rpx;"></view>
			<input class="sou-text" placeholder="请输入查询内容" v-model="keyword"></input>
		</view>
		<!-- 筛选 -->
		<view class="select2">
			<view class="wei-title1 title1" v-if="select==0">
				<view>我收藏的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="select=0">
				我收藏的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title2" v-if="select==1">
				<view>我负责的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title2" style="rgba(0, 0, 0, 1)" v-else @click="select=1">
				我负责的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title3" v-if="select==2">
				<view>我参与的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title3" style="rgba(0, 0, 0, 1)" v-else @click="select=2">
				我参与的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="kuang">
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">超时在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">超时在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==1">预警在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(1)">预警在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==2">正常在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(2)">正常在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==3">正常办结</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(3)">正常办结</view>
			</view>
			<!-- 数据列表循环 -->
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list-proname">
					{{item.proName}}
					<view class="list-kua">{{item.txt}}</view>
					<view class="bu-shou yishou" v-if="item.shouc==1">已收藏</view>
					<view class="bu-shou shou" v-else>收藏</view>
					<view class="bu-shou jinji" v-if="item.jinji==1">紧急</view>
					<view class="bu-shou norl" v-else>正常</view>
					<view class="bu-shou more">
						<view>更多</view>
						<view class="xiala">
							<view>复制</view>
							<view @click.stop="changePro">编辑</view>
							<view>删除</view>
							<view>评分</view>
						</view>
					</view>
				</view>
				<view class="list-dan">主办单位：{{item.danwei}}</view>
				<view class="list-dan">主办人：周三</view>
				<view class="list-dan">项目周期：{{item.danwei}}</view>
				<view class="list-dan">任务：30个</view>
				<view class="list-dan">预警次数：30次</view>
				<view class="list-dan">提醒次数：30次</view>
				<view class="list-dan" style="width: 620rpx;display: flex;">
					项目进度：
					<progress v-if="item.batteryName!='/'" style="width: 380rpx;" :percent="item.batteryName" activeColor="rgba(0, 97, 255, 1)" border-radius="50" stroke-width="9" show-info font-size='12' active='true' />
					<image src="../../static/project/warn.png" style="width: 43rpx;height: 43rpx;margin-top: 10rpx;"></image>
				</view>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		
		<!-- 添加项目 -->
		<view class="serviceBtn" @click.stop="addProject"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0,
				change:0,
				list:[
					{proName:'xx项目',txt:'涉外',danwei:'交通学院',jinji:1,shouc:1,batteryName:'60'},
					{proName:'xx项目',txt:'涉外',danwei:'交通学院',jinji:0,shouc:0,batteryName:'70'},
				],
			}
		},
		onLoad() {

		},
		methods: {
			//修改时间框
			changeTime(a){
				this.change=a
				if(a==1){
					
				}
			},
			// 新建项目
			addProject(){
				uni.navigateTo({
					url:'/pages/project/addProject'
				})
			},
			//编辑项目
			changePro(){
				uni.navigateTo({
					url:'/pages/project/projectChange'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.serviceBtn{
			position: fixed;
			right: 50rpx;
			bottom: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 97rpx;
			height: 97rpx;
			background-image: url('../../static/project/add.png');
			background-size: 100%;
		}
	}
	/* 搜索框 */
	.sousuo{
		display: flex;
		align-items: center;
		margin: 20rpx 0 0 20rpx;
		width: 710rpx;
		height: 90rpx;
		border-radius: 98rpx;
		background: rgba(255, 255, 255, 1);
	}
	.sou-text{
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(166, 166, 166, 1);
		width: 100%;
	}
	.sou-text>>>.uni-input-input {
	    position: relative;
	    display: block;
	    height: 100%;
	    background: none;
	    color: inherit;
	    opacity: 1;
	    font: inherit;
	    line-height: inherit;
	    letter-spacing: inherit;
	    text-align: inherit;
	    text-indent: inherit;
	    text-transform: inherit;
	    text-shadow: inherit;
	    width: 185px;
	    height: 35px;
	    border-radius: 85px;
	    /* background: rgba(242, 242, 242, 1); */
	}
	/* 筛选 */
	.select2{
		margin: 20rpx 0 0 0;
		width: 100%;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
	}
	.wei-title1{
		color: rgba(0, 97, 255, 1);
	}
	.title1{
		margin: 40rpx 0 0 48rpx;
		font-size: 28rpx;
	}
	.title2{
		margin: -41px 0 0 318rpx;
		font-size: 28rpx;
	}
	.title3{
		margin: -41px 0 0 588rpx;
		font-size: 28rpx;
	}
	.wei-line1{
		margin: 31rpx 0 0 15rpx;
		width: 79rpx;
		height: 8rpx;
		border-radius: 75rpx;
		background: rgba(0, 97, 255, 1);
	}
	/* 数据列表 */
	.kuang{
		margin: 20rpx 0 0 0;
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}
	.all-select{
		display: flex;
		margin: 31rpx 0 0  19rpx;
		width: 712rpx;
		height: 90rpx;
		border-radius: 7rpx;
		background: rgba(242, 247, 255, 1);
		align-items: center;
	}
	.all-list{
		width: 159rpx;
		height: 71rpx;
		border-radius: 7rpx;
		background: rgba(0, 97, 255, 0.1);
		border: 1rpx solid rgba(0, 97, 255, 1);
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(0, 97, 255, 1);
		text-align: center;
	}
	.all-list2{
		width: 159rpx;
		height: 71rpx;
		border-radius: 7rpx;
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(56, 56, 56, 1);
		text-align: center;
	}
	/* 数据列表循环 */
	.list{
		display: flex;
		flex-direction: column;
		margin: 20rpx 0 0 20rpx;
		width: 709rpx;
		height: 422rpx;
		border-radius: 7rpx;
		background: rgba(245, 248, 255, 1);
		box-shadow: 0px 4rpx 6rpx  rgba(0, 0, 0, 0.05);
		font-size: 24rpx;
		line-height: 35rpx;
	}
	.list-proname{
		margin: 13rpx 0 0 29rpx;
		font-size: 29rpx;
		font-weight: 500;
		display: flex;
	}
	.list-kua{
		margin-left: 5px;
		width: 59rpx;
		height: 29rpx;
		border-radius: 4rpx;
		border: 2rpx solid rgba(33, 107, 255, 1);
		font-size: 22rpx;
		line-height: 29rpx;
		color: rgba(33, 107, 255, 1);
		text-align: center;
	}
	.bu-shou{
		width: 87rpx;
		height: 44rpx;
		border-radius: 7rpx;
		font-size: 24rpx;
		line-height: 44rpx;
		text-align: center;
		color: rgba(255, 255, 255, 1);
	}
	.yishou{
		margin: 10rpx 0 0 222rpx;
		background: rgba(9, 101, 98, 1);
	}
	.shou{
		margin: 10rpx 0 0 222rpx;
		background: rgba(0, 97, 255, 1);
	}
	.jinji{
		margin: 10rpx 0 0 15rpx;
		background: rgba(254, 144, 51, 1);
	}
	.norl{
		margin: 10rpx 0 0 15rpx;
		background: rgba(166, 166, 166, 1);
		color: rgba(255, 255, 255, 1);
	}
	.more{
		margin: 10rpx 0 0 15rpx;
		background: rgba(0, 97, 255, 1);
	}
	.xiala{
		z-index: 4;
		position: relative;
		width: 87rpx;
		height: 174rpx;
		border-radius: 2rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 4rpx  rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 1);
	}
	.list-dan{
		margin: 9rpx 0 0 29rpx;
	}
	>>>.uni-progress-bar {
	    border-radius: 9rpx;  
	}  
	>>>.uni-progress-inner-bar {  
	    border-radius: 9rpx;  
	}
	>>>.uni-progress-info {
		margin-top: 0;
		margin-bottom: 0;
		min-width: 2em;
		margin-left: 15px;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 1);
	}
	>>>uni-progress {
	    // width: 42%;
		// margin: 25rpx 0 0 144rpx;
	}
</style>