Skip to content

Commit

Permalink
ui(download): 优化界面
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hacker233
Hacker233 committed Aug 26, 2024
1 parent 2665552 commit 5d49d9f
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 193 deletions.
12 changes: 5 additions & 7 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,9 @@ declare module '@vue/runtime-core' {
DateFormItem: typeof import('./components/DateFormItem/DateFormItem.vue')['default']
Editor: typeof import('./components/packages/components/editor/editor.vue')['default']
EduBackgroundCom: typeof import('./components/ModelComs/EduBackgroundCom.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
Expand All @@ -49,22 +46,23 @@ declare module '@vue/runtime-core' {
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRate: typeof import('element-plus/es')['ElRate']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElUpload: typeof import('element-plus/es')['ElUpload']
Emoji: typeof import('./components/packages/components/emoji/emoji.vue')['default']
Expand Down
4 changes: 2 additions & 2 deletions src/components/PayIntegralDialog/PayIntegralDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@
</div>
<!-- 无限制下载方式 -->
<div class="content-box">
<h1 class="title">网站所有内容无限制下载方式</h1>
<h1 class="title">网站所有内容无限制下载方式（强烈推荐！）</h1>
<div class="content-member-box">
<div class="card" @click="toMembership">
<div class="card-text">
<div class="portada">
<p>无限制下载</p>
</div>
<div class="title-total">
<h2>开通会员</h2>
<h2>开通会员（9.9￥）</h2>

<div class="desc"
>无论开通哪一种会员，你都将无限制的下载网站内的任意内容，包括软件、简历、模板、导出PDF等所有资源！</div
Expand Down
218 changes: 126 additions & 92 deletions src/views/LegoDesigner/components/DownloadDialog/DownloadDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,61 +9,65 @@
@close="handleClose"
>
<div class="content-box">
<!-- 下载为图片 -->
<div class="download-img-box">
<el-tooltip :disabled="isCanDownloadImg" content="简币数量不足！">
<div
:class="['download-com-box img-box', { 'download-disabled': !isCanDownloadImg }]"
@click="downloadDialog('img')"
>
<svg-icon icon-name="icon-tupian" color="#fff" size="26px"></svg-icon>
<span>下载图片</span>
</div>
</el-tooltip>
<div class="price">
<!-- 先判断是否是会员 -->
<template v-if="!membershipInfo.hasMembership">
<div class="how-much">
（价格：{{ Math.abs(exportImgPayIntegral) || 0 }}
<img width="20" src="@/assets/images/jianB.png" alt="简币" />）</div
<div class="content-down-btn">
<!-- 下载为图片 -->
<div class="download-img-box">
<el-tooltip :disabled="isCanDownloadImg" content="简币数量不足！">
<div
:class="['download-com-box img-box', { 'download-disabled': !isCanDownloadImg }]"
@click="downloadDialog('img')"
>
</template>
<template v-else>
<div class="how-much"> 免费下载 </div>
</template>
</div>
<p>适合微信、QQ发送</p>
</div>
<!-- 下载PDF -->
<div class="download-pdf-box">
<el-tooltip :disabled="isCanDownloadPDF" content="简币数量不足！">
<div
:class="['download-com-box pdf-box', { 'download-disabled': !isCanDownloadPDF }]"
@click="downloadDialog('pdf')"
>
<svg-icon icon-name="icon-pdf" color="#fff" size="26px"></svg-icon>
<span>下载PDF</span>
<svg-icon icon-name="icon-tupian" color="#fff" size="26px"></svg-icon>
<span>下载图片</span>
</div>
</el-tooltip>
<div class="price">
<!-- 先判断是否是会员 -->
<template v-if="!membershipInfo.hasMembership">
<div class="how-much">
（价格：{{ Math.abs(exportImgPayIntegral) || 0 }}
<img width="20" src="@/assets/images/jianB.png" alt="简币" />）</div
>
</template>
<template v-else>
<div class="how-much"> 免费下载 </div>
</template>
</div>
</el-tooltip>
<div class="price">
<!-- 先判断是否是会员 -->
<template v-if="!membershipInfo.hasMembership">
<div class="how-much"
>（价格：{{ Math.abs(exportPdfPayIntegral) || 0
}}<img width="20" src="@/assets/images/jianB.png" alt="简币" />）</div
<p>适合微信、QQ发送</p>
</div>
<!-- 下载PDF -->
<div class="download-pdf-box">
<el-tooltip :disabled="isCanDownloadPDF" content="简币数量不足！">
<div
:class="['download-com-box pdf-box', { 'download-disabled': !isCanDownloadPDF }]"
@click="downloadDialog('pdf')"
>
</template>
<template v-else>
<div class="how-much"> 免费下载 </div>
</template>
<svg-icon icon-name="icon-pdf" color="#fff" size="26px"></svg-icon>
<span>下载PDF</span>
</div>
</el-tooltip>
<div class="price">
<!-- 先判断是否是会员 -->
<template v-if="!membershipInfo.hasMembership">
<div class="how-much"
>（价格：{{ Math.abs(exportPdfPayIntegral) || 0
}}<img width="20" src="@/assets/images/jianB.png" alt="简币" />）</div
>
</template>
<template v-else>
<div class="how-much"> 免费下载 </div>
</template>
</div>
<p> 适合打印、在线投递等(<span>推荐</span>)</p>
</div>
<p> 适合打印、在线投递等(<span>推荐</span>)</p>
</div>
<div class="get-bi-method" @click="openGetDialog">获取简币</div>
</div>
</el-dialog>

<!-- 警告弹窗 -->
<pay-integral-dialog
:title="title"
:dialog-get-integral-visible="dialogGetIntegralVisible"
:pay-number="-Math.abs(exportPdfPayIntegral) || 0"
:confirm-disabled="downloadType === 'img' ? !isCanDownloadImg : !isCanDownloadPDF"
Expand Down Expand Up @@ -138,71 +142,101 @@
const handleClose = () => {
emit('closeDownloadDialog');
};

// 打开获取简币弹窗
const title = ref<string>('');
const openGetDialog = () => {
title.value = '如何获取简币';
dialogGetIntegralVisible.value = true;
};
</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
margin-right: 10px;
}
.download-resume-select {
.content-box {
display: flex;
justify-content: center;
.download-img-box,
.download-pdf-box {
.content-down-btn {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
margin: 0 20px;
.price {
justify-content: center;
.download-img-box,
.download-pdf-box {
display: flex;
flex-direction: column;
align-items: center;
margin: 7px 0 0 0;
.how-much {
cursor: pointer;
margin: 0 20px;
.price {
display: flex;
align-items: center;
justify-content: space-between;
img {
margin-left: 2px;
margin-bottom: 1px;
margin: 7px 0 0 0;
.how-much {
display: flex;
align-items: center;
justify-content: space-between;
img {
margin-left: 2px;
margin-bottom: 1px;
}
}
}
}
.download-com-box {
width: 100px;
height: 110px;
border-radius: 5px;
transition: all 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
span {
.download-com-box {
width: 100px;
height: 110px;
border-radius: 5px;
transition: all 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
span {
margin-top: 10px;
}
}
p {
color: #888;
font-size: 12px;
margin-top: 10px;
}
}
p {
color: #888;
font-size: 12px;
margin-top: 10px;
}
.download-disabled {
user-select: none;
cursor: not-allowed;
opacity: 0.4;
}
.img-box {
background: linear-gradient(90deg, #a986ff 0, #9861ff 100%);
&:hover {
background: linear-gradient(90deg, #a986ff 0, #9861ff 50%);
.download-disabled {
user-select: none;
cursor: not-allowed;
opacity: 0.4;
}
}
.pdf-box {
background: linear-gradient(149deg, #ffa98f 0, #ff6464 100%);
&:hover {
background: linear-gradient(149deg, #ffa98f 0, #ff6464 50%);
.img-box {
background: linear-gradient(90deg, #a986ff 0, #9861ff 100%);
&:hover {
background: linear-gradient(90deg, #a986ff 0, #9861ff 50%);
}
}
.pdf-box {
background: linear-gradient(149deg, #ffa98f 0, #ff6464 100%);
&:hover {
background: linear-gradient(149deg, #ffa98f 0, #ff6464 50%);
}
}
}
}

.get-bi-method {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 30px;
width: 80px;
background-color: #70f5c4;
border-radius: 15px;
font-size: 13px;
transition: all 0.3s;
margin: 0 auto;
margin-top: 25px;
cursor: pointer;
letter-spacing: 1px;
user-select: none;
&:hover {
opacity: 0.8;
}
}
}
Expand Down
Loading

0 comments on commit 5d49d9f

Please sign in to comment.