19 changed files with 827 additions and 46 deletions
|
After Width: | Height: | Size: 541 B |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,3 @@
|
||||
import AppRecharge from './index.vue' |
||||
|
||||
export { AppRecharge } |
||||
@ -0,0 +1,141 @@
|
||||
<script lang="ts" setup> |
||||
import { |
||||
CloseOutlined, |
||||
} from '@ant-design/icons-vue' |
||||
import { Button, QRCode } from 'ant-design-vue' |
||||
import { ref } from 'vue' |
||||
|
||||
defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
}) |
||||
const emits = defineEmits(['update:show']) |
||||
// 关闭弹窗 |
||||
function handleClose() { |
||||
emits('update:show', false) |
||||
} |
||||
// 下载二维码 |
||||
const qrcodeCanvasRef = ref() |
||||
async function dowloadChange() { |
||||
const url = await qrcodeCanvasRef.value.toDataURL() |
||||
const a = document.createElement('a') |
||||
a.download = 'QRCode.png' |
||||
a.href = url |
||||
document.body.appendChild(a) |
||||
a.click() |
||||
document.body.removeChild(a) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<transition name="modal"> |
||||
<div v-if="show" class="modal-mask"> |
||||
<div class="modal-wrapper"> |
||||
<div class="modal-container"> |
||||
<div class="modal-body"> |
||||
<div class="closeIcon" @click="handleClose"> |
||||
<CloseOutlined style="color: #fff;" /> |
||||
</div> |
||||
|
||||
<div class="close" @click="handleClose"> |
||||
</div> |
||||
<div class="qr"> |
||||
<QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" /> |
||||
</div> |
||||
<Button type="primary" class="save-qr" @click="dowloadChange"> |
||||
保存二维码 |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.modal-mask { |
||||
position: fixed; |
||||
z-index: 9999; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.modal-wrapper { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.modal-body { |
||||
width: 530px; |
||||
height: 300px; |
||||
background-image: url('@/assets/images/task/invite.png'); |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
.closeIcon { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 5px; |
||||
z-index: 2; |
||||
cursor: pointer; |
||||
} |
||||
.close { |
||||
position: absolute; |
||||
cursor: pointer; |
||||
top: 0; |
||||
right: 0; |
||||
width: 35px; |
||||
height: 35px; |
||||
background-image: linear-gradient(180deg, #5c94f7 0%, #4060e0 100%); |
||||
clip-path: polygon(100% 100%, 100% 0, 0 0); |
||||
z-index: 1; |
||||
} |
||||
.qr { |
||||
position: absolute; |
||||
top: 93px; |
||||
left: 50%; |
||||
transform: translate(-50%); |
||||
} |
||||
.save-qr { |
||||
cursor: pointer; |
||||
width: 130px; |
||||
height: 32px; |
||||
background: #4670e3; |
||||
border-radius: 20px; |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
|
||||
text-align: center; |
||||
font-size: 13px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #ffffff; |
||||
|
||||
letter-spacing: 1px; |
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
@ -0,0 +1,3 @@
|
||||
import AppUserInfo from './index.vue' |
||||
|
||||
export { AppUserInfo } |
||||
@ -0,0 +1,129 @@
|
||||
<!-- 子菜单与内容容器布局组件 --> |
||||
<script setup lang="ts"> |
||||
import { Divider } from 'ant-design-vue' |
||||
import money from '@/assets/images/money.png' |
||||
import { useUserStore } from '@/store/moules/userStore/index' |
||||
|
||||
const userStore = useUserStore() |
||||
console.log(userStore.getChatInfo) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="app-user-info"> |
||||
<div class="app-user-info-top"> |
||||
<div class="dot"> |
||||
<img :src="money" alt=""> |
||||
<div class="dot-num"> |
||||
点数 |
||||
</div> |
||||
</div> |
||||
<div class="num"> |
||||
99 |
||||
</div> |
||||
<div class="pay"> |
||||
充值 |
||||
</div> |
||||
</div> |
||||
<div class="app-user-info-bottom"> |
||||
<div> |
||||
<div class="accumulative"> |
||||
1321 |
||||
</div> |
||||
<div class="accumulativename"> |
||||
累计提问 |
||||
</div> |
||||
</div> |
||||
<Divider type="vertical" style="height: 30px; background-color: #e1e9f9" /> |
||||
<div> |
||||
<div class="accumulative"> |
||||
3415天 |
||||
</div> |
||||
<div class="accumulativename"> |
||||
来到同聪 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('user-info') { |
||||
position: absolute; |
||||
bottom: 0px; |
||||
left: 10px; |
||||
right: 10px; |
||||
padding: 10px; |
||||
width: 90%; |
||||
height: 120px; |
||||
background: #e1e9f9; |
||||
border-radius: 8px; |
||||
&-top { |
||||
height: 40%; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
border-bottom: 1px solid #dae1ef; |
||||
.dot { |
||||
display: flex; |
||||
align-items: center; |
||||
img { |
||||
width: 14px; |
||||
height: 16px; |
||||
} |
||||
.dot-num { |
||||
font-size: 12px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
padding-left: 4px; |
||||
} |
||||
} |
||||
.num { |
||||
font-size: 14px; |
||||
font-family: DingTalk, DingTalk; |
||||
font-weight: normal; |
||||
color: #000000; |
||||
line-height: 21px; |
||||
} |
||||
.pay { |
||||
width: 45px; |
||||
height: 20px; |
||||
background: #4670e3; |
||||
border-radius: 13px; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #ffffff; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
&-bottom { |
||||
height: 60%; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
justify-content: space-around; |
||||
.accumulative { |
||||
text-align: center; |
||||
font-size: 15px; |
||||
font-family: DingTalk, DingTalk; |
||||
font-weight: normal; |
||||
color: #000000; |
||||
} |
||||
.accumulativename { |
||||
font-size: 12px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,5 @@
|
||||
import InviteForm from './index.vue' |
||||
|
||||
export { |
||||
InviteForm, |
||||
} |
||||
@ -0,0 +1,141 @@
|
||||
<script lang="ts" setup> |
||||
import { |
||||
CloseOutlined, |
||||
} from '@ant-design/icons-vue' |
||||
import { Button, QRCode } from 'ant-design-vue' |
||||
import { ref } from 'vue' |
||||
|
||||
defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
}) |
||||
const emits = defineEmits(['update:show']) |
||||
// 关闭弹窗 |
||||
function handleClose() { |
||||
emits('update:show', false) |
||||
} |
||||
// 下载二维码 |
||||
const qrcodeCanvasRef = ref() |
||||
async function dowloadChange() { |
||||
const url = await qrcodeCanvasRef.value.toDataURL() |
||||
const a = document.createElement('a') |
||||
a.download = 'QRCode.png' |
||||
a.href = url |
||||
document.body.appendChild(a) |
||||
a.click() |
||||
document.body.removeChild(a) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<transition name="modal"> |
||||
<div v-if="show" class="modal-mask"> |
||||
<div class="modal-wrapper"> |
||||
<div class="modal-container"> |
||||
<div class="modal-body"> |
||||
<div class="closeIcon" @click="handleClose"> |
||||
<CloseOutlined style="color: #fff;" /> |
||||
</div> |
||||
|
||||
<div class="close" @click="handleClose"> |
||||
</div> |
||||
<div class="qr"> |
||||
<QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" /> |
||||
</div> |
||||
<Button type="primary" class="save-qr" @click="dowloadChange"> |
||||
保存二维码 |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.modal-mask { |
||||
position: fixed; |
||||
z-index: 9999; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.modal-wrapper { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.modal-body { |
||||
width: 530px; |
||||
height: 300px; |
||||
background-image: url('@/assets/images/task/invite.png'); |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
.closeIcon { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 5px; |
||||
z-index: 2; |
||||
cursor: pointer; |
||||
} |
||||
.close { |
||||
position: absolute; |
||||
cursor: pointer; |
||||
top: 0; |
||||
right: 0; |
||||
width: 35px; |
||||
height: 35px; |
||||
background-image: linear-gradient(180deg, #5c94f7 0%, #4060e0 100%); |
||||
clip-path: polygon(100% 100%, 100% 0, 0 0); |
||||
z-index: 1; |
||||
} |
||||
.qr { |
||||
position: absolute; |
||||
top: 93px; |
||||
left: 50%; |
||||
transform: translate(-50%); |
||||
} |
||||
.save-qr { |
||||
cursor: pointer; |
||||
width: 130px; |
||||
height: 32px; |
||||
background: #4670e3; |
||||
border-radius: 20px; |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
|
||||
text-align: center; |
||||
font-size: 13px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #ffffff; |
||||
|
||||
letter-spacing: 1px; |
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
@ -0,0 +1,3 @@
|
||||
import TaskList from './index.vue' |
||||
|
||||
export { TaskList } |
||||
@ -0,0 +1,260 @@
|
||||
<script lang="ts" setup> |
||||
import { computed, ref } from 'vue' |
||||
import { |
||||
DownOutlined, |
||||
UpOutlined, |
||||
} from '@ant-design/icons-vue' |
||||
import money from '@/assets/images/task/money.png' |
||||
|
||||
const { title, list } = defineProps({ |
||||
title: { |
||||
type: String, |
||||
}, |
||||
list: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}) |
||||
|
||||
const isExpanded = ref(false)// 伸缩 |
||||
const singleItemHeight = 45 // 单个项目的高度 |
||||
|
||||
const dynamicStyle = computed(() => { |
||||
let maxHeight |
||||
if (isExpanded.value) { |
||||
// 如果展开，那么高度应该是单个项目的高度乘以项目总数 |
||||
maxHeight = singleItemHeight * list.length |
||||
} |
||||
else { |
||||
// 如果没有展开，那么高度应该是单个项目的高度乘以默认显示的项目个数 |
||||
maxHeight = 180 |
||||
} |
||||
return { |
||||
'max-height': `${maxHeight}px`, |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="nvoice-task-box"> |
||||
<div class="title"> |
||||
{{ title }} |
||||
</div> |
||||
<div class="nvoice-contant"> |
||||
<div class="top flex justify-between"> |
||||
<div class="left"> |
||||
全部完成可获得 72 点数 |
||||
</div> |
||||
<div class="right"> |
||||
已完成 1/12 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="content" :style="dynamicStyle"> |
||||
<div class="earn-list-box"> |
||||
<div v-for="(item, index) in list" :key="index" class="earn-list"> |
||||
<div class="earn-list-left"> |
||||
<div class="name"> |
||||
{{ item.title }} |
||||
</div> |
||||
<div v-show="item.status === 1" class="accomplish"> |
||||
已获得{{ item.dot }}点数 |
||||
</div> |
||||
<div v-show="item.status === 0" class="unfinished"> |
||||
0/{{ item.dot }} |
||||
</div> |
||||
</div> |
||||
<div class="earn-list-right"> |
||||
<div class="add-dot-box"> |
||||
<div class="flex items-center"> |
||||
<img class="add-dot-photo" :src="money" alt=""> |
||||
<div class="add-dot-num"> |
||||
+{{ item.dot }} |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-show="item.status === 1" class="add-dot-btn accomplish"> |
||||
已完成 |
||||
</div> |
||||
|
||||
<div v-if="item.status === 0 " class="add-dot-btn unfinished"> |
||||
未完成 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-if="list.length > 4" class="shrink" @click="isExpanded = !isExpanded"> |
||||
<DownOutlined v-if="!isExpanded" /> |
||||
<UpOutlined v-else /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nvoice-task-box { |
||||
width: 95%; |
||||
.title { |
||||
font-size: 14px; |
||||
font-family: PingFang-SC, PingFang-SC; |
||||
font-weight: bold; |
||||
color: #000000; |
||||
line-height: 22px; |
||||
letter-spacing: 1px; |
||||
margin: 16px 0; |
||||
} |
||||
.nvoice-contant { |
||||
width: 100%; |
||||
position: relative; |
||||
background-color: #edf3ff; |
||||
border-radius: 15px; |
||||
padding-bottom: 15px; |
||||
.top { |
||||
padding: 12px 40px; |
||||
.left { |
||||
font-size: 14px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #4670e3; |
||||
|
||||
letter-spacing: 1px; |
||||
} |
||||
.right { |
||||
font-size: 14px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #888c90; |
||||
|
||||
letter-spacing: 1px; |
||||
} |
||||
} |
||||
.content { |
||||
width: 95%; |
||||
background-color: #fff; |
||||
margin: 0 auto; |
||||
overflow: hidden; |
||||
transition: max-height 0.4s ease-in-out; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
position: relative; |
||||
.earn-list-box { |
||||
width: 100%; |
||||
padding: 0 10px; |
||||
.earn-list { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 10px 0; |
||||
border-bottom: 1px solid #ededed; |
||||
&:last-child { |
||||
border: 0; |
||||
} |
||||
.earn-list-left { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 85%; |
||||
.name { |
||||
font-size: 13px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 500; |
||||
|
||||
color: #000000; |
||||
|
||||
letter-spacing: 1px; |
||||
} |
||||
.accomplish { |
||||
font-size: 11px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #f7b606; |
||||
padding-left: 10px; |
||||
} |
||||
.unfinished { |
||||
font-size: 11px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #888c90; |
||||
padding-left: 10px; |
||||
} |
||||
} |
||||
.earn-list-right { |
||||
width: 15%; |
||||
.add-dot-box { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.add-dot-photo { |
||||
width: 13px; |
||||
height: 13px; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.add-dot-num { |
||||
font-size: 12px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
color: #f7b500; |
||||
padding-left: 3px; |
||||
} |
||||
.add-dot-btn { |
||||
cursor: pointer; |
||||
|
||||
border-radius: 16px; |
||||
font-size: 11px; |
||||
font-family: |
||||
PingFangSC, |
||||
PingFang SC; |
||||
font-weight: 400; |
||||
line-height: 20px; |
||||
letter-spacing: 1px; |
||||
text-align: center; |
||||
padding: 2px 5px; |
||||
&.accomplish { |
||||
background: linear-gradient(90deg, #b5ceff 0%, #a6baff 100%); |
||||
color: #ffffff; |
||||
} |
||||
&.unfinished { |
||||
background: #ffffff; |
||||
border: 1px solid #cdcdcd; |
||||
line-height: 18px; |
||||
color: #888c90; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.shrink { |
||||
width: 32px; |
||||
height: 32px; |
||||
text-align: center; |
||||
line-height: 32px; |
||||
border-radius: 50%; |
||||
background-color: #fff; |
||||
text-align: center; |
||||
box-shadow: 0px 2px 8px 0px rgba(131, 131, 131, 0.5); |
||||
position: absolute; |
||||
bottom: -10px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue