ng_notes_mini/pages/index/activity/activity.vue

<template>
  <view class="content">
    <view class="self-inf">
	  <view class="antu-box">
		<view class="img-name-box" style="margin-bottom: 5%" :style="{ 'z-index': isFirstPage ? '0' : '101' }">
		  <image :src="userHeadImg" class="heade-img" mode="aspectFill"></image>
		  <p class="nickname">{{userNickName}}</p>
		  <p class="nickname">{{userPhone}}</p>
		</view>
		<view class="org-info-box" v-for="(item,index) in userPosList" :key="index">
		  <view class="org-info">{{item.name || '-'}}</view>
		  <!-- <view class="org-line"></view> -->
		  <view class="org-info">{{item.position}}</view>
		</view>		  
	  </view>
	  <view class="bg-img"></view>
	  <image src="/static/Intersect.svg" class="groove-img"></image>
	</view>
    <view>
		<view class="active-title-box">
			<picker :range="arrayYear" :value="dateYear"  @change="bindDateChange" class="picker-class" style="margin-left: 2%; width: 15%;">
				<view class="uni-input display-between items-center">
				<view>{{dateYear}}<text v-if="dateYear!=='全部'">年</text></view>
				<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image>
				</view>
			</picker>
			<picker :range="arrayMonth" :value="dateMonth"  @change="bindDateMonthChange" class="picker-class" style="margin-left: 2%; width: 10%;">
				<view class="uni-input display-between items-center" style="color: #707070;">
				<view>{{dateMonth}}<text v-if="dateMonth!=='全部'">月</text></view>
				<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image>
				</view>
			</picker>
		   <picker @change="bindPickerChange" :value="branchValue" :range="branchArray" :range-key="'name'">
					<view class="uni-input">{{branchValue}}</view>
					<image src="/static/arrow_down.svg" mode="aspectFit"></image>
		   </picker>
		   <button @click="publish()">+发布活动</button>
		</view>
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="active-box" v-for="(item,index) in activiList" :key="index" @click="goList(item.id)">
			<view class="active-type" :class="{'bg-yellow':item.type == '组织建设' ,'bg-red':item.type == '学习培训','bg-blue':item.type == '参政议政','bg-gray':item.type == '社会活动'}"  >
				<view style="width: 55%;">{{item.type}}</view>
			</view>
			<view class="active-content-box">
				<view class="active-content" style="margin-bottom: 3%;">
					<view class="active-name">{{item.name}}</view>
				</view>
				<view class="active-content"  style="margin-bottom: 2%;color: #ccc;">
					<view style="margin-right:10rpx;">{{item.branch}}</view>
					<view class="author-box">{{item.author}}</view>
					<view style="margin-left:10rpx;">记录数:({{item.process_count}}/
					<text :class="{fontRed:item.process_unread_count!=0}">{{item.process_unread_count}}</text>)</view>
				</view>
				<view class="active-content" style="justify-content: space-between;">
					<view class="active-date">{{item.start_time}}</view>
					<view class="edit-icon-box">
						<image src="/static/edit-icon.png" mode="aspectFit" v-show="item.edit_auth" @click.stop="goEditPage(item.id)" style="margin-right: 10rpx;"></image>
						<image src="/static/del-icon.png" mode="aspectFit" v-show="item.del_auth" @click.stop="delActive(item.id)"></image>
					</view>
				</view>
			</view>
		<!-- 	<view class="edit-icon-box">
				<image src="/static/edit-icon.png" mode="aspectFit" v-show="item.edit_auth" @click.stop="goEditPage(item.id)" style="margin-right: 20rpx;"></image>
				<image src="/static/del-icon.png" mode="aspectFit" v-show="item.del_auth" @click.stop="delActive(item.id)"></image>
			</view> -->
		</view>
		</mescroll-body>
	</view>
	<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="auth-pop">
				<image src="/static/logo.png" mode="aspectFill"></image>
				<text class="margin-top-3 auth-title">欢迎使用农工笔记小程序</text>
				<text class="margin-top-3 auth-content">此页面是微信授权页面,授权之后你可以获取更优质的服务,您的隐私将会受到保护</text>
				<view class="margin-top-3">
					<!-- <button type='default' class="refuse" @click="goAuthPage">去授权</button>-->
					<button type='primary' class="allow" @click="getUserInfo()" v-if="!isAuth">登录授权</button>
					<button type="primary" class="allow"  open-type="getPhoneNumber"  style="font-size: 12px;"
					@getphonenumber="getPhoneNumber" v-if="isAuth && !isNeedPhone">手机号码授权</button> 
				</view>
			</view>
		</uni-popup>
		 <share-modal  @closeShare="closeShare" :isShowShare="isShowShareModal" :isFirstPage="isFirstPage" :class="{ shareParent: isShowShareModal}"></share-modal>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import shareModal from '@/components/share-modal/share-modal.vue'
