[完成] 内心独白页面UI

pages.json

@@ -160,6 +160,12 @@
 			"style": {
 				"navigationBarTitleText": "测试专用"
 			}
+		},
+		{
+			"path": "pages/my/innerMonologue",
+			"style": {
+				"navigationBarTitleText": "内心独白"
+			}
 		}
 	],
 	"globalStyle": {

pages/my/innerMonologue.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="content">
+		<view class="textarea-box">
+			<textarea class="textarea" placeholder="展现自己，也可说出您的故事～" maxlength="200"></textarea>
+			<view class="tips-num">0/200</view>
+		</view>
+		<view class="tips-content">！小提示：谈谈你对爱情、婚姻的想法，简单介绍下自己的生后工作或者你希望中的那个ta，最好能让对方更了解你，还能快速拉近两人的距离哟～</view>
+		<button class="btn" hover-class="lf-opacity">保存</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		padding: 30rpx 32rpx;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.textarea-box{
+			position: relative;
+			.tips-num{
+				position: absolute;
+				bottom: 30rpx;
+				right: 30rpx;
+				font-size: 28rpx;
+				color: #999999;
+			}
+		}
+		.textarea{
+			width: 686rpx;
+			height: 350rpx;
+			border-radius: 10rpx;
+			background-color: #F5F5F5;
+			box-sizing: border-box;
+			padding: 30rpx;
+			font-size: 28rpx;
+			padding-bottom: 80rpx;
+		}
+		.tips-content{
+			font-size: 24rpx;
+			color: #777777;
+			margin-top: 45rpx;
+		}
+		.btn{
+			margin-top: 40rpx;
+			background-color: #E21196;
+			border-radius: 46rpx;
+			color: #FFFFFF;
+		}
+	}
+</style>

pages/test/test.vue

@@ -1,6 +1,30 @@
 <template>
-	<view class="content">
-		<view class="item" :class="{'max-item': item == 0}" v-for="item in 6"></view>
+	<view>
+		<!-- <view class="content"> -->
+			<!-- float 方案 -->
+			<!-- <view class="item" :class="{'max-item': item == 0}" v-for="item in 6">{{ item + 1 }}</view> -->
+			
+			<!-- flex 方案 -->
+			<!-- <view class="lf-flex-wrap">
+				<view class="flex" 
+					:style="{order: item + 1}"
+					:class="{'flex-max': item == 0}" 
+					v-for="item in 6"
+				>{{ item + 1 }}</view>
+			</view> -->
+		<!-- </view> -->
+		
+		 <div class="box-wrapper">
+		      <div style="margin-top:0px" class="box"></div>
+		      <div class="box spe"></div>
+		      <div class="box spe"></div>
+		      <div class="box spe"></div>
+		      <div class="box spe"></div>
+		      <div class="box"></div>
+		      <div class="box"></div>
+		      <div class="box spe"></div>
+		      <div class="box spe"></div>
+		  </div>
 	</view>
 </template>
 
@@ -26,6 +50,28 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+	.box{
+		height: 123px;
+		padding: 1em;
+		margin-top: 1em;
+		-moz-page-break-inside: avoid;
+		-webkit-column-break-inside: avoid;
+		break-inside: avoid;
+		border: 1px solid #000;
+		background: #909090;
+	}
+	.spe{
+		height: 225px;
+	}
+	.box-wrapper{
+		-moz-column-count:4; /* Firefox */
+		-webkit-column-count:4; /* Safari 和 Chrome */
+		column-count:4;
+		-moz-column-gap: 1em;
+		-webkit-column-gap: 1em;
+		column-gap: 1em;
+	}
+	
 	.content{
 		width: 750rpx;
 		height: max-content;
@@ -33,6 +79,20 @@
 		box-sizing: border-box;
 		padding: 27rpx;
 		overflow: hidden;
+		
+		.flex{
+			width: 222rpx;
+			height: 222rpx;
+			background-color: #DD6161;
+			margin: 5rpx;
+		}
+		.flex-max{
+			width: 454rpx;
+			height: 454rpx;
+		}
+		
+		
+		/* float
 		.item{
 			width: 222rpx;
 			height: 222rpx;
@@ -42,7 +102,8 @@
 		}
 		.max-item{
 			width: 454rpx;
-			height: 454rpx;
+			height: 453rpx;
 		}
+		*/
 	}
 </style>