center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #3496 from dataease/pr@dev@dataset

Browse Source 
feat: 【首页】新增培训班二维码
This commit is contained in:
xuwei-fit2cloud 2022-10-27 17:32:49 +08:00 committed by GitHub
commit f8da3733f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 257 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/wizard_wechat-train.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

5
frontend/src/lang/en.js
View File

@ -2570,7 +2570,10 @@ export default {
tel: 'Tel:', tel: 'Tel:',
web: 'Web:', web: 'Web:',
apply: 'Free Trial Application', apply: 'Free Trial Application',
more: 'More' more: 'More',
weChat_official_account: 'WeChat official account',
technical_group: 'Technical exchange group',
f2c_train: 'FIT2CLOUD Certification'
}, },
kettle: { kettle: {
add: 'Add Kettle', add: 'Add Kettle',

5
frontend/src/lang/tw.js
View File

@ -2571,7 +2571,10 @@ export default {
tel: '電話：', tel: '電話：',
web: '網址：', web: '網址：',
apply: '免费试用申请', apply: '免费试用申请',
more: '更多' more: '更多',
weChat_official_account: '微信公眾號',
technical_group: '技術交流群',
f2c_train: '飛致雲認證'
}, },
kettle: { kettle: {
add: '添加 Kettle 服務', add: '添加 Kettle 服務',

5
frontend/src/lang/zh.js
View File

@ -2571,7 +2571,10 @@ export default {
tel: '电话：', tel: '电话：',
web: '网址：', web: '网址：',
apply: '免费试用申请', apply: '免费试用申请',
more: '更多' more: '更多',
weChat_official_account: '微信公众号',
technical_group: '技术交流群',
f2c_train: '飞致云认证'
}, },
kettle: { kettle: {
add: '添加 Kettle 服务', add: '添加 Kettle 服务',

460
frontend/src/views/wizard/index.vue
View File

@ -101,15 +101,22 @@
</div> </div>
<div class="content_bottom_qr_code"> <div class="content_bottom_qr_code">
<div class="contact_wechat_train">
<div class="contact_title_qr">{{ $t('wizard.f2c_train') }}</div>
<img
class="contact_wechat_train_img"
src="@/assets/wizard_wechat-train.png"
>
</div>
<div class="contact_wechat_official"> <div class="contact_wechat_official">
<div class="contact_title_qr">微信公众号</div> <div class="contact_title_qr">{{ $t('wizard.weChat_official_account') }}</div>
<img <img
class="contact_wechat_official_img" class="contact_wechat_official_img"
src="@/assets/wizard_wechat-official.jpeg" src="@/assets/wizard_wechat-official.jpeg"
> >
</div> </div>
<div class="contact_wechat_group"> <div class="contact_wechat_group">
<div class="contact_title_qr">技术交流群</div> <div class="contact_title_qr">{{ $t('wizard.technical_group') }}</div>
<img <img
class="contact_wechat_group_img" class="contact_wechat_group_img"
src="@/assets/wizard_wechat-group.png" src="@/assets/wizard_wechat-group.png"
@ -214,244 +221,267 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_outer{ .main_outer {
background-color: var(--MainBG, #f5f6f7) background-color: var(--MainBG, #f5f6f7)
} }
.main_container {
min-width: 1250px;
padding: 0 24px 0 24px;
overflow: auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-size: 100% 444px !important;
background: url('../../assets/wizard_main_bg.png') no-repeat;
}
.main_content {
width: 1200px;
}
.content_top_banner{
color: var(--ContentBG, #FFFFFF);
position: relative;
width: 100%;
height: 230px;
}
.top_banner_content{ .main_container {
position: absolute; min-width: 1250px;
top: 62px; padding: 0 24px 0 24px;
height: 230px; overflow: auto;
} position: relative;
display: flex;
align-items: center;
justify-content: center;
background-size: 100% 444px !important;
background: url('../../assets/wizard_main_bg.png') no-repeat;
}
.top_banner_img{ .main_content {
position: absolute; width: 1200px;
width: 520px; }
height: 230px;
top: 0;
right: 50px;
}
.top_banner_card{ .content_top_banner {
position: relative; color: var(--ContentBG, #FFFFFF);
width: 100%; position: relative;
height: 214px; width: 100%;
} height: 230px;
}
.hint_head { .top_banner_content {
line-height: 48px; position: absolute;
font-weight: 600; top: 62px;
font-size: 48px; height: 230px;
} }
.hint_content {
margin-top: 12px;
line-height: 26px;
font-weight: 400;
font-size: 18px;
}
.content_middle{ .top_banner_img {
height: 290px; position: absolute;
width: 100%; width: 520px;
margin-top: 24px; height: 230px;
} top: 0;
right: 50px;
}
.content_middle_left{ .top_banner_card {
float: left; position: relative;
width: 792px; width: 100%;
height: 290px; height: 214px;
padding: 24px; }
border-radius: 4px;
background-color: var(--ContentBG, #FFFFFF); .hint_head {
line-height: 48px;
font-weight: 600;
font-size: 48px;
}
.hint_content {
margin-top: 12px;
line-height: 26px;
font-weight: 400;
font-size: 18px;
}
.content_middle {
height: 290px;
width: 100%;
margin-top: 24px;
}
.content_middle_left {
float: left;
width: 792px;
height: 290px;
padding: 24px;
border-radius: 4px;
background-color: var(--ContentBG, #FFFFFF);
}
.content_middle_title {
float: left;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 38px;
color: var(--TextPrimary, #1F2329);
}
.content_middle_more {
float: right;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #646A73;
border-radius: 4px;
height: 26px;
padding: 2px;
&:hover {
background: rgba(31, 35, 41, 0.1);
cursor: pointer;
} }
.content_middle_title{ }
float: left;
font-style: normal; .content_middle_more i:hover {
font-weight: 500; background: none;
font-size: 20px; }
line-height: 38px;
color: var(--TextPrimary, #1F2329); .content_middle_more a:hover {
} background: none;
.content_middle_more{ }
float: right;
font-style: normal; .content_middle_right {
font-weight: 400; float: left;
font-size: 14px; height: 290px;
line-height: 22px; width: 384px;
color: #646A73; margin-left: 24px;
border-radius: 4px; padding: 24px;
height: 26px; border-radius: 4px;
padding: 2px; background-color: var(--ContentBG, #FFFFFF);
&:hover { }
background: rgba(31, 35, 41, 0.1);
cursor: pointer; .content_middle_left {
float: left;
width: 792px;
height: 290px;
padding: 24px;
border-radius: 4px;
background-color: var(--ContentBG, #FFFFFF);
}
.li-custom {
margin-top: 16px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
list-style-type: disc;
list-style-position: inside;
border-radius: 4px;
padding-left: 12px;
margin-left: -12px;
&:hover {
background: rgba(31, 35, 41, 0.1);
cursor: pointer;
color: #3370FF !important;
.li-a {
color: #3370FF !important;
} }
} }
}
.content_middle_more i:hover{ .li-custom a:hover {
background: none; background: none;
} }
.content_middle_more a:hover{ .li-a {
background: none; color: var(--TextPrimary, #1F2329);
} }
.content_middle_right { .ul-custom {
float: left; padding-inline-start: 0px;
height: 290px; color: #8F959E;
width: 384px; }
margin-left: 24px;
padding: 24px;
border-radius: 4px;
background-color: var(--ContentBG, #FFFFFF);
}
.content_middle_left{ .content_bottom {
float: left; width: 100%;
width: 792px; height: 208px;
height: 290px; }
padding: 24px;
border-radius: 4px;
background-color: var(--ContentBG, #FFFFFF);
}
.li-custom { .content_bottom_contact {
margin-top: 16px; float: left;
font-weight: 400; margin-left: 278px;
font-size: 14px; width: 300px;
line-height: 22px; margin-top: 40px;
overflow: hidden; }
text-overflow: ellipsis;
white-space: nowrap;
list-style-type : disc;
list-style-position: inside;
border-radius: 4px;
padding-left: 12px;
margin-left: -12px;
&:hover {
background: rgba(31, 35, 41, 0.1);
cursor: pointer;
color: #3370FF!important;
.li-a{
color: #3370FF!important;
}
}
}
.li-custom a:hover { .contact_title {
background: none; font-style: normal;
} font-weight: 500;
font-size: 14px;
line-height: 22px;
color: var(--TextPrimary, #1F2329);
margin-bottom: 16px;
}
.li-a{ .contact_content {
color: var(--TextPrimary, #1F2329); font-style: normal;
} font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #646A73;
margin-top: 8px;
}
.ul-custom { .contact_content a:hover {
padding-inline-start:0px; color: #3370FF;
color: #8F959E; }
}
.content_bottom{ .content_bottom_qr_code {
width: 100%; width: 400px;
height: 208px; float: right;
} text-align: right;
margin-right: 180px;
margin-top: 40px;
}
.content_bottom_contact{ .contact_title_qr {
float: left; font-style: normal;
margin-left: 278px; font-weight: 400;
width: 300px; font-size: 12px;
margin-top: 40px; line-height: 20px;
} text-align: center;
color: #646A73;
margin-bottom: 8px;
}
.contact_title{ .contact_wechat_train {
font-style: normal; width: 100px;
font-weight: 500; float: right;
font-size: 14px; }
line-height: 22px;
color: var(--TextPrimary, #1F2329);
margin-bottom: 16px;
}
.contact_content{ .contact_wechat_train_img {
font-style: normal; box-sizing: border-box;
font-weight: 400; width: 100px;
font-size: 14px; height: 100px;
line-height: 22px; border: 2px solid #FFFFFF;
color: #646A73; }
margin-top: 8px;
}
.contact_content a:hover{
color: #3370FF;
}
.content_bottom_qr_code{ .contact_wechat_official {
width: 300px; width: 100px;
float: right; float: right;
text-align: right; margin-right: 40px;
margin-right: 280px; }
margin-top: 40px;
}
.contact_title_qr{ .contact_wechat_official_img {
font-style: normal; box-sizing: border-box;
font-weight: 400; width: 100px;
font-size: 12px; height: 100px;
line-height: 20px; border: 2px solid #FFFFFF;
text-align: center; }
color: #646A73;
margin-bottom: 8px;
}
.contact_wechat_official{ .contact_wechat_group {
width: 100px; width: 100px;
float: right; float: right;
} margin-right: 40px;
}
.contact_wechat_official_img{ .contact_wechat_group_img {
box-sizing: border-box; box-sizing: border-box;
width: 100px; width: 100px;
height: 100px; height: 100px;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
} }
.contact_wechat_group{ .main_container_outer {
width: 100px; width: 100%;
float: right; height: calc(100vh - 56px);
margin-right: 40px; background-color: var(--MainBG, #f5f6f7);
} overflow: auto;
}
.contact_wechat_group_img{
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid #FFFFFF;
}
.main_container_outer{
width: 100%;
height: calc(100vh - 56px);
background-color: var(--MainBG, #f5f6f7);
overflow: auto;
}
</style> </style>