Merge pull request #94 from vintonHuang/vue-h5-template

feat: 1. 优化样式多语言的demo布局 2.vite配置全局scss，mixin函数的混入

src/i18n/lang/en-us.ts

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

src/i18n/lang/zh-cn.ts

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

src/layout/basic/index.vue

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

src/views/home/index.vue

@@ -11,6 +11,11 @@
   <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-group>
+  <nut-cell-group :title="$t('home.cssMultiLanguage')" class="supportList">
+    <nut-cell>
+      <div :class="['btn-confirm', i18n.global.locale]"></div>
+    </nut-cell>
+  </nut-cell-group>
   <div class="btn-wrap">
     <nut-button shape="square" size="small" type="default" @click="changeLang('zh-cn')">
       {{ $t('language.zh') }}
@@ -18,7 +23,6 @@
     <nut-button shape="square" size="small" type="default" @click="changeLang('en-us')">
       {{ $t('language.en') }}
     </nut-button>
-    <div :class="['btn-add', i18n.global.locale]"></div>
   </div>
   {{ getUserInfo }}
 </template>
@@ -27,7 +31,6 @@
   import { computed } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { setLang, i18n } from '/@/i18n';
-
   let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'vue-jsx', 'vatlet/vant/nutUI'];
   const userStore = useUserStore();
   const getUserInfo = computed(() => {
@@ -40,7 +43,6 @@
   };
 </script>
 <style lang="scss">
-  @import '../../styles/mixin.scss';
   .header {
     display: flex;
     justify-content: center;
@@ -74,9 +76,8 @@
 
   .btn-wrap {
     margin: 20px;
-    display: flex;
   }
-  .btn-add {
+  .btn-confirm {
-    @include main-lang-bg(302px, 82px, '/@/assets/button', 'add.png');
+    @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
   }
 </style>

vite.config.ts

@@ -39,7 +39,7 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
       preprocessorOptions: {
         scss: {
           // 配置 nutui 全局 scss 变量
-          additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`,
+          additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";@import '/@/styles/mixin.scss';`,
         },
       },
     },