Updated files

微信小程序界面开发笔记.md

@@ -0,0 +1,115 @@
+# 微信小程序界面开发笔记
+
+---
+
+图文结合效果：
+
+![](https://img2023.cnblogs.com/blog/2486231/202212/2486231-20221207163726211-2113491744.png)
+
+Code：
+
+```
+<view class="plate">
+    <view class="plate-item plate-l">
+      <view class="plate-l-l" bindtap="btn_course">
+      <image src="{{_server_url}}img/01.png" class="plate-image1"></image>
+      <text class="text1">告别失眠笔记</text>
+      <text class="text2">夜夜安眠</text>
+      </view>
+    </view>
+    <view class="plate-item plate-r">
+      <view class="plate-r-t" bindtap="btn_course">
+        <image src="{{_server_url}}img/02.png" class="plate-image2"></image>
+        <text class="text1">致失眠</text>
+        <text class="text2">朋友们的一封信</text>
+      </view>
+      <view class="plate-r-b" bindtap="btn_course">
+        <image src="{{_server_url}}img/03.png" class="plate-image3"></image>
+        <text class="text1">失眠</text>
+        <text class="text2">调查问卷</text>
+      </view>
+    </view>
+  </view>
+```
+
+Css:
+
+```
+/*  plate */
+.plate{
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+  padding: 10px 10px 10px 10px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.plate-item{
+  width: 50%;
+  display: flex;
+  align-items:center;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.plate-l{
+
+}
+.plate-r{
+
+}
+.plate-l-l{
+  width: 100%; 
+  height: 367rpx;
+  border-radius: 10px;
+}
+.plate-r-t{
+  top: 0px;
+  position: absolute;
+  width: 100%;
+  height: 50%;
+}
+.plate-r-b{
+  bottom: 0px;
+  position: absolute;
+  width: 100%;
+  height: 50%;
+}
+.plate-image1{
+  width: calc(100% - 10px);
+  height: 367rpx;
+  border-radius: 10px;
+}
+.plate-image2{
+  width: 100%;
+  border-radius: 10px;
+  height: calc(100% - 5px);
+}
+.plate-image3{
+  width: 100%;
+  border-radius: 10px;
+  height: calc(100% - 5px);
+  bottom: 0px;
+  position: absolute;
+}
+.plate-item .text1{
+  font-size: 18px;
+  top: 16px;
+  position: absolute;
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  left: 14px;
+  color: #fff;
+}
+.plate-item .text2{
+  font-size: 12px;
+  top: 44px;
+  position: absolute;
+  width: 100%;
+  display: flex;
+  left: 14px;
+  color: #fff;
+}
+```
+