aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: award表单页面

Browse Source
This commit is contained in:
zhangyahui
2026-01-19 17:07:05 +08:00
parent a0a751c661
commit a48e517e76
10 changed files with 2658 additions and 1971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/views/AwardPage/container.vue
View File

@@ -1,93 +1,196 @@
<template>
<div class="award-container">
<div class="header flex align-center space-between">
<div class="header-left">
<img src="@/assets/images/award/code_create_logo.png" class="logo" />
</div>
<div class="header-right flex align-center">
<div class="text">Submit your Application</div>
<img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
</div>
</div>
<RouterView />
<div class="footer flex space-between align-center">
<div class="social-list flex">
<a href="https://xhslink.com/m/5Ony2FapizV" target="_blank">
<img src="@/assets/images/award/xiaohongshu.svg" alt="" />
</a>
<a href="https://www.linkedin.com/company/code-create-limited" target="_blank">
<img src="@/assets/images/award/linkdin.svg" alt="" />
</a>
<a href="https://www.facebook.com/CodeCreateAI" target="_blank">
<img src="@/assets/images/award/facebook.svg" alt="" />
</a>
<a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
<img src="@/assets/images/award/tiktok.svg" alt="" />
</a>
<a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
<img src="@/assets/images/award/weichat.svg" alt="" />
</a>
</div>
<div class="copyright">© Code-Create 2026</div>
</div>
</div>
<div class="award-container">
<div class="header flex align-center space-between">
<div class="header-left">
<img
src="@/assets/images/award/code_create_logo.png"
class="logo"
/>
</div>
<div class="header-right flex align-center">
<div class="text">Submit your Application</div>
<img
src="@/assets/images/award/arrow.png"
alt=""
class="arrow"
/>
</div>
</div>
<router-view />
<div class="footer flex space-between align-center">
<div class="social-list flex">
<a
href="https://xhslink.com/m/5Ony2FapizV"
target="_blank"
>
<img
src="@/assets/images/award/xiaohongshu.svg"
alt=""
/>
</a>
<a
href="https://www.linkedin.com/company/code-create-limited"
target="_blank"
>
<img
src="@/assets/images/award/linkdin.svg"
alt=""
/>
</a>
<a
href="https://www.facebook.com/CodeCreateAI"
target="_blank"
>
<img
src="@/assets/images/award/facebook.svg"
alt=""
/>
</a>
<a
href="https://www.tiktok.com/@aida_codecreate"
target="_blank"
>
<img
src="@/assets/images/award/tiktok.svg"
alt=""
/>
</a>
<a
href="javascript:void(0)"
@click="showQRcode = true"
>
<img
src="@/assets/images/award/weichat.svg"
alt=""
/>
</a>
</div>
<div class="copyright">© Code-Create 2026</div>
</div>
<div
class="qrcode-mask flex flex-center"
v-if="showQRcode"
>
<div class="code-wrapper flex flex-col align-center">
<img
src="@/assets/images/award/close.svg"
class="close-icon"
@click="handleCloseQRcode"
/>
<div class="code-title">WeChat Official Account</div>
<img
src="@/assets/images/award/qrcode.jpg"
class="qrcode"
/>
<div class="tips">Scan the QR code in WeChat</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from 'vue'
const showQRcode = ref(false)
const handleCloseQRcode = () => {
showQRcode.value = false
}
</script>
<style lang="less" scoped>
.award-container {
overflow: auto;
height: 100vh;
// 隐藏滚动条箭头，只显示滚动条本体
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
.header {
height: 8rem;
background-color: #232323;
padding-left: 21.5rem;
padding-right: 8.6rem;
.header-left {
.logo {
width: 13rem;
height: 5rem;
}
}
.header-right {
column-gap: 1rem;
.text {
font-size: 1.6rem;
color: #fff;
}
.arrow {
width: 2.4rem;
height: 2.4rem;
}
}
}
.footer {
height: 10rem;
padding-left: 21.5rem;
padding-right: 22rem;
background-color: #232323;
.social-list {
column-gap: 2rem;
img {
width: 2rem;
height: 2rem;
}
}
.copyright {
color: #fff;
font-family: 'Arial';
font-weight: 400;
font-size: 1.2rem;
}
}
.award-container {
overflow: auto;
height: 100vh;
// 隐藏滚动条箭头，只显示滚动条本体
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
.header {
height: 8rem;
background-color: #232323;
padding-left: 21.5rem;
padding-right: 8.6rem;
.header-left {
.logo {
width: 13rem;
height: 5rem;
}
}
.header-right {
column-gap: 1rem;
.text {
font-size: 1.6rem;
color: #fff;
}
.arrow {
width: 2.4rem;
height: 2.4rem;
}
}
}
.footer {
height: 10rem;
padding-left: 21.5rem;
padding-right: 22rem;
background-color: #232323;
.social-list {
column-gap: 2rem;
img {
width: 2rem;
height: 2rem;
}
}
.copyright {
color: #fff;
font-family: 'Arial';
font-weight: 400;
font-size: 1.2rem;
}
}
.qrcode-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.45);
.code-wrapper {
width: 60rem;
height: 49.4rem;
background-color: #fff;
position: relative;
border-radius: 0.8rem;
padding-top: 6rem;
.close-icon {
width: 2.4rem;
height: 2.4rem;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
}
.code-title {
font-family: 'PoppinsBold';
font-weight: 600;
font-size: 3rem;
color: #232323;
}
.qrcode {
width: 25.8rem;
height: 25.8rem;
margin: 3rem 0 1rem;
}
.tips {
font-family: Arial;
font-weight: 400;
font-size: 1.4rem;
color: #585858;
}
}
}
</style>