feat: 公共样式 记录

meeting/common.scss

@@ -1,6 +1,29 @@
+.mb-20{
+    margin-bottom: 20rpx;
+}
 .mb-24{
     margin-bottom: 24rpx;
 }
 .mb-30{
     margin-bottom: 30rpx;
+}
+
+
+
+
+
+
+
+/* ========布局========== */
+.flex{
+    display: flex;
+}
+.justify-center{
+    justify-content: center;
+}
+.justify-between{
+    justify-content: space-between;
+}
+.items-center{
+    align-items: center;
 }

meeting/components/record.vue

@@ -1,23 +1,69 @@
 <template>
   <view>
     <view class="record-item mb-24">
-
+      <view class="flex justify-between items-center">
+        <view class="mb-20 title">
+          这是一个标题
+          <text class="status" :class="status[1]"> 这是状态 </text>
+        </view>
+        <view> 1111 </view>
+      </view>
+      <view class="flex justify-between items-center txt">
+        <view> 这是时间 </view>
+        <view class="">这是时长</view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
 export default {
-
-}
+  data() {
+    return {
+      status: ["wait", "success"],
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../common.scss';
-.record-item{
-    width: 100%;
-    height: 168rpx;
-    border-radius: 24rpx;
-    border: 2rpx #fff solid;
+@import "../common.scss";
+
+.status {
+//   line-height: 40rpx;
+  padding: 4rpx 16rpx;
+  border: 1rpx solid;
+  border-radius: 8rpx;
+  margin-left: 12rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+}
+.wait {
+  border: #1467ff 1rpx solid;
+  color: #1467ff;
+  background-color: #1466ff11;
+}
+.success {
+  border: #1eb066 1rpx solid;
+  color: #1eb066;
+  background-color: #1eb06611;
+}
+.record-item {
+  //   height: 168rpx;
+  border-radius: 24rpx;
+  border: 2rpx #fff solid;
+  padding: 32rpx 24rpx;
+  padding-bottom: 36rpx;
+  .title {
+    font-weight: 700;
+    font-size: 28rpx;
+    color: #23262b;
+    line-height: 40rpx;
+  }
+  .txt {
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #4b5158;
+  }
 }
 </style>