Shikong/wails-template-vue
1
0
Fork 0
mirror of https://github.com/misitebao/wails-template-vue synced 2025-02-24 13:52:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize the navigation bar UI and add about content.

Browse Source
This commit is contained in:
misitebao 2021-09-09 20:42:50 +08:00
parent 93847e9739
commit 575c511c51
3 changed files with 70 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.vue
View File

@ -178,7 +178,7 @@ body {
min-width: 150px; min-width: 150px;
.bar-btn { .bar-btn {
display: inline-block; display: inline-block;
min-width: 50px; min-width: 80px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 5px; padding: 0 5px;

BIN
frontend/src/assets/images/comeon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

105
frontend/src/views/About.vue
View File

@ -4,61 +4,94 @@
<div class="title">{{ $t('aboutpage.title') }}</div> <div class="title">{{ $t('aboutpage.title') }}</div>
<!-- Information --> <!-- Information -->
<!-- 信息 --> <!-- 信息 -->
<ul class="info"> <div class="content">
<li class="info-item"> <div class="comeon">
<span class="name">{{ $t('aboutpage.project-repository') + ': ' }}</span> <img :src="comeonGif" alt />
<OpenLink </div>
class="link" <ul class="info">
href="https://github.com/misitebao/wails-template-vue" <li class="info-item">
>https://github.com/misitebao/wails-template-vue</OpenLink> <div class="name">{{ $t('aboutpage.project-repository') }}</div>
</li> <OpenLink
<li class="info-item"> class="link"
<span class="name">{{ $t('aboutpage.author') + ': ' }}</span> href="https://github.com/misitebao/wails-template-vue"
<OpenLink class="link" href="https://github.com/misitebao">{{ $t('aboutpage.misitebao') }}</OpenLink> >https://github.com/misitebao/wails-template-vue</OpenLink>
</li> </li>
<li class="info-item"> <li class="info-item">
<span class="name">{{ $t('aboutpage.wails-repository') + ': ' }}</span> <div class="name">{{ $t('aboutpage.wails-repository') }}</div>
<OpenLink <OpenLink
class="link" class="link"
href="https://github.com/wailsapp/wails" href="https://github.com/wailsapp/wails"
>https://github.com/wailsapp/wails</OpenLink> >https://github.com/wailsapp/wails</OpenLink>
</li> </li>
</ul> <li class="info-item">
<div class="name">{{ $t('aboutpage.author') }}</div>
<OpenLink class="link" href="https://github.com/misitebao">{{ $t('aboutpage.misitebao') }}</OpenLink>
</li>
</ul>
</div>
<!-- Thanks --> <!-- Thanks -->
<!-- 谢语 --> <!-- 谢语 -->
<div class="thank">{{ $t('aboutpage.thanks') }}</div> <div class="thank">{{ $t('aboutpage.thanks') }}</div>
</div> </div>
</template> </template>
<script>
import comeonGif from '@/assets/images/comeon.gif'
export default {
setup() {
return {
comeonGif
}
},
}
</script>
<style lang="scss"> <style lang="scss">
.about { .about {
.title { .title {
margin: 30px auto; margin: 20px auto 10px;
font-size: 36px; font-size: 38px;
color: #a150b5; color: #a150b5;
text-align: center; text-align: center;
} }
.info { .content {
margin: 14px 60px; position: relative;
// background-color red margin: 14px 20px;
font-size: 24px; .comeon {
.info-item { position: absolute;
height: 60px; left: 60px;
line-height: 60px; top: 26px;
white-space: nowrap; max-width: 66%;
.name { img {
color: #6d6363; width: 180px;
height: 180px;
} }
.link { }
color: #5f6c86; .info {
margin: 0 0 0 33%;
font-size: 24px;
text-align: left;
.info-item {
margin-bottom: 10px;
.name {
line-height: 40px;
font-size: 28px;
color: #6d6363;
}
.link {
line-height: 30px;
font-size: 20px;
color: #5f6c86;
}
} }
} }
} }
.thank { .thank {
height: 68px; height: 68px;
line-height: 68px; line-height: 68px;
margin: 47px auto; margin: 36px auto;
text-align: center; text-align: center;
font-size: 50px; font-size: 40px;
} }
} }
</style> </style>