feat: ai招商门户首页页面开发

xinkeaboard-promotion-portal/components.d.ts

@@ -10,9 +10,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     ConfirmInfoDialog: typeof import('./src/components/ConfirmInfoDialog.vue')['default']
     CountrySelct: typeof import('./src/components/CountrySelct.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     Home: typeof import('./src/components/Home.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

xinkeaboard-promotion-portal/src/components/CountrySelct.vue

@@ -6,40 +6,127 @@
       placeholder="第一步：输入你的产品名称，选择目标区域市场"
     />
     <span class="country-wrap">
-      <!-- <span class="country-wrap-item"></span>
-      <el-dropdown ref="dropdown" trigger="contextmenu" style="margin-right: 30px">
-        <span class="el-dropdown-link"> Dropdown List1 </span>
+      <el-dropdown ref="dropdown" trigger="contextmenu" popper-class="country-popper">
+        <span class="country-wrap-item" @click="showCountryList" :title="countryInfo.name">
+          <img :src="countryInfo.flag" />
+        </span>
         <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item>Action 1</el-dropdown-item>
-            <el-dropdown-item>Action 2</el-dropdown-item>
-            <el-dropdown-item>Action 3</el-dropdown-item>
-            <el-dropdown-item disabled>Action 4</el-dropdown-item>
-            <el-dropdown-item divided>Action 5</el-dropdown-item>
-          </el-dropdown-menu>
+          <div class="custom-dropdown">
+            <div class="custom-dropdown-filter">
+              <el-input v-model="search" placeholder="Select Country">
+                <template #prefix>
+                  <el-icon class="el-input__icon"><search /></el-icon>
+                </template>
+              </el-input>
+            </div>
+            <div class="custom-dropdown-list">
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  v-for="item in countryList"
+                  :key="item.code"
+                  @click="() => selectCountry(item)"
+                >
+                  <img :src="item.flag" />
+                  <span :class="{ 'country-name': true, active: countryInfo.code === item.code }">
+                    {{ item.code }}
+                    {{ '-' }}
+                    {{ item.name }}
+                  </span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </div>
+          </div>
         </template>
-      </el-dropdown> -->
+      </el-dropdown>
     </span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
+import countryData from '../assets/country.json';
+
 import type { DropdownInstance } from 'element-plus';
 
+interface countryItem {
+  code: string;
+  name: string;
+  flag: any;
+}
+
+const images = import.meta.glob('@/assets/flags/4x3/*.svg', { eager: true, import: 'default' });
 const step = ref<number>(1);
 const productName = ref<string>('');
-
+const search = ref<string>('');
+const countryList: countryItem[] = countryData.map((item) => ({
+  code: item.code.toUpperCase(),
+  name: item.name,
+  flag: images[`/src/assets/flags/4x3/${item.code}.svg`]
+}));
+const countryInfo = ref<countryItem>(countryList[0]);
 const dropdown = ref<DropdownInstance>();
 
+const selectCountry = (item: countryItem) => {
+  countryInfo.value = item;
+};
+
 function showCountryList() {
   if (!dropdown.value) return;
   dropdown.value.handleOpen();
 }
 </script>
 
+<style lang="scss">
+.country-popper {
+  .custom-dropdown {
+    display: flex;
+    flex-direction: column;
+    width: 240px;
+    height: 400px;
+    padding: 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    &-filter {
+      height: 48px;
+
+      .el-input__wrapper {
+        height: 45px;
+      }
+    }
+
+    &-list {
+      flex: 1;
+      overflow: auto;
+      height: 100%;
+
+      .el-dropdown-menu__item {
+        padding: 10px;
+        font-weight: 400;
+
+        .country-name {
+          color: #282e30;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+
+          &.active {
+            color: #036eb8;
+          }
+        }
+        img {
+          width: 30px;
+          margin: 0 6px;
+        }
+      }
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 .country-select {
+  display: flex;
+  align-items: center;
   :deep(.el-input) {
     width: 25rem !important;
     height: 3rem !important;
@@ -51,4 +138,21 @@ function showCountryList() {
     }
   }
 }
+
+.country-wrap {
+  &-item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 5.75rem;
+    height: 4.25rem;
+    background-color: #ffffff;
+    margin-left: 0.625rem;
+    cursor: pointer;
+
+    img {
+      width: 4.5rem;
+    }
+  }
+}
 </style>

xinkeaboard-promotion-portal/src/views/Home.vue

@@ -85,7 +85,7 @@ onUnmounted(() => {
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain; /* 或 cover，根据你需求 */
-    transition: height 0.1s;
+    // transition: height 0.1s;
   }
 
   &-top {

xinkeaboard-promotion-portal/tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["element-plus/global"]
+    "types": ["element-plus/global", "vite/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"],
   "exclude": ["node_modules"]