✨ feat: 修改主题; 修改店铺信息UI

src/layout/logo/index.vue

@@ -1,11 +1,18 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<img :src="siteLogo" class="layout-logo-medium-img" />
-		<span style="font-size: x-large">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span>
+		<!--<img :src="siteLogo" class="layout-logo-medium-img" />-->
+		<!--<span style="font-size: x-large">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span>-->
+		<span style="font-size: x-large" class="italic font-medium">{{ themeConfig.globalTitle }}</span>
 	</div>
+  
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-		<img :src="siteLogo" class="layout-logo-size-img" />
+		<!--<img :src="siteLogo" class="layout-logo-size-img" />-->
+    <span class="layout-logo-size-img italic" style="color: #fff; text-align: center">
+      AMS
+      <!--{{ themeConfig.globalTitle }}-->
+    </span>
 	</div>
+
 </template>
 
 <script setup lang="ts" name="layoutLogo">

src/stores/countryInfo.ts

@@ -0,0 +1,30 @@
+// 列出国家信息的pinia
+export const useCountryInfoStore = defineStore('countryInfo', () => {
+  const countries = ref([
+    { name: '美国', code: 'US', color: '#3C3B6E' }, // 深蓝色
+    { name: '俄罗斯', code: 'RU', color: '#0033A0' }, // 深蓝色
+    { name: '阿联酋', code: 'AE', color: '#00732F' }, // 绿色
+    { name: '澳大利亚', code: 'AU', color: '#002868' }, // 深蓝色
+    { name: '澳洲', code: 'AU', color: '#002868' }, // 深蓝色
+    { name: '比利时', code: 'BE', color: '#FFD700' }, // 金色
+    { name: '波兰', code: 'PL', color: '#D22630' }, // 红色
+    { name: '德国', code: 'DE', color: '#000000' }, // 黑色
+    { name: '法国', code: 'FR', color: '#002395' }, // 深蓝色
+    { name: '菲律宾', code: 'PH', color: '#0038A8' }, // 蓝色
+    { name: '韩国', code: 'KR', color: '#003478' }, // 深蓝色
+    { name: '荷兰', code: 'NL', color: '#21468B' }, // 深蓝色
+    { name: '加拿大', code: 'CA', color: '#FF0000' }, // 红色
+    { name: '马来西亚', code: 'MY', color: '#010066' }, // 深蓝色
+    { name: '墨西哥', code: 'MX', color: '#006847' }, // 绿色
+    { name: '葡萄牙', code: 'PT', color: '#006600' }, // 绿色
+    { name: '日本', code: 'JP', color: '#BC002D' }, // 红色
+    { name: '沙特阿拉伯', code: 'SA', color: '#006C35' }, // 绿色
+    { name: '泰国', code: 'TH', color: '#A51931' }, // 红色
+    { name: '西班牙', code: 'ES', color: '#AA151B' }, // 红色
+    { name: '新加坡', code: 'SG', color: '#ED2939' }, // 红色
+    { name: '意大利', code: 'IT', color: '#008C45' }, // 绿色
+    { name: '英国', code: 'GB', color: '#00247D' }, // 深蓝色
+  ]);
+
+  return { countries };
+});

src/stores/themeConfig.ts

@@ -37,11 +37,14 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 菜单设置
 			 */
 			// 默认菜单导航背景颜色
-			menuBar: '#334054',
+			// menuBar: '#334054',
+			menuBar: '#1e1b4b',
 			// 默认菜单导航字体颜色
-			menuBarColor: '#eaeaea',
+			// menuBarColor: '#eaeaea',
+			menuBarColor: '#EBEDF0',
 			// 默认菜单高亮背景色
-			menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
+			// menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
+			menuBarActiveColor: '',
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
 
@@ -138,9 +141,9 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 全局网站标题 / 副标题
 			 */
 			// 网站主标题（菜单导航、浏览器当前网页标题）
-			globalTitle: 'DVAdmin',
+			globalTitle: 'AnsjerAMS',
 			// 网站副标题（登录页顶部文字）
-			globalViceTitle: 'DVAdmin',
+			globalViceTitle: 'AnsjerAMS',
 			// 网站副标题（登录页顶部文字）
 			globalViceTitleMsg: '企业级快速开发平台',
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn

