报名工具小程序初始代码

static/base.css

@@ -0,0 +1,20 @@
+/* 标准行 */
+.row{
+	min-height: 96rpx;
+	width: auto;
+	display: flex;
+	flex-direction: row;
+	background-color: #fff;
+	align-items: center;
+	padding-left:36rpx;
+	padding-right:36rpx;}
+	
+/* 字段、行标题 */
+.field{
+	float: left;
+}
+.checkbox{
+	width: 32rpx;
+	height: 32rpx;
+	float: right;
+}

static/columns.css

@@ -0,0 +1,346 @@
+/* 公共样式 */
+@import url("public.css");
+/* 页头 */
+@import url("header.css");
+@import url("font.css");
+/* 活动创建 */
+
+.ativity-create-info{
+		
+}
+	
+.ativity-create-info .title{
+}
+/* 活动详情 */
+.activity-detail{
+	background: #FFFFFF;
+}
+
+.activity-detail .image-area{
+	width: 100%;
+	height: 300rpx; 
+	}
+		
+.activity-detail .image-area .image{
+		width: 100%;
+		height: 100%; 
+		border-radius: 30rpx;
+		}
+.activity-detail .name-category{
+	padding:0 30rpx 0 30rpx;
+	display: flex; 
+	flex-direction: row;
+	min-height: 96rpx;
+	background-color: #F1F1F1;
+	align-items: center;
+	}
+.activity-detail .name-category .name{
+	color: #101010; 
+	font-size: 32rpx; 
+	display:-webkit-box;
+	-webkit-line-clamp:1;
+	overflow:hidden;
+	text-overflow:ellipsis;
+	-webkit-box-orient:vertical;	
+	word-break:break-all;
+	flex: 1;
+	}
+.activity-detail .name-category .category{
+	color: #fff; 
+	font-size: 24rpx; 
+	height:32rpx;
+	background-color: #F2BF5C; 
+	margin-left: 20rpx;
+	padding: 5rpx 10rpx;
+	}
+	
+.activity-detail .item-area{
+	margin-top: 20rpx;
+}	
+.activity-detail .item-area .item-name-mold-money{
+	height: 96rpx;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	background-color: #F1F1F1;
+	padding: 0 30rpx 0 30rpx;
+	}
+.activity-detail .item-area .item-name-mold-money .item-name{
+	color: #101010; 
+	font-size: 28rpx; 
+	flex: 1;
+	padding: 0 30rpx 0 30rpx;
+	}
+.activity-detail .item-area .item-name-mold-money .mold-money{
+	margin-left:30rpx;
+	color: #ff0000 ; 
+	font-size: 24rpx;
+	}
+.activity-detail .item-area  .item-introduction{
+	min-height: auto;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	padding:30rpx;
+}
+.activity-detail .introduction{
+	min-height: auto;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	padding:30rpx;
+}
+.activity-detail .item-area .date-adress{
+	display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;align-items: center;
+}
+.activity-detail .item-area .date{
+	font-size: 30rpx;color: #E3A428 ;
+}
+.activity-detail .item-area .address{
+	color: #666666; font-size: 30rpx;text-align: right;flex: 1;
+}
+.activity-detail .item-area .address text{
+	margin-left: 30rpx;
+}
+.activity-detail  .line{
+	height: 1rpx;
+	background-color: #eee;
+	flex: 1;
+	margin-left: 20rpx;
+}
+/* 活动块 */
+.activity-area{
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 30rpx; 
+		padding: 30rpx;
+		background: #FFFFFF;
+	}
+	.activity-area .summary{
+		 display: flex;
+		 flex-direction: column;
+	}
+	.activity-area .summary .name-category{
+		display: flex; flex-direction: row;
+		}
+	.activity-area .summary .name-category .name{
+		color: #101010; 
+		font-size: 32rpx; 
+		display:-webkit-box;
+		-webkit-line-clamp:1;
+		overflow:hidden;
+		text-overflow:ellipsis;
+		-webkit-box-orient:vertical;	
+		word-break:break-all;
+		flex: 1;
+		}
+	.activity-area .summary .name-category .category{
+		color: #fff; 
+		font-size: 24rpx; 
+		background-color: #F2BF5C; 
+		padding: 5rpx 10rpx;
+		}
+	.activity-area .summary .enroll{
+		color: #898989 ; 
+		font-size: 28rpx; 
+		margin-top: 10rpx;
+		}
+		
+	.activity-area .image-area{
+		width: 100%;
+		height: 300rpx; 
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+		}
+	.activity-area .image-area .image{ 
+		width: 100%;
+		height: 100%; 
+		border-radius: 30rpx;
+		}
+	.activity-area .image-area .tips{ 
+		display: flex; height: 50rpx;width: 100%; margin-top: -80rpx; 
+	}
+	.activity-area .image-area .tips .icon{ 
+		width: 28px;height: 48rpx;margin-left: 30rpx;
+		}
+	.activity-area .image-area .tips .popularity{ 
+		color: #fff; margin-left: 15rpx;flex: 1;
+		}
+	.activity-area .image-area .tips .enroll-state{
+		display: flex;text-align: center; padding: 8rpx 15rpx;color: #FFFFFF; font-size: 28rpx; margin-right:30rpx; border-radius: 10rpx;
+		}
+	.activity-area .image-area .tips .enroll-no {
+		background: #BBBBBB;
+	}
+	.activity-area .image-area .tips .enroll-yes {
+		background: #0081D5;
+	}
+	.activity-area .item-area{
+		display: flex;
+		flex-direction: column;
+		margin-top:10rpx;
+		margin-bottom: 10rpx;
+		}
+	.activity-area .item-area .item-name-mold-money{
+		display: flex;flex-direction: row; align-items: center; margin-top: 10rpx;
+		}
+	.activity-area .item-area .item-name-mold-money .item-name{
+		color: #101010; font-size: 28rpx; flex: 1;
+		}
+	.activity-area .item-area .item-name-mold-money .mold-money{
+		color: #ff0000 ; font-size: 24rpx;
+		}
+	.activity-area .item-area .enroll-amount-date{
+		display: flex;flex-direction: row;margin-top: 5rpx;margin-bottom:5rpx
+		}
+	.activity-area .item-area .enroll-amount-date text{
+		color: #919191; font-size: 24rpx;
+		}
+	.activity-area .item-area .enroll-amount-date .date{
+		display: flex;text-align: center;
+		margin-right:30rpx;
+		}
+
+/* 队伍创建及加入块 */
+.team-join-nav{
+	height: 224rpx;
+	width: auto;
+	display: flex;
+	flex-direction: row;
+	background-color: #fff;
+	align-items: center;
+	padding-left:36rpx;
+	padding-right: 36rpx;
+}
+.team-join-nav .left{
+		width: auto;
+		height: 120rpx;
+		float: left;
+		background-color: white;
+		vertical-align: middle;
+}
+.team-join-nav text{
+		float: left;
+}
+.team-join-nav button{
+	float: right;
+	width: 160rpx;
+	height: 60rpx;
+	font-size: 26rpx;
+	color: #FFFFFF;
+	background-color: #F4CE98;
+}
+
+.team{
+	background-color: #fff;
+	margin-bottom: 24rpx;
+	display: flex;
+	flex-direction: column;
+	min-height: 250rpx;
+	margin-top: 32rpx;
+	border-bottom:10rpx solid #eee;
+}
+.team .scorll{
+	min-height: 180rpx;
+}
+.team .info{
+	height: 100rpx;
+	flex-direction: row;
+	border-bottom:1rpx solid #eee;
+}
+.team .info .top{
+	width: 100%;
+	float: left;
+}
+.team .info .team-name {
+	max-width: 350rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 36rpx;
+	color: #101010;
+}
+.team .info .link{
+	float: right;
+	margin-left:24rpx;
+	font-size: 30rpx;
+	text-decoration-line: underline;
+	color: #E99D42;
+}
+.team .info .label-list {
+	width: 100%;
+	float: left;
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+}
+.team .info .label-list .label {
+	height: 32rpx;
+	color: #E99D42;
+	font-size: 24rpx;
+	text-align: center;
+	align-items: center;
+	margin-top:15rpx;
+	margin-right: 25rpx;
+}
+.team .operation {
+	padding-top:20rpx;
+	padding-bottom:20rpx;
+	flex-direction: column;
+	align-items: center;
+	text-align: right;
+	border-top:1rpx solid #eee;
+}
+
+.team .operation text{
+	float: right;
+	margin-left:24rpx;
+	font-size: 30rpx;
+	text-decoration-line: underline;
+	color: #E99D42;
+}
+
+/* 微信授权登录页面 */
+.login{
+	text-align:center;
+}
+
+.login .name-logo{
+	width: 500rpx;
+	height: 320rpx;
+	margin: 0 auto;
+	margin-top:140rpx;
+}
+.login .name-logo image{
+	height: 120rpx;
+}
+.login .name-logo .name{
+	float:left;
+	width: 310rpx;
+}
+.login .name-logo .logo{
+	width: 160rpx;
+	float:left;
+	margin-left:30rpx;
+}
+
+.login .icons{
+	float: none;
+	width:540rpx;
+	height: 160rpx;
+	margin: 0 auto;
+	margin-bottom: 70rpx;
+}
+.login .icons .wx-icon{
+	width: 160rpx;
+	height: 160rpx;
+}
+.login .icons .exchange{
+	width: 90rpx;
+	height: 90rpx;
+	margin:35rpx 70rpx;
+}
+.login .icons .head-image{
+	width: 150rpx;
+	height: 150rpx;
+}

