JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-09-01 12:49:47 +08:00
Code Issues Projects Releases Wiki Activity

feat: 🎸 优化scss样式多语言的布局

Browse Source
This commit is contained in:
huangwentao 2022-08-19 14:40:37 +08:00
parent b48abed36c
commit a25eac9b7a
4 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/lang/en-us.ts
View File

@ -13,5 +13,6 @@ export const lang = {
introduction: 'A rapid development vue3 of mobile terminal template', introduction: 'A rapid development vue3 of mobile terminal template',
home: { home: {
support: 'support', support: 'support',
cssMultiLanguage: 'CSS picture multi-language',
}, },
}; };

1
src/i18n/lang/zh-cn.ts
View File

@ -13,5 +13,6 @@ export const lang = {
introduction: '一个快速开发vue3的移动端模板', introduction: '一个快速开发vue3的移动端模板',
home: { home: {
support: '支持', support: '支持',
cssMultiLanguage: 'css图片多语言',
}, },
}; };

2
src/layout/basic/index.vue
View File

@ -62,7 +62,7 @@
.main-page { .main-page {
box-sizing: border-box; box-sizing: border-box;
padding: 40px; padding: 40px;
height: calc(100vh - 88px); height: calc(100vh - 200px);
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }

8
src/views/home/index.vue
View File

@ -11,6 +11,11 @@
<nut-cell-group :title="$t('home.support')" class="supportList"> <nut-cell-group :title="$t('home.support')" class="supportList">
<nut-cell v-for="(item, index) in cellList" :key="index" :title="item" icon="Check" /> <nut-cell v-for="(item, index) in cellList" :key="index" :title="item" icon="Check" />
</nut-cell-group> </nut-cell-group>
<nut-cell-group :title="$t('home.cssMultiLanguage')" class="supportList">
<nut-cell>
<div :class="['btn-add', i18n.global.locale]"></div>
</nut-cell>
</nut-cell-group>
<div class="btn-wrap"> <div class="btn-wrap">
<nut-button shape="square" size="small" type="default" @click="changeLang('zh-cn')"> <nut-button shape="square" size="small" type="default" @click="changeLang('zh-cn')">
{{ $t('language.zh') }} {{ $t('language.zh') }}
@ -18,7 +23,6 @@
<nut-button shape="square" size="small" type="default" @click="changeLang('en-us')"> <nut-button shape="square" size="small" type="default" @click="changeLang('en-us')">
{{ $t('language.en') }} {{ $t('language.en') }}
</nut-button> </nut-button>
<div :class="['btn-add', i18n.global.locale]"></div>
</div> </div>
{{ getUserInfo }} {{ getUserInfo }}
</template> </template>
@ -27,7 +31,6 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { setLang, i18n } from '/@/i18n'; import { setLang, i18n } from '/@/i18n';
let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'vue-jsx', 'vatlet/vant/nutUI']; let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'vue-jsx', 'vatlet/vant/nutUI'];
const userStore = useUserStore(); const userStore = useUserStore();
const getUserInfo = computed(() => { const getUserInfo = computed(() => {
@ -74,7 +77,6 @@
.btn-wrap { .btn-wrap {
margin: 20px; margin: 20px;
display: flex;
} }
.btn-add { .btn-add {
@include main-lang-bg(302px, 82px, '/@/assets/button', 'add.png'); @include main-lang-bg(302px, 82px, '/@/assets/button', 'add.png');