订阅弹窗

src/views/Jyh/Version/Detail/index.vue

@@ -9,18 +9,27 @@
       <div class="header-top">
         <GAvatar style="margin-right: 12px" :src="avatarUrl" name="Vue" :width="40" :height="40"></GAvatar>
         <div>
-          <div class="header-title1">vue</div>
+          <div class="header-title1">{{ softwareData.name }}</div>
           <div class="header-div">
-            <span class="span1">版本：</span><span class="span2">3.5.13</span>
+            <span class="span1">版本：</span><span class="span2">{{ softwareData.version }}</span>
             <span class="split"></span>
-            <span class="span1">生命周期状态：</span><span class="span2">选型中</span>
+            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>
             <span class="split"></span>
             <span class="span1">集成风险：</span>
-            <d-tag color="#F6933B">低风险</d-tag>
+            <d-tag color="#F6933B">{{ softwareData.risk }}</d-tag>
           </div>
         </div>
         <div class="fr">
-          <d-button class="mr-2" variant="solid">订阅</d-button>
+          <d-button class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>
+          <d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">
+            <template #header>
+              <div class="subscribe-header">
+                <d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>
+                <span>订阅漏洞预警通知</span>
+              </div>
+            </template>
+            <SubscriptionModal @close="colseSubscription" :softwareData="softwareData"></SubscriptionModal>
+          </d-modal>
         </div>
       </div>
       <d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
@@ -56,6 +65,7 @@ import AIRepair from '../../AIRepair/index.vue';
 import LicenseInfo from '../../LicenseInfo/index.vue';
 const { namespace } = getOrgInfo();
 const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';
+import SubscriptionModal from '@/views/Jyh/Version/Detail/SubscriptionModal.vue';
 
 const selectTab = ref('bbxx');
 
@@ -140,6 +150,21 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
   router.push('/cla/' + row.object_id);
 };
+
+const softwareData = ref({
+  name: 'vue',
+  version: '3.5.13',
+  lifecycle: '选中型',
+  risk: '低风险',
+});
+
+const subscribeModalVisable = ref(false);
+const openSubscription = () => {
+  subscribeModalVisable.value = true;
+};
+const colseSubscription = () => {
+  subscribeModalVisable.value = false;
+};
 </script>
 
 <style scoped lang="scss">
@@ -286,4 +311,25 @@ const signCla = (row: any) => {
   width: 100%;
   margin-top: 12px;
 }
+
+.subscribe-modal {
+  width: auto;
+
+  .subscribe-header {
+    display: flex;
+    align-items: center;
+    padding: 20px 20px 0;
+    >span {
+      margin-left: 8px;
+      color: #191919;
+      font-family: HarmonyOS Sans SC;
+      font-weight: medium;
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+}
 </style>
+
+<style lang="scss">
+</style>