From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 13:12:48 +0800 Subject: [PATCH] 项目初始化 --- src/components/geek-xd/components/geek-certificate/geek-certificate.vue | 90 +++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 90 insertions(+), 0 deletions(-) diff --git a/src/components/geek-xd/components/geek-certificate/geek-certificate.vue b/src/components/geek-xd/components/geek-certificate/geek-certificate.vue new file mode 100644 index 0000000..c828df8 --- /dev/null +++ b/src/components/geek-xd/components/geek-certificate/geek-certificate.vue @@ -0,0 +1,90 @@ +<template> + <view class="upload"> + <view class="imagebox"> + <view class="imageborder"> + <view class="main"> + <slot></slot> + </view> + </view> + </view> + <view class="text"> + <text>{{ text }}</text> + </view> + </view> +</template> + +<script setup> +import { ref } from 'vue'; + +const text = ref("") +</script> + +<style scoped lang="scss"> +.upload { + height: 400rpx; + width: 90%; + border-radius: 20rpx; + overflow: hidden; + + .imagebox { + height: 80%; + background-color: #eff8ff; + align-items: center; + justify-content: center; + display: flex; + + .imageborder { + border: 5px #319fea solid; + position: relative; + width: 70%; + height: 80%; + border-radius: 30rpx; + + &::after { + position: absolute; + content: ' '; + background-color: #eff8ff; + height: 80%; + width: 120%; + top: 10%; + left: -10%; + } + + &::before { + position: absolute; + content: ' '; + background-color: #eff8ff; + top: -10%; + left: 10%; + height: 120%; + width: 80%; + } + + .main { + position: absolute; + background-color: #eff8ff; + top: 5%; + left: 5%; + height: 90%; + width: 90%; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + } + } + + .text { + height: 20%; + background-color: #319fea; + display: flex; + justify-content: center; + align-items: center; + + text { + color: #ffffff; + } + } +} +</style> -- Gitblit v1.9.3