static/font.css

@@ -0,0 +1,42 @@
+/* 全局字体设置 */
+/* 版块名称/活动名称等名称 */
+h1{
+	font-size: 36rpx;
+	color: #000000;
+	font-family: 黑体;
+}
+/* 栏目名称/活动项目名称等名称 */
+h2{
+	font-size: 36rpx;
+	color: #000000;
+	font-family: 黑体;
+}
+/* 文章标题、列表内标题 */
+h3{
+	font-size: 32rpx;
+	color: #080808;
+}
+/* 标准文字 */
+text{
+	font-size: 28rpx;
+	color: #828282;
+}
+/*按钮*/
+button {
+	font-size: 32rpx;
+}
+/* 字段、行标题 */
+.field{
+	font-size: 32rpx;
+	color: #101010;
+}
+/* 提示 */
+.tips{
+	font-size: 32rpx;
+	color: #E99D42;
+}
+/* 说明 */
+.explain{
+	font-size: 28rpx;
+	color: #828282;
+}

static/header.css

@@ -0,0 +1,57 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background-color: #EDEDED;
+	box-sizing: border-box;
+	}
+.top {
+	display: flex;
+	flex-direction: row;
+	padding-bottom: 35rpx;
+	padding-top: 55rpx;
+	width: 100%;
+	background-color: #FFFFFF;
+	box-sizing: border-box;
+	}
+		
+
+.touxiang {
+	width: 150rpx;
+	height: 150rpx;
+	border-radius: 10%;
+	margin-left: 35rpx;
+	margin-right: 35rpx;
+	flex-shrink: 0;
+	}
+
+.top-right {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	box-sizing: border-box;
+	}
+			
+
+.name {
+	font-family: sans-serif;
+	font-weight: 500;
+	color: #101010;
+	font-size: 40rpx;
+	}
+
+.name2 {
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	word-break: break-all;
+	color: #828282;
+	font-size: 28rpx;
+	}
+
+.user-item-bg {
+	background-color: #FFFFFF;
+	margin-top: 20rpx;
+}

