uniProject/pages/demo/index.vue

<template>
	<view class="lli-demo-page">
		<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入考试名称" bgColor="#F3F3F4" clearButton="auto" cancelButton="none" @confirm="search"/>
		<view class="lli-status-box">
		    <text class="status-item click">可以考试</text><text class="status-item">已结束</text>
		</view>
		<scroll-view class="demo-scroll-view" scroll-y="true">
			<view class="content-view">
				
				<view class="lli-tc demo-title">------------咱们要用的默认按钮↓-------------</view>
				<button class="lli-btn">页面次要操作 Normal</button>
				<button class="lli-btn" loading="true" >页面主操作 Loading</button>
				<button class="lli-btn" disabled="true" >页面次要操作 Disabled</button>
				<view class="lli-tc demo-title">---------咱们要用的按钮plain（线性）↓----------</view>
				<button class="lli-btn" plain="true">页面次要操作 Normal</button>
				<button class="lli-btn" loading="true" plain="true">页面主操作 Loading</button>
				<button class="lli-btn" disabled="true" plain="true">页面次要操作 Disabled</button>
				<view class="lli-tc demo-title">------------其他组件定义color="#0550e5"-------------</view>	
					<checkbox-group>
						<label>
							<checkbox value="cb" checked="true" color="#0550e5"/>选中
						</label>
						<label>
							<checkbox value="cb" />未选中
						</label>
					</checkbox-group>
					<view class="lli-tc demo-title">------------扩展组件-------------</view>
						
					<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
								<uni-easyinput v-model="value" placeholder="请输入内容"@input="input"></uni-easyinput>
							</uni-section>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
			}
		},
		methods: {
			search:function(){},
		}
	}
</script>
<style lang="scss">
	.lli-demo-page{
		display: flex;flex-direction: column;
		height: 100vh;padding-bottom: 60rpx;box-sizing: border-box;
		.demo-scroll-view{
			overflow-y: auto;flex: 1;
		}
		.content-view{padding: 24px;box-sizing: border-box;}
		.demo-title{margin: 24px 0 10px;}
	}
	/* 小程序UI开发规范 */
	/*  1.第一版没有UI,用手机单机版的UI开发,尽可能保持一致
		2.页面中样式第一版都先写到底部style中
		2.扩展组件:已重置样式,可以直接用
		3.内置组件:如果是有颜色的,需要添加color="#0550e5"(后期会改成动态的,第一版先这么加),btn也可以用demo写好的
		4.自己写的样式尽量只用view,text标签,使用类选择器不要使用标签选择器 */
</style>