export default {
	components: {
		"share-modal": shareModal,
	},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dateYear:'全部',
	  arrayYear:[],
      dateMonth:'全部',
	  arrayMonth:['全部',"1","2","3","4","5","6","7","8","9","10","11","12"],
	  isAuth: true,
      userHeadImg:'',
      userNickName:'',
	  userPhone:'',
	  userPosList:[],
	  isNeedPhone:getApp().globalData.user_phone,
	  branchArray: [],
	  branchValue:'全部',
	  branchId:'0',
	  page:1,
	  pageSize:10,
	  activiList:[],
	  isShowShareModal:false,
	  isFirstPage:false
    };
  },
  onShow() {
	 // this.getActiveList(this.branchId)
  },
  onShareAppMessage() {
    return {
  	  title: '农工笔记',
  	  path:'/pages/index/activity/activity'
  	}
  },
 async onLoad(option) {
	  await this.$getOpenId
	  this.getUserInfoData()
	  this.makeYearArr()
  },
  methods: {
	    open(){
	      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			uni.hideTabBar();
			this.$refs.popup.open('center')
	    },
		pageShowShare(obj){
		    this.isShowShareModal = true;
			this.isFirstPage = true;
		},
		closeShare(e){
			this.isShowShareModal = false;
		},
	  getUserInfo() {
	  	uni.getUserProfile({
	  		desc:'登录',
	  		success:(res)=> {
	  			getApp().globalData.user_headUrl = res.userInfo.avatarUrl;
	  			getApp().globalData.user_name = res.userInfo.nickName;
	  			this.userHeadImg = res.userInfo.avatarUrl;
	  			this.userNickName = res.userInfo.nickName;
	  			this.iv = res.iv;
	  			this.encryptedData = res.encryptedData;
	  			this.isAuth = true;
	  			getApp().globalData.isAuth = true; 
	  			getApp().globalData.globalAuth = true; 
	  			this.loginUserInfo()
	  		},
	  		fail:(err)=> {
	  			getApp().globalData.isAuth = false;
	  			getApp().globalData.globalAuth = false; 
	  			this.isAuth = false;
	  		}
	  	})
	  },
	  getPhoneNumber(e){
	  	let that = this;
	  	 if (e.detail.errMsg == 'getPhoneNumber:ok') { //允许授权执行跳转
	  	  that.phoneRequest(e.detail.iv, e.detail.encryptedData, getApp().globalData.session_key)
	  	} else { //
	  	      that.isNeedPhone = false;
	  	}
	  },
	  phoneRequest(myIv,myEncryptedData,sKey){
	  	let that = this;
	  	let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
	  	let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&source=user&action=phone&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
	  	uni.request({
	  		url:url,
	  		method: 'POST',
	  		header: {
	  			'content-type': 'application/x-www-form-urlencoded'
	  		},
	  		data: {
	  			iv:myIv,
	  			sessionKey:sKey,
	  			encryptedData:myEncryptedData,
	  			openid:getApp().globalData.open_id
	  		},
	  		success: (res) => {
	  			if(res.data.code === 200){
	  				getApp().globalData.user_phone = res.data.data;
	  				this.userPhone = res.data.data.substr(0, 3) + '****' + res.data.data.substr(7) ;
	  				this.$refs.popup.close()
	  				uni.showTabBar({})
					this.getUserInfoBranch();
					this.getActiveList(this.branchId);
					this.getActiveInfoBranch()
	  			}else {
	  				uni.showToast({
	  				  title: res.data.msg,
	  				  duration: 2500,
	  				  icon: "none",
	  				});
	  			} 
	  		},
	  		fail: () => {
	  			console.log("连接失败");
	  		}
	  	});
	  },
	  loginUserInfo(){
	  	let md5Sign = md5(
	  	  "method=" +
	  		"user" +
	  		"&timestamp=" +
	  		getApp().globalData.globalTimestamp +
	  		"&secret=" +
	  		getApp().globalData.secret
	  	);
	  	let url =
	  	  getApp().globalData.shareUrl +
	  	  "api/api.php" +
	  	  "?method=user&action=update&timestamp=" +
	  	  getApp().globalData.globalTimestamp +
	  	  "&sign=" +
	  	  md5Sign;
	  	uni.request({ 
	  	  url: url,
	  	  method: "POST",
	  	  header: {
	  		"content-type": "application/x-www-form-urlencoded",
	  	  },
	  	  data: {
	  		nickname:getApp().globalData.user_name,
	  		headimg:getApp().globalData.user_headUrl,
	  		openid:getApp().globalData.open_id
	  	  },
	  	  success: (res) => {
	  		if (res.data.code === 200) {
	  		}
	  	  },
	  	  fail: () => {
	  		console.log("连接失败");
	  	  },
	  	});
	  },
	  getUserInfoData() {
			let md5Sign = md5(
			  "method=" +
				"user" +
				"&timestamp=" +
				getApp().globalData.globalTimestamp +
				"&secret=" +
				getApp().globalData.secret
			);
			let url =
			  getApp().globalData.shareUrl +
			  "api/api.php" +
			  "?method=user&action=info_by_openid&timestamp=" +
			  getApp().globalData.globalTimestamp +
			  "&sign=" +
			  md5Sign;
			uni.request({
			  url: url,
			  method: "POST",
			  header: {
				"content-type": "application/x-www-form-urlencoded",
			  },
			  data: {
				openid:getApp().globalData.open_id,
			  },
			  success: (res) => {
				if (res.data.code === 200) {
					if (res.data.data.nickname) {
					  this.isAuth = true;
					  this.userHeadImg = res.data.data.headimg;
					  this.userNickName = res.data.data.nickname;
					  if(res.data.data.phone){
						  this.userPhone = res.data.data.phone.substr(0, 3) + '****' + res.data.data.phone.substr(7)
						  this.getUserInfoBranch();
						  this.getActiveList(this.branchId);
						  this.getActiveInfoBranch()
					  }else {
						  this.open()
					  }
					  getApp().globalData.globalAuth  = true;
					  getApp().globalData.user_name  = res.data.data.nickname;
					  getApp().globalData.user_headUrl  = res.data.data.headimg;
					  getApp().globalData.user_department = res.data.data.department;
					  getApp().globalData.user_real_name = res.data.data.real_name;
					  getApp().globalData.user_phone = res.data.data.phone;
					  getApp().globalData.isAuth = true;
					  this.isAuth = true;
					  this.isNeedPhone = false;
					}else {
					  this.open();	
					  this.isAuth = false;
					  getApp().globalData.globalAuth  = false;
					  getApp().globalData.user_name = '';
					  getApp().globalData.isAuth = false;
					  this.isAuth = false;
					}
				}
			  },
			  fail: () => {
				console.log("连接失败");
			  },
			});
		  },
	  makeYearArr(){
		  let nowYear = new Date().getFullYear(),yearList = ['全部'];
		  for(let i = 0; i < 10 ; i ++){
			  yearList.push(nowYear--)
		  }
		  this.arrayYear = yearList;
	  },
	  pageRefresh(object) {
	        if (object) {
	            this.getActiveList(this.branchId)
	        } else {
	            return
	        }
	  },
	  getUserInfoBranch() {
	      let md5Sign = md5(
	        "method=" + "member" +"&timestamp=" + getApp().globalData.globalTimestamp +"&secret=" +getApp().globalData.secret
	      );
	      let url =
	        getApp().globalData.shareUrl + "api/api.php" + "?method=member&action=my_branch&timestamp=" + getApp().globalData.globalTimestamp +
	        "&sign=" + md5Sign;
	      uni.request({
	        url: url,
	        method: "POST",
	        header: {
	          "content-type": "application/x-www-form-urlencoded",
	        },
	        data: {
	          openid:getApp().globalData.open_id,
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
	  				this.userPosList = res.data.data;
	          }
	        },
	        fail: () => {
	          console.log("连接失败");
	        },
	      });
	  },
	  goEditPage(id){
		  uni.navigateTo({
		  	url:'edit_page?id=' + id
		  })
	  },
	  delActiveRequeset(delId){
		  let md5Sign = md5(
			"method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
			  "&secret=" + getApp().globalData.secret
		  );
		  let url = getApp().globalData.shareUrl +"api/api.php" +
			"?method=activity&action=del&timestamp=" +
			getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
		  uni.request({
			url: url,
			method: "POST",
			header: {
			  "content-type": "application/x-www-form-urlencoded",
			},
			data: {
			  openid: getApp().globalData.open_id,
			  id:delId
			},
			success: (res) => {
			  if (res.data.code === 200) {
				uni.showToast({
				  title: "删除成功",
				  icon: "none", 
				  duration: 2500,
				});
				this.getActiveList(this.branchId)
			  }
			},
			fail: () => {
			  console.log("连接失败");
			},
		  });
	  },
	  delActive(id){
		 let that = this;
		 uni.showModal({
		   title: "确定删除此活动吗?",
		   success(res) {
			if (res.confirm) {
			  that.delActiveRequeset(id);
			} else if (res.cancel) {
			  console.log("用户点击取消");
			}
		   },
		 });
	  },
	  getActiveInfoBranch() {
	      let md5Sign = md5("method=" + "activity" +"&timestamp=" + getApp().globalData.globalTimestamp +"&secret=" +getApp().globalData.secret);
	      let url =
	        getApp().globalData.shareUrl + "api/api.php" + "?method=activity&action=list_branch&timestamp=" + getApp().globalData.globalTimestamp +
	        "&sign=" + md5Sign;
	      uni.request({
	        url: url,
	        method: "POST",
	        header: {
	          "content-type": "application/x-www-form-urlencoded",
	        },
	        data: {
	          openid:getApp().globalData.open_id,
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
					let obj = {
						name:'全部',
						id:'0'
					}
					let arr = res.data.data;
					arr.unshift(obj);
					this.branchArray = arr;	
	          }
	        },
	        fail: () => {
	          console.log("连接失败");
	        },
	      });
	  },
	  bindDateChange(e){ 
			this.dateYear = this.arrayYear[e.target.value];
			this.getActiveList(this.branchId)
	  },
	  bindDateMonthChange(e){
			this.dateMonth = this.arrayMonth[e.target.value];
			this.getActiveList(this.branchId)
	  },
	  bindPickerChange: function(e) {
		  this.branchValue = this.branchArray[e.target.value].name;
		  this.branchId = this.branchArray[e.target.value].id;
		  this.getActiveList(this.branchId)
	  },
	  getActiveList(bId){
		  let md5Sign = md5(
		    "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
		      "&secret=" + getApp().globalData.secret
		  );
		  let url = getApp().globalData.shareUrl +"api/api.php" +
		    "?method=activity&action=list&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&sign=" +
		    md5Sign;
		  uni.request({
		    url: url,
		    method: "POST",
		    header: {
		      "content-type": "application/x-www-form-urlencoded",
		    },
		    data: {
		       openid: getApp().globalData.open_id,
		  	   year:this.dateYear,
		  	   month:this.dateMonth,
		  	   s:'',
		  	   branch_id:bId,
		  	   page:this.page,
		  	   page_size:this.pageSize
		    },
	  	  success: (res) => {
	  	    if (res.data.code === 200) {
				// 接口返回的当前页数据列表 (数组)
				let curPageData = res.data.data.list; 
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length; 
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = res.data.data.page_count; 
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.data.count;  
				// // 接口返回的是否有下一页 (true/false)
				// let hasNext = data.xxx; 
				this.activiList = res.data.data.list;
				this.mescroll.endByPage(curPageLen || 0, totalPage); 
	  			//	this.activiList=res.data.data.list;
	  	    }
	  	  },
	  	  fail: () => {
	  	    console.log("连接失败");
	  	  },
	  	});
	  },
	  upCallback(page) {
		let pageNum = page.num; // 页码, 默认从1开始
		let pageSize = page.size; // 页长, 默认每页10条
	  	let md5Sign = md5(
	  	  "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
	  	    "&secret=" + getApp().globalData.secret
	  	);
	  	let url = getApp().globalData.shareUrl +"api/api.php" +
	  	  "?method=activity&action=list&timestamp=" +
	  	  getApp().globalData.globalTimestamp +
	  	  "&sign=" +
	  	  md5Sign;
	  	uni.request({
	  	  url: url,
	  	  method: "POST",
	  	  header: {
	  	    "content-type": "application/x-www-form-urlencoded",
	  	  },
	  	  data: {
	  	       openid: getApp().globalData.open_id,
			   year:this.dateYear,
			   month:this.dateMonth,
			   s:'',
			   branch_id:this.branchId,
			   page:pageNum,
			   page_size:pageSize
	  	  },
	  	  success: (res) => {
	  	    if (res.data.code === 200) {
	  			    // 接口返回的当前页数据列表 (数组)
	  				let curPageData = res.data.data.list; 
	  				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
	  				let curPageLen = curPageData.length; 
	  				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
	  				let totalPage = res.data.data.page_count; 
	  				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
	  				let totalSize = res.data.data.count;  
	  				// // 接口返回的是否有下一页 (true/false)
	  				// let hasNext = data.xxx; 
	  				if(page.num == 1) this.activiList = []; //如果是第一页需手动制空列表
	  				// let list = res.data.data.list;
	  				// list.forEach((item)=>{
	  				// 	item.pic_url = this.shareUrl + item.pic_url;
	  				// 	item.pic_url_resize = this.shareUrl + item.pic_url_resize;
	  				// })
	  				this.activiList=this.activiList.concat(res.data.data.list); //追加新数据
	  				this.mescroll.endByPage(curPageLen || 0, totalPage); 
	  	    }
	  	  },
	  	  fail: () => {
	  	    console.log("连接失败");
	  			this.mescroll.endErr();
	  	  },
	  	});
	  },
	  getPublishBranch() {
	      let md5Sign = md5(
	        "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
	          "&secret=" +getApp().globalData.secret
	      );
	      let url = getApp().globalData.shareUrl +"api/api.php" +
	        "?method=activity&action=activity_branch&timestamp=" +
	        getApp().globalData.globalTimestamp +"&sign=" + md5Sign;
	      uni.request({
	        url: url,
	        method: "POST",
	        header: {
	          "content-type": "application/x-www-form-urlencoded",
	        },
	        data: {
	          openid:getApp().globalData.open_id,
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
				  let publishList = res.data.data;
	  			if(publishList.length >= 2){
	  				uni.navigateTo({
	  					url:'./create1?list=' + JSON.stringify(publishList)
	  				})
	  			}else {
					uni.navigateTo({
						url:'./create2?list=' + JSON.stringify(publishList)
					})
				}
	          }
	        },
	        fail: () => {
	          console.log("连接失败");
	        },
	      });
	  },
	  publish(){
		 this.getPublishBranch()
	  },
	  goList(ids){
		  uni.navigateTo({
			url:'./list?id='+ ids
		  })
	  }
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  // .self-inf {
  //   // border-radius: 0rpx 0rpx 100% 100%;
  //   .img-name-box {
		// height: 150rpx;
		// margin-top: 20rpx;
		// margin-bottom: 20rpx;
		// display: flex;
		// align-items: center;
		// width: 85%;
  //     .auth-btn {
		// margin-left: 30rpx;
		// margin-top: 20rpx;
  //       font-size: 28rpx;
  //       background-color: #02a7f0;
  //       color: #fff;
  //     }
  //     .heade-img {
  //       z-index: 1;
  //       width: 100rpx;
  //       height: 100rpx;
  //       border-radius: 50%;
  //       // margin-left: 80rpx;
  //     }
  //   }
  //   .nickname {
  //     font-weight: 600;
  //     font-size: 28rpx;
  //     margin-left: 30rpx;
  //     margin-top: 20rpx;
  //     color: #555;
  //     letter-spacing: 1rpx;
  //   }
  // }
}
    .auth-pop{
			background-color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 75%;
			margin: 0 auto;
			border-radius: 10rpx;
			padding: 20rpx;
	}
	.auth-pop image{
		   width: 200upx;
		   height: 200upx;
		   margin-top: 10%;
	}
	.auth-pop view {
		   // display: flex;
		   // width: 490upx;
		   // justify-content: space-between;
	}
	.auth-title {
		   font-size: 32upx;
	}
	.auth-content {
		   font-size: 26upx;
		   color: #a7aaa9;
	}
	.allow {
		   background-color: #27BCEF;
		   margin: 20rpx 0 75rpx;
		   text-align: center;
		   vertical-align: middle;
		   touch-action: manipulation;
		   cursor: pointer;
		   background-image: none;
		   white-space: nowrap;
		   user-select: none;
		   font-size: 14px;
		   border: 0 !important;
		   position: relative;
		   text-decoration: none;
		   height: 44px;
		   width: 250rpx;
		   line-height: 44px;
		   box-shadow: inset 0 0 0 1px #27BCEF;
		   background: #fff !important;
		   color: #27BCEF !important;
		   display: inline-block;
		   border-radius: 10rpx;
	
	}
 .self-inf {
   position: relative;
   height: 440rpx;
   width: 100%;
   display: flex;
   // margin-bottom: 80rpx;
   border-radius: 0rpx 0rpx 100% 100%;
   .img-name-box {
     height: 150rpx;
     margin-top:80rpx;
     display: flex;
     align-items: center;
 	  z-index: 101;
     .auth-btn {
 		margin-left: 30rpx;
 		margin-top: 20rpx;
       font-size: 28rpx;
       background-color: #02a7f0;
       color: #fff;
     }
     .heade-img {
       z-index: 1;
       width: 100rpx;
       height: 100rpx;
       border-radius: 50%;
       margin-left: 80rpx;
     }
   }
   .bg-img {
     z-index: -1;
     position: absolute;
     width: 100%;
     height: 100%;
	 background-color: #c2e3e6
     // border-radius: 0rpx 0rpx 70rpx 70rpx;
   }
   .groove-img {
     width: 100%;
     height: 100rpx;
     bottom: -22rpx;
     position: absolute;
   }
   .nickname {
     font-weight: 600;
     font-size: 28rpx;
     margin-left: 30rpx;
     margin-top: 20rpx;
     color: #ffffff;
     letter-spacing: 1rpx;
   }
 }