static/master.css

@@ -0,0 +1,122 @@
+@import url("base.css");
+@import url("public.css");
+@import url("header.css");
+
+/* 常用的CSS命名规则
+头：header
+内容：content/container
+尾：footer
+导航：nav
+侧栏：sidebar
+栏目：column
+页面外围控制整体?丫挚矶龋?rapper
+左右中：left right center
+登录条：loginbar
+标志：logo
+广告：banner
+页面主体：main
+热点：hot
+新闻：news
+下载：download
+子导航：subnav
+菜单：menu
+子菜单：submenu
+搜索：search
+友情链接：friendlink
+页脚：footer
+版权：copyright
+滚动：scroll
+内容：content
+标签：tags
+文章列表：list
+提示信息：msg
+小技巧：tips
+栏目标题：title
+加入：joinus
+指南：guide
+服务：service
+注册：regsiter
+状态：status
+投票：vote
+合作伙伴：partner
+
+
+id的命名:
+1)页面结构
+
+容器: container
+页头：header
+内容：content/container
+页面主体：main
+页尾：footer
+导航：nav
+侧栏：sidebar
+栏目：column
+页面外围控制整体?丫挚矶龋?rapper
+左右中：left right center
+
+(2)导航
+
+导航：nav
+主导航：mainnav
+子导航：subnav
+顶导航：topnav
+边导航：sidebar
+左导航：leftsidebar
+右导航：rightsidebar
+菜单：menu
+子菜单：submenu
+标题: title
+摘要: summary
+
+(3)功能
+
+标志：logo
+广告：banner
+登陆：login
+登录条：loginbar
+注册：register
+搜索：search
+功能区：shop
+标题：title
+加入：joinus
+状态：status
+按钮：btn
+滚动：scroll
+标页：tab
+文章列表：list
+提示信息：msg
+当前的: current
+小技巧：tips
+图标: icon
+注释：note
+指南：guild
+服务：service
+热点：hot
+新闻：news
+下载：download
+投票：vote
+合作伙伴：partner
+友情链接：link
+版权：copyright
+
+复选框组：checkboxgroup
+复选框：checkbox
+
+注意事项::
+1.一律小写;
+2.尽量用英文;
+3.不加中文和下划线;
+4.尽量不缩写，除非一看就明白的单词。
+
+CSS样式表文件命名
+主要的 master.css
+模块 module.css
+基本共用 base.css
+布局、版面 layout.css
+主题 themes.css
+专栏 columns.css
+文字 font.css
+表单 forms.css
+补丁 mend.css
+打印 print.css */