src/theme/app.scss

@@ -55,7 +55,8 @@ body,
 		flex: 1;
 	}
 	.layout-aside {
-		background: #003153;
+		background: var(--next-bg-menuBar);
+		//background: #003153;
 		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
 		height: inherit;
 		position: relative;
@@ -272,7 +273,8 @@ body,
 /* 颜色值
 ------------------------------- */
 .color-primary {
-	color: var(--el-color-primary);
+	//color: var(--el-color-primary);
+	color: #3875F6;
 }
 .color-success {
 	color: var(--el-color-success);

src/views/shop-information/components/InfoCard.vue

@@ -18,26 +18,38 @@ function handleNavigate(item: any) {
 
 <template>
   <el-row :gutter="10">
-    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="6" :sm="8" :xl="4" :xs="12" class="my-1.5">
-      <el-card shadow="hover">
+    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="8" :sm="8" :xl="4" :xs="12" class="my-1.5">
+      <el-card shadow="hover" body-style="padding: 10px 10px 10px 20px">
         <el-descriptions>
           <template #title>
-            <el-link :underline="false" style="font-size: 1.25rem; font-weight: 500" type="primary"
+            <!--<el-icon style="top: 4px; margin-right: 5px; font-size: 1.2rem"><Flag /></el-icon>-->
+            <el-link :underline="false" class="italic" style="font-size: 1.25rem; font-weight: 500" type="primary"
                      @click="handleNavigate(item)">
               {{ item.platform }}
             </el-link>
+            <hr style="box-shadow: 0 0 8px #ccc">
           </template>
           <el-descriptions-item label="店铺">
-            <span class="font-bold">
+            <template #label>
+              <el-icon style="top: 2px; margin-right: 6px; font-size: 1.2rem"><Shop /></el-icon>
+              <span class="font-medium text-xl">店铺</span>
+            </template>
+            <span class="font-bold text-2xl italic">
               {{ item.countShop }}
             </span>
           </el-descriptions-item>
+          <!--<el-descriptions-item style="width: 50px"> | </el-descriptions-item>-->
           <el-descriptions-item label="公司">
-            <span class="font-bold">
+            <template #label>
+              <el-icon style="top: 2px; margin-right: 5px; font-size: 1.2rem"><GoodsFilled /></el-icon>
+              <span class="font-medium text-xl">公司</span>
+            </template>
+            <span class="font-bold text-2xl italic">
               {{ item.countCompany }}
             </span>
           </el-descriptions-item>
         </el-descriptions>
+        <hr style="box-shadow: 0 0 8px #ccc">
       </el-card>
     </el-col>
   </el-row>

src/views/shop-information/useColumns.tsx

@@ -1,3 +1,8 @@
+import { useCountryInfoStore } from '/@/stores/countryInfo';
+
+
+const countryInfoStore = useCountryInfoStore();
+
 export const columns = [
   { type: 'seq', width: 50, align: 'center', fixed: 'left' },
   {
@@ -19,7 +24,7 @@ export const columns = [
   {
     field: 'platformName', title: '平台名称', width: 'auto', align: 'center', slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.platformName ? row.platformName : '--' }</span>;
+        return <span class={ 'font-semibold' } style={{color: '#303133'}}>{ row.platformName ? row.platformName : '--' }</span>;
       }
     }
   },
@@ -27,7 +32,9 @@ export const columns = [
     field: 'country', title: '国家', width: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.country ? row.country : '--' }</span>;
+        const country = countryInfoStore.countries.find(c => c.name === row.country);
+        const color = country ? country.color : '#3875F6';
+        return <el-tag effect="plain" round style={{ color: color, borderColor: color }}>{ row.country ? row.country : '--' }</el-tag>;
       }
     }
   },
@@ -144,7 +151,7 @@ export const columns = [
     }
   },
   {
-    field: 'vatNumber', title: 'VAT税号', width: 'auto', align: 'center',
+    field: 'vatNumber', title: 'VAT税号', minWidth: 200, align: 'left',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.vatNumber ? row.vatNumber : '--' }</span>;