.antu-box {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.org-info-box {
    display: flex;
    justify-content: space-evenly;
    height: 50rpx;
    align-items: center;
    width: 100%;
    font-size: 30rpx;
	color: #fff;
} 
.org-info {
	width: 50%;
	padding-left: 15%;
}
 
.active-title-box {
	display: flex;
    align-items: center;
    // margin-top: 10rpx;
    font-size: 26rpx;
    height: 100rpx;
    border-bottom: 1px solid #d7d7d7;
		.time-select-box {
			width: 32%;
			margin-left: 5%;
		}
		picker {
		    width: 29%;
			border: 1px solid #d7d7d7;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
			padding: 0 10rpx;
			position: relative;
			image {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: 11px;
				right: 5px;
			}
		}
		button {
			width: 25%;
			font-size: 25rpx;
			background: #4988fd;
			color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
}
.active-box {
	// display: flex;
	// align-items: flex-start;
	// position: relative;
	// font-size: 28rpx;
	// padding: 20rpx;
	// border-bottom: 1px solid #d7d7d7;
		display: flex;
		align-items: flex-start;
		position: relative;
		font-size: 28rpx;
		padding: 3%;
		box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
		width: 90%;
		margin: 2% 0 0 2%;
		border-radius: 10rpx;
	.active-type {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: aquamarine;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
		justify-content: center;
	}
	.active-content-box {
		width:83%;
		// height: 120rpx;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		justify-content: space-around;
	}
	.active-content {
		display: flex;
		align-items: center;
		// height: 45rpx;
		font-size: 26rpx;	
		.author-box {
			border-left: 1px solid #d7d7d7;
			border-right: 1px solid #d7d7d7;
			padding: 0 30rpx 0 30rpx;
			margin: 0 20rpx 0 20rpx;
		}
		.active-name {
			font-size: 30rpx;
			margin-right: 10rpx;
		}
		.active-date {
			font-size: 24rpx;
			color: #ccc;
		}
	}
	.edit-icon-box {
		// position: absolute;
		// right: 10px;
		// top: 10px;
		// margin-top: 10rpx;
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.bg-yellow {
		background-color: #ffdd40;
	}
	.bg-gray {
		// background-color: darkgrey;
		background-color: #AE0B29;
	}
	.bg-red {
		background-color: #ec808d;
	}
	.bg-blue {
		background-color: #81d3f8;
	}
	.fontRed {
		color: coral;
	}
}
</style>