feat: 弹框

components/meet-pop/meet-pop.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="mask" v-if="dialogShow">
+  <view class="mask" v-if="dialogShow" @click="handleHide">
     <view class="content">
       <view class="bg">
         <view class="title">{{ dialogTitle }}</view>
@@ -11,21 +11,19 @@
           }"
         ></rich-text>
       </view>
+      <slot></slot>
       <view
         v-if="btnType == 1"
         class="bg-[#D6B184] text-[#24272A] text-center rounded-md h-[80rpx] leading-[80rpx] font-bold mt-[48rpx]"
         @click="handleHide"
         >确定</view
       >
-      <view class="flex justify-between mt-[50rpx]" v-if="btnType == 2">
+      <view class="flex justify-between pt-44" v-if="btnType == 2">
-        <view
+        <view class="btn cancel-btn" @click="handleCancel">
-          class="w-[226rpx] h-[80rpx] bg-[#ffffff] rounded-xl text-[#D6B184] text-[30rpx] font-bold text-center leading-[80rpx] bg-inherit borderColor"
-          @click="handleCancel"
-        >
           {{ CancelText }}</view
         >
         <view
-          class="w-[226rpx] h-[80rpx] rounded-xl text-[30rpx] font-bold text-center leading-[80rpx]"
+          class="btn"
           :style="{
             background: backgroundColor,
             color: color,
@@ -82,11 +80,11 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: "#202124",
+      default: "#1467FF",
     },
     color: {
       type: String,
-      default: "#D6B184",
+      default: "#fff",
     },
     textAlign: {
       type: String,
@@ -121,6 +119,21 @@ export default {
   font-size: 30rpx;
   font-weight: bold;
   text-align: center;
+  margin-bottom: 32rpx;
+}
+.btn {
+  width: 226rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  font-weight: 700;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+.cancel-btn {
+  border: 4rpx solid #1467ff;
+  color: #1467ff;
 }
 .mask {
   position: fixed;

meeting/common.scss

@@ -11,7 +11,9 @@
 
 
 
-
+.pt-44{
+    padding-top: 44rpx;
+}
 
 
 /* ========布局========== */

meeting/summary/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="bg container">
+  <view class="bg container">
     <meet-sticky :bg="bg">
       <meet-navbar title="会议总结" :isFixed="false"></meet-navbar>
     </meet-sticky>
-    <view>
+    <view class="content">
       <!-- 会议标题 -->
       <view class="border-item">
         <image
@@ -52,6 +52,7 @@
               src="/static/image/summary/edit.png"
               mode="scaleToFill"
               class="close"
+              @click="edit"
             />
           </view>
         </view>
@@ -98,34 +99,44 @@
         :dialogShow="popConfig.show"
         :btnType="popConfig.btnType"
         :dialogTitle="popConfig.title"
-      ></meet-pop>
+        @handleConfirm="confirm"
+        @handleCancel="cancel"
+      >
+        <view>
+          <u-input v-model="popConfig.value"></u-input>
+        </view>
+      </meet-pop>
+    </view>
   </view>
-  </div>
 </template>
 
 <script>
-import meetPop from "../../components/meet-pop/meet-pop.vue";
 export default {
-  components: { meetPop },
   data() {
     return {
       bg: "",
       meetData: {},
       popConfig: {
-        show: true,
+        show: false,
         title: "编辑参会人",
-        btnType:2
+        btnType: 2,
+        value: "",
       },
     };
   },
   methods: {
     add() {
       this.popConfig.show = true;
+      this.popConfig.title = "编辑参会人";
+    },
+    edit() {
+      this.popConfig.show = true;
+      this.popConfig.title = "添加关键词";
     },
     confirm() {
       this.popConfig.show = false;
     },
-    close() {
+    cancel() {
       this.popConfig.show = false;
     },
   },
@@ -134,6 +145,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "../common.scss";
+
+.content{
+    padding-bottom: 200rpx ;
+}
 .container {
   padding: 24rpx;
   background-color: #e3edfe;
@@ -178,4 +193,14 @@ export default {
   height: 40rpx;
   margin-bottom: 16rpx;
 }
+::v-deep .u-border {
+  border-style: none !important;
+  height: 80rpx;
+  background-color: #e9f1fd;
+  border-radius: 16rpx;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #93999f;
+  box-sizing: border-box;
+}
 </style>