static/public.css

@@ -0,0 +1,150 @@
+body{
+	background-color: #EDEDED;
+}
+/*按钮设置*/
+button {
+	justify-content: center;
+	width: 400rpx;
+	height: 80rpx;
+	display: flex;
+	color: #FFFFFF;
+	background: #0797ED;
+	text-align: center;
+}
+/* 滚动 */
+.scorll{
+	width: 100%;
+	white-space: nowrap;
+}
+/* 列表设置 */
+.list {
+	padding-left:36rpx;
+	padding-right: 36rpx;
+}
+
+.list .user-info-list{
+	display: inline-block;
+}
+.list .user-info{
+	width: 100%;
+	height: 180rpx;
+	min-height: 180rpx;
+	margin-top:32rpx;
+	display: flex;
+	flex-direction: column;
+	white-space: nowrap;
+}
+.list .user-info .head-image{
+	width: 110rpx;
+	height: 110rpx;
+	min-height: 110rpx;
+	min-width: 110rpx;
+	border-radius: 12rpx;
+}
+.list .user-info .real-name{
+	width: 110rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 110rpx;
+	margin-top: 15rpx;
+	font-size: 24rpx;
+	text-align: center;
+}
+
+.row{
+	min-height: 96rpx;
+	width: auto;
+	display: flex;
+	flex-direction: row;
+	background-color: #fff;
+	align-items: center;
+	padding-left:36rpx;
+	padding-right:36rpx;}
+	
+/* 字段、行标题 */
+.field{
+	float: left;
+}
+
+/* 统一菜单样式 */
+.menu-item {
+	height: 112rpx;
+	width: auto;
+	display: flex;
+	flex-direction: row;
+	background-color: #fff;
+	align-items: center;
+	padding-left:36rpx;
+	padding-right: 36rpx;}
+.field{
+	flex: 1;
+	float: left;
+}
+
+.menu-item .icon {
+	width: 69rpx;
+	height: 35rpx;	
+}	
+.menu-item .text {
+	font-size: 32rpx;
+	color: #101010;
+	flex: 1;
+	float: left;
+}
+.menu-item .explain {
+	font-size: 28rpx;
+	color: #828282;
+	margin-right: 10rpx;
+}
+.more {
+	width: 35rpx;
+	height: 35rpx;
+	float:right;
+}
+/* 标准间距 */
+.margin-top-thin{
+	margin-top:1rpx;
+}
+.margin-bottom-thin{
+	margin-top:1rpx;
+}
+.margin-top-wide{
+	margin-top:20rpx;
+}
+.margin-bottom-wide{
+	margin-top:20rpx;
+}
+.margin-left20{
+	margin-left:20rpx;
+}
+.margin-right20{
+	margin-left:20rpx;
+}
+.margin-top20{
+	margin-top:20rpx;
+}
+.margin-top50{
+	margin-top:50rpx;
+}
+.margin-top70{
+	margin-top:70rpx;
+}
+.line-thin{
+	height: 1rpx;
+	width: 100%;
+	background-color: #eee;
+}
+.line-wide{
+	height: 20rpx;
+	width: 100%;
+	background-color: #eee;
+}
+
+/* 按钮颜色设置 */
+.button-blue{
+	background: #0797ED;
+}
+.button-gray{
+	background: #BBBBBB;
+}