feat: award页面迁移
This commit is contained in:
268
src/views/AwardPage/container.vue
Normal file
268
src/views/AwardPage/container.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="award-container">
|
||||
<div class="header-wrapper">
|
||||
<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"
|
||||
@click="handleBtnClick"
|
||||
>
|
||||
<div class="text">{{ btnText }}</div>
|
||||
<img
|
||||
src="@/assets/images/award/arrow.png"
|
||||
alt=""
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-placeholder"></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">{{ $t('AwardsPage.wechatTitle') }}</div>
|
||||
<img
|
||||
src="@/assets/images/award/qrcode.jpg"
|
||||
class="qrcode"
|
||||
/>
|
||||
<div class="tips">{{ $t('AwardsPage.wechatDesc') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getCookie } from '@/utils/cookie'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { locale } = useI18n()
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化语言设置
|
||||
const loginLanguage = localStorage.getItem('loginLanguage')
|
||||
if (loginLanguage) {
|
||||
locale.value = loginLanguage
|
||||
} else {
|
||||
const userLanguage = getCookie('language')
|
||||
if (userLanguage) {
|
||||
locale.value = userLanguage
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const showQRcode = ref(false)
|
||||
const handleCloseQRcode = () => {
|
||||
showQRcode.value = false
|
||||
}
|
||||
|
||||
type BtnType = 'index' | 'form'
|
||||
const btnType = ref<BtnType>('index')
|
||||
const btnText = computed(() => {
|
||||
if (btnType.value === 'index') {
|
||||
return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application'
|
||||
}
|
||||
if (btnType.value === 'form') {
|
||||
return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
val => {
|
||||
if (val.includes('contestants')) {
|
||||
btnType.value = 'form'
|
||||
} else {
|
||||
btnType.value = 'index'
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
const handleBtnClick = () => {
|
||||
if (btnType.value === 'index') {
|
||||
router.push('/award/contestants')
|
||||
} else {
|
||||
router.push('/award/index')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.award-container {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
// 隐藏滚动条箭头，只显示滚动条本体
|
||||
box-sizing: border-box;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.header-wrapper {
|
||||
.header-placeholder {
|
||||
height: 8rem;
|
||||
}
|
||||
.header {
|
||||
height: 8rem;
|
||||
background-color: #232323;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 8.6rem;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
.header-left {
|
||||
.logo {
|
||||
width: 13rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.header-right {
|
||||
column-gap: 1rem;
|
||||
cursor: pointer;
|
||||
.text {
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
.arrow {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 10rem;
|
||||
padding-left: 21.5rem;
|
||||
box-sizing: border-box;
|
||||
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>
|
||||
Reference in New Issue
Block a user