lipenghui
/
qn-ai-pc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat;新增邀请 

fix:修改样式
dxj
杜贤金 2 years ago
parent
a8acb98afd
commit
019311062d
12 changed files with 385 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/benefit.png
  2. 0
      src/components/AppNoviceBenefit/index.d.ts
  3. 3
      src/components/AppNoviceBenefit/index.ts
  4. 103
      src/components/AppNoviceBenefit/index.vue
  5. 6
      src/components/AppRecharge/index.vue
  6. 10
      src/components/AppTaskMenuList/index.vue
  7. 1
      src/components/AppUserInfo/index.vue
  8. 14
      src/store/moules/taskListStore/index.ts
  9. 389
      src/views/login/index.vue
  10. 10
      src/views/task/components/BasicTask/index.vue
  11. 2
      src/views/task/components/InviteForm/index.vue
  12. 2
      src/views/task/index.vue

BIN
src/assets/images/benefit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

0
src/components/AppNoviceBenefit/index.d.ts vendored
Unescape View File

3
src/components/AppNoviceBenefit/index.ts
Unescape View File

@ -0,0 +1,3 @@
import AppNoviceBenefit from './index.vue'
export { AppNoviceBenefit }

103
src/components/AppNoviceBenefit/index.vue
Unescape View File

@ -0,0 +1,103 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Button } from 'ant-design-vue'
import { CloseOutlined } from '@ant-design/icons-vue'
// import { useUserStore } from '@/store/moules/userStore/index'
const a = ref(false)
onMounted(() => {
})
// 关闭弹窗
function handleClose() {
a.value = false
}
</script>
<template>
<transition name="modal">
<div v-if="a" class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-body">
<Button class="btn">
领取并前往使用
</Button>
</div>
</div>
<div class="close" @click="handleClose">
<CloseOutlined />
</div>
</div>
</div>
</transition>
</template>
<style scoped lang="scss">
.modal-mask {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
.close {
position: absolute;
top: 40px;
right: 40px;
width: 27px;
height: 27px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
line-height: 27px;
text-align: center;
color: #fff;
cursor: pointer;
}
.modal-wrapper {
width: 40vw;
height: 60vh;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-image: url(@/assets/images/benefit.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
border-radius: 22px;
.modal-body {
.btn {
height: 38px;
background: linear-gradient(180deg, #ffa733 0%, #df5413 100%);
border-radius: 40px;
font-size: 14px;
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
color: #ffffff;
letter-spacing: 2px;
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.3s;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
.modal-enter-to,
.modal-leave-from {
opacity: 1;
}
</style>

6
src/components/AppRecharge/index.vue
Unescape View File

@ -220,9 +220,9 @@ function separator(num: number | string) {
</div>
<div class="marquee">
<div class="content">
<span>这是第一条滚动的公告</span>
<span>这是第二条滚动的公告</span>
<span>这是第三条滚动的公告</span>
<span>152****0062 在 2024/1/23 开通了至尊礼遇卡！</span>
<span>178****6455 在 2024/1/12 开通了年套餐！</span>
<span>195****2519 在 2024/1/1开通了日套餐！</span>
</div>
</div>
</div>

10
src/components/AppTaskMenuList/index.vue
Unescape View File

@ -25,11 +25,11 @@ const list = computed(() => [
status: taskListStore.dailyTask,
task: 'task3',
},
{
title: '其他任务',
status: taskListStore.otherTask,
task: 'task4',
},
// {
// title: '其他任务',
// status: taskListStore.otherTask,
// task: 'task4',
// },
])
// 切换任务
function handleClick(index: number, task: string) {

1
src/components/AppUserInfo/index.vue
Unescape View File

@ -9,6 +9,7 @@ import { useRechargeStore } from '@/store/moules/rechareStore'
const rechargeStore = useRechargeStore()
const userStore = useUserStore()
const info = userStore.getChatInfo
console.log(info, 'info')
function handleRecharge() {
rechargeStore.rechargeOpen()

14
src/store/moules/taskListStore/index.ts
Unescape View File

@ -9,20 +9,6 @@ export const useTaskListStore = defineStore('useTaskListStore', {
otherTask: false,
}
},
getters: {
getBasicTask(): boolean {
return this.basicTask
},
getNoviceTask(): boolean {
return this.noviceTask
},
getDailyTask(): boolean {
return this.dailyTask
},
getOtherTask(): boolean {
return this.otherTask
},
},
actions: {
changeBasicTask(status: boolean) {
this.basicTask = status

389
src/views/login/index.vue
Unescape View File

@ -48,7 +48,7 @@ const rules: Record<string, Rule[]> = {
{ validator: validatePhone, trigger: 'blur' },
],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
inviteCode: [{ required: false, message: '请输入验证码', trigger: 'blur' }],
}
// 登录
function handleLogin() {
@ -187,15 +187,6 @@ function timer() {
</template>
</Input>
</FormItem>
<FormItem
name="inviteCode"
>
<Input v-model:value="ruleForm.inviteCode" :bordered="false" class="custom-input" placeholder="请输入邀请码">
<template #prefix>
<UsergroupAddOutlined style="color:#787D8E" />
</template>
</Input>
</FormItem>
<FormItem>
<Button
class="login-button"
@ -216,140 +207,284 @@ function timer() {
</template>
<style lang="scss" scoped>
.login-container {
width: 100%;
height: 100%;
background-image: url('@/assets/images/login/loginbg.png');
background-size: 100% 100%;
background-position: center center;
position: relative;
@media all and (min-width: 992px) {
.login-container {
width: 100%;
height: 100%;
background-image: url('@/assets/images/login/loginbg.png');
background-size: 100% 100%;
background-position: center center;
position: relative;
.logo {
position: absolute;
top: 2%;
left: 2%;
.logoimg {
width: 200px;
.logo {
position: absolute;
top: 2%;
left: 2%;
.logoimg {
width: 200px;
}
}
}
.logoncontent {
width: 60%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
position: relative;
.left {
width: 50%;
height: 100%;
margin-right: 20px;
.logoncontent {
width: 60%;
height: 50%;
position: absolute;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
position: relative;
.info {
.left {
width: 50%;
height: 100%;
margin-right: 20px;
position: absolute;
top: 20%;
left: 10%;
.welcome {
font-size: 50px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 300;
color: #ffffff;
top: 0;
left: 0;
position: relative;
.info {
position: absolute;
top: 20%;
left: 10%;
.welcome {
font-size: 50px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 300;
color: #ffffff;
letter-spacing: 4px;
}
.zh {
font-size: 26px;
padding-top: 20px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #ffffff;
letter-spacing: 5px;
letter-spacing: 4px;
}
.zh {
font-size: 26px;
padding-top: 20px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #ffffff;
letter-spacing: 5px;
}
.en {
font-size: 13px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #77a4ff;
line-height: 22px;
padding-top: 10px;
}
}
.en {
font-size: 13px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #77a4ff;
line-height: 22px;
padding-top: 10px;
}
.right {
width: 50%;
height: 100%;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.2em;
backdrop-filter: blur(50px);
position: absolute;
top: 0;
right: 2%;
.login-Form {
width: 70%;
margin: 0 auto;
.icon {
width: 15px;
height: 15px;
}
.time {
font-size: 12px;
color: #48a1fe;
}
:deep(.ant-form-item-explain-error) {
font-size: 12px;
padding-left: 27px;
}
.custom-input {
border: none;
border-radius: 0;
background-color: transparent;
color: #333;
border-bottom: 1px solid #c8cbd6;
.ant-form-item-explain-error {
color: blue;
}
}
.login-title {
margin-top: 50px;
margin-bottom: 30px;
color: #505458;
font-size: 19px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
color: #141515;
}
.login-button {
margin-top: 10px;
width: 100%;
height: 40px;
background: #0075eb;
border-radius: 4px;
color: white;
}
.versions {
width: 100%;
text-align: center;
font-size: 13px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #6e7382;
padding-top: 20px;
letter-spacing: 2px;
}
}
}
}
}
}
@media all and (max-width: 992px) {
.login-container {
width: 100%;
height: 100%;
background-image: url('@/assets/images/login/loginbg.png');
background-size: 100% 100%;
background-position: center center;
position: relative;
.right {
width: 50%;
height: 100%;
border-radius: 4px;
.logo {
position: absolute;
top: 2%;
left: 2%;
.logoimg {
width: 200px;
}
}
.logoncontent {
width: 90%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.2em;
backdrop-filter: blur(50px);
position: absolute;
top: 0;
right: 2%;
.login-Form {
width: 70%;
margin: 0 auto;
.icon {
width: 15px;
height: 15px;
}
.time {
font-size: 12px;
color: #48a1fe;
}
:deep(.ant-form-item-explain-error) {
font-size: 12px;
padding-left: 27px;
}
position: relative;
.left {
display: none;
width: 50%;
height: 100%;
margin-right: 20px;
position: absolute;
top: 0;
left: 0;
position: relative;
.info {
position: absolute;
top: 20%;
left: 10%;
.welcome {
font-size: 50px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 300;
color: #ffffff;
.custom-input {
border: none;
border-radius: 0;
background-color: transparent;
color: #333;
border-bottom: 1px solid #c8cbd6;
.ant-form-item-explain-error {
color: blue;
letter-spacing: 4px;
}
.zh {
font-size: 26px;
padding-top: 20px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #ffffff;
letter-spacing: 5px;
}
.en {
font-size: 13px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
color: #77a4ff;
line-height: 22px;
padding-top: 10px;
}
}
.login-title {
margin-top: 50px;
margin-bottom: 30px;
color: #505458;
font-size: 19px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
color: #141515;
}
.login-button {
margin-top: 10px;
width: 100%;
height: 40px;
}
background: #0075eb;
border-radius: 4px;
color: white;
}
.versions {
width: 100%;
text-align: center;
font-size: 13px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #6e7382;
padding-top: 20px;
letter-spacing: 2px;
.right {
width: 100%;
height: 100%;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.2em;
backdrop-filter: blur(50px);
position: absolute;
top: 0;
right: 2%;
.login-Form {
width: 70%;
margin: 0 auto;
.icon {
width: 15px;
height: 15px;
}
.time {
font-size: 12px;
color: #48a1fe;
}
:deep(.ant-form-item-explain-error) {
font-size: 12px;
padding-left: 27px;
}
.custom-input {
border: none;
border-radius: 0;
background-color: transparent;
color: #333;
border-bottom: 1px solid #c8cbd6;
.ant-form-item-explain-error {
color: blue;
}
}
.login-title {
margin-top: 50px;
margin-bottom: 30px;
color: #505458;
font-size: 19px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
color: #141515;
}
.login-button {
margin-top: 10px;
width: 100%;
height: 40px;
background: #0075eb;
border-radius: 4px;
color: white;
}
.versions {
width: 100%;
text-align: center;
font-size: 13px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #6e7382;
padding-top: 20px;
letter-spacing: 2px;
}
}
}
}

10
src/views/task/components/BasicTask/index.vue
Unescape View File

@ -153,10 +153,10 @@ function handleInvite() {
<div class="name">
{{ item.name }}
</div>
<div v-show="item.status === 2" class="accomplish">
<div v-show="item.status === 2 " class="accomplish">
已获得{{ item.score }}点数
</div>
<div v-show="item.status !== 2" class="unfinished">
<div v-show="item.status !== 2 && item.name !== '邀请注册' " class="unfinished">
0/{{ item.score }}
</div>
</div>
@ -457,8 +457,6 @@ function handleInvite() {
padding-left: 3px;
}
.add-dot-btn {
cursor: pointer;
border-radius: 16px;
font-size: 11px;
font-family:
@ -470,7 +468,7 @@ function handleInvite() {
text-align: center;
padding: 2px 5px;
&.accomplish {
width: 45px;
width: 48px;
background: linear-gradient(
90deg,
#b5ceff 0%,
@ -484,6 +482,7 @@ function handleInvite() {
border: 1px solid #cdcdcd;
line-height: 18px;
color: #888c90;
cursor: pointer;
}
&.invite {
width: 47px;
@ -493,6 +492,7 @@ function handleInvite() {
#486dff 100%
);
color: #ffffff;
cursor: pointer;
}
}
}

2
src/views/task/components/InviteForm/index.vue
Unescape View File

@ -46,7 +46,7 @@ const code = ref('你好啊')
<div class="close" @click="handleClose">
</div>
<div class="qr">
<QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" />
<QRCode ref="qrcodeCanvasRef" :size="145" :value="`http://192.168.1.121:5173/Login?inviteCode=${code}`" />
</div>
<Button type="primary" class="save-qr" @click="dowloadChange">
保存二维码

2
src/views/task/index.vue
Unescape View File

@ -3,6 +3,7 @@ import { provide, ref } from 'vue'
import { BasicTask } from './components/BasicTask'
import { NoviceTask } from './components/NoviceTask'
import { DailyTask } from './components/DailyTask'
import { AppNoviceBenefit } from '@/components/AppNoviceBenefit/index'
// import { OtherTask } from './components/OtherTask'
import { AppUserInfo } from '@/components/AppUserInfo'
@ -33,6 +34,7 @@ provide('taskContainer', taskContainer)
<NoviceTask ref="task2" />
<DailyTask ref="task3" />
<!-- <OtherTask ref="task4" /> -->
<AppNoviceBenefit />
</div>
</template>
</AppContainerBox>

Write Preview
Loading…
Cancel
Save