feat:新增二维码弹窗

src/views/courselibrary/CoursewareManage.vue

@@ -772,7 +772,7 @@
           </div>
         </div>
     </a-modal>
-    <!-- 面授课程管理查看详情页面 -->
+    <!-- 操作管理面授课程管理查看详情页面 -->
     <!-- 操作授权页面 -->
     <a-modal
       v-model:visible="gpm_hs"
@@ -866,7 +866,7 @@
             </div>
           </div>
         </div>
-      </a-modal>
+    </a-modal>
     <!--操作授权页面 -->
     <!--开课页面 -->
     <a-modal
@@ -1265,6 +1265,32 @@
         </div>
     </a-modal>
     <!--新建开课学员管理页面页面 -->
+    <!--新建二维码页面 -->
+    <a-modal v-model:visible="QR_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
+      <div
+        class="QR"
+        :style="{ display: QR_hs ? 'block' : 'none' }"
+      >
+        <div class="qr_header"></div>
+        <div class="qr_main">
+          <div class="qrm_header">
+            <div class="qr_icon"></div>
+            <span>二维码</span>
+            <div class="close_exit"  @click="qr_exit"></div>
+          </div>
+          <div class="qrm_body"><div class="QR_img"></div></div>
+          <div class="qrm_btnbox">
+            <div class="qrm_btn btn1">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="qrm_btn btn2">
+              <div class="btnText" @click="qr_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!--新建二维码页面 -->
   </div>
 </template>
 <script>
@@ -1933,6 +1959,8 @@ export default defineComponent({
       stm_hs: false,
       cstm_hs: false,
       sm_hs: false,
+      QR_hs:false,
+      closableQR: false,
       value:"",
       valueE:"",
     });
@@ -2176,6 +2204,17 @@ export default defineComponent({
                           // options={state.projectNameList}
                           dropdownClassName="tabledropdown"
                         >
+                          <a-select-option
+                              value="二维码"
+                              label="二维码"
+                              style="padding-left:35px"
+                            >
+                            <div
+                            onClick={() => {
+                                state.QR_hs = true;
+                              }}
+                            >二维码</div>
+                          </a-select-option>
                           <a-select-option
                             value="复制"
                             label="复制"
@@ -2573,6 +2612,9 @@ export default defineComponent({
       state.bs_hs = false;
       state.valueE = "";
     }
+    const qr_exit = () => {
+      state.QR_hs = false;
+    }
     return {
       onftvalue,
       current,
@@ -2609,6 +2651,7 @@ export default defineComponent({
       cstm_exit,
       sm_exit,
       clear_valueE,
+      qr_exit,
     };
   },
 });
@@ -2775,7 +2818,6 @@ export default defineComponent({
     }
   }
 }
-
 .modalStyle {
   .ant-modal{
     .modalHeader {
@@ -3091,7 +3133,7 @@ export default defineComponent({
         }
       }
     }
-  }
+}
 .createschooltime {
     z-index: 999;
     width: 679px;
@@ -3205,6 +3247,98 @@ export default defineComponent({
       }
     }
 }
+.ant-modal{
+  .ant-modal-content{
+  width:479px !important;
+  .ant-modal-body{
+    .QR{
+        z-index: 999;
+        width: 100%;
+        background: #ffffff;
+        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+        position: absolute;
+        left: 50%;
+        top: 10%;
+        transform: translate(-50%, -50%);
+        .qr_header {
+          position: absolute;
+          width: calc(100%);
+          height: 40px;
+          background: linear-gradient(
+            rgba(78, 166, 255, 0.2) 0%,
+            rgba(78, 166, 255, 0) 100%
+          );
+        }
+        .qr_main {
+          width: 100%;
+          position: relative;
+          .qrm_header {
+            display: flex;
+            align-items: center;
+            padding-top: 20px;
+            padding-left: 26px;
+            font-size: 16px;
+            .qr_icon {
+              width: 16px;
+              height: 16px;
+              margin-right: 10px;
+              background-image: url(@/assets/images/coursewareManage/add1.png);
+              background-size: 100% 100%;
+            }
+            .close_exit {
+              position: absolute;
+              right: 42px;
+              cursor: pointer;
+              width: 20px;
+              height: 20px;
+              background-image: url(@/assets/images/coursewareManage/close.png);
+              background-size: 100% 100%;
+            }
+          }
+          .qrm_body{
+            width: 100%;
+            .QR_img{
+              width:176px;
+              height:176px;
+              margin:1px auto;
+              background-color: red;
+            }
+          }
+          .qrm_btnbox{
+              display:flex;
+              margin:30px auto;
+              justify-content: center;
+              .qrm_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 14px;
+                flex-shrink: 0;
+                cursor: pointer;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+        }
+    }
+  }
+  }
+}
 .modalStyle {
   .ant-modal{
     .modalHeader {