宠托师证书及触发按钮

src/pages/Modal/authentication/1.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="isVisible" class="modal">
+    <!-- <div class="modal-content">
+      <span class="close" @click="close">&times;</span> -->
+    <image
+      :src="imgUrl('@/static/certificate/宠托师证书.png')"
+      mode="scaleToFill"
+      class="modal-content"
+    />
+    <div class="details">
+      <div class="content">
+        证书编号：
+        <span class="content_right">123456789</span>
+      </div>
+      <div class="content">
+        证书类型：
+        <span class="content_right">123456789</span>
+      </div>
+      <div class="content">
+        服务次数：
+        <span class="content_right">123456789</span>
+      </div>
+      <div class="content">
+        创建时间：
+        <span class="content_right">123456789</span>
+      </div>
+      <div class="content">
+        过期时间：
+        <span class="content_right">123456789</span>
+      </div>
+      <div class="content">
+        最后更新：
+        <span class="content_right">123456789</span>
+      </div>
+    </div>
+    <button open-type="" hover-class="button-hover" class="button_know">知道了</button>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { imgUrl } from '@/utils/commUtils'
+
+const props = defineProps({
+  isVisible: Boolean,
+  message: String,
+})
+
+const emit = defineEmits(['update:isVisible'])
+
+function close() {
+  emit('update:isVisible', false)
+}
+</script>
+
+<style scoped>
+.modal {
+  display: flex;
+  position: relative;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  /* background-color: #fefefe; */
+  margin: auto;
+  /* padding: 20px; */
+  /* border: 1px solid #888; */
+  width: 100%;
+  height: 1800rpx;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.details {
+  position: absolute;
+  top: 880rpx;
+  left: 160rpx;
+  height: 500rpx;
+}
+
+.content {
+  color: #7e5c2f;
+  padding-bottom: 20px;
+  font-weight: bold;
+}
+
+.content_right {
+  font-weight: normal;
+}
+
+.button_know {
+  position: absolute;
+  top: 1340rpx;
+  left: 90rpx;
+  height: 100rpx;
+  width: 579rpx;
+  border-radius: 70px;
+  background-color: #e8c48b;
+  color: #5d392c;
+}
+</style>

src/pages/Modal/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <button @click="showModal">显示弹窗</button>
+  <Modal
+    :isVisible="isModalVisible"
+    @update:isVisible="isModalVisible = $event"
+    message="这是一个弹窗内容！"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Modal from './authentication/1.vue'
+
+const isModalVisible = ref(false)
+
+function showModal() {
+  isModalVisible.value = true
+}
